Simple but Highly Effective Box Animation

Anders — Mon, 06 Nov 2006 03:04:42 +0000

Effect: You have 2 or more boxes (circles, triangles, whatever). The middle of one is colored, you click on a different box and the middle color slides to the box you clicked with a cool sliding effect (a faded trail). This effect is highly re-usable and easy to implement with different shapes and several of them. Source code included! Concepts: actionscript animation, button press.
The following effect is as follows:

Click here for the source file.

This Flash Tutorial will be presented in a step-by-step format.

1. Open Flash and create a document with size 400X200. Create a three layers and label them as follows:

2. In the boxes layer, draw a square with the border a different color than the inside. I’ll be using a black border with a green inside.

3. Click on the center of the box (the green part), right-click and select “copy” (or just press +c). Click on the “square01″ layer and place the square in the same place by right-clicking and selecting “paste in place” (or just press ++v).

4. Lock all layers, except the “square01″ layer. Click on the square and turn it into a movieclip. Do this by clicking of the tab “insert>new symbol…” (or press F8) and select movieclip. Select the movieclip and put the following actions on the movieclip:



5. Unlock the “boxes’ layer.  Click on the square (select the outline and the middle).  With the box selected, press F8 to turn it into a symbol and select “movieclip”.  Name this movieclip “box01″.  Double-click on the box01 movieclip.  Now select just the middle square (not the outline), turn it into a movie.  Now change the alpha property (located on the properties panel, under the heading “Color:”) to 0.  
6. Go back to the main timeline and copy the box movieclip a few times and name the other boxes: box02, box03, box04, etc.
7. Go to the “Actions” layer and insert the following code:
// box buttons:
// basically we are just defining locX
// and locY to equal the x and y position
// of the box
box01.onPress = function() {
  locX = this._x;
  locY = this._y;
}

box02.onPress = function() {
  locX = this._x;
  locY = this._y;
}

box03.onPress = function() {
  locX = this._x;
  locY = this._y;
}

box04.onPress = function() {
  locX = this._x;
  locY = this._y;
}

Now run your movie and you should have a square that moves to the box that you click on.
8. In order to get the fade effect, we will have to add two more layers below the “square” layer.  Copy the “square” movieclip and paste one copy on each of the two new layers.  Click on each of these copies and change the actionscript in the following way.  Change the speed to a slightly lower number and add the following actionscript after the  code about the speed:
this._alpha = 70;

9. Do this again for the last layer, but make the speed slightly lower than the last layer and add this actionscript:
this._alpha = 40;

Okay, that’s all.  This Flash tutorial is done.   
Feel free to leave me a comment as to how you liked the tutorial.  Also let me know what other tutorials you would like me to post or even what else you’d like to see on this site.

Actionscript Artist » Add new tag

Simple but Highly Effective Box Animation