起因：那啥~ 某天闲来无事? 答应为某人做个flash导航~
要求： 1.flash 尽可能的小
?????? 2.可以编辑导航内容
??????
?????? 3.flash 背景透明
?
?????? 4.onmouseover 背景色块还要有变化
?????? 5.…
综上选择了 AS3 + JS 的组合
?
构想：flash尽量小？ 采用背景图片与flash分离方式
????????? 可编辑？外部传值
????????? flash透明 背景还要有onmouseover 效果？ 用AS3调用JS 操作DOM
?
成品：http://www.iding360.com/index4.html
原理：利用 AS3? ExternalInterface 接口与 JS通信
????????? 用坐标轴 计算得出 onmouseover 元素
初始化参数如下：
var op={
??????????? width:1024,?????????? ??? //flash 宽度
??????????? height:530,?????????????? //flash 高度
??????????? target:'new',??????????? ? //tatget 不解释你懂的
??????????? delay:0.5,????????????????? //动画延迟 时间单位 秒
????????? ? autoMove:false,?????? ? //是否自动运行动画
??????????? img:[[imgurl,href,x,y]]? //展示图片数组?
??????? }
与此同时 JS端 并行加载 背景图片中…
代码如下：
var BgImg = new Image();
??
??? BgImg.onload = function()
??? {
???????? /*
????????????? 生成色块、设置动画?
??????? */
???????? setTimeout(function()
????? ? {
??????????????? flash=document["flashUpImg"]||window["flashUpImg"];
??????????????? if( FlashReady) //验证flash 是否加载完成 （如何验证？）
??????????????? {
?? ? ? ? ? ? ? ? ? ? ?? if(flash.jsMove())return; // 初始化设置了autoMove：false 所以这里手动调用
?????? ? ? ? ? ? }
??????????????? setTimeout(arguments.callee,10);
???????? },10);
??? }
?
此效果 主要 AS3 程序：
stage.addEventListener(MouseEvent.MOUSE_MOVE,MouseMove);???
?
public function MouseMove(event:Event):void {
??? ??? ???
??? ??? ? ExternalInterface.call("Flash_MouseMove",stage.mouseX,stage.mouseX);//flash调用js中的方法
? }
?
主要JS函数：
function Flash_MouseMove(x,y) //鼠标移动函数
{??
??? var d = Math.floor(x/barWidth);
??? if(d==nowDiv)return;???
??? $animate( pc[nowDiv], { 'marginTop':{from:'3px', to:0}, 'opacity':{from:1,to:0.8} }, 150);???
??? $animate( pc[d],????? { 'marginTop':{from:0, to:'3px'}, 'opacity':{from:0.8,to:1} }, 150);
??? nowDiv = d;
???
}
?
?????? 最终效果 ：http://www.iding360.com/index4.html
?
?????? ps:1. 为IE6-7? 写了不同动画效果
??????????? 2. 顺便吐槽 IE6 的背景闪烁 BUG
?