File Under: Multimedia

Flash Tutorial for Beginners – Lesson 2

The Button Symbol

In Flash Tutorial for Beginners – Lesson 1, we created some objects and then animated them with Flash. You may recall that we accomplished this through the magic of symbols. And remember how I told you that it’s possible to edit these symbols? Well, that’s where we’re going to start this time around. If you haven’t made your way through Lesson 1 yet, you might want to do this first, as we’ll be building on the example animation I talked about in that article.

When you created your symbols, you may have noticed that there were three different types you could have selected.

The kind of symbol we created in Lesson 1 was the most basic type:a Graphic symbol. The second type is a Button symbol (and the third is the Movie Clip symbol, which will be covered in the next lesson). The Button symbol infuses your Flash animation with interactivity, so it responds to a mouseover or a click and can trigger an action.

You’ve already learned how to create a simple Flash movie. Well, making a basic Button in Flash is like making a four-frame movie. In the previous lesson, we created images on the Stage and then defined them as symbols. Now we’re going to create a symbol with the symbol editor.

Open the Library palette for your movie by choosing Library from the Window menu. See the Options pulldown menu in the upper-right corner? Select New Symbol, name it something easy like “Click-me” or “Button” and then select Button Behavior. After hitting OK, you’ll be able to edit the symbol. While you edit the symbol, the movie will be hidden.

Select Grid from the View menu to help you with alignment. Choose the Text Tool and use the Character panel to select a bold font of 18 points. Type “CLICK ME” in the center of the Stage. Next, add another layer and name it “rectangle”. Select the Rectangle tool and set the Stroke height to 2.0 points and the color to black. Select a light color for the Fill Color, and draw a rectangle on the new layer. If you can’t see the text, make sure the “rectangle” layer is below the text layer in the timeline. If it’s not, just click and drag that layer name to change the order.

You’ll notice the Button Symbol Timeline has a label above each of the four frame cells:Up, Over, Down, and Hit. A different user action triggers each of these states. We’ve just drawn the image for the Up state, which is what the button looks like when it’s just sitting there. Over is what it looks like when the user rolls the mouse over the button. When the user clicks down on it, that’s Down. And Hit defines the hot area of the button – like an image map; it indicates where the mouse needs to be to trigger the button.

To create an Over state, simply insert Keyframes for both layers in the Over frame. Select the text and change its color to pale yellow (#FFFFCC). Also, change the fill color of the rectangle to a deep purple (#330066) or blue.

Next, insert a Keyframe in the Down frame. Using the Arrow tool, draw a marquee around the button objects and drag it down and to the right about a quarter of an inch each way. This will give the illusion that the button depresses when your user clicks on it.

button_symbol.gif

Above is the Button symbol-editing window. There’s a pop-up menu on the side that leads to the other symbols in the Library, and the movie clapper icon just to the left brings you back to the movie editor. Note that I’ve added another layer to give the Down state a drop shadow.

To define what’s hot (and what’s not), you need to create a solid black object in the Hit frame. First, insert a Blank Keyframe in the Hit frame. Then go to the Up frame and copy the rectangle there. Return to the Hit frame and select Paste in Place from the Edit menu. This will paste the rectangle into the same location as in the Up frame.

You don’t have to create all four states for every button, but doing so can make for more dynamic buttons. Another thing to note:Symbols can contain other symbols. This allows you to create more effects and even smaller files. Each state of the button could contain other graphic symbols.

Now let’s place the button into the movie.

button_editscene.gif

Return to the movie by selecting Edit Movie from the Edit menu. Alternately, you can hit command-E (Ctrl-E on Windows) or select Scene 1 from the Edit Scene pop-up menu.

Contents

  1. Pushing Your Buttons
  2. Make Your Movie Behave:Creating Simple Actions
  3. Adding a Link to Your Animation
  4. Morphing a Shape
  5. Making a Fancy Button
  6. Animating that Button
  7. Symbols, Symbols, Everywhere
  8. The Finishing Touches

Pushing Your Buttons

Now that you have the Stage open in front of you, make the button you just created serve as the Start button for your movie. For the best effect, you might want to hide the animation when the button first appears. D’oh! The animation starts in Frame 1.

panel-scene.gif

To get around this, you can add a new scene to the movie (choose Insert, then Scene). To toggle between scenes, you can use the Edit Scene menu as described on the previous page. Alternately, you can navigate between scenes and modify their properties from the Scene panel. Select Scene 1 and click Properties to rename it Animation. With Scene 2 active, rename it Start Button. Drag the Start Button to above Animation to change the play order. Now the scenes will play one after another (unless you assign actions to make something else happen). Separating a movie into scenes like this doesn’t affect the final Shockwave movie at all, and it helps you organize separate content. Unlike layers, you should use scenes sparingly as it is difficult to create interaction between them.

Another way to change the order of things is to limit the movie to one scene and rearrange some frames. To do this, simply click down on the Keyframe you want to move while dragging it to the desired location. If you want to first select a range of frames, click and drag with the Command key (Control key in Windows) and you will only be able to make selections in the timeline.

At this point, you should be in the scene named Start Button. Since you’ve just created this scene, there will be a blank Stage and Timeline. In this scene, change the name, Layer 1, to Button 1. Open the Library and select the symbol “Click-me Button”. Drag the button from the Library preview onto the center of the Stage in order to place it. You have just created an instance of that symbol.

Make Your Movie Behave:Creating Simple Actions

By default, Flash movies play from the first frame all the way through to the last. But you want the movie to stop at the frame with the button, and then move on only if a user clicks on it. This is possible because you can assign actions to either placed symbols or Keyframes.

To assign an action to a Keyframe, select the Keyframe and go to the Actions panel. Under the “+” sign you can add a wide range of actions to your Flash movie. In this case, select Global Functions and then “Stop” from under the “Timeline Control” submenu. You have just applied an action to the Keyframe. Stop is the simplest action in Flash; most other actions will require additional input.

actions-stop.gif

As things now stand, the movie stops at the button and stays there, never continuing on to play the entire animation. To make it interactive, you need to assign an action to the button itself. First, make sure that Enable Simple Buttons is unchecked under the Control menu. Keep an eye on the Frame Actions panel while you select the Click-me Button symbol on the stage. It now becomes the Object Actions panel. It’s the same panel, but Flash is telling you that you’re now applying an action to an object or Symbol. Under Global Functions >> Movie Clip Control, add “on Clip Event.” This will add a bit of code to your actions panel with a pop up menu that allows you to choose the type of event. Select “Release” (this tells the movie to do something after the user has clicked and released the mouse). With the “on” event selected, add another Timeline action:Go to and play. This will tell the movie what to do after the user releases the mouse. Select the second option which takes a scene and frame parameters. Type in “Animation” for the scene and 1 for the frame.

actions-object.gif

Now when the user rolls over the button and releases the mouse, the button will tell the movie, “Go to the Animation scene, Frame 1, and start playing.” Do you want to see your interactive movie in action? Check Enable Simple Buttons under the Control menu. Now click on the button.

Adding a Link to Your Animation


A simple way to integrate Flash with HTML is by using the Get URL action.

Make sure that you’re in the Animation scene and create a new layer named Button 2. To accommodate the button, you need to extend the movie by one frame. Starting from Frame 21 of the top layer, command-click (ctrl-click on Windows) and drag to Frame 21 of the bottom layer. With the column of layers highlighted, right-click and chose insert Frame from the menu. Or, just make sure the frame indicator is at the 20th frame and hit the F5 key on your keyboard. All the layers should now be extended by one frame. Now right-click (ctrl-click on a Mac) on the last frame of the Circle layer, and the contextual menu should pop up. Select Insert Blank Keyframe from that menu, and the circle should disappear in this frame.

To make the second button appear, insert a Keyframe at the last frame of the Button 2 layer. Then drag “Click-me Button” from the Library palette onto the Stage window (make sure Button 2 is actually your current layer). You have now created a second instance of this button symbol. It may be obscured by other objects in the movie, especially if you got wild at the end of Lesson 1. Just drag the label for that layer up to the top of the list to make it appear on top.

With this instance of the button selected, go to the Actions panel. (If you are having trouble selecting the button because it’s active, just uncheck Enable Simple Buttons under the Control menu.) Select Get URL from the Global Functions >> Browser/Network submenu. Add your favorite URL (naturally, I used http://www.webmonkey.com/) to the URL field and select “_blank” for the Window field. Window behaves just like TARGET does in HREF tags for HTML.

Using Get URL, you can type “javascript:functionFoo()” to call a JavaScript function on a Web page. If you want to use JavaScript with Flash, you can also try FS Commands or other tricks.

Check your work.

Morphing a Shape


In Flash, tweening is commonly used to move a symbol around the Stage, enlarge it, or fade it in. The motion tween is the default for most kinds of animation in Flash. The morphing tween is a specialized tween for making one shape morph into another. For example, you can start with a square and tell Flash to gradually change it, or morph it, into a circle.

Start fresh with a new Flash movie. Choose Document from the Modify menu to change the background color or the movie’s dimensions at any time. However, you’ll have less aggravation if you can set it up correctly at the start. For now, just leave the dimensions at the default size of 550-by-400 pixels.

Start by renaming Layer 1 “Shape Tween” and inserting about 40 frames. To do this, select frame number 40 and just hit F5 on your keyboard, and you’ll see an updated Timeline.

Just so you know, shape tweens do not work with symbols. You need to create two shapes that are independent of any symbols. However, you can place a pre-existing symbol on the Stage and choose Modify and then Break Apart to convert it to a plain object. Sometimes you’ll have to do this more than once, especially if your symbol contains other symbols. In some cases, you may need to choose Modify, then Ungroup, to convert your symbols into shapes.

So create an initial shape, a simple solid shape without outlines, like a yellow circle. Then add a Keyframe where you want the tween (morph) to begin:frame 10.

Next, insert another Keyframe at frame 25 of the same layer. Either modify the original shape or delete it and draw a new shape. This will be what the first shape, the yellow circle, will morph into. Any shape will do as long as you make it different, but position it in the same place on the Stage as the first shape.

You may have wondered about the tiny icons just below the Timeline. Ignore the first one with the red line; it’s not very useful. The others control the Onion Skin feature, which allows you to see adjacent frames of an animation. Click on the left icon, and you’ll see some ghosts of the triangle and the circle. The other icons modify the way the Onion Skin feature works. Also, notice that the slider bar has changed so that two brackets surround an area in the Frame Indicator. This corresponds to the range of frames that become visible via the Onion Skin feature. Move the frame indicator back and forth to see how it affects the Stage.

onion2.gif

The Onion Skin view with Edit Multiple Frames activated allows you to see and edit across many frames simultaneously.

At this point, you can turn on onion skinning (the second button just below the Timeline) to help you align the images. Clicking the fourth button (Edit Multiple Frames) will allow you to select and modify objects in all the frames that onion skinning reveals. Turn it off when you’re satisfied.

Next, click on the first of the two Keyframes you just created and right-click. Select Create Shape Tween from the context menu.

shape_hints.gif

In Flash, you can control the way your two shapes tween with shape hints. Shape hints tell Flash where to match a particular point on one shape with a particular point on another shape.

If you want to tween multiple shapes, it’s best to create a separate layer for each tween. So, say you want to add a typographic morph. Go ahead and create another layer, insert two Keyframes – each with a different word – and assign the shape tween to them. Because shape tweens will not work with type objects, you’ll have to choose Modify, then Break Apart, to convert each block of type into graphic objects.

Save the file and hit the Enter key to see what you’ve made. Pretty, no? Now let’s create a button that the user can click to trigger this morph.

Making a Fancy Button

OK, is that file you used to create the shape tween still open? Great. Now create a new blank symbol (Insert, New Symbol). When the Symbol Properties window pops up, name the symbol “Fancy Button” and select “Button” Behavior.

fancy_properties.gif

You may have noticed that the work space for creating symbols looks just like the movie work area, and indeed, many of the things you can do with movies can be done with symbols. For instance, you can add multiple layers. With Graphic or Movie Clip symbols, you can also add multiple frames. You can even add actions. But we’ll learn more about that in the next lesson. In this case, we’re creating a button, so there are only four frames across the Timeline (for the four button functions:Up, Over, Down, Hit).

fancy_edit.gif

Now let’s give your button a sense of purpose. Create a text layer to label the button. Next, create a new layer named Box and draw a solid rectangle behind your text layer. For the Box layer to appear behind the text layer, it must appear below it in the Timeline. If it doesn’t, drag the Box layer to the proper position.

Go ahead and select just the text. Choose Insert >> Timeline >> Convert to Symbol and name it Type. You’ve just created a symbol within a symbol. Do the same for the rectangle and name it Rectangle. By doing this, not only have you kept the file size small, but if you change the shape of the button, you’ll only have to edit the Rectangle symbol. It’s a win-win situation.

Now insert Keyframes in the Over column of the text and Box layers. In this frame, you can define what the button will look like when a user rolls her mouse over it. If you want to go the tried-and-true route, you can just change its color. To alter the color of any symbol, select Tint under the Effects panel. But that’s not all you can do. Oh no. You can also make your button shake, rattle, and roll with some clever animation.

Animating that Button

By adding animation to your button, it’s as if it comes to life like Frankenstein’s monster when users roll their mouse pointers over it. To do this, you need to add a Movie Clip symbol.

Create a new layer named “Alive” in the Fancy Button symbol and insert a Keyframe in the Over column. We want the button to come alive when the mouse rolls over it. Next, draw the first frame of your animation directly in this symbol. For this animation, let’s start with something simple:a small dot in the upper-left hand corner of the box.

Convert this dot into a separate symbol by selecting Insert and Convert to Symbol and naming it Moving Dot. Choose Movie Clip as its behavior. This new symbol is now a component of the Fancy Button, which will contain the animation.

Next, make Moving Dot the active symbol. What good is a Movie Clip symbol if nothing moves? To make the dot move (tween), you first need to create an additional Dot symbol that nests within the Moving Dot symbol we just created. So select the dot and convert it to a second symbol named Dot, which right now should be identical to Moving Dot.

Symbols, Symbols, Everywhere

context.gif

Are you lost yet? All this symbol nesting can be pretty confusing, especially since Flash doesn’t clearly indicate the relationship between symbols. In Flash, any time you double-click on an instance of a symbol, you will be able to edit it while seeing its placement in the main movie.

Alternately, you can use Flash’s Movie Explorer panel to analyze a symbol. This is a powerful tool for finding any element in your Flash movie and to see how a symbol is comprised. Under “Symbol Definition(s)”, you can analyze any symbol in the library. Click around through it to see everything you’ve done so far.

explorer1.gif

In the Library panel you can do a little housekeeping and organize your symbols in folders. Just click on the folder symbol to add a folder. Use these folders to group symbols that belong together. This is only an organizational device for when you’re working in Flash — it will have no effect on the movie itself.

new_folder.gif

Now, back to our dot. Go to the Fancy Button Symbol, the rectangle on the stage, and copy it (Edit:Copy). Next, return to the Moving Dot symbol. You can switch the active symbol by going to the pulldown menu in the upper-right corner of the document window. Let’s make the dot move in a pattern that follows the edge of the rectangular button. To do this, right-click (Control-click on Macintosh) on the layer name and select Add Motion Guide from the pop-up menu. Or, you could also just click the button that looks like this:

icon_guide.gif

Remember that rectangle you just copied? You’re next going to use it to create an animation path for the dots. With the guide layer active, select Paste in Place from the Edit menu. Amazing, eh? I wish every application had Paste in Place. Next select Break Apart from the Modify menu. With this action, you’ve just turned this instance into an ordinary object (not a symbol), so you can edit it here. Using the Ink Bottle tool add an outline to the rectangle. Next, delete the interior of the rectangle. You should now be left with a rectangular path for your dot to follow.

ink_bottle.gif

A motion guide will not work on a closed path, so select just the left edge of the rectangle outline and click on the Scale tool. Drag the top handle to just below the dot so that the path isn’t closed. Next, make sure the red dot is aligned properly with the path. To help align the dot with the guide, you can select Snap to Objects from the View menu if it isn’t already selected. This will create a magnetic connection to the motion guide while you move the dot.

scale_tool.gif

Next, click in a frame below the frame 12 marker and choose Frame just hit the F5 key. This should extend all layers to that frame. Then insert a Keyframe as the last frame on the layer with the dot. Move the dot in that Keyframe until it snaps to the opposite end of the path. Finally, add a motion tween between the Keyframes in that layer. Hit the Enter key so that you can preview the motion of the dot around the path.

transform.gif

You have just been working with a Motion Guide layer. In Flash, you can also create generic Guide layers that don’t affect the animation or show up in a final movie. In Flash, any regular layer — whether hidden or not — will show up when you export your movie. If you want to leave some notes, doodles, or anything else that’s just for help while you work, you can create a Guide layer. (Just don’t add sound to it.) To do this, create a new Layer or use an existing one. Double-click on the layer symbol just before its name. When the Layer Properties dialog pops up, select Guide as the Type, and then click OK. The layer is now a guide layer and will not have any affect on the final movie.

moving_dot.gif

You can embellish your button by adding sound or just about anything else to each state. It’s not necessarily good design etiquette to do all this, but it’s good practice, and it sure is fun. Go for it and get it out of your system.

The Finishing Touches

fancy_pants.gif

To finish up our button animation, return to the Fancy Button symbol and add frames to indicate the Down state, which is where you indicate what happens the moment your button is clicked. Add a frame only to the box layer in the Hit column to define the area where the mouse will trigger the button.

library_palette.gif

Return to the Edit Movie mode (Command-E on a Mac, Control-E in Windows). Add a new layer to the movie and name it Moving Button. You’ve just created an animated Button symbol, but right now it’s languishing in the symbols library. To actually put your new symbol to work, go to the Library Tool palette. If it’s not visible, press Command-L (Control-L in Windows). Select Fancy Button from the Library list, and drag the preview of it onto the Stage.

From the Action panel add a Play action to the button. To hide the button after it’s pressed, insert a blank Keyframe in the second frame of the layer.

Next, add a stop action to the first frame of the movie to prevent it from playing on its own, and add another one to the last frame to prevent it from looping. You’ll need to insert a Keyframe at the last frame of the movie to assign the stop action.

Flash won’t let you see movie clips animate while you work, so you must choose Control, then Test Movie, to see your progress. If you like what you see, go ahead and save the movie.

Check your progress and take a well-deserved breather. Get ready for tomorrow when you’ll be adding sound to your Flash piece and learning how to use the amazing tellTarget action.


From the series

Flash Tutorial for Beginners
Flash Tutorial for Beginners – Lesson 1
Flash Tutorial for Beginners – Lesson 2