This is a little animation that
plays a simple animation whenever the mouse hovers over the
area:

Less than 2kb, this is great
for loading screens or just cool effects to put on your
website. Of course, the animation doesn't have to be squares
growing and fading out. After mastering this, experiment
with different animations. Well enough chit-chat, let's get
started!

1. First off, open Flash 5 (for
   Flash 4 users, I'll note what you need to change, if
   necessary).
   
   


2. Hit CTRL+M to open up the movie
   properties.
   
   


3. Change the width AND height to
   150; change the background color to whatever you want; hit
   Ok.

4. Next, Click Insert >
   New Symbol; type "box" (w/o quotations), then click
   Graphic.
   
   


5. Now you should be in the edit
   screen of your new symbol, create a box with a transparent
   background. To select a transparent background, click and
   hold the bucket, then click the button with a red line
   drawn across:

6. Next draw the square; any size will do for
   now since we'll be modifying that later on. Select the
   entire square, press CTRL+K to bring up the Align box,
   click "To Stage" then click the middle buttons of "Align"
   and "Distribute", this centers the box. This method is how
   you'll be centering other objects throughout this
   tutorial.

Note for Flash 4 users: this
is how your window should look (after hitting CTRL+K, press
these buttons):

7. Next create another symbol called "spin_box"
   and make it a Movie Clip.
   
   


8. Open up your library (CTRL+L) and drag "box" into the
   movie clip.
   
   
   


9. Select the box, then resize ()
   it to a smaller size. Then center it.


10. Next, select frame 15 and hit F6. This creates a new
    Keyframe for the animation.
    
    


11. Select frame 15, this selects all the objects in it
    (which in this case is the box).
    
    



12. Next, resize that box again, but make it a lot bigger
    this time.

Flash 4 Users, skip to
14a.

13. Select the box, then open up the Effects
    Panel (Window > Panels > Effects).
    
    
    


14. In the drop-down box, select Alpha, then change 100%
    to 0%. Skip ahead to 15.
    
    
    
    
    
    1. Next, right-click the symbol, and choose
       properties. Choose the Color Effects tab, choose Alpha
       from drop-down box, then move the slider all the way to
       the left (0). Click OK. Skip to 16a.
    
    
    
    



15. Next, select this frame (the one with a box in it
    ).
    
    


16. Open up the Frames tab (Window > Panels > Frame). From
    the Tweening drop-down box, select Motion. Skip to Next
    page.
    
    
    
    
    
    
    1. Double-click any frame in between 1 and 15,
       a dialog box should pop up. Select Tweening, then Motion
       from drop-down. Then OK.
    
    
    
    

17. Next, create a new Button symbol and name it
    "trigger". For this symbol, make a square with a
    background (i'd make it red outline, blue background just
    for reference). The colors won't really matter, you'll
    see...
    
    



18. Now, go back to spin_box's edit window. Select frames
    1 through 15 and shift them all one frame so frame 1 will
    be empty.
    
    


19. Put "trigger" in frame 1. Give frame 1 a stop
    action...

Flash 5: Double-click
frame 1, + > Basic Actions > stop

Flash 4: Double-click
frame 1, Actions tab > + > stop

20. Select the trigger, center it, and set it's
    alpha to 0 like we did with the box on the
    previous page.
    
    



21. Now we'll actually make it a trigger to play the movie
    by giving it some actions...

Flash 5: Select the
trigger, Right-Click, then Actions. + > Basic Actions >
Play. Next, select "on (release)" in the script window,
refer to the bottom of the dialog box, unlick, Release, and
click "rollover". Click Ok.

Flash 4: Double-click
trigger, select Actions tab > + > Play. Select "On
(Release)" unclick Release, then click Roll Over.

22. Now go back to the main stage (nothing
    should be there). Drag spin_box from your library and
    position it at the bottom left corner of the movie.
    
    


23. Next, select it, hold CTRL, then drag it to the right.
    Repeat this step until you have the whole row filled up
    with it.
    
    


24. Now select the entire row, hold CTRL, then drag up.
    Repeat until the whole movie is filled.

This is how the movie should
look like if you select all the symbols:

25. 
    

    Now Save the fla, then press CTRL+Enter to
    save the swf. Don't test the movie here cause it might be
    slow. Open the directory you saved it to, then
    double-click the swf. YOU'RE DONE!!!
    

Here are the fla's if you
still don't understand something:

Flash 5

Flash 4

Now, that wasn't too hard was
it? This is actually my first flash tutorial I've ever
written, so sorry if it looks real sketchy, I'll be glad to
answer some questions you may have by
emailing me,
contacting me in IM (thoriphes2k1 or thoriphes2k2), or
posting on the
forums.

Manny Dimatulac


malocadi@hotmail.com