MENU WITH A WALKING MAN'S SILHOUETTE as3 |
This tutorial shows how to create cool looking menu with a silhouette of a walking man. Every time you click on one of the menu buttons
he walks out to light up the bulb above it, this should represent the selected part of menu. Ofcourse this is up to you what this silhouette gonna do after its activated. At the end it should look
like this example below:
We will need actionscript 3.0 flash document. The hardes part of this project is the walking silhouette itself ofcourse. I suggest you to work with already made movieclips used to create this example included in
source file which you can download at the bottom of this page. If you want to create it all by yourself, you can use the body parts in fla file with bone tool to animate the movements as you like. After you are done I suggest you to convert
it to frame by frame animation and convert it to one big movieclip for easy manipulation. Now when we have the animated body we will need some buttons to execute the actions on stage. I used three transparent buttons placed over the ropes next to
the light bulbs, since they are too thin to click, made these buttons wider then these ropes for easier access. Set their instance names to btn_1, btn_2, btn_3. For the light bulbs Ive used movieclip with first frame empty and on
the second frame is the shining bulb itself. By putting stop() on the first frame we prevent the bulb from flashing. Instead we will light it up using actionscript. Duplicate this light bulb movieclip two times and set their names to
LB1, LB2, LB3. Same idea is used with the text representing the invisible buttons. On first frame the text is dark with stop() on it and on second frame the text is bright. Name these movieclips with text home, news, about.
Now open actions window and insert this actionscript code:
btn_1.addEventListener(MouseEvent.CLICK, btnclick1); function btnclick1(ev:MouseEvent):void { short_walk.gotoAndPlay(2); } stage.addEventListener(Event.ENTER_FRAME, detectCollision1); function detectCollision1(event:Event) { if (short_walk.hitTestPoint(78.3,58.0,true)) { LB1.gotoAndStop(2); home.gotoAndStop(2); LB2.gotoAndStop(1); LB3.gotoAndStop(1); news.gotoAndStop(1); about.gotoAndStop(1); } } btn_2.addEventListener(MouseEvent.CLICK, btnclick2); function btnclick2(ev:MouseEvent):void { medium_walk.gotoAndPlay(2); } stage.addEventListener(Event.ENTER_FRAME, detectCollision2); function detectCollision2(event:Event) { if (medium_walk.hitTestPoint(176.8,59,true)) { LB2.gotoAndStop(2); news.gotoAndStop(2); LB1.gotoAndStop(1); LB3.gotoAndStop(1); home.gotoAndStop(1); about.gotoAndStop(1); } } btn_3.addEventListener(MouseEvent.CLICK, btnclick3); function btnclick3(ev:MouseEvent):void { long_walk.gotoAndPlay(2); } stage.addEventListener(Event.ENTER_FRAME, detectCollision3); function detectCollision3(event:Event) { if (long_walk.hitTestPoint(280.8,59,true)) { LB3.gotoAndStop(2); about.gotoAndStop(2); LB1.gotoAndStop(1); LB2.gotoAndStop(1); news.gotoAndStop(1); home.gotoAndStop(1); } }
As you can see the script repeats itself three times for each menu option. I will explain it on the first one. Line number one assigns the click function to the first button.
This function will execute the silhouette movements as you can see on line 3. On lines 5-15 is collision detection for this silhouette and certain point on stage. In this case this point is on bottom of
the first rope. After the movieclip with body hits this point, this function will turn on the light bulb number 1 and turns off all others. Same happens with the text movieclips. Ofcourse if you want
the menu to work as proper menu, you should add some redirection scripts for each button.
|