First:
- White – #FFFFFF (
0xffffff)
- Gold – #E8A317 (
0xe8a317)
- Light Gold – #FBB917 (
0xfbb917)
- Blue – #1569C7 (
0x1569c7)
- Light Blue – #1389FF (
0x1389ff)
- Green – #347235 (
0x347235)
- Light Green – #3E8F1B (
0x3e8f1b)
- Red – #990000 (
0x990000)
- Light Red – #C10202 (
0xc10202)
- Matte Grey – #222222 (:
- goldBack: (-600,0)
- blueBack: (0,-300)
- greenBack: (0,300)
- redBack: (600, 0)
If you are going to use the one direction design then position all four of the backs at one of those positions. I used (0, 300).
Now drag all of the squares from the library into the MovieClip and positon them in the following way:
- goldSquare: (120,150)
- blueSquare: (240,150)
- greenSquare: (360,150)
- redSquare: (480, 150) would get the instance name
back0 because the
goldSquare has:
package{ import flash.display.MovieClip; import flash.events.Event; public class MenuBounce extends MovieClip{ public var menuBounceMC:MenuBounceMC = new MenuBounceMC(); public function MenuBounce(){ addChild(menuBounceMC); } } }.
package{ import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; public class MenuBounceMC extends MovieClip{ public var activeSquare:MovieClip; public var activeBack:MovieClip; public var squaresArray:Array = new Array(); public var backsArray:Array = new Array(); public var speed:Number = 20; public function MenuBounceMC(){ } } }:
squaresArray = [square0, square1, square2, square3]; backsArray = [back0, back1, back2, back3];.
addEventListener(MouseEvent.MOUSE_OVER, bounceOver); addEventListener(MouseEvent.MOUSE_OUT, bounceOut); addEventListener(MouseEvent.CLICK, bounceClick); addEventListener(Event.ENTER_FRAME, bounceUpdate);
Step 5: Creating the MouseEvent Handlers
Let's start off by creating the three easier functions:
public function bounceOver(event:MouseEvent):void { } public function bounceOut(event:MouseEvent):void { } public function bounceClick(event:MouseEvent):void { }
Inside the
bounceOver() function start by adding an if-statement to make sure that no back is currently "active" - that is, transitioning in, transitioning out, or sitting on top:
if(activeBack == null){ }
The remainder of all the code in the
bounceOver() function will be written inside that if-statement. Now we figure out whether the object rolled over (the
event.target) is a square, by checking whether it's in the
squaresArray[]:
if(squaresArray.indexOf(event.target) != -1){ }
Assuming it is, we do real meat of the function:
activeSquare = event.target as MovieClip; activeSquare.gotoAndStop(2); setChildIndex(activeSquare, numChildren - 1);
First we set the variable
activeSquare to:
if(event.target == activeSquare){ }
Inside the if-block add the following code; it pauses the square's animation on the first frame again, and then sets activeSquare back to
null so that we can roll over another:
activeSquare.gotoAndStop(1); activeSquare = null;
Then go to the
bounceClick() function. This function will be used to initiate all the transitions. Start off by checking whether there's already an active back:
if(activeBack == null){ }
This prevents the user from clicking another square during a transition. If there is an active back, then a click should undo this, so that we can click another square:
if(activeBack == null){ }else{ activeBack = null; }
Assuming there's no currently active back, once again add an if-block to check whether the object clicked was a square:
if(activeBack == null){ if(squaresArray.indexOf(event.target) != -1){ } }else{ activeBack = null; }
If the user did click a square, we must set the corresponding back as the "active" back. Since the index of each item in
backsArray[] matches the index of each item in
squaresArray, this is simple:
if(activeBack == null){ if(squaresArray.indexOf(event.target) != -1){ activeBack = backsArray[squaresArray.indexOf(event.target)] as MovieClip; } }else{ activeBack = null; }
Now we just need to move the currently active back so that it is on top of everything else:
if(activeBack == null){ if(squaresArray.indexOf(event.target) != -1){ activeBack = backsArray[squaresArray.indexOf(event.target)] as MovieClip; setChildIndex(activeBack, numChildren - 1); } }else{ activeBack = null; }
Step 6: Creating the Final Event Handler
This is the last function we are going to create. Let's begin by adding the scaling effect for when a square is rolled over or out:
public function bounceUpdate(event:Event):void { for each (var square in squaresArray) { if(square == activeSquare){ if(square.scaleX <= 1.5){ square.scaleX +=0.05; square.scaleY +=0.05; } }else{ if(square.scaleX >= 1){ square.scaleX -=0.05; square.scaleY -=0.05; } } } }.
if(activeBack == back0){ if(back0.x < 0){ back0.x += speed; } }else{ if(back0.x > -600){ back0.x -= speed; } } if(activeBack == back1){ if(back1.y < 0){ back1.y += speed; } }else{ if(back1.y > -300){ back1.y -= speed; } } if(activeBack == back2){ if(back2.y > 0){ back2.y -= speed; } }else{ if(back2.y < 300){ back2.y += speed; } } if(activeBack == back3){ if(back3.x > 0){ back3.x -= speed; } }else{ if(back3.x < 600){ back3.x += speed; } }:
for each (var back in backsArray){ if(back == activeBack){ if(back.y > 0){ back.y -= speed; } }else{ if(back.y < 300){ back.y += speed; } } }!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post
