Document setup

Movie clips and actions

Invisible buttons

Duplicate and swap

Preloader

Ok for this Flash tutorial we are going to build on what you have already learnt here - basic flash tute 1 - if you have not already completed this tutorial and fully understood everything it covered then you should do it (again) now.

This is what you will be making -



You can download the finished source file for this tutorial from here.

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

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

OK 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 the image below.



ok now 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). Ok now 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.



Now go to the Transform panel, make sure the "constrain" check box is checked and change the scale to 200%. Now 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 -

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



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



Ok 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 crap!

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

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

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

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

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

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

Save your movie.

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



Click ok, 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.

You can download the finished source file for this tutorial from here

The URL for the first basic flash tutorial is - http://www.hed.swin.edu.au/design/tutorials/flashtut1/

To learn more about variables go here.