Introduction
Here is a basic Flash tutorial. This tutorial
has recently been modified for MX compatiblity.
Some of the pictures might still be from
Flash 5.
Start by loading flash. This will create
a blank document. Double click on the box
under the timeline where it says "12fps".
This will open the "Movie
Properties" box. Set the frame rate
to 21, the width to 400 and the height
to 300. Change the background colour to
a dark grey (#333333). Now double click
on the title of your one and only layer
and name it "Actions".
With the first frame still
selected give it a frame label of "start".
Create a new layer (the white
box with the black "+" sign)...
...and name it "buttons".
Make sure the buttons layers is selected
and draw a square - can be any colour.
With the black arrow tool double click
on the fill of the square to select it
all.
Now hit F8 to convert the
square to a symbol. Make sure that button
is selected as the symbol type and name
it "main_button".
Now would be a good time to
save your movie. Under the file menu choose "save
as" and save it as "my_nav.fla".
OK now with your button on the stage selected
go to the the Property Inspector and give
it an instance name of "button1" -
without the "". Now click on
frame 1 of the actions layer and underneath
the stop action that is already on there
put
TIP - put the actions panel into expert
mode and you can copy and paste the action
directly from this webpage.
What this action does is say "When
button 1 is click, the timeline the button1
is on (in this case _root - the main
timeline) should go to and stop at a
frame label named "start"."
Your actions should look like this (colours
may vary).
In the buttons layer select
frame 60 and hit F5 - this adds new frames
but no keyframes. Select frame 10 of the
actions layer and hit F6 - this will create
a new keyframe for that layer. Insert a
stop action in the new keyframe and label
the frame "sec1". Do the same
for frames 20, 30 and 40 of the actions
layer, putting a stop action in each and
labeling them "sec2", "sec3" etc.
Put a keyframe in frame 50 and give it
a frame label of "sec5" but do
not put in a stop action. Put another keyframe
in frame 60 and just insert a stop action
there. You should end up with a timeline
that looks like this.
Now in your library double
click on the only thing in there - the
button - to get inside the main button.
Click in the over state frame and hit F6
to create a new keyframe. Give your button
a different fill colour for the over state.
Now do the same for the down state.
Next get back to the main
timeline by clicking on "scene 1" up
the top left corner. Select your button
on the stage and option drag out 5 copies
of the button (this is for the mac) - hold
down shift as well when copying to ensure
the copy is directly below the original.
Click on the keyframe in frame
1 of the buttons layer. This selects all
the buttons on the stage. Look at your
align panel, make sure the "to stage" button
is not selected, and click on the button
to "distribute vertical center".
This will space your buttons evenly.
Now from the top button down,
change their instance names so that you
end up with button1, button2 right through
to button6. Click on frame one of the actions
layer and in the actions panel, copy and
paste the code that you already have for
the button. Change the button instance
name for each action as well as the frame
label that button is sending the main timeline
to. You should end up with this set of
actions on that frame:
Note - button6 has a gotoAndPlay action
instead of gotoAndStop - you will see
why soon.
Now create a new layer above the buttons
layer and name it "button text".
Select the text tool and put some (static)
text on top of all your buttons. Save
your movie.
Create a new layer and name
it "content". With this layer
selected use the text tool and type in
big ugly white letters - "Home".
Now select frame 10 in this content layer
and hit F7 - this will insert a blank keyframe
allowing us to introduce some new content
- some more big white text perhaps? Why
not! Enter some different text and then
do the same for frames 20 and 30.
Select frame 40 in the content
layer and hit F7. Draw a circle, double
click on the circle with the black arrow
to select it and convert it to a movieclip
(F8). Call it "ball".
Double click on the ball symbol
to get inside it. The shape inside should
automatically be selected so just hit F8
to convert this to a movieclip as well.
Call it something imaginative like "ball2".
OK now you have a movieclip inside a movieclip.
Make sure you are inside the first ball...
...and make new keyframes
in frame 10 and 20. Select the keyframe
in frame 10 and then the free transform
tool...
...and scale the ball down
so it is small. In the Property Inspector
click on the colour drop down menu, choose "alpha" and
set it to "0%".
Now click on the frame 10 keyframe again
and in the Property Inspector click on
the Tween drop down menu and choose "Motion".
Set the keyframe on frame 1 to have motion
tweening as well.
Back to the main timeline.
Select frame 50 in the content layer and
hit F7. Select the type tool and type a
big white "1". Select the black
arrow tool again and with the "1" selected
go to the "modify" menu and choose "break
apart" down the bottom. Now in frame
60 of the content layer hit F7 again to
create a blank keyframe and draw a box
in about the spot that the "1" used
to be. Now select the keyframe on frame
50 again and in the Property Inspector
select "tween - shape".
Save your movie. That's it!! If you
have bothered to get this far then you
have covered many of the basic concepts
of Flash animation and interactivity.
Now go to the Control menu up the top
and choose "Test Movie".
Wildform
provides a 100% satisfaction guarantee on all our Flash software.
If you are not completely satisfied with our Flash multimedia software
for any reason you may request a refund within 15 days
of purchase.
