利用AS3 ExternalInterface 实现的特殊效果

起因：那啥~ 某天闲来无事  答应为某人做个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