Flash Interface, Commands and Functions

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)….

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’

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.

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.

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.

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.

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.

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”

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.

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

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

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.

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.

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

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

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

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

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

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

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

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

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

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

Timelines Frames Playhead Keyframe Colored area and arrow indicates animation

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

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

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"

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

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

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)

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

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();

Stopping an Animation Command Frame number Layer