1

FLASH• Creates entire websites• Creates animations• Creates games and simulations

2

STAGE•Contains all the objects

that are part of the movie that will be seen by viewers.

3

TIMELINE•Organize and control the

movie’s contents by specifying when each object appears on the Stage.

4

FRAME• Images are contained in Frames• When movie is played, a

playhead moves from frame to frame on the Timeline, causing the contents of each frame to appear on Stage in sequence

5

Panels• Used to view, organize and

modify objects and features in a movie• Most common: Tools, Properties

and Library Panels

6

FLASH FILES• .fla extension – Flash Files• .swf extension – Flash Player

Allows movie to be viewed if viewer does not have the Flash program. Cannot be edited

7

PREVIEWING MOVIE• Press enter key to start or stop movie• To rewind: Shift ,• Step back one Frame: ,• Loop Playback: – On control menu– Continues playing repeatedly

• Window menu/Toolbar command/Controller• Control menu/Test movie• Period key moves one frame forward• Comma key moves one frame backwards

8

MOTION TWEEN

• Object moving around screen1. Select the Object2. Select Motion Tween on the Insert Menu

1. This process changes Object into a Symbol1. Can reuse Symbols

3. Final step is to select ending frame and drage the Object to another location

4. Identified on Timeline by a blue color

9

TWEEN SPAN

• Equal to one second• EX.: 12 Frames per second• This can be changed

10

MOTION PATH

• Represents the path the object takes from the beginning frame to the ending frame.• Dotted Line

11

SCENES

• When you create a movie Scene 1 appears above the Stage

• Can add more Scenes• A way of organizing movies• Each Scene has its own Timeline• Click Insert Menu to add new Scenes

12

PUBLISHING A MOVIE

• File/Publish Movie– Creates two files• HTML files• .html • Contains the code that the browser interprets to

display the movie on the web• Flash Player file - .swf file

13

STEPS FOR PLANNING WEBSITE

1. Stating the Purpose (Goals)2. Identifying the Target Audience3. Determining the Treatment (What is the look and

feel) 1. Tone – humorous, serious, light, heavy, formal2. Approach – How much direction will be provided to the

user?

4. Developing the Specifications and Stroryboard1. Specifications state what will be included in each screen2. Storyboard shows the layout of the various screens

14

INTERACTIVE DESIGN GUIDELINES

•Make it simple•Build consistency in the

navigation scheme•Provide feedback•Give the user control

15

FLASH WORKFLOW PROCESS

1. Create and/or acquire the elements to be used

2. Arrange the elements and create the animations

3. Apply special effect4. Create the interactivity

1. Action Script: allows you to develop programming code to control how the media elements behave

16

BITMAP GRAPHICS

• Represents the image as an array of dots called Pixels

• When you enlarge the image you get decreased quality– Number of pixels stay the same

17

VECTOR GRAPHICS

• Represent the image using lines and curves• You can resize without loosing

quality

18

TOOL OPTIONS

•Appears at the bottom of the tools panel and changes with different tool selections

19

TOOLS FOR CREATING VECTOR GRAPHICS

• Oval• Rectangle• Pencil• Brush• Line• Pen

20

PEN TOOL

• To close an object, be sure to re-click the first anchor point as your last selection

21

•Pencile Tool displays the stroke color •Brush Tool displays the fill

color

22

• If you need to redo the drawing use the Selection Tool to draw a marquee around the drawing, then delete the selection

23

SELECTING

• Select fill – click the fill• Select stroke – click the stroke• Select fill and stroke – double click object or

draw marquee around it• Select part – drag marquee around that area• Select multiple objects – press shift and hold

shift then click each item

24

LASSO TOOL

• Provides more flexibility than the Selection Tool

• Can use in a free hand manner to draw any shape that then selects the object within the shape

25

2 DRAWING MODEL MODES

1. Merge Drawing Model1. Stroke and Fill are separate2. You can select separately

2. Object Drawing Model1. Stroke and Fill are combined2. Can break apart by clicking the Modify

Menu/Break Apart

26

GRADIENTS

• A color fill that makes a gradual transition from one color to another• The position of the Paint Bucket

Tool over the object determines the direction of the gradient fill.

27

DISTORT & ENVELOPE OPTIONS

• Reshapes Objects on the Transform Command• On the Transform command• Distort Option: Drag one corner of object

without affecting the other corners of the object

• Envelope Option: More than eight handles to allow more precise distortions

• Object is its original size when the option Undo Scale in the Edit Menu is no longer available

28

• Selection Tool: used to select the text block• Text Tool: used to selecct

and edit the text within the text block

29

FILTERS

• You can copy and paste a filter from one object to another using the clipboard icon in the Filters area of the Properties panel

30

LAYERS

• NORMAL – Default layer type. All objects appear in the movie

• MASK – Hides and reveals portions of another layer• MASKED – Contains the objects that are hidden and

revealed by the Masked Layer• FOLDER – Can contain other layers• GUIDE – (Standard and Motion) Aligns Objects

– Standard: Serves as a reference point for positioning objects on the Stage

– Motion: Creates a path for animated objects to follow

31

FOLDERS

• Organizes layers• Select the layer that is to become a Folder

Layer• Layers Properties dialog box to specify a

Folder Layer• Drag other Layers from the Timeline into that

Folder• Click the Folder Layer triangle to open it

32

SYMBOLS

• Original drawing stored in the Library Panel• Drag the Symbol to the Stage which creates an

INSTANCE• Instances reduces the movie file size• Flash saves a Link to the Instance not the

Instance itself

33

3 CATAGORIES OF SYMBOLS

1. Graphic – can reuse a single image and make changes in each instance of the image

2. Button – can create buttons for interactivity, such as, starting or stopping a movie

3. Movie Clip – creates complex animation because you can create a movie within a movie

34

Symbols

• Insert Menu/New Symbol• Modify Menu/Convert to Symbol• File names ex: g_name (graphics); b_name

(buttons); m_name (movie) – To help you remember what Symbol they are

35

Editing Instances

• Use Selection Tool to drag marquee around the instance

• Click the object once to select• DO NOT double-click the instance when it is

on the Stage because you will open an edit window that is used to edit the Symbol NOT the Instance

36

EDITITNG SYMBOL

• Double click the Icon which is before the Symbol name in the Library Panel

• Edit Menu/Edit Symbol• New screen will appear with Symbol Name

and Icon showing you are in the Edit Window• Click Scene 1 at the top left to leave Edit

Window

37

LIBRARY PANEL

• Contains the Symbols and other items, such as, imported graphics, movie clips, and sounds

• Provides a way to organize, change name, displays item properties, and add and delete items

38

BUTTONS

• Actions occurs• Four States– Up: how button will appear when mouse pointer is

not over it– Over: how button appears when mouse pointer is

over it– Down: how button appears after the user clicks the

mouse– Hit: defines the area of the screen that will respond

to the click.

39

BUTTONS

• Control Menu/Enable Simple Buttons– To preview

• New Buttons creates New Timelines• Control Menu/Enable Simple Buttons– Turns off the command

40

CONTROL MENU/ENABLE SIMPLE BUTTONS

• Allows you to test buttons on the Stage without viewing the movie in the Flash Player Window

• Pointing to the Signal Button on the Stage– Pointer changes to a hand which means object is

clickable– The effect changes to the effect selected for Over State

• Pressing mouse on Signal Button– Effect selected for Down State

• Moving mouse away – Effect selected for Up State

41

ACTION SCRIPT 2.0

• You do not need to know scripting language• Action Panel• Allows you to assign basic actions to frames

and objects, such as buttons

42

PROCESS FOR ASSIGNING ACTIONS TO BUTTONS

• Select the Button on the Stage• Select the Script Assist Button to display the

Script Assist Panel• Click the Add a new item to the script icon to

display a list of Action Catagories• Select the appropriate category from drop-

down list• Select action• Specify the event that triggers the action

43

ACTION PANEL

• Two Panels– Left Pane (Toolbox Pane) uses folders to display

the Action categories– Right Pane (Script Pane) used with the Script assist

feature and displays the Action Script

44

FRAME LABELS

• Select the Frame• Use Properties Panel to specify a name• Use the name in the Action Script Code

instead of the Frame Number• Buttons are often used to move the playhead

to a specific location on the Timeline

45

•F6 or INSERT/KEYFRAME

46

MOTION TWEENS

• Specify the position of the object in the beginning and ending frames.

• Selection Tool/Select Object• Insert Menu/Motion Tween• Number of frames in the span equals the

frames per second for the movie• Drag object to another position• Drag the tween span to the ending frame

47

TWEEN SPANS

• The onion Skin feature is enabled so that outlines of the objects are displayed for each frame of the animation

• The blue highlighted area is called the tween or motion span

• By default the number of frames in a tween span is equal to the number of frames in one second of the movie

48

THINGS TO REMEMBER

• Only one object on the Stage can be animated in each tween span

• You can have multiple motion tween animations playing at the same time, if they are on different layers

• A motion tween is, in essence, and object animation because while several changes can be made in the object’s properties, only one object is animated for each motion tween

49

TYPES OF OBJECTS THAT CAN BE TWEENED

• GRAPHIC• BUTTON• MOVIE CLIP SYMBOLS• TEXT FIELDS

50

REMOVING MOTION TWEEN

• Click the tween span on the Timline• Insert Menu/Remove Tween

51

CLASSIC TWEEN

• More complex than Motion Tween but similar

• Can have more than one Instance of the Object over the Tween Span

52

CLASSIC TWEEN

1. Select starting Frame2. Insert a Keyframe3. Insert a Keyframe at the ending Frame and

click anywhere on the layer between the Keyframes

4. Insert Menu/Classic Tween5. Sect the ending Frame and move the Object

to the position you want it to be in the ending Frame

53

MOTION GUIDE

• Path drawn which create a line similar to the Path in a Motion Tween

• Drawn on the Motion Guide Layer• Classic Tween animation is placed on its own

layer beneath the Motion Guide Layer

54

MOTION GUIDE

1. Create Classic Tween Animation2. Insert a New Layer above the Classic Tween Animation Layer3. Change Layers Property to Guide Layer4. Drage Classic Tween Animation Layer to the Guide Layer so that

it indents5. Draw a Path using the Pen, Pencil, Line, Circle, Rectangle, or

Brush Tools6. Attach Object to Path by clicking the first Keyframe of the Layer

that contains the animation, and then dragging the Object by its transformation point to the beginning of the Path.

7. Select the End Keyframe and then repeat the steps to attach the object to the End of the Path

55

TRANSFORMATION POINT

• Each Symbol has a Transformation Point in the form of a Circle– Used to orient the Object when it is being

animated– Default Transformation Point is the Center of the

Circle

56

FRAME BY FRAME ANIMATION

• Called Frame Animation• Useful when you want to change individual

parts of an image• Created by specifying the Object that is to

appear in each Frame of a sequence of Frames

57

FRAME ANIMATIONTHINGS TO CONSIDER

• The number of different images– Greater the number of images the less change you need to

make in each image and more realistic• The number of Frames in which each image will appear• Movie Rate– Frame Rate below 10 may appear jerky– Frame Rate above 30 may appear blurred

• Each Frame may need to be a Keyframe– Exception is when you want an object displayed in several

frames before it changes

58

CREATING A FRAME-BY-FRAME ANIMATION

• Select the Frame on the Layer where you want it to begin

• Insert a Keyframe and place Object on Stage• Select Frame where you want the change to

occur• Insert a Keyframe• Change the Object or add new Object

59

ONION SKIN FEATURE

• Allows you to view an outline of the Object in any number of Frames

• Helps in positioning Objects on Stage

60

CLASSIC TWEENS vs MOTION TWEEN

• MOTION TWEEN: Can alter the Ease Value in the Properties so that an object starts out fast and ends slow

• CLASSIC TWEEN: Can alter the Ease Value to do the same but then speeds up again– Can do this because it consists of more than one

object over the Tween Span

61

BLANK KEYFRAME

• Insert/Timeline/Blank Keyframe• Keeps the object in the previous frame from

appearing in the current frame

62

EDIT MULTIPLE FRAMES BUTTON

• On the Timeline Status Bar (at the bottom)• Allows you to view the contents of more than

one Frame • Allows you to align two objects to be

Morphed

63

SHAPE TWEEN

• An animation change the shape of an object to any form you desire

• Can include two objects with two different shapes

64

MORPHING EFFECT

• Involves changing one object into another– EX.: Turn a robot into a man

• First Frame: displays the first object• Last Frame: displays the second object• In-Between Frames: display the different

shapes that are created as the first object changes into the second object

65

SHAPE TWEENING

• Applied only to editable graphics• Applying to Instances, Groups, Symbols, Text Blocks

or Bitmaps– Must break apart the object to make it editable

• Modify Menu/Break Apart

• You can Shape Tween more than one object at a time as long as all the objects are on the same layer

• Move objects in a straight line• Ease Value in Properties causes acceleration or

decleration

66

EASE VALUE

• Properties• -100 Ease Value– Object starts out slow and speeds up

• 100 Ease Value– Object starts out fast and slows up

67

MOVIE CLIP SYMBOL

• A movie within a movie• Each Movie Clip has its own Timeline

– Independent of the Main Timeline• Continues in an endless loop even if the Main Timeline

stops– EX. – wheels on a car rtoating while the car is moving across

the screen • Helps to organize the different reusable pieces of a

movie and provide for smaller movie file sizes• Cannot be viewed by playing the movie on the Main

Timeline

68

PASTE FRAMES (4-44)

• Click Frame 1/Play Movie already created• Select Frames 1 to 9 by holding Shift Key• Edit/Timeline/Cut Frames• Click Frame 71• Edit/Timeline/Paste Frames• Click Frame 1/Play Movie

69

ANIMATED TEXT (4-45)

• New Layer• Click Frame 1• Type Text off Stage Far Left• Selection Tool• Insert/Motion Tween• Click Frame 20• Drag Text Block to Center of Stage• Click Frame 1 and Control/Test Movie

70

MAKE A TEXT BLOCK INTO A BUTTON(4-48)

• New Layer, Insert/Keyframe• Create Text, Select Text• Modify Menu/Convert to Symbol (type-Button)• Double Click Text Block to Edit• Over, Down, & Hit Frame/Insert

Keyframe/change color in Over & Down and draw green Rectangle box over text in the Hit Frame

• Click Scene 1 to go back to Main Timeline

71

ADD ACTION TO A BUTTON(4-49)

• Windows/Action Panel• Selection Tool/Click created Button (Click to Continue text)• Verify Script Assist Button is turned on and correct Layer Name on

the bottom left• File/Publish Setting (verify Action Script 2.0 is on)• Click Add New Item + in Action Panel• Global Function/Timeline Control/Play• New Layer/Insert Menu/Keyframe on ending Frame• Verify correct Layer is on bottom of Action Panel• Click Add new Item + in Action Panel• Global Functions/Timeline Control/Stop• Test Movie

72

MASKED EFFECT

• Masked Layer – allows you to cover up the objects on one or more layers and, at the same time, create a window through which you can view objects on those Layers

• Window can move around the Stage which allows the Masked Layer to reveal only the area of the Stage and the Objects you want to view

73

• Mask Layer – contains the window object through which you view the objects on the second layer below

• Masked Layer – second layer, contains the objects that are viewed through the window

74

PROCESS FOR USING A MASK LAYER• Select original layer that will become Masked Layer• Insert New Layer above Masked Layer that will become Mask

Layer• Draw a fill shape or create an instance of a symbol• Select the New Layer and open Layers Properties Diaglog Box– Modify Menu/Timeline/Mask– This converts the layer to a Mask Layer

• Select Original Layer and open Layers Properties Dialog Box– Modify Menu/Layer/Masked– Converts layer to the Masked Layer

• Lock both Layers

75

(5-4)

• To Mask additional Layers: Drag an existing Layer beneath the Mask Layer or crate a New Layer beneath the Mask Layer and use the Layer Properties Dialog Box to convert it to a Masked Layer

• To Unlink a Masked Layer: Drag it above the Mask Layer or select it and select Normal from the Layer Properties Dialog Box

76

PROCESS FOR ADDING SOUND

• Import a sound file into a Flash movie– Flash places the sound file into the Library

• Create New Layer• Select the desired Frame on the New Layer

where you want the sound to play and drage the sound symbol to the Stage

77

PROPERTIES PANEL FOR SOUND

• SYNCHRONIZE A SOUND– Properties Panel (clicking a button)

• Specify Special Effects– Properties Panel (fade in and fade out)

78

EMBEDDED VIDEO

• Becomes part of the SWF file• Best used for small video clips1. Use the Import Video Wizard2. Place the video on the Stage3. Add controls as desired

79

PROGRESSIVE DOWNLOADING

• Allows you to use Action Script to load an external FLV file into a SWF file

• Resides outside the SWF file

80

STREAMING VIDEO

• Requires Flash Media Server– An adobe product designed specifically for

streaming video content

81

ADOBE MEDIA ENCODER

• Application used by Flash to convert various video file formats, such as, .mov, .avi, and .mpeg to FLV (Flash Video) format so that videos can be used with Flash

82

• Double click the symbol in the Library Panel to get to the Edit Window

83

INVERSE KINEMATICS

• Allows Flash to create a single image and add a structure to the image that can be used to animate the various parts

• Creates a structure of bones that allows you to link the parts of an image– Bone Tool

84