1. 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

2. Timeline

3. 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

4. Tool Options LOOK here as well as Properties
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

5. 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

6. Keyframe = New Instance of Object Appears
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
Select a frame in Timeline
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.

7. Motion Tween Classic Tween Shape Tween Tweened Animation
Select Keyframe, Right Click and Select Tween option
Motion Tween
Change Position, Size, Rotation, Alpha of Object
Specify object property in one frame and another value for that same property in another frame.
Classic Tween
Like motion tweens, but more complex to create
Shape Tween
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

8. 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

9. Layer needs to contain Instance of Symbol or Type
Motion Tween
Layer needs to contain Instance of Symbol or Type
and uses Property Keyframes
and can have only one object instance
Select keyframe
Insert > Motion Tween or Right click frame, select “Motion Tween”
Select frame and then select object
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

10. Create Classic Tween Classic Tween
Layer needs to contain Symbols or Groups or Type and uses Keyframes
Create Classic Tween
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
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

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

12. Properties Inspector to change text properties Static 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

13. Reshaping Text into its individual letter shapes
Select text with Arrow tool
Modify > Break Apart
Distribute Text Letters to Layers
Select all letters
Modify > Timeline > Distribute to Layers
Organize letters in Layer Folder
Insert > Timeline > Layer Folder
Select layers containing letters
Drag & drop in Layer Folder Static Text
Morph Text
Select Text and apply “Modify > Break Apart” TWICE
Apply Shape Tween !

14. Symbols = Reusable Elements in Document
Symbols and Instances
Symbols = Reusable Elements in Document
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.
Create Instance
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.
Symbols Reduce File Size
Flash stores symbol in the file only once  greatly reduces file size

15. Symbol : Behavior Types
Graphic Symbols for static images
Button Symbols to create interactive buttons
Movie Clip Symbols 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

16. 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

17. Create Symbol and Edit Instance
Create Symbol from Object on Stage
Select Object on Stage
Drag & Drop into Library Window
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
Choose Insert > New Symbol
Name symbol
Choose Type : Graphic, Button, or Movie Clip.
Flash adds symbol to Library and switches to symbol-editing mode.
Create Symbol Content
Use Timeline, draw with drawing tools etc.
Edit Instance of Symbol
Select instance on Stage
In Properties change Size, Color, Transparency …

18. Editing Symbol versus Editing Instance
Editing Symbol  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.
Editing Instances
Edit > Edit Document
Flash Document consists of
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

19. Button = Four-Frame interactive movie clips
Creating Button
Button = Four-Frame 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.
Make Button Interactive in a Movie
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.

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

21. 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

22. 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 : on (release) { getURL (URL_as_string, “_self”); } 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

23. 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

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

25. Step 0 – Download files, Launch Flash, Create Document
Download Files – Unit 2
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 = Dimensions = 100 x Background color = White
Use scrollbars and Magnification tool to see Stage at sufficient size
Using Grid, Rulers and Guides
Rulers  View > Rulers
Guides  View > Guides > Show Guides

26. Step 1 – Create Button Symbol – UP state
Make sure that “Library” is visible (Window > Library)
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

27. Step 1 (cont.) – Create Button Symbol – UP state
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

28. Step 1 (cont.) – Create Button Symbol – OVER & DOWN states
Make sure that “Library” is visible  Window > Library
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
Modify OVER frame
Select “Text” layer
Select Text tool, select text and bold it (make sure to center text)
Modify DOWN frame
Select “Shape” layer and change Fill Gradient Color = Green
Select Text tool, select text and change its color

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

30. Recap – Create Simple Text Button
Insert > New Symbol
Select Type = “Button”
Create “UP” State
Insert Keyframe “OVER” and Modify
Insert Keyframe “DOWN” and Modify
Insert Keyframe “HIT”

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

32. Step 3 – Add Hyperlink to Interactive Button – ActionScript 3.0
Select “Home Button” 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

33. Step 3 – Add Hyperlink to Interactive Button – ActionScript 2.0
Select “Home Button” 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 : on (release) { getURL (URL_as_string, “_self”); } 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

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