1. Flash Interface, Commands and Functions

2. Topics What is Flash? What can you do with it?
Simple animation
Complex interactive web application, such as an online store.
Starting up Flash -> In the Dock
Palettes: Library*, Color Mixer, Behavior (ActionScript)….

3. Stage: The rectangular area where you place graphics, text boxes, buttons, imported graphics or video clips, and so on when creating Flash documents.
Workspace: The gray area around the stage. Does NOT appear in your final project, but can be used to “store” your objects until you are ready to use them.
Modifying the STAGE:
Menu Bar --> “Modify” --> “Document”
Change ‘width’, ‘height’, & ‘color’

4. Property Inspector: Timeline:
Allows you to change different aspects of the object you just drew. Color, Style, Width of stroke / line…
Timeline:
The Timeline organizes and controls a document's content / objects over time. The major components of the Timeline are layers, frames, and the playhead.

5. Timeline (continued) Layers:
It’s like invisible sheets of paper stacked on top of each other.
Each layer can have many objects on it.
Frames:
One section (rectangles) in the timeline.
Adding frames increases the amount of time the object is viewed.
Extends the contents of the last keyframe.

6. Keyframes: Blank keyframes:
A frame where you define changes in the animation.
Position, shape, color…
You will see a black dot in the frame (rectangle).
Creating another keyframe will copy the objects from the previous keyframe.
Blank keyframes:
Creates a keyframe without the previous objects on the stage.
An empty keyframe.

7. Playhead:
The RED rectangle above the frames; it moves through the Timeline to indicate the current frame displayed on the Stage.
Shows you the objects at that particular time.
Frame Rate:
determines the length and speed of a movie.
The lower the frame rate, the less smooth / slower the animation.
The higher the frame rate, the smoother / faster the animation.

8. Tool box Palette: Text tool Selection Tool (Black Arrow):
Use Properties Palette to change color, size,and font
Selection Tool (Black Arrow):
Select parts or all of an object.
Select text and move it to another position on the stage.

9. Rectangle Tool: Oval Tool: Makes rectangles and squares
Makes ovals and Circles
Press and hold down shift.
Create 5 ovals and 5 circles
Save file as “oval tool exercise”

10. Sub-Selection Arrow (white arrow):
Allows you to change the shape of the object by moving their points/dots.
Lasso Tool:
Allows you to select all or parts of an object, using curves.

11. Line Tool: Pen Tool: Allows you to create lines at an angle
Use Shift to create perfect horizontal or vertical lines.
Pen Tool:
Allows you to make perfect curves.
Uses the “Click, Move and Click” method

12. Pencil Tool: Paint Brush Tool: Allows you to create free-form lines.
Usually they are bumpy, imperfect, uncontrolled.
Paint Brush Tool:
Similar to Pencil tool. Creates brush effect.
You can change the options of the brush:
Bottom section of the Tool Box: Square, circle,linear, size of brush

13. Free Transform Tool: Paint Bucket Tool:
You can rotate, skew, scale, or distort the objects / shapes / images.
Paint Bucket Tool:
Fills enclosed areas with color. It can fill empty areas and change the color of already painted areas.

14. Hand Tool: Zoom Tool: Eraser Tool:
Lets you move the Stage to change the view without having to change the magnification.
Zoom Tool:
To view the entire Stage on the screen, or to view a particular area of your drawing at high magnification.
Eraser Tool:
Erases Flash shapes and lines. Will NOT erase imported images.

15. Flash Development Environment
Toolbox
Layers
Timelines
Other
panels
"Stage"
Properties
panel

16. Important Components Stage: it is where the action takes place Layers
Be sure to set the stage dimensions before you do any development
This determines the animation's size on your Web page
Layers
Allow you to separate and stack objects
All layers cover entire the stage surface
Like transparent pieces of paper stacked on each other
Animation objects move within a layer

17. Important Components Timelines Every layer has a separate timeline
Timeline is broken into frames that correspond to different times in the animation
When you select a frame, the stage shows what will appear in that layer at that time
The playhead shows the current frame that is playing

18. Creating a Flash Movie Design the movie on paper Determine the size
Height and width in pixels
Create the Flash file and configure the stage properties
Size
Background color

19. Designing a Flash Movie
Design layers
Items that stay static throughout the movie go in a Background layer
Items that have independent movements each go in their own layer
Sounds go in a separate layer
Layer analysis:
Moon Over Lake Nanagook

20. Adding a New Layer Click Insert Layer button in the Timeline panel
Rename the layer (double click then type new name)
Add the content to the new layer
Layer order determines how items are stacked on each other in movie

21. Working With Layers Hide layer Lock layer Active layer Insert layer
Delete layer

22. Drawing With Flash Make sure to select the correct layer
Draw the item and position it on the stage
To select an item and its outline, double-click it...
Configure its properties
Similar to Fireworks

23. Timelines Consist of layers divided into frames
Frame: location and length of time that a symbol or graphic in a layer appears
Default: 12 ms/frame
An item won't appear in a movie at a particular time unless its layer has a frame at that time

24. Playhead
Indicates the current frame displaying on the stage
Keyframe
Frame that defines an object at a given point in time
Used to define animation starting and ending points
Empty circle – keyframe with no content
Filled circle – keyframe with content
When you make a new layer, it automatically has a keyframe in Frame 1

25. Timelines Frames Playhead Keyframe Colored area and arrow
indicates animation

26. Creating Flash Animation
Types of animation:
Shape: uses shapes you create in Flash
Can change shape position and/or properties
Creates straight-line animation between a start position and an end position
Can only be used with vector images

27. Motion: uses symbols you create or import into Flash (bitmaps)
Can create straight-line animation between a start position and an end position
Can change the position or rotation of a symbol
Can "kind of" make a symbol morph into a different symbol

28. Creating a Shape Animation
Create a new layer
Draw the shape at the start position
Create a keyframe at the start time
Create a keyframe at the end time
With the end keyframe selected, modify the shape to its end size, position, & properties
Select any frame between the beginning and ending keyframes and then create a "tween"

29. Create the
layer
Create the
keyframes
Create the
initial shape
With the ending
keyframe
selected, create
the final shape
Create the
tween

30. Creating a Motion Tween
Same as shape tweening, but uses a symbol rather than a shape
Allows you to use bitmaps
Can be moved, resized, rotated, morphed to a different symbol

31. Symbols Symbol: reusable object Save an animation image as a symbols
This saves file space because the symbol is only saved once
Types of symbols:
Graphics (can't be shape tweened)
Movie clips (self-contained animation within a movie)
Buttons (Up, Down, Over,OverWhileDown states)

32. Saving Symbols Create a graphic in Flash then convert it to a symbol
Right-click the graphic – Convert to symbol
Import an existing graphic into a Flash symbol library
File – Import – Import to Library
To view your symbol library: Window - Library

33. Stopping an Animation
By default, animations play continuously when published
To configure an animation to play once:
Select the frame in which you want the animation to stop, right-click, click Actions
In the ActionScript window, type stop();

34. Stopping an Animation
Command
Frame number
Layer