构想
- 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