Pool
of Squares
Manny Dimatulac
aka Thoripes
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!
- First off, open Flash 5 (for
Flash 4 users, I'll note what you need to change, if
necessary).
- Hit CTRL+M to open up the movie
properties.
- Change the width AND height to
150; change the background color to whatever you want; hit
Ok.

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

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

- Next create another symbol called "spin_box"
and make it a Movie Clip.
- Open up your library (CTRL+L) and drag "box" into the
movie clip.
- Select the box, then resize (
)
it to a smaller size. Then center it.
- Next, select frame 15 and hit F6. This creates a new
Keyframe for the animation.
- Select frame 15, this selects all the objects in it
(which in this case is the box).
- Next, resize that box again, but make it a lot bigger
this time.
Flash 4 Users, skip to
14a.
- Select the box, then open up the Effects
Panel (Window > Panels > Effects).
- In the drop-down box, select Alpha, then change 100%
to 0%. Skip ahead to 15.
- 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.
- Next, select this frame (the one with a box in it
).
- Open up the Frames tab (Window > Panels > Frame). From
the Tweening drop-down box, select Motion. Skip to Next
page.
- Double-click any frame in between 1 and 15,
a dialog box should pop up. Select Tweening, then Motion
from drop-down. Then OK.
- 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...
- 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.
- 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
- Select the trigger, center it, and set it's
alpha to 0 like we did with the box on the
previous page.
- 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.
- 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.
- Next, select it, hold CTRL, then drag it to the right.
Repeat this step until you have the whole row filled up
with it.
- 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:

-
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]
|