[Flash/Flex交互]华丽转动效果导航

这2天整理了下以前的Flash制作，有一个Flash制作的导航个人感觉值得收藏，这也是我做的第一个Flash项目，做得很细，就是代码有点繁杂，经过整理还算能看，拿上来与大家分享下。

源文件已上传http://download.csdn.net/source/2143809

效果如图：

 

项目主要需求：

导航按钮可围绕盾牌转动，鼠标移动到最左边按钮逆时针转，最右边按钮顺时针转，每次转动一个按钮位置，鼠标移上去显示信息Tips。按钮点击事件与Flex交互。

 

下面是制作过程。

Flash Cs3新建Flash 文件(AS3.0)

制作如下图MoveClip(组件命名为红字所示):

        

 

同样方法制作8个按钮，把制作好的按钮加入场景(命名为红字) 注：mc9是bg内部的一个组件。

 

在场景上添加代码：

 

flash.system.Security.allowDomain("*");//设置安全策略 /****************** *在本域的.swf文件里加上:flash.system.Security.allowDomain() *或 者使用安全策略文件"crossdomain.xml".在Flash 8以前,这个文件必须放在.swf所在域的根目录,现在,你可以使用flash.system.Security.loadPolicyFile(),指定安全策略文件所在的位置.拒绝任何域的做法是在<cross-domain-policy>标签内什么也不填,安全策略文件也支持通用字符 "*": *<?xml version="1.0"?> *<!-- http://www.mydomain.com/crossdomain.xml --> *<cross-domain-policy> *<allow-access-from domain="www.riahome.cn " /> *<allow-access-from domain="*.Y-boy.cn" /> *<allow-access-from domain="210.38.196.48" /> *<allow-access-from domain="*" /> *</cross-domain-policy> */ var app:Object; function setApp(ap:Object):void{//设置主应用 this.app=ap; } var radiusX:Number = 75;//横向直径 var radiusY:Number = 25;//竖向直径 var centerX:Number = 105;//中心点X var centerY:Number = 150;//中心点Y var speed:Number = 0;//速度 var align:int=0;//转动方向 var right_angle:Number=3*Math.PI/2;//逆时针转停止初始弧度 var left_angle:Number=0;//顺时针转停止初始弧度 var array:Array=[mc1,mc2,mc3,mc4,mc5,mc6,mc7,mc8]; bg.x=147 bg.y=230; setChildIndex(bg,Math.round(centerY/(centerY+radiusY)*30)-19);//设置bg的层 for(var i:int=0;i<8;i++){//添加监听 array[i].angle = i * ((Math.PI*2)/8); array[i].addEventListener(Event.ENTER_FRAME,init); array[i].addEventListener(MouseEvent.MOUSE_OVER,Open); array[i].addEventListener(MouseEvent.CLICK,doClick); } function init(e:Event):void{//定位按钮位置 e.target.x = Math.cos(e.target.angle) * radiusX + centerX; e.target.y = Math.sin(e.target.angle) * radiusY + centerY; var s = e.target.y /(centerY+radiusY); e.target.scaleX = e.target.scaleY = s; e.target.angle+=speed; if(e.target.angle<0){ e.target.angle+=Math.PI*2 }else if(e.target.angle>=Math.PI*2){ e.target.angle-=Math.PI*2 } setChildIndex(e.target as MovieClip,Math.round(e.target.scaleY*26)-18);//设置按钮层 if(align==1){//转动到目标弧度，停止转动，初始化下一目标弧度 if(e.target.angle==left_angle){ speed=0; left_angle+=Math.PI/4; if(left_angle>=Math.PI*2){ left_angle-=Math.PI*2 } right_angle+=Math.PI/4; if(right_angle>=Math.PI*2){ right_angle-=Math.PI*2 } align=0; } }else if(align==-1){ if(e.target.angle==right_angle){ speed=0; left_angle-=Math.PI/4; if(left_angle<0){ left_angle+=Math.PI*2 } right_angle-=Math.PI/4; if(right_angle<0){ right_angle+=Math.PI*2 } align=0; } } } function Open(e:Event):void{ for(var i:int=0;i<8;i++){ array[i].nav_title.visible=false; } if(e.target.parent.angle==0* ((Math.PI*2)/8)){//判断焦点按钮位置，设置速度与方向 speed=(Math.PI/20); align=1; }else if(e.target.parent.angle==4*((Math.PI*2)/8)){ speed=-1*(Math.PI/20); align=-1; }else if(e.target.parent.angle<Math.PI&&e.target.parent.angle>0){ e.target.parent.nav_title.visible=true; } } bg.mc9.addEventListener(MouseEvent.CLICK,doClick); bg.mc9.addEventListener(MouseEvent.MOUSE_OVER,over); function over(e:Event):void{ for(var i:int=0;i<8;i++){ array[i].nav_title.visible=false; } } function doClick(e:Event):void{//与Flex交互方法 switch(e.currentTarget){ case mc1:app.setcitybutton(1);break; case mc2:app.setcitybutton(2);break; case mc3:app.setcitybutton(3);break; case mc4:app.setcitybutton(4);break; case mc5:app.setcitybutton(5);break; case mc6:app.setcitybutton(6);break; case mc7:app.setcitybutton(7);break; case mc8:app.setcitybutton(8);break; case bg.mc9:app.setcitybutton(9);break; } }  

 

PS:setChildIndex(mc,index)方法设置mc的层是实现层切换的关键，需要慢慢调试来找到合适的参数。

通过Event.ENTER_FRAME事件来重新定位组件的思想是实现这类转动效果的核心，其他弧度，速度等计算可以慢慢调整研究修改。

right_angle和left_angle是参照mc8的位置得到的，因为mc8是整个定位循环中最后一张定位的组件，所以只有等它定位好了才可以改变速度，要不会出现偏移。有兴趣的朋友可以把right_angle和left_angle分别改成0和Math.PI/2试试效果

 

运行Flash文件 得到下图效果

 

这样就完成的Flash Cs3上个工作

 

把编译好的swf放到Flex项目里，打开Flex主应用添加如下代码

 

<mx:Script> <!--[CDATA[ public function CompleteHander(e:ProgressEvent):void{ Object(e.target.content).setApp(this); } public function setcitybutton(num:Number):void{trace(num);} ]]--> </mx:Script> <mx:SWFLoader source="logo.swf" complete="CompleteHandler(event)"/> 

 

调试项目，当点击按钮就会输出指定按钮的数字，导航到此制作完成