What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

   How to Add Button Animation and Navigation in Flash

Basic Tasks: Add Button Animation and Navigation

Set up your workspace

Create a button from grouped objects

Name a button instance

View the hit area by enabling buttons

Change the hit area of a button

Align buttons

Create animation for a button state

Add an action to a button

Add navigation to a button

Test the SWF file

Summary

Basic Tasks: Add Button Animation and Navigation

TOP

A button is a symbol that contains special frames for different button states, such as when the user's mouse pointer is over the button or when the user clicks the button. When you select the Button behavior for a new symbol, Macromedia Flash Basic 8 and Macromedia Flash Professional 8 create the Timeline for the button states. You can add navigation to buttons by using behaviors or by writing ActionScript.


This tutorial teaches you about creating and modifying buttons, including adding animation to a button.


 

Set up your workspace

#TOP

First, you'll open the start file for the lesson and set up your workspace to use an optimal layout for taking lessons.

  1. To open your start file, in Flash select File > Open and navigate to the file:

    • In Windows, browse to boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Basic Tasks\Add Button Animation and Navigation and double-click buttons_start.fla.

    • On the Macintosh, browse to Macintosh HD/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Basic Tasks/Add Button Animation and Navigation and double-click buttons_start.fla.

    NOTE The Add Button Animation and Navigation folder contains completed versions of the tutorial FLA files for your reference.

  2. Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.

  3. Select Window > Workspace Layout > Default to set up your workspace for taking lessons.

  4. In the Stage View pop-up menu, in the upper-right side of the Timeline, select Show Frame to view both the Stage and the workspace.

  5. Click in the workspace, away from objects on the Stage, so that no objects are selected.

 

Create a button from grouped objects

TOP

You can create buttons from text and graphics, including bitmap images and grouped objects. In this lesson, you'll turn a logo and some text into one large button.

  1. In the Tools panel, click the Selection tool. On the Stage, select the grouped text and logo, and then select Modify > Convert to Symbol.

  2. In the Convert to Symbol dialog box, name the symbol BTNLogo, and select Button as the behavior.

  3. In the Registration grid, verify that the square in the upper-left corner is selected as the registration point, and click OK.

    The registration point is the point from which the symbol aligns and rotates.

 

Name a button instance

TOP

 As a best practice, you should name instances of symbols on the Stage. ActionScript relies on the instance name to identify the object.

  • With the button that you created still selected, open the Property inspector (Window > Properties). In the Instance Name text box, type logo_btn.

 

View the hit area by enabling buttons

TOP

When the Enable Simple Buttons feature is active, you can view the less complex aspects of your buttons, such as the hit area (the clickable area of a button) and the colors used for the button states. More complex button design, such as animation, does not play.

  1. Click in an empty space in the workspace to make sure you don't have any objects selected.

  2. Select Control > Enable Simple Buttons, and move the mouse pointer over different areas of the button that you created.

    The only areas of the button that are clickable (as indicated when the pointer changes to a hand) are the text area and the logo. The white space around the text and logo are not clickable.

  3. Select Control > Enable Simple Buttons again to deselect the feature so that you can edit the button.

    Next, you'll redefine the hit area so that the button area covers the entire grouped area.

     

Change the hit area of a button

TOP

You can specify a hit area that's a different size from the default hit area by adding a keyframe to the Hit frame of the button symbol, and then drawing a shape that defines the hit area.

  1. On the Stage, double-click the logo button that you created to view the button Timeline. The button Timeline contains the following states:

    • Up

    • Over

    • Down

    • Hit

  2. Double-click the Layer 1 name in the Timeline and rename the layer Hit Area.

  3. Select the Hit frame (Frame 4) of the Hit Area layer in the BTNLogo Timeline, and press F6 to add a keyframe.

  4. In the Tools panel, select the Rectangle tool. The stroke and fill color for the rectangle are unimportant. On the Stage, draw a rectangle that covers, as closely as possible, the logo and text.

    The rectangle now defines the clickable area of the button.

  5. Click Scene 1, above the upper-left side of the Stage, to exit symbol-editing mode for the button.

  6. Select Control > Enable Simple Buttons.

  7. On the Stage, again move the pointer over the text.

    The hit area changes to the shape of the rectangle that you drew.

  8. Select Control > Enable Simple Buttons to deselect that feature.

 

Align buttons

TOP

You can align buttons along horizontal and vertical axes using the Align panel.

  1. In the Timeline, click the Content layer.

  2. Click Insert Layer below the Timeline.

  3. Double-click the layer name, type Animated Buttons as the new name for the layer, and press Enter (Windows) or Return (Macintosh).

  4. In the Library panel (Window > Library) select Button 1 and drag it to the lower-right edge of the Stage. Precise placement isn't necessary.

  5. In the Instance Name text box in the Property inspector, give the button the instance name links_btn.

  6. Drag Button 2 and Button 3 from the Library panel, placing them to the left of Button 1. Use the approximate spacing shown in the following illustration:

  7. Using the Selection tool, drag to select all three buttons.

  8. Open the Align panel by selecting Window > Align. Verify that To Stage is not selected, because you do not want to align the buttons relative to the Stage.

  9. In the Align panel, click Align Vertical Center, and then click Distribute Horizontal Center.

    The buttons align on the Stage.

  10. Close the Align panel.

  11. On the Stage, click in an empty space in the workspace to make sure you don't have any objects selected, and select Button 2. In the Instance Name text box in the Property inspector, enter contact_btn. Select Button 3 and name it sweepstakes_btn.

 

Create animation for a button state

TOP

You'll create a movie clip within the Over state of Button 1, and create a shape tween in the movie clip. The shape tween creates an effect that changes the color from gray to red.

  1. On the Stage, double-click Button 1 to open it in symbol-editing mode.

  2. In the Button 1 Timeline, hide all layers except the Color layer. In the Color layer, select the Over keyframe.

    NOTE You hide layers by clicking the dot under the Eye column next to the layer name so that a red X appears.

  3. On the Stage, select the black oval shape for Button 1. Press F8 to make the oval a symbol.

  4. In the Convert to Symbol dialog box, name the symbol Button Animation. Select Movie Clip (not Button) as the behavior and click OK.

  5. On the Stage, double-click the Button Animation symbol to switch to symbol-editing mode.

  6. Rename Layer 1 to Color Change. Select Frame 15 and press F6 to add a keyframe.

  7. With the playhead still on Frame 15, select the button shape on the Stage, and in the Property inspector select a bright shade of red from the Fill Color pop-up menu.

  8. In the Timeline, click any frame between Frames 1 and 15. In the Property inspector, select Shape from the Tween pop-up menu.

    Drag the playhead from Frames 1 to 15 to see the color change.

     

Add an action to a button

TOP

When the user clicks the button and the tweened animation plays, you want the playhead to move to the end of the Button Animation Timeline and then stop. You'll use ActionScript to control playhead movement in a Timeline.

  1. Add a new layer to the Button Animation Timeline and name it Actions.

  2. On the Actions layer, add a keyframe to Frame 15 by pressing F6.

  3. Open the Actions panel (Window > Actions) and if necessary, enlarge it to view both the Actions toolbox and the Script pane.

  4. With Frame 15 of the Actions layer selected, go to the Global Functions > Timeline Control category of the Actions toolbox and double-click stop.

    The stop action lets you specify that the playhead stop when it reaches Frame 15.

    In the Button Animation Timeline, Frame 15 of the Actions layer now displays a small a, which indicates that an action is attached to that frame.

  5. Click Scene 1, above the Stage, to exit symbol-editing mode and return to the main document.

  6. Click the pop-up menu control in the upper-right side of the Actions panel, and select Close Panel.

  7. Select Control > Enable Simple Buttons so you can test the animated button.

  8. On the Stage, move the pointer over the button and click the button.

  9. Select Control > Enable Simple Buttons to deselect that feature.

 

Add navigation to a button

TOP

With behaviors, you can quickly add navigation to a button without having to know ActionScript. You'll add navigation to open a web page when the user clicks a button.

  1. On the Stage, select the instance of Button 1.

  2. In the Behaviors panel (Window > Behaviors), click Add Behavior and select Web > Go to Web Page.

  3. In the Go to URL dialog box, select _blank in the Open In pop-up menu to open the URL in a new browser window. In the URL text box, either accept the default setting of

     http://www.macromedia.com or enter a different URL. Click OK.

  4. If desired, repeat the previous steps, selecting Button 2 and then Button 3, to add navigation to those buttons as well.

  5. Click the pop-up menu control in the upper-right side of the Behavior panel, and select Close Panel.

 

Test the SWF file

TOP

You'll test your document to view the button animation and see if the navigation works as expected.

  1. Save your document and select Control > Test Movie.

  2. Move the mouse pointer over the instance of Button 1 to view the color animation that you created.

  3. Click the button to see if your web browser opens to the URL that you specified.

  4. If you added navigation to the other two buttons, test those buttons as well.

  5. When you finish viewing the SWF file, close the SWF file and web browser windows.

 

Summary

TOP

Congratulations on learning about buttons. In a few minutes, you were able to accomplish the following tasks:

  • Create a button from grouped objects.

  • Name a button instance.

  • View the hit area of a button.

  • Change the hit area of a button.

  • Align buttons.

  • Create animation for a button state.

  • Add an action to a button.

  • Add navigation to a button.

To learn more about Flash, take another lesson.

 

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash