今天使用了flex 将以前所做的一个flash 网站重写尝试写一次，真的感叹lex 的开发速度是如此快，功能如此强大，
使用move 类进行一些简单配置。
制作流程：
定义一个移动的函数
private function MoveToPostion(obj:Move,button:Object,xfrom:Number,xto:Number):void
{
obj=new Move();
obj.target=button;
obj.xFrom=xfrom;
obj.xTo=xto;
obj.play();
}
这里我们就可以实现对一个对象进行移动。
用法：
private var move1:Move;
MoveToPostion(move1,Company,712,50);
当中id就是Company，就是按钮，这里只是用了一个按钮做一些简单的测试而已。
<mx:Button x="712" y="19" height="515" width="30" id="Company" click="ButtonMove(event)" styleName="mybutton1"/>
源代码：
- <?xml version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
- <mx:Style>
- .mybutton1
- {
- upSkin:Embed("../image/button1.png");
- overSkin:Embed("../image/button1.png");
- downSkin:Embed("../image/button1.png")
- }
- .mybutton2
- {
- upSkin:Embed("../image/button2.png");
- overSkin:Embed("../image/button2.png");
- downSkin:Embed("../image/button2.png")
- }
- .mybutton3
- {
- upSkin:Embed("../image/button3.png");
- overSkin:Embed("../image/button3.png");
- downSkin:Embed("../image/button3.png")
- }
- .mybutton4
- {
- upSkin:Embed("../image/button4.png");
- overSkin:Embed("../image/button4.png");
- downSkin:Embed("../image/button4.png")
- }
- .mybutton5
- {
- upSkin:Embed("../image/button5.png");
- overSkin:Embed("../image/button5.png");
- downSkin:Embed("../image/button5.png")
- }
- </mx:Style>
- <mx:Script>
- <![CDATA[
- import mx.effects.Move;
- import mx.effects.easing.*;
- import flash.events.*;
- import mx.events.*;
- import mx.effects.Tween;
- import mx.events.*;
- private var position:Array=[];
- private var move1:Move;
- private var move2:Move;
- private var move3:Move;
- private var move4:Move;
- private var move5:Move;
- private var Ismove1:Boolean=true;
- private var Ismove2:Boolean=true;
- private var Ismove3:Boolean=true;
- private var Ismove4:Boolean=true;
- private var Ismove5:Boolean=true;
- private function init():void
- {
- }
- private function ButtonMove(event:MouseEvent):void
- {
- if(Button(event.currentTarget)==Company)
- {
- if(Ismove1)
- {
- MoveToPostion(move1,Company,712,50);
- Ismove1=false;
- }
- else if(!Ismove1 && Ismove2)
- {
- trace("dd");
- MoveToPostion(move1,Company,50,712);
- Ismove1=true;
- }
- //单条运行
- //向后走
- if(!Ismove2 && Ismove3 )
- {
- trace("2");
- MoveToPostion(move1,Company,50,712);
- Ismove1=true;
- MoveToPostion(move2,Production,80,741);
- Ismove2=true;
- }
- if(!Ismove3 && Ismove4 )
- { trace("3");
- MoveToPostion(move1,Company,50,712);
- Ismove1=true;
- MoveToPostion(move2,Production,80,741);
- Ismove2=true;
- MoveToPostion(move3,Information,110,768);
- Ismove3=true;
- }
- if(!Ismove4 && Ismove5)
- {trace("4");
- MoveToPostion(move4,Business,140,796);
- Ismove4=true;
- MoveToPostion(move3,Information,110,768);
- Ismove3=true;
- MoveToPostion(move2,Production,80,741);
- Ismove2=true;
- MoveToPostion(move1,Company,50,712);
- Ismove1=true;
- }
- if(!Ismove5)
- {trace("5");
- MoveToPostion(move1,Company,50,712);
- Ismove1=true;
- MoveToPostion(move2,Production,80,741);
- Ismove2=true;
- MoveToPostion(move3,Information,110,768);
- Ismove3=true;
- MoveToPostion(move4,Business,140,796);
- Ismove4=true;
- MoveToPostion(move5,Contact,170,825);
- Ismove5=true;
- }
- }
- //按钮2运动
- if(Button(event.currentTarget)==Production)
- {
- if(Ismove2 && !Ismove1 && Ismove3)
- {
- trace("aaa");
- MoveToPostion(move2,Production,714,80);
- Ismove2=false;
- }
- else if( !Ismove2 && Ismove3 && !Ismove1)
- {
- trace("bbbb");
- MoveToPostion(move2,Production,80,741);
- Ismove2=true;
- }
- if(Ismove2 && Ismove1)
- {
- MoveToPostion(move2,Production,741,80);
- Ismove2=false;
- MoveToPostion(move1,Company,712,50);
- Ismove1=false;
- }
- if(!Ismove3 && Ismove4 && !Ismove2)
- {
- trace("33");
- MoveToPostion(move3,Information,110,768);
- Ismove3=true;
- MoveToPostion(move2,Production,80,741);
- Ismove2=true;
- }
- if(!Ismove4 && Ismove5 && !Ismove2 )
- {
- trace("44");
- MoveToPostion(move2,Production,80,741);
- Ismove2=true;
- MoveToPostion(move3,Information,110,768);
- Ismove3=true;
- MoveToPostion(move4,Business,140,796);
- Ismove4=true;
- }
- if(!Ismove5 && !Ismove2)
- {
- trace("55");
- MoveToPostion(move2,Production,80,741);
- Ismove2=true;
- MoveToPostion(move3,Information,110,768);
- Ismove3=true;
- MoveToPostion(move4,Business,140,796);
- Ismove4=true;
- MoveToPostion(move5,Contact,170,825);
- Ismove5=true;
- }
- }
- //第三个按钮在这里
- if(Button(event.currentTarget)==Information)
- {
- if(Ismove3 && !Ismove2)
- {
- trace("1111");
- MoveToPostion(move3,Information,768,110);
- Ismove3=false;
- }
- else if(!Ismove3 && Ismove4)
- {
- trace("333");
- MoveToPostion(move3,Information,110,768);
- Ismove3=true;
- }
- if(Ismove3 && Ismove1 )
- {
- MoveToPostion(move3,Information,768,110);
- Ismove3=false;
- MoveToPostion(move2,Production,741,80);
- Ismove2=false;
- MoveToPostion(move1,Company,712,50);
- Ismove1=false;
- }
- if(Ismove3 && Ismove2 && ! Ismove1)
- {
- MoveToPostion(move3,Information,768,110);
- Ismove3=false;
- MoveToPostion(move2,Production,741,80);
- Ismove2=false;
- }
- if( !Ismove4 && Ismove5)
- {
- MoveToPostion(move3,Information,110,768);
- Ismove3=true;
- MoveToPostion(move4,Business,140,796);
- Ismove4=true;
- }
- if(!Ismove5)
- {
- trace("你dianl 我");
- MoveToPostion(move3,Information,110,768);
- Ismove3=true;
- MoveToPostion(move4,Business,140,796);
- Ismove4=true;
- MoveToPostion(move5,Contact,170,825);
- Ismove5=true;
- }
- }
- //第四个按钮
- if(Button(event.currentTarget)==Business)
- {
- if(Ismove4 && !Ismove3 )
- {
- trace("disi");
- MoveToPostion(move4,Business,796,140);
- Ismove4=false;
- }
- else if(!Ismove4 && !Ismove3 && Ismove5)
- {
- trace("444444");
- MoveToPostion(move4,Business,140,796);
- Ismove4=true;
- }
- if(Ismove4 && Ismove1)
- {
- MoveToPostion(move4,Business,796,140);
- Ismove4=false;
- MoveToPostion(move1,Company,712,50);
- Ismove1=false;
- MoveToPostion(move3,Information,768,110);
- Ismove3=false;
- MoveToPostion(move2,Production,741,80);
- Ismove2=false;
- }
- if(Ismove4 && !Ismove1 && Ismove2)
- {
- MoveToPostion(move4,Business,796,140);
- Ismove4=false;
- MoveToPostion(move3,Information,768,110);
- Ismove3=false;
- MoveToPostion(move2,Production,741,80);
- Ismove2=false;
- }
- if(Ismove4 && !Ismove2 && Ismove3)
- {
- MoveToPostion(move4,Business,796,140);
- Ismove4=false;
- MoveToPostion(move3,Information,768,110);
- Ismove3=false;
- }
- if(!Ismove5 &&!Ismove4)
- {
- MoveToPostion(move4,Business,140,796);
- Ismove4=true;
- MoveToPostion(move5,Contact,170,825);
- Ismove5=true;
- }
- }
- //第五个按钮
- if(Button(event.currentTarget)==Contact)
- {
- if(Ismove1)
- {
- trace("1");
- MoveToPostion(move5,Contact,825,170);
- Ismove5=false;
- MoveToPostion(move4,Business,796,140);
- Ismove4=false;
- MoveToPostion(move3,Information,768,110);
- Ismove3=false;
- MoveToPostion(move2,Production,741,80);
- Ismove2=false;
- MoveToPostion(move1,Company,712,50);
- Ismove1=false;
- }
- else if(!Ismove5)
- {
- trace("6");
- MoveToPostion(move5,Contact,170,825);
- Ismove5=true;
- }
- else
- if(Ismove5 && !Ismove4 )
- {trace("5");
- MoveToPostion(move5,Contact,825,170);
- Ismove5=false;
- }
- if(Ismove5 && !Ismove1 && Ismove2)
- {
- trace("2");
- MoveToPostion(move5,Contact,825,170);
- Ismove5=false;
- MoveToPostion(move4,Business,796,140);
- Ismove4=false;
- MoveToPostion(move3,Information,768,110);
- Ismove3=false;
- MoveToPostion(move2,Production,741,80);
- Ismove2=false;
- }
- if(Ismove5 && !Ismove2 && Ismove3 )
- {
- trace("3");
- MoveToPostion(move5,Contact,825,170);
- Ismove5=false;
- MoveToPostion(move4,Business,796,140);
- Ismove4=false;
- MoveToPostion(move3,Information,768,110);
- Ismove3=false;
- }
- if(Ismove5 && !Ismove3 && Ismove4)
- {
- trace("4");
- MoveToPostion(move5,Contact,825,170);
- Ismove5=false;
- MoveToPostion(move4,Business,796,140);
- Ismove4=false;
- }
- }
- }
- private function MoveToPostion(obj:Move,button:Object,xfrom:Number,xto:Number):void
- {
- obj=new Move();
- obj.target=button;
- obj.xFrom=xfrom;
- obj.xTo=xto;
- obj.play();
- }
- ]]>
- </mx:Script>
- <!--!<mx:Parallel id="para" target="{Company}">
- <mx:Move xFrom="711" xTo="50" easingFunction="{Exponential.easeOut}"/>
- </mx:Parallel>-->
- <mx:Button x="712" y="19" height="515" width="30" id="Company" click="ButtonMove(event)" styleName="mybutton1"/>
- <mx:Button x="741" y="19" height="515" width="30" id="Production" click="ButtonMove(event)" styleName="mybutton2"/>
- <mx:Button x="768" y="19" height="515" width="30" id="Information" click="ButtonMove(event)" styleName="mybutton3"/>
- <mx:Button x="796" y="19" height="515" width="30" id="Business" click="ButtonMove(event)" styleName="mybutton4"/>
- <mx:Button x="825" y="19" height="515" width="30" id="Contact" click="ButtonMove(event)" styleName="mybutton5"/>
- </mx:Application>
使用move 类可以实现一些简单的效果，原理其实就是缓冲公式一个使用而已。
这里效果还可以加上其他效果，如模糊，缩放等。