利用AS3 ExternalInterface 实现的特殊效果

构想

flash尽量小？采用背景图片与flash分离方式
可编辑？外部传值
flash透明背景还要有onmouseover 效果？用AS3调用JS 操作DOM

原理

利用 AS3 ExternalInterface 接口与 JS通信
用坐标轴计算得出 onmouseover 元素

初始化参数如下:

1 var op={
2             1024,               //flash 宽度
3             height:530,               //flash 高度
4             target:'new',              //tatget 不解释你懂的
5             delay:0.5,                  //动画延迟 时间单位 秒
6             autoMove:false,         //是否自动运行动画
7             img:[[imgurl,href,x,y]]  //展示图片数组  
8         }

与此同时 JS端并行加载背景图片中，代码如下：

 1 var BgImg = new Image();
 2    
 3     BgImg.onload = function()
 4     {
 5          /*
 6               生成色块、设置动画  
 7 
 8         */
 9          setTimeout(function()
10         {
11                 flash=document["flashUpImg"]||window["flashUpImg"];
12                 if( FlashReady) //验证flash 是否加载完成 （如何验证？） 
13                 {
14                         if(flash.jsMove())return; // 初始化设置了autoMove：false 所以这里手动调用
15                  }
16                 setTimeout(arguments.callee,10);
17 
18          },10);
19     }

此效果主要AS3 程序：

1 stage.addEventListener(MouseEvent.MOUSE_MOVE,MouseMove);   
2 
3 public function MouseMove(event:Event):void {
4             
5           ExternalInterface.call("Flash_MouseMove",stage.mouseX,stage.mouseX);//flash调用js中的方法
6   }

主要JS函数：

1 function Flash_MouseMove(x,y) //鼠标移动函数
2 {   
3     var d = Math.floor(x/barWidth);
4     if(d==nowDiv)return;    
5     $animate( pc[nowDiv], { 'marginTop':{from:'3px', to:0}, 'opacity':{from:1,to:0.8} }, 150);    
6     $animate( pc[d],      { 'marginTop':{from:0, to:'3px'}, 'opacity':{from:0.8,to:1} }, 150);
7     nowDiv = d;
8     
9 }

原文链接： http://news.9ria.com/2013/0514/27152.html