Setting up a flash document

Adding actions

Frames and keyframes

Instances and actions

Create content

Motion and shape tweens

Summary

Setting up a flash document

Ok here is a basic Flash tutorial for you - just covers stuff we discussed the other day so it should be very easy. Here is the basic movie you will be making.



OK 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).

OK now double click on the title of your one and only layer and name it "Actions".



Insert a stop action in the first frame



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"

Adding actions

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

button1.onRelease=function(){
gotoAndStop("start");
}

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"."

Now your actions should look like this (colours may vary)

Frames and keyframes

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



OK 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.

Instances and actions

OK now 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 - not sure what button you need to hold down on the PC but I'm sure you can figure it out...) - hold down shift as well when copying to ensure the copy is directly below the original.



Now 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

stop();
button1.onRelease=function(){
gotoAndStop("start");
}
button2.onRelease=function(){
gotoAndStop("sec1");
}
button3.onRelease=function(){
gotoAndStop("sec2");
}
button4.onRelease=function(){
gotoAndStop("sec3");
}
button5.onRelease=function(){
gotoAndStop("sec4");
}
button6.onRelease=function(){
gotoAndPlay("sec5");
}

Note - button6 has a gotoAndPlay action instead of gotoAndStop - you will see why soon.

Ok 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 content

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.



Ok now 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%".

Motion and shape tweens

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.

Your ball timeline should now look like this



ok 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" - hopefully it will work!

Summary

- to motion tween something (ie animate its scale, alpha, x position etc) it must be a symbol and on it's own layer.
- to shape tween 2 objects, neither of them can be symbols.
- you will notice with our movie that the animation within the ball movieclip continues to play
- even though our main timeline (_root) has stopped.
- to target a movieclip (or a button or a text field) with actionscript it must have an instance name (not just a name in the library).
- use frame labels instead of frame numbers when possible

You can download the source file for this tute from here.