View
223
Download
0
Category
Tags:
Preview:
Citation preview
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
Recommended