使用AS3来做苹果菜单效果

在这份教程中，我将教你如何使用AS3创建一个像苹果Dock那样的菜单。我们将创建一个single.as文件，由它来施展魔法，以及扩展它来加入新的功能。步骤1：创建一个新的ActionScript文件首先创建一个ActionScript文件，保存为“DockItem.as”。我把文件保存在这个位置c:/macmenu/org/effects/DockItem.as请注意，我们的文档目录（.fla的位置）在c:/macmenu/文件夹/org/effects/是DockItem类的包目录。步骤2：创建一个新的AS3Flash（.fla）文件创建一个新的ActionScript3Flash文件并打开它，现在我们有了两个打开的文件DockItem.as与这个.fla在根文件夹（DockItem.as在c:/macmenu/org/effects，所以我们的网站根目录是c:/macmenu）/org/effects是DockItem对象的包。我们把.fla文件保存为c:/macmenu/macmenu.fla.步骤3：导入图标现在，我们在.fla文件中导入或者画一些图标。我已经从一个Illustraotr文件导入了一些图标，当然你也可以自己画一些，还能加上渐变效果。步骤4：开始将图标转为元件选择图标并选择顶部菜单“修改”“转换为元件”。在弹出的面板中，输入元件名（我取名为Star），并登记注册点。这里需要定义底部中心为注册点（见下图）。类名也是Star（请记住你不能使用空格），记得输入org.effects.DockItem为基类。另外，请确保将类型设置为MovieClip。步骤5：将所有图标都转为元件我们能可以有许多我们想要的按钮，所以让我们把所有图标都转为元件。记得给它们一个名字和一个类名，并且将它们的注册点都设在底部中心，还有就是将org.effects.DockItem设为他们的基类。参照下面的图片看看我们的库和图标，请注意它们之间的间距，这对效果是否良好来说很重要。步骤6：编写DockItem类的代码如果我们现在测试影片，会抛出一个错误，说一个ActionScript文件必须至少有一个外部可见的定义。这是因为我们的菜单元素都是扩展自DockItem类，但是这个类我们还没有写，现在让我们来写它……首先，创建包，继承自Sprite类（如果我们没有时间轴动画就继承Sprite）。packageorg.effects{importflash.display.Sprite;publicclassDockItemextendsSprite{}}在这里，我们的DockItem类继承自Sprite类，所以如果你现在能正常测试它，但看不到效果。（困惑吗？没有使用类进行编码？可以做个文档类入门练习来解答这个困惑）步骤7：导入必要的类现在，我们导入一些必须的类。一个自定义类就是在这里使用，你可以从GreenSock.com下载到TweenLite类。当你下载好了TweenLite，将它解压到你的/macmenu/目录下（这样，你的目录结构就是/macmenu/gs/）packageorg.effects{importflash.display.Sprite;importflash.events.Event;importflash.events.MouseEvent;importgs.TweenLite;//{}}我已经导入了Sprite类，因为我们的类继承自它。当自定义对象加入到舞台时，我们将使用事件(Event)类。并且，我们使用鼠标事件（MouseEvent）来验算图标之间的举例。步骤8：声明必须的变量在这一步，我们将申明一些必须的变量packageorg.effects{importflash.display.Sprite;importflash.events.Event;importflash.events.MouseEvent;importgs.TweenLite;publicclassDockItemextendsSprite{privatevar_initPosition:Number;publicvarmaxXDistance:Number;publicvarmaxYDistance:Number;publicvarmaxScale:Number;}}请注意，我们将_initPosition定为私有变量private：它用来保存图标最初的x坐标。鼠标的距离可以用这点来测量，因为它们的真实x坐标是一直在变的。maxXDistance是鼠标所能影响的最大的x轴范围。maxYDistance是鼠标所能影响的最大y轴范围。maxScale是图标最大放大尺寸（例如，如果你设置为2，那么最大的放大就为3）。最后三个变量我们设置为公共变量，是因为我们要在运行时改变它们。步骤9：编写构造函数构造函数必须和类名同名（因此也和文件名同名），所以是DockItem（）；packageorg.effects{importflash.display.Sprite;importflash.events.Event;importflash.events.MouseEvent;importgs.TweenLite;publicclassDockItemextendsSprite{privatevar_initPosition:Number;publicvarmaxXDistance:Number;publicvarmaxYDistance:Number;publicvarmaxScale:Number;publicfunctionDockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{maxXDistance=$maxXDistance;maxYDistance=$maxYDistance;maxScale=$maxScale;if(stage)init();elseaddEventListener(Event.ADDED_TO_STAGE,init);addEventListener(Event.REMOVED_FROM_STAGE,end);}}}为什么构造函数里面有些参数？因为这样我们就能使用不同的间距和缩放进行组合：我们能有个很短的间距当时放的很大或者有个很长的间距但缩的很小。此外，我们还能确定在y轴上的一定范围内鼠标能影响的图标。由于我们继承了Sprite类，所以我们能加入子元素，甚至为每个图标自定义继承自Dockitemlei的类。因此，如果我们扩展它，我们能使用super（）方法为父类传入新的参数。然后我们就能随时随地的使用DockItem类了。在这一步中我们通过传入的参数设置了maxXDistance，maxYDistance和maxScale三个变量的值。此外我们要检查对象是否在舞台上。如果不在，我们就需要添加一个事件来监听。我们也要增加另外一个事件监听来监测图标什么时候从舞台移除。我们还会给舞台增加一个MOUSE_MOVE来获得距离，所以我们必须知道它是否在舞台上。步骤10：init()函数这个方法只有在图标被创建并被添加到舞台上的时候才被运行，并且只运行一次。在init()方法中，我们仅仅是添加了一个MouseEvent.MOUSE_MOVE事件监听，然后将对象的x坐标赋值给_initPosition变量。packageorg.effects{importflash.display.Sprite;importflash.events.Event;importflash.events.MouseEvent;importgs.TweenLite;publicclassDockItemextendsSprite{privatevar_initPosition:Number;publicvarmaxXDistance:Number;publicvarmaxYDistance:Number;publicvarmaxScale:Number;publicfunctionDockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{maxXDistance=$maxXDistance;maxYDistance=$maxYDistance;maxScale=$maxScale;if(stage)init();elseaddEventListener(Event.ADDED_TO_STAGE,init);addEventListener(Event.REMOVED_FROM_STAGE,end);}privatefunctioninit(e:Event=null):void{_initPosition=x;stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);}}}步骤11：mouseMove函数当鼠标在舞台上移动的时候，这个函数将检测傅对象的鼠标位置，也会测量从对象与鼠标的距离。我们使用parent.mouseX，是为了获得相对于图标父对象的x坐标，而不是相对于图标注册点的x坐标。packageorg.effects{importflash.display.Sprite;importflash.events.Event;importflash.events.MouseEvent;importgs.TweenLite;publicclassDockItemextendsSprite{privatevar_initPosition:Number;publicvarmaxXDistance:Number;publicvarmaxYDistance:Number;publicvarmaxScale:Number;publicfunctionDockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{maxXDistance=$maxXDistance;maxYDistance=$maxYDistance;maxScale=$maxScale;if(stage)init();elseaddEventListener(Event.ADDED_TO_STAGE,init);addEventListener(Event.REMOVED_FROM_STAGE,end);}privatefunctioninit(e:Event=null):void{_initPosition=x;stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);}privatefunctionmouseMove(e:MouseEvent):void{varyDistance:Number=Math.abs(parent.mouseY-y);if(yDistance>maxYDistance){if(_initPosition==x)return;else{TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});return;}}//getthedifferencebetweentheparentmousexpositionandtheinitialpositionoftheobjectvarxDistance:Number=parent.mouseX-_initPosition;//checkifthedistanceofthemousefromtheobjectism