Introduction
For this Flash tutorial we are going to build on what you have already
learned in the Basic
Flash Tutorial - Part One. If you have not already completed this
tutorial and fully understood everything it covered then you should do
it now.
Open flash and you will see that a blank
document is automatically created. Open the
document properties window (Modify/Document)
and customise it - I made it 600 wide X 400
high with a light grey background and a frame
rate of 21fps. It is always best to decide
on your frame rate and stage size at the
start.
Let's make some basic animated buttons.
Type the word "Home" on the stage
(make sure your text type is "static" -
I used 16pt Arial with this colour code
- #660000. Select the black arrow tool
and make sure that the text you just typed
is selected. Hit F8 to covert it to a movieclip
- name it "home mc". Unless I
state otherwise, always make the registration
of your symbols in the center. Now look
in your library and you will see the mc
you just created. Double click on it in
the library to go inside it. With the text
selected hit F8 again and convert it to
a movieclip - name this one "home
graphic". Now you have a movieclip
inside a movieclip.
NOTE: Many people make a mistake
at this point. What follows should
take place on the timeline of "home
mc" and NOT on _root. (see image
below)
Make a new layer and name it "Actions" -
put a stop action in the first frame.
Name the other layer graphic. Make 2
new layers, name them "animation" and "button" and
arrange them so that are in the same
order as this image:
Click on the home text again and choose "copy" from
the edit menu. Now click on the first frame
of the animation layer and choose "paste
in place" from the edit menu. This
pastes another "instance" of
the home graphic mc in precisely the same
position that it was copied from. Lock
the graphic layer (so the little padlock
appears).
Next make a new keyframe in the animation layer at frame 10 (F6). Click
on the new instance of your mc in frame 10 and in the Property Inspector
select "tint" from the color drop down menu - tint your mc
white at 100%. Now click on the Color drop down menu again(where it currently
says "tint") and go down to advanced. You will see that clip
has kept the white tint effect. Click on the advanced settings button
and change the left hand "Alpha" slider to 0.
Give it an instance name of "slider".
Save your file as soundslider.fla into a
folder called whatever you want. Now double
click on the new mc on the stage to go inside
it. Make a new layer and draw a new rectangle
- 25px X 5px. Select your new rectangle and
look at the align panel. Make sure that to
stage is selected and center it vertically
and horizontally. Now convert it to a movieclip
- name it slideBarMC and set the registration
point to the center.
Go to the Transform panel, make sure
the "constrain" check box is
checked and change the scale to 200%. Click
on the first keyframe in this layer again
and look at the Property Inspector - select "Tween-Motion".
Now click and drag this first keyframe
to frame 2. Your timeline should look like
this:
Hit F5 in frame 10 of the graphic layer
to extend its frames. Go to your library
and click on the drop down menu up the
top right. Select "New Symbol" and
make a button called "invisible button".
Click ok and you automatically go inside
your new button. Click on the "hit
state" square and hit F6 to create
a keyframe. Use the rectangle tool to draw
a rectangle roughly in the middle of your
button. The size and colour don't really
matter (mine was 140 wide by 40 high).
With the black arrow tool double click
on the fill of the rectangle you just drew.
This will select the whole shape (stroke
included). Look at the "Align" panel
and make sure that "To stage" is
selected. Center your shape vertically
and horizontally. Ok now you have a button
with just a hit state, which means it is
sensitive to the mouse but is never seen.
Go back to your library and
double click on the "Home mc" to
go inside it. Select the first frame of the
button layer and drag an instance of your
button from the library on to the stage.
Center your button on the stage and scale
it so it just surrounds your "Home" text.
Give your button an instance name of invBut
(short for invisible button). Now click on
frame 1 of the actions layer and insert this
action underneath the stop action that is
already there:
invBut.onRollOver=function(){
gotoAndPlay(2);
}
What this means is when the mouse rolls over the button, the
timeline that the button is on (in this case, the timeline of
home mc) will go to the second frame and play. Look at the timeline
and you will see that this will cause our little animation to
play. Once the timeline gets to frame 10 it will go back to frame
1 where there is a stop action so it will stop. Hit F5 in frame
10 of the button layer to extend its frames. Save your movie
and then go "Control/Test Movie". Roll over the button
and you will see the effect. Bit too fast isn't it? Easy to fix.
Select the keyframe in frame 10 of the animation and drag it
back to frame 30. Extend the frames for the graphic and button
layers by hitting F5 (not F6!). Your timeline should look like
this:
Test your movie again. Much
nicer right? You might like to increase
the effect by clicking on the last keyframe
of the animation layer and changing the
scale in the transform panel to 400%. Test
the movie again to see the difference and
decide for yourself which one you prefer.
There are numerous advantages to making
an animated button like this as opposed
to putting a movieclip in the over state
of a button - the most obvious is highlighted
if you roll on and off your button very
quickly. Using this method, the animation
continues to play to the end. Using the
other method, the animation would start
and then stop again as soon as the user
rolls off the button - this looks bad!
Next I want to show how you
can reuse this movieclip to easily make multiple
animated buttons. Click on home mc in the
library and then click on the drop down menu
up the top right of the library - select "Duplicate".
Name the copy "contact mc" and
click OK. Now duplicate the "home graphic" movieclip
and name the copy "contact graphic".
Double click on contact graphic in the library to get inside it. Double
click on the text and change it to the "Contact". Center the
word on the stage. Now in the library, double click on the "contact
mc" movieclip to get inside it. Unlock the graphic layer and lock
the button layer. Make sure the timeline slider is in frame 1, click once
on the home graphic mc on the stage and look at the Property Inspector
- click on the "Swap" button and select "contact graphic" as
the symbol you want to swap it with. Click OK. You should see the symbol
swap on the stage.
Now do the same swap for home graphic mc in the first and last keyframes
on the animation layer. You may need to adjust the size of the invisible
button to fit around the text. That's it! You've made another animated
button in no time at all. Click on "Scene 1" up the top left
to get back to the main timeline and drag an instance of your "contact
mc" on to the stage. Save your movie and then test it.
Repeat this duplicating process to make as many buttons as you want.
Now I want to get into some scary Flash actionscripting to make a preloader.
You've no doubt seen these before - a loading bar that expands while a
text box shows you in numbers what percentage has loaded. There are a few
different ways of making these in Flash. The way I am going to show you
is probably not the easiest but certainly the best.
In the main timeline, name the one and only layer "buttons".
Now create a new layer and name it actions - put a stop action in the first
frame. Now click on the first frame of the buttons layer and drag it to
frame 2. Your timeline should look like this:
Click on the first frame of
the actions layer and add this action underneath
the stop action that is already there:
_root.onEnterFrame=function()
{
//this checks to see if the movie is still loading
if (_root.getBytesLoaded() < _root.getBytesTotal()) {
//this assigns a variable to the total size of the movie (in Kb)
Total = _root.getBytesTotal() / 1000;
//this assigns a variable to the amount that has been loaded (in Kb)
Received = _root.getBytesLoaded() / 1000;
//this uses simple maths to calculate the percentage that has been loaded
Percentage = (Received / Total) * 100;
//this displays the percentage in a dynamic text box
_root.PercentText = int(Percentage) add "%";
//this changes the x scale of our progress bar to match the percentage
that has been loaded
_root.ProgressBar._xscale=Percentage;
//this tells the movie what to do when it has been fully loaded
} else {
_root.play();
_root.onEnterFrame=null
}
}
This probably doesn't make a whole lot
of sense at the moment but hopefully
it will. When you paste the action into
flash you will see that a number of lines
will turn pink (the ones that start with
//). This signifies that they are comments.
Comments have no effect on the script
but help to explain to the user of the
script what each part of code actually
does. I have commented all of this to
hopefully make it easier to understand.
There are a couple important parts of this script that we need to look
at to complete the preloader. The first is this line:
_root.PercentText
= int(Percentage) add "%";
What this basically does is cause a
dynamic text box on the stage (which
we haven't made yet) to display something.
In this case, that something is the Percentage
variable (which will be a number between
1 and 100) followed by the % symbol.
What the int in front of the Percentage
variable does is round the variable off
to a whole number - an integer. OK now
don't freak out if this makes no sense
- I have thrown you in the deep end because
I want you to get an idea of what is
possible with Flash. To fully understand
all this stuff (especially actionscripting)
you need to put in a lot of time out
of class.
Let's continue. Now to make that line of code actually work we need to
create the dynamic text box that it is referring to. Make a new layer
in the main timeline and name it "text box". Click on the first
frame of this layer and use the text tool to drag out a text box - it
doesn't have to be big. Now look at the Property Inspector. Click on
the drop down menu and change it to "Dynamic text". Give it
a variable name of "PercentText"- not an instance name. Change
the text box appearance (in the Character panel) to black, 16pt Arial.
Now when we run our preloader script it will be able to find _root.PercentText
and will know what to display in it (int(Percentage) add "%").
Let's make the progress bar.
Make a new layer in the main timeline and
name it Progress bar. Click on the first
frame of this layer and draw a rectangle
that is the size, colour and position that
you would like the loading bar to appear
once the movie is fully loaded. Mine was
200 wide by 15 high with fill colour code
of #660000 and no stroke. Double click on
the rectangle you just drew with the black
arrow tool to select it. Hit F8 to convert
it to a movieclip and name it "progress
bar". Make sure that the registration
point of the new symbol is set to the center
left.
Look at the Property Inspector
and give the progress bar an instance name
of ProgressBar.
Almost done!
Go back to the main timeline, select frame 2 of the progress bar layer
and hit F7 to insert a blank keyframe. Do the same in frame 2 of the text
box layer. Click on frame 2 of the actions layer, hit F6 to insert a keyframe
and give the frame a stop action. Your timeline should now look like this:
Save your movie. Now test your
movie (Control/Test Movie) and with the Test
movie window open choose "Debug/14.4k" and
then View/Show streaming". What this
does is emulate how your webpage will appear
when being viewed on a 14k modem.
Guess what? It works! Atleast it should. If it doesn't - work out why.
You might like to add an image or audio or anything with a bit of file
size into frame 2 of your movie so you can get a better idea of how the
preloader is looking. Make a new layer in the main timeline and name it
content. Click on frame 2 of this layer and hit F7 to insert a blank keyframe.
With this frame still selected, import a jpeg image or whatever. Test your
movie again and make sure you select "View/show streaming" to
see the preloader do it's thing.
