Craig Campbell’s School of Flash

Many Flash beginners stick with using button symbols when creating navigation links for their Flash websites. And why not! That’s what button symbols are made for, right?

Well, you can also create buttons using movie clip symbols. Movie clip buttons are basically buttons on steroids. With movie clip buttons, you have much more control over how your button behaves. For example, when you’re dealing with your button symbol’s timeline, there’s only so much you can do on the button’s “over” state. If you want, you can stick a movie clip symbol within your button symbol’s “over” state in order to add a little bit of animation, but what if you wanted a different animation to occur when you moved your mouse away from the button? There’s not really a whole lot you could do there if you were using a simple button symbol.

So, in this tutorial, I’m going to show you how to make rollover and rollout animations on a movie clip button. For the sake of simplicity, we’re going to create buttons that expand out sideways on rollover and animate back to their original size on rollout. So let’s get started:

1. Create your movie clip button. For this example, create a simple rectangle with a piece of text centered on top of it. Here’s what the graphics look like for my button:

Easy enough, right? Now, select your graphics, hit F8 to convert to a symbol, select Movie Clip and call it whatever you want. Even though this graphic is going to look and act like a button, we want to make it into a movie clip in order to take advantages of all the benefits of using a movie clip symbol. Finally, select your new movie clip button, and enter in an instance name for it in the properties inspector. I’m giving my button an instance name of btn_mc.

2. Enter your movie clip button’s timeline. Double-click on your movie clip to go into the movie clip’s timeline. In the movie clip’s timeline, you’re going to create a few different states for your button and then use frame labels to label these states.

3. Insert new layers into your movie clip button’s timeline. Create a new layer called “Labels” and another new layer called “Actions.” Keep these two layers at the top of your layer stack for easy access. Also, we need to separate the background of the button and the button text into separate layers. An easy way to do this is to select the Selection Tool in your toolbar, click once outside of your artwork to deselect everything (don’t double-click, or it will take you back to the main timeline), then right-click on the background rectangle (or ctrl+click with a one-button mouse on a Mac) and click on “Distribute to layers.” This will send the background rectangle to a new layer just below the current layer. Here’s what your layer stack should look like now:

4. Create the “states” for your button. For this tutorial, we’re going to create an up state, an over state, and an out state. The up state will contain the button at its default size and position, the over state will contain an animation of the button’s background expanding to the right, and in the out state, it will animate back to its original size.

The up state will consist of a single frame and will reside in frame one, which we’ve already created. With frame one selected for the “Labels” layer, go to the Properties Inspector and type up into the frame label text field. For the over state, click on frame 10 for the “Labels” layer, hit F6 to add a new keyframe, and with this new keyframe selected, enter over into the frame label text field in the Properties Inspector. This frame (frame 10) will be the beginning of the rollover animation. You’re going to make this 10 frames long, so the animation will end in frame 20. So, to add a little breathing room, jump over to frame 30 on the Labels layer, add a new keyframe, and label this one out. This animation will also take up 10 frames, so it will end in frame 40. Click on frame 40 for the Labels layer and hit F5 to extend the frames out so that you can read the final label in the timeline.

Now we need to add our stop actions. By default, a movie clip symbol will start playing through its timeline, and that’s not what we want. By default, we want our movie clip button to stay in frame one until we hover over it. We also need to add stop actions to the end of our over animation and our out animation. So click on frame one, hit Option+F9 (or just F9 on PC) to open up your actions, and type stop(); into your actions panel. Then, close your actions panel.

We can easily copy this stop action to frames 20 and 40 by doing the following:

1. Click on the keyframe in frame one of the Actions layer (where you just entered your stop action).
2. With this keyframe selected, hold onto Option (or Alt on PC), click on the keyframe again, and drag to the right.
3. Release the mouse button at frame 20, and you should see a new keyframe copied to frame 20 with the stop action applied to it.
4. Perform steps 1-3 again, this time for the end of the out animation in frame 40.

The timeline for your movie clip symbol should now look like this:

5. Create the over and out animations. Since the text of the button isn’t going to change, go ahead and click on frame 40 for the text layer and hit F5 to stretch the frames across the entire animation. Then, before you create the animation for the background of the button, select the rectangular background and convert it to a movie clip symbol. Call it whatever you like. (This symbol does not need an instance name.)

With your background converted to a movie clip, add keyframes to frame 10 and frame 20 of the background layer. Frame 10 will contain the beginning keyframe of the animation, and frame 20 will contain the ending keyframe of the animation.

Leave frame 10 alone. Click on frame 20, switch to the Free Transform Tool (keyboard shortcut: Q), and stretch the shape out to the right about 10 or 20 pixels (or as far as you’d like). If the shape stretches out in both directions when you try to resize the width, simply hold onto Option (or Alt on PC) while you drag it out, and the left edge will stay in place.

Right-click anywhere between frames 10 and 20 on the background layer and click on Create Motion Tween. The over state is now complete.

Click on frame 30 for the background layer (the beginning of the out state) and add a new keyframe. This new keyframe will retain the expanded size of the button. In this state, we want the button to animate back to its original size. To create the ending keyframe for this animation (since it needs to be the exact same size as it’s starting size), right-click on frame 1 for the background layer, click on Copy Frames, then right-click on frame 40 and click on Paste Frames. Then right click between frame 30 and 40 and select Create Motion Tween. Your animations are now complete, and your timeline should look like this:

6. Return to the main timeline. At this point, we’re done editing the movie clip button’s timeline. Click on Scene 1 on the edit bar (the bar right below the timeline) to return to the main timeline.

7. Code your movie clip button. Create a new layer on the top of the layer stack in the main timeline and call this new layer Actions. Lock this layer by clicking on the layer underneath the padlock icon, click on frame 1 for the Actions layer, and hit Opt+F9 (F9 on PC) to open up your actions panel. Enter the following code into your actions:

Line 1 sets the buttonMode property of the movie clip to true. Without this, your button would still work, but the user would not see the hand cursor when they hovered the mouse cursor over the movie clip.

Line 2 sets up the event listener for the rollover. When the user rolls the mouse cursor over the button, this event triggers a function called onButtonOver, which we created starting on line 5. Inside this function, we’re simply telling our button movie clip to go to the frame labeled over and start playing. It will then play until it reaches a stop action.

Line 3 sets up the rollout event listener, which triggers the onButtonOut function, which tells the movie clip to go to the frame labeled out.

Notice that there’s nothing in this code that explicitly returns our movie clip to the up state. This is because it’s really not necessary. The end of the out state looks exactly like the up state, so it really doesn’t make a difference. But if we wanted to, we could have just left out the final stop action at the end of the movie clip timeline, and instead of stopping at frame 40, it would simply loop back to frame 1 where it encounters the stop action there. Doing this would result in the exact same visual result.

8. Bump up the frame rate. One last thing… For a nice, smooth animation, bump the frame rate up to 24 frames per second. This will give you a quicker, smoother animation. To do this, simply double-click on the frame rate displayed at the bottom of the timeline and enter in a new value.

Your final file should look something like this (I’ve added a few more buttons for demonstrative purposes):

Source file: mcButtons.zip

From time to time, I like to showcase Flash work that other people are doing, and it would be impossible to do so without at some point mentioning Homestar Runner. If you’ve never heard of Homestar Runner, then you’re really missing out. Creators Matt and Mike Chapman have built a small empire on a few crudely animated–and insanely hilarious–characters.

Don’t get me wrong when I say “crudely animated.” The Brothers Chapman have developed a style that works for them and that allows them to dish out a cartoon every week (most of the time), and I’ve been addicted to Strong Bad Emails for a few years now.

My personal favorite?

“Lures and Jigs” . . . check it

There is very little that will push users away quicker than a bulky Flash website with no preloader. Without a preloader, your users will have nothing to look at but a blank screen until your Flash file has fully loaded. For users with a speedy broadband connection, this may not be much of an issue (depending on the size of your file), but for people with sluggish connections, it’s imperative that you give them some kind of indication that everything is loading properly.

1. Create your preloader bar. For this example, I’ll be drawing a basic rectangular bar that will expand within a thin border. Using the rectangle tool, set the stroke option in the Properties Panel to a hairline stroke, choose whatever fill color you want, make sure that Object Drawing mode is turned off on the toolbar, and draw your preloader rectangle in the center of the stage.

2. Separate the fill from the border. Since the border of the rectangle will stay constant while the fill expands within it, it will be easier if we send the fill to its own layer. To do this, simply hit Esc to make sure that everything is deselected, and then click once on the fill. Make sure that ONLY the fill is selected, and then right-click on the fill (or Ctrl+click if you’re using a one-button mouse on a Mac) and click on Distribute to Layers. This will remove the fill from the current layer and copy to a new layer just below the current layer.

3. Convert the fill to a movie clip. Click on the fill (which should be on its own layer now) and hit F8 to convert it to a symbol. Select “movie clip” and set the registration point to the upper left corner. Our loader bar is going to be expanding from left to right, and this will only work properly if the registration point is on the left side. Give your movie clip an instance name of loader_mc.

4. Create a dynamic text field. This text field will tell the user what percentage of the site has loaded so far. For this example, select the Text Tool, choose Dynamic Text in the drop-down menu on the Properties Inspector, choose 12 point Verdana (or whatever font you want), and click and drag beneath your loader bar to draw a text field that has the same width as the loader. Here’s what mine looks like:

With this new text field selected, in your Properties Inspector, click on the button to right-align your text within the text field. Give this text field an instance name of loaded_txt.

5. Embed the font for the dynamic text field. Even if you select a popular font, such as Verdana, you can never be 100% certain that your users are all going to have the same font installed on their system. And when you’re dealing with dynamic text fields, if your users don’t have your selected font, and if you don’t embed your font, then Flash will choose a different font to display, and you’ll lose control of what your text fields look like.

To avoid this issue, select your dynamic text field, and then click on the “Embed” button in the Properties Inspector. In the pop-up dialog that appears, select Uppercase, Lowercase, Numerals, and Punctuation and click OK. To select more than one item, click on the top item, hold onto Shift, and then click on the bottom item. All items in between will be selected. Like so:

6. Create a new keyframe for your content. You won’t be able to test your preloader unless you actually have some content to load. So at this point, I want you to throw in a little bit of dummy content.

Create a new layer to hold your content, click on frame 2 for this new layer, and hit F6 to add a new keyframe. In this new keyframe, simply import a hi-resolution image or two onto the stage. This content does not have to be arranged in any sort of orderly fashion. You’re just using this extra content to “fatten up” the file size so you’ll have a way to test your preloader.

7. Add a stop action to frame 1. Since your Flash file now has 2 frames, you need to provide a way to keep the file from jumping back and forth between them. So add a new layer to the top of your layer stack, rename the layer Actions, click on frame 1 for the Actions layer, and hit Opt+F9 (or just F9 for PC) to open up your Actions panel. In your Actions, simply type stop();

8. Code the preloader. Make sure that frame 1 of the Actions layer is still selected, and add the following code to your script:

On lines 3 and 4, you’re adding Event Listeners to the main timeline. The PROGRESS event handler on line 3 calls on the onProgress function over and over as long as content is still loading. The COMPLETE event handler calls on a function called onComplete and is triggered whenever the content has been fully loaded.

In the onProgress function, we first create a variable called loaded, which stores the number of bytes that have been loaded thus far and another variable called total, which stores the total number of bytes in the Flash file. When we divide loaded by total (line 10), we get the total percentage of the file that has currently been loaded, and we store it in a variable called pct. (Actually, it’s technically a ratio instead of a percentage, but I won’t be picky if you won’t.)

We then use this pct variable (which, if everything is working properly, now contains a number between 0 and 1) to update the scaleX property of our loader bar movie clip. The scaleX property is basically the width of a movie clip as a ratio of its original width. So at this point, if your Flash file is 90% loaded, then the loader bar will be at 90% of its full width.

Once we have the width of the loader set, we then update the dynamic text field to tell our users precisely how much of our file has been loaded.

9. Test your movie. If everything is working properly, then when you test your movie (by hitting Cmd+Enter or Ctrl+Enter on PC), you won’t see the preloader at all. It will jump straight to frame 2, where you have a hi-res image on the stage. This happens because when the file is already on your system, it is loaded immediately, and the COMPLETE event triggers the onComplete function to take us to the next frame of the Flash file. However, there is a way to simulate a download in order to test our preloader.

After hitting Cmd+Enter or Ctrl+Enter to test your movie, go to View > Bandwidth Profiler. This will display loading information above your movie. Once the Bandwidth Profiler is visible, go to View > Simulate Download. Hopefully, if all your ActionScript was entered properly, you will now see your preloader in action. As your loader bar expands to the right and your dynamic text field updates the percentage loaded, double-check this against the percentage that the Bandwidth Profilers says has been loaded. If these two numbers match, you’re in business.

You can also adjust the speed of the simulated download by selecting View > Download Settings.

Once your Flash file finishes loading, you should see the preloader disappear and the next frame appear. And voila! You now have a fully-functioning preloader. Now all you need to do is replace the image(s) you stuck in frame 2 with the actual content of your website, and you’re good to go!

Sample FLA file: preloader.zip