g
Printer Friendly Version

editor  
BellaOnline's Flash and Animation Editor
 

Creating a Button in Flash CS4 – eCard Project

Now that we have added the stop() action to our FlashR CS4 eCard, we are ready to create the replay button that will tell Flash to go back to the beginning and play the animation. Open your working file into Flash CS4.

1. Add a new layer to the Timeline and name this layer Button. Lock all other layers. Drag the Button layer under the Actions layer.

Before we can add a button to this layer, we need to create one.

2. From the Menubar, click Insert – New Symbol. In the Create New Symbol dialog box, set the Type to Button and name the symbol "Replay". When you click on OK to close the dialog box, Flash will automatically take you to the edit mode for the button symbol. You will see the main stage change to a blank white space.

3. Click on the Text tool from the Tools panel and set the Stroke to null and the Fill to black. Next, go to the Properties panel to set the Character options for our text. I set the Font Family to Times New Roman, the Style to Bold Italic and the Size to 18 pt. Now we are ready to add the text for our button.

4. Find the small registration point in the center of the white workspace area. It looks like a small plus sign. Place your cursor over this, click with your mouse button and then type the text "Replay". You may wish to use a different text for your button.

Let's take a look at the Timeline for our button. As you can see, we have four frames, which represent the four stages of a rollover button. Each of the Up, Over and Down frames can have a different look and the button will change its appearance as you pass over or click on the button. For our purposes, we will change the color of the text for each rollover stage. We want to keep the text black for the Up stage but we still need to change the color for the other two stages. Let's set the text to red for the Over stage and to green for the Down stage.

5. Right-click on the Over Frame and add a Keyframe. Next, highlight the text with the Text tool and change the Fill color to red. Now, click on the Down Frame and add another Keyframe. Change the fill color to green.

We do not need to set a color for the Hit Frame because this frame is never visible on the stage. The purpose of this frame is to designate the clickable area for our button. We will use the Rectangle tool to do this.

6. Right-click on the Hit Frame and add a Keyframe. Now, click on the Rectangle tool and draw a rectangle over the text for your button.

We are finished with our button so we can click on Scene 1 to go back to the main Timeline. But when we get back to the main Timeline, we do not see our button anywhere on the stage. This is because Flash has placed it in the Library. In the next tutorial, we will drag an instance of our button onto the stage and program the button with ActionScript.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.



| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2023 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor