Adobe Flash CS3 Revealed

Chapter 3 - WORKING WITH SYMBOLS AND INTERACTIVITY

1. Create symbols and instances

2. Work with Libraries

3. Create buttons

4. Assign actions to frames and buttons

Chapter 3 Lessons

Chapter 3

Create small file sizes

Symbols are graphics that can be re-used without adding file size

Symbols are the original object

Instances are the copied object

Flash stores only symbol information (size, shape, color) thus creating a smaller file size

Using Flash Symbols

Chapter 3

Attributes, such as color and shape, can be freely changed for each instance

You can have as many altered instances as you like

Symbols reside in the Library

Dragging a symbol from the Library to the stage creates an instance

Using Flash Symbols

Chapter 3

Three types of symbols

Graphics: effective for single, re-usable images

Buttons: for interactivity, such as starting or stopping

Movie Clips: movie within a movie

Flash Symbol Types

Chapter 3

Two ways to create a symbol

New Symbol on the Insert menu

Convert to Symbol on the Modify menu

“Convert to Symbol” dialog box allows you to name and specify the type of symbol

Symbol gets placed in the Library

To create an instance, drag a symbol from the Library panel to the stage

Creating a Graphic Symbol

Chapter 3

Fig. 1: Convert to Symbol Dialog Box

Chapter 3

Select from the Library and double-click, or use the Edit Symbol command

Changes made to symbols are reflected in all their associated instances

Changes made to instances do not affect their symbol

Editing a Symbol

Chapter 3

Instances can be altered in many ways

Rotate, skew, resize

Change color, brightness, transparency

Some limitations to editing an instance

Changes must be made to entire instance

Use “Break Apart” for more edibility, but note that the link to the symbol will be broken

Working with Instances

Chapter 3

Fig. 4: Newly Created Symbol in the Library Panel

Preview of g-car symbol in item

preview window

Icon indicating a graphic symbol

Chapter 3

Fig. 5: Creating an Instance

Drag instance below original

Chapter 3

Fig. 7: Symbol Editing Widow

Graphic icon indicates you are in edit symbol mode

Name of symbol appears below Timeline layers

Chapter 3

Understanding the Library

The Library provides a way to view and organize symbols

Change symbol names and properties

Add or delete symbols

Chapter 3

Title Tab

Names the movie with which the Library is associated

Options Menu

Provides access to additional features of the library

Item Preview window

Displays the selected symbol

The Library

Chapter 3

Toggle Sorting Order Icon

Allows you to reorder the lists of folders and symbols within folders

Wide Library View and Narrow Library View icon

Used to expand and collapse the Library window to display more or less of the symbol properties

The Library

Chapter 3

Name Text Box

Lists the folder and symbol names

New Symbol Icon

Displays the Create New Symbol dialog box

New Folder Icon

Allows you to create a new folder

The Library

Chapter 3

Properties Icon

Displays the Symbol Properties dialog box for the selected symbol

Delete Item Icon

Deletes the selected symbol or folder

The Library

Chapter 3

Fig. 11: The Library Panel

Chapter 3

Fig. 12: The Options Menu

Chapter 3

Button symbols provide interactivity

Any object, including Flash objects, can be turned into a Button symbol

Button symbols have four states that correspond to the use of the mouse and recognize that the user requires feedback

Up

Over

Down

Hit

Understanding Buttons

Chapter 3

Up

Represents how the button appears when the mouse pointer is not over it

Over

Represents how the button appears when the mouse pointer is over it

The Four Button States

Chapter 3

Down

How the button appears after the user clicks the mouse

Hit

Defines the area of the screen that will respond to the click

The Four Button States

Chapter 3

Fig. 18: The Four Button States

Up Over Down Hit

Chapter 3

Fig. 19: The Button Timeline

Chapter 3

Create a button symbol

Edit the button symbol

Return to the main timeline

Preview the button

Creating and Previewing Buttons

Chapter 3

Fig. 22: Specifying the Hit Area

Drag to here

Chapter 3

Understanding Actions

In a basic movie, Flash plays frames sequentially

To gain greater control, ActionScripting provides interactivity

Button presses can start/stop a Movie

Jump to a frame or scene

Chapter 3

Assigning Actions to a Button

Select the desired button on the stage

Display the Actions panel

Select the Script Assist button to display the Script Assist panel within the ActionScript panel

Chapter 3

Assigning Actions to a Button

Select the appropriate category

Select the desired action

Specify the event that triggers the action

Chapter 3

Fig. 28: Assigning Actions to Buttons

Chapter 3

Release

With the pointer inside the button Hit area, the user presses and releases the mouse button

Key Press

With the pointer inside the button Hit area, the user presses a predetermined key on the keyboard

Button Actions

Chapter 3

Button Actions

Roll Over

The user moves the pointer into the button Hit area

Drag Over

The user holds down the mouse button, moves the pointer out of the button Hit area and then back into the Hit

Using Frame Actions

Actions assigned to frames

Executed when the playhead reaches the frame

Chapter 3

Fig. 29: Selecting ActionScript 1.0 & 2.0 from the Actions Panel

Toolbox pane

Layer and frame to which action will

be applied

Click to toggle between Script

Assist off and on

Chapter 3

Fig. 32: Assigning an Event to a Button

Chapter 3

Fig.33: Specifying the Frame to Go to

Change frame number here

Chapter 3

Fig. 34: Assigning a Goto Action to a Button

Event on

Action gotoAndPlay(1)

Chapter 3

1. Create symbols and instances

2. Work with Libraries

3. Create buttons

4. Assign actions to frames and buttons

Chapter 3 Tasks

Chapter 3