Pool of Squares
        Manny Dimatulac aka Thoripes

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

Flash 5 Flash 4

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.

  1. Next, Click Insert > New Symbol; type "box" (w/o quotations), then click Graphic.
     
  2. 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:

  1. 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):

  1. Next create another symbol called "spin_box" and make it a Movie Clip.
     
  2. Open up your library (CTRL+L) and drag "box" into the movie clip.
     
  3. Select the box, then resize () it to a smaller size. Then center it.
  4. Next, select frame 15 and hit F6. This creates a new Keyframe for the animation.
     
  5. Select frame 15, this selects all the objects in it (which in this case is the box).
     
  6. Next, resize that box again, but make it a lot bigger this time.

Flash 4 Users, skip to 14a.

  1. Select the box, then open up the Effects Panel (Window > Panels > Effects).
     
  2. 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.
  3. Next, select this frame (the one with a box in it ).
     
  4. 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.
  1. 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...
     
  2. 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.
     
  3. 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

  1. Select the trigger, center it, and set it's alpha to 0 like we did with the box on the previous page.
     
  2. 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.

  1. 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.
     
  2. Next, select it, hold CTRL, then drag it to the right. Repeat this step until you have the whole row filled up with it.
     
  3. 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:

  1. 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
 [email protected]  

 

 



SUPPORTERS:
kirupa.com's fast and reliable hosting provided by Media Temple.