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