Flash Concepts and Demos - Overview
Recap
Unit 2
– Buttons (Simple Text and Animated Button)
– Gradient Tool
– ActionScript (stop, getURL)
– Embed Flash Movie in Web Page Adding & Editing Text

Timeline

Layers
Layers = Stack of “transparent sheets of acetate”
– Insert > Timeline > Layer or Click “Insert Layer” icon in Timeline
– Drag & Drop Layer to change its position in stack
– Name (double-click text), Hide, Lock Folder
Layer Folder = Organize Layers
– Insert > Timeline > Layer Folder or Click “Insert Layer Folder” icon in Timeline
Modify Layer
– Select layer to make it active (only one layer can be active)
– Pencil icon = Layer is active
Guide Layers
Make drawing and editing easier and guide motion
Mask Layers
Help to create sophisticated effects

Tools
Arrow (Selection) tool and Modifiers : snap to, smooth, straight
– Reshaping lines and shapes  Reshaping pointer
Free Transform tool and its modifiers : scale, rotate, skew etc.
– Transform dialog panel: Modify > Transform
Lasso tool and its modifiers = polygon etc.
Text tool
Circle and Square tools and Modifiers: Object Drawing on / off
– Stroke and Fill properties of graphic in Property Inspector
Pencil tool and Modifiers = straight, smooth etc.
Paint Bucket tool and Modifiers = fill large gaps etc.
– Apply Gradient and use Fill Transform tool
Eraser tool
Zoom tool and Modifiers: zoom in, zoom out (or use Alt-click)
Line Color
Fill Color
Tool Options LOOK here as well as Properties

Graphic Objects
Graphic Objects = Items on Stage
– Move, copy, delete, transform, stack, align, and group graphic objects.
– Link graphic object to a URL.
– Keep in mind: modifying lines and shapes can alter other lines and shapes on the same layer if Object Drawing is not selected
Must first Select Object to Modify it

Keyframes
Keyframe = New Instance of Object Appears
Property Keyframe = Define Object’s Property Change
Use Keyframes to Create Change in Animation
• Flash can tween, or fill in, frames between keyframes
Create Keyframe
1. Select a frame in Timeline
2. Insert > Timeline > Keyframe
Frame Management
– Delete a frame, keyframe, or frame sequence,
– Select and Edit > Timeline > Remove Frame or Right-Click (Windows)
– Extend duration of Keyframe
– Select, hold and then drag keyframe to new final frame
– Change length of a tweened sequence, drag the beginning or ending keyframe left or right.

Tweened Animation
Select Keyframe, Right Click and Select Tween option
– Change Position
,
Size
,
Rotation, Alpha of Object
– Specify object property in one frame and another value for that same property in another frame.
– Like motion tweens, but more complex to create
– Change Shape
If you want Flash to tween the movement of more than one object, each must be on a separate layer .
– Select elements
– Use Modify > Timeline > Distribute to Layers

Animations: Representations in Timeline
Motion Tween
– Black dot at beginning keyframe; intermediate tweened frames have black arrow with a light-blue background.
Classic Tween
– Black dot at beginning keyframe; intermediate frames have a black arrow with a blue background.
Shape Tween
– Black dot at beginning keyframe; intermediate frames have a black arrow with a light-green background.
Dashed line =
– Tween is broken or incomplete
Cause?
– Final keyframe missing
– Classic Tween: does NOT contain symbol, groups or type
– Shape Tween: contains symbol, groups or type

Motion Tween
Layer needs to contain Instance of Symbol or Type and uses Property Keyframes and can have only one object instance
1. Select keyframe
2. Insert > Motion Tween or
Right click frame, select “Motion Tween”
3. Select frame and then select object
4. Move to new location (notice the motion trail) and/or
In Properties panel, change object property
Repeat steps 3 and 4
To Motion Tween a Bitmap or Color of Type
• Bitmap / Type needs to be converted into Symbol
• Modify > Convert to

Classic Tween
Layer needs to contain Symbols or Groups or Type and uses Keyframes
a) Create first keyframe
– Insert > Classic Tween or
Right click frame, select “Classic Tween”
Automatically turns content into Graphic Symbol
– In last frame, create keyframe and move object to new location b) Create starting and ending keyframes
– Select two keyframes and frames in between
– Insert > Classic Tween or
Right click frame, select “Classic Tween”
Automatically turns start and end keyframes into symbols

Shape Tween
Similar to Morphing
– One shape appears to change into another shape over time
Use Ungrouped Graphics to Tween Shapes
1. Create or select first keyframe
2. Create or place artwork in first keyframe
3. Create second keyframe and select it
1. Select artwork in second keyframe
2. Modify shape, color, or position of artwork
(e.g. use “Free Transform” tool)
4. Select first keyframe in Timeline
1. Insert > Shape Tween or
Right click frame, select “Shape Tween”
2. Properties panel: select option from “Blend” menu: a) Distributive: intermediate shapes smoother and more irregular.
b) Angular: preserves apparent corners and straight lines.

Text = Type
Text tool in Toolbox
Properties Inspector to change text properties
Static Text type
– Appearance determined when you author movie.
Dynamic Text type
– Updated text, such as sports scores or stock quotes.
Input Text fields type
– Users enter text for forms, surveys, or other purposes.
Transform Text
– Rotating, scaling, skewing, and flipping it and still edit characters
Horizontal Text Linked to URLs
– Select text and enter URL in Properties Inspector : Options

Reshaping Text
– Select text with Arrow tool
– Modify > Break Apart
– Select all letters
– Modify > Timeline > Distribute to Layers
– Insert > Timeline > Layer Folder
– Select layers containing letters
– Drag & drop in Layer Folder Static Text
– Select Text and apply “Modify > Break Apart” TWICE
– Apply Shape Tween !

Symbols and Instances
– Symbols = graphics, buttons, video clips, sound files, or fonts
– Symbol stored in file's library
– Use symbols for every element that appears more than once.
– Place symbol on Stage, you create instance of that symbol .
– Modify properties of instance without affecting master symbol
– Edit master symbol to change all instances.
– Flash stores symbol in the file only once  greatly reduces file size

Symbol : Behavior Types
for static images
to create interactive buttons
to create reusable pieces of animation
Insert > New Symbol
Convert Element to Symbol
– Insert > Convert to Symbol
– Drag the selection to the Library panel
– Convert to Symbol from the context menu

Library
Window > Library
Library stores
– Symbols created in Flash,
– Imported video clips, sound clips, bitmaps, and vector artwork
Can open library of any Flash file
Window > Common Libraries
Flash includes sample libraries
– Buttons, classes, sounds

Create Symbol and Edit Instance
Create Symbol from Object on Stage
1. Select Object on Stage
2. Drag & Drop into Library Window
3. Convert to Symbol dialog box appears
– Select Type = Movie Clip, Button or Graphic
– Object on Stage now an instance of the symbol
Create New Empty Symbol
Make sure nothing is selected on Stage
1. Choose Insert > New Symbol
– Name symbol
– Choose Type : Graphic, Button, or Movie Clip.
Flash adds symbol to Library and switches to symbol-editing mode.
2. Create Symbol Content
– Use Timeline, draw with drawing tools etc.
Edit Instance of Symbol
– Select instance on Stage
– In Properties change Size, Color, Transparency …

Editing Symbol versus Editing Instance
 Rest of Document disappears and only symbol appears
– Edit > Edit Symbols
When finished creating symbol content, return to movie-editing mode:
– Click Back button at the left side of information bar above Stage.
– Choose Edit > Edit Document.
– Click the scene name in the information bar above the Stage.
– Edit > Edit Document
– Document’s Main Timeline
– Edit > Edit Document takes you to Main Timeline
– Library that contains Symbols that have their own timeline
– Edit > Edit Symbols takes you to the timeline of a symbol
– Double clicking on instance of symbol takes you to the timeline of symbol

Creating Button
interactive movie clips
– Select button behavior for symbol
– Flash creates Timeline with four frames.
– First three frames display the button's three possible states:
UP, OVER, DOWN
– Fourth frame defines the active area of button
– Timeline doesn't actually play, it simply reacts to pointer movement and actions by jumping to the appropriate frame.
– Place instance of button symbol on Stage
– Assign actions to the instance on Stage.
Actions must be assigned to instance in Main Timeline, not to frames in button's Timeline.

Creating Buttons
Make sure nothing selected:
1.
Insert > New Symbol
2.
New Symbol dialog box
1. Enter name button symbol,
2. Type = Button
Flash switches to symbol-editing mode
3.
UP State: use drawing tool etc.
4.
OVER State
1. Insert > Keyframe
2. Change button image for Over state
5.
Repeat Step 4 for DOWN State
6.
Hit Frame = Define Click Area
1. Insert > Keyframe
2. Solid area large enough to encompass
UP, DOWN, and OVER frames.
No Hit Frame, UP state used
7.
Edit > Edit Document to finish
8. Drag Button Symbol out of Library panel to create instance on stage

Button – Add Hyperlink to Interactive Button ActionScript 3.0
Select Button instance on Stage
(make sure you have the button selected and not the frame that contains button instance).
Assign Instance Name in Properties panel
Open “Actions” Window via “Window > Actions”
Open “Code Snippets” Window via “Window > Code Snippets”
Select Actions in left panel
Double-click on “Click to Go to Web Page” and code will be added to frame in which selected and named instance is located
Customize Code: specify URL
Test Movie
Export Button
– File > Export Movie
– Saves it as SWF file, which you can import in Dreamweaver

Button – Add Hyperlink to Interactive Button ActionScript 2.0
Select Button instance on Stage
(make sure you have the button selected and not the frame that contains button instance).
Open “Actions” Window via “Window > Actions”
Paste this code into Actions Window :
This attaches action to button using ActionScript.
 Important: Flash File (ActionScript 2.0) !
Test Movie
Export Button
– File > Export Movie
– Saves it as SWF file, which you can import in Dreamweaver

Enabling, Editing, and Testing Buttons
By default, Flash keeps buttons disabled as you create them,
– Easier to select and work with them
– When button is disabled, clicking button selects it.
Button = Enabled  it responds to mouse events
Best to Disable buttons as you work
– Enable buttons to quickly test their behavior.
Control > Enable Simple Buttons
Select Enabled Button
– Use the Arrow tool to drag a selection rectangle around the button.
Move Enabled Button
– Select the button, as described above
– Use the arrow keys to move the button
Test Button
– Control > Enable Simple Buttons.
– Move the pointer over the enabled button to test it

Flash Demonstration – Unit 2
Buttons
– Simple Text Button
– Animated Button
Gradient Tool
ActionScript
– stop
– getURL
Embed Flash Movie in Web Page

Step 0 – Download files, Launch Flash, Create Document
Download Files – Unit 2 http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoVis_ITI/videodemosFlash.html
Launch Flash
Create Flash Document and Set its Properties
– File > New : General: Flash File
(CS4+: ActionScript 2.0; CC : ActionScript 3.0
)
– Modify > Document or use Property Inspector
– Frame Rate = 12
Dimensions = 100 x 30
Background color = White
– Use scrollbars and Magnification tool to see Stage at sufficient size
Using Grid, Rulers and Guides
– Rulers 
– Guides 
View > Rulers
View > Guides > Show Guides

Step 1 – Create Button Symbol – UP state
Make sure that “Library” is visible (Window > Library)
1. Insert > New Symbol
– “Create New Symbol” dialog: select “Button”
– Name it “Home Button”
– Notice that button appears in list of Library symbols
– Flash switches to “Edit Symbol” mode and four-frame “button view” appears
– Name Layer 1 = “Shape” in Symbol View

Step 1
(cont.)
– Create Button Symbol – UP state
2. Select UP frame in Timeline
– Select Rectangle tool
– Use Tool “Options” to specify corner radius
– Select Stroke Color = Black and Fill Color = Blue in Property
Inspector
– Draw Rectangle
– Create Vertical and Horizontal Guides and center rectangle
– Select Pointer Tool to select fill of rectangle
– Properties Panel: select Fill color and specify Blue Sphere effect
– Select Gradient Transform tool to change orientation, spread and shape of gradient
– Insert New Layer using “Insert > Timeline > Layer” – name it “Text”
– Select Text tool and add white “Home” text and center it on button
– Create Guide for baseline of text

Step 1
(cont.)
– Create Button Symbol – OVER & DOWN states
Make sure that “Library” is visible  Window > Library
3. Create Keyframes in OVER, DOWN and HIT frames
– Select Over frame in both layers and create Keyframe
(use Insert > Timeline > Keyframe or Right-Click Frame)
– Select Down frame and both layers and create Keyframe
– Select HIT frame and both layers and create Keyframe
4. Modify OVER frame
– Select “Text” layer
– Select Text tool, select text and bold it (make sure to center text)
5. Modify DOWN frame
– Select “Shape” layer and change Fill Gradient Color = Green
– Select “Text” layer
– Select Text tool, select text and change its color

Step 1
(cont.)
– Test & Export Interactive Button
1. Switch to “Edit Document” Mode
2. Drag & Drag “Home Button” onto Stage
3. Resize Button to Fit Stage
– Select Free Transform tool, select button and resize to fill Stage
4. Control > Enable Simple Buttons
– Place cursor over and click button
5. Export Button
– File > Export Movie
– Saves it as SWF file

Recap – Create Simple Text Button
1. Insert > New Symbol
2. Select Type = “Button”
3. Create “UP” State
4. Insert Keyframe “OVER” and Modify
5. Insert Keyframe “DOWN” and Modify
6. Insert Keyframe “HIT”

Step 2 – Create Animated Button
1. Import Images
2. Convert Images to Graphic Symbols
 Insert > Convert to Symbol
3. Create Movie Clip using “Insert > New Symbol”
4. Insert Graphic Symbol and Animate
5. Create Button
6. Insert Movie Clip in “Over” State
7. Specify “Hit” area for Button by creating rectangle that defines “hotspot”
8. Make sure Animation only plays once
 Select end keyframe in Animation MovieClip
 Open Actions Window: Window > Actions
 Type ActionScript “stop ();” in Actions Window

Step 3 – Add Hyperlink to Interactive Button – ActionScript 3.0
1. Select “Home Button” on Stage
(make sure you have the button selected and not the frame that contains button instance).
2. Assign Instance Name in Properties panel
3. Open “Actions” Window via “Window > Actions”
4. Open “Code Snippets” Window via “Window > Code
Snippets”
Select Actions in left panel
Double-click on “Click to Go to Web Page” and code will be added to frame in which selected and named instance is located
Customize Code: specify URL
5. Test Movie
6. Export Button
– File > Export Movie
– Saves it as SWF file, which you can import in Dreamweaver

Step 3 – Add Hyperlink to Interactive Button – ActionScript 2.0
1. Select “Home Button” on Stage
(make sure you have the button selected and not the frame that contains button instance).
2. Open “Actions” Window via “Window > Actions”
3. Paste this code into Actions Window :
This attaches action to button using ActionScript.
 Important: Flash File (ActionScript 2.0) !
4. Test Movie
5. Export Button
– File > Export Movie
– Saves it as SWF file, which you can import in Dreamweaver

Step 4 – Embed Flash Movie in Web Page
1. Launch Dreamweaver
2. Create Layout with nested AP Elements
3. Place cursor in AP Element that will contain Flash Movie
4. Embed in Dreamweaver
– Insert > Media > SWF and navigate to SWF file to embed