·您当前的位置:首页 > 技术教程 > AS2与AS3技术 >

[AS3]AS3与ExternalInterface实现的特殊效果

时间:2015-01-26 09:49酷播
[AS3]AS3与ExternalInterface实现的特殊效果

构想

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

原理

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

初始化参数如下:

  1. var op={ 
  2.             width: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. public function MouseMove(event:Event):void { 
  3.        ExternalInterface.call("Flash_MouseMove",stage.mouseX,stage.mouseX);//flash调用js中的方法 
  4.   } 

主要JS函数:

  1. function Flash_MouseMove(x,y) //CuPlayer.com鼠标移动函数 
  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.      

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器