FLASH Creates entire websites Creates animations Creates games

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

STAGE • Contains all the objects that are part of the movie that will be seen by viewers. 2

TIMELINE • Organize and control the movie’s contents by specifying when each object appears on the Stage. 3

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 4

Panels • Used to view, organize and modify objects and features in a movie • Most common: Tools, Properties and Library Panels 5

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 6

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 7

MOTION TWEEN • Object moving around screen 1. Select the Object 2. Select Motion Tween on the Insert Menu 1. This process changes Object into a Symbol 1. 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 8

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

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

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 11

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 12

STEPS FOR PLANNING WEBSITE 1. Stating the Purpose (Goals) 2. Identifying the Target Audience 3. Determining the Treatment (What is the look and feel) 1. Tone – humorous, serious, light, heavy, formal 2. Approach – How much direction will be provided to the user? 4. Developing the Specifications and Stroryboard 1. Specifications state what will be included in each screen 2. Storyboard shows the layout of the various screens 13

INTERACTIVE DESIGN GUIDELINES • Make it simple • Build consistency in the navigation scheme • Provide feedback • Give the user control 14

FLASH WORKFLOW PROCESS 1. Create and/or acquire the elements to be used 2. Arrange the elements and create the animations 3. Apply special effect 4. Create the interactivity 1. Action Script: allows you to develop programming code to control how the media elements behave 15

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 16

VECTOR GRAPHICS • Represent the image using lines and curves • You can resize without loosing quality 17

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

TOOLS FOR CREATING VECTOR GRAPHICS • Oval • Rectangle • Pencil • Brush • Line • Pen 19

PEN TOOL • To close an object, be sure to reclick the first anchor point as your last selection 20

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

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

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 23

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 24

2 DRAWING MODEL MODES 1. Merge Drawing Model 1. Stroke and Fill are separate 2. You can select separately 2. Object Drawing Model 1. Stroke and Fill are combined 2. Can break apart by clicking the Modify Menu/Break Apart 25

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

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 27

• Selection Tool: used to select the text block • Text Tool: used to selecct and edit the text within the text block 28

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 29

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 30

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 31

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 32

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 33

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 34

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 35

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 36

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 37

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

BUTTONS • Control Menu/Enable Simple Buttons – To preview • New Buttons creates New Timelines • Control Menu/Enable Simple Buttons – Turns off the command 39

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 40

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 41

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 42

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 43

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 44

• F 6 or INSERT/KEYFRAME 45

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 46

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 47

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 48

TYPES OF OBJECTS THAT CAN BE TWEENED • • GRAPHIC BUTTON MOVIE CLIP SYMBOLS TEXT FIELDS 49

REMOVING MOTION TWEEN • Click the tween span on the Timline • Insert Menu/Remove Tween 50

CLASSIC TWEEN • More complex than Motion Tween but similar • Can have more than one Instance of the Object over the Tween Span 51

CLASSIC TWEEN 1. Select starting Frame 2. Insert a Keyframe 3. Insert a Keyframe at the ending Frame and click anywhere on the layer between the Keyframes 4. Insert Menu/Classic Tween 5. Sect the ending Frame and move the Object to the position you want it to be in the ending Frame 52

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 53

MOTION GUIDE 1. 2. 3. 4. 5. 6. 7. Create Classic Tween Animation Insert a New Layer above the Classic Tween Animation Layer Change Layers Property to Guide Layer Drage Classic Tween Animation Layer to the Guide Layer so that it indents Draw a Path using the Pen, Pencil, Line, Circle, Rectangle, or Brush Tools 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. Select the End Keyframe and then repeat the steps to attach the object to the End of the Path 54

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 55

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 56

FRAME ANIMATION THINGS 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 57

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 58

ONION SKIN FEATURE • Allows you to view an outline of the Object in any number of Frames • Helps in positioning Objects on Stage 59

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 60

BLANK KEYFRAME • Insert/Timeline/Blank Keyframe • Keeps the object in the previous frame from appearing in the current frame 61

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 62

SHAPE TWEEN • An animation change the shape of an object to any form you desire • Can include two objects with two different shapes 63

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 64

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 65

EASE VALUE • Properties • -100 Ease Value – Object starts out slow and speeds up • 100 Ease Value – Object starts out fast and slows up 66

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 67

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 68

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 69

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 • • • 70

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 71

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 72

• 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 73

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 74

(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 75

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 76

PROPERTIES PANEL FOR SOUND • SYNCHRONIZE A SOUND – Properties Panel (clicking a button) • Specify Special Effects – Properties Panel (fade in and fade out) 77

EMBEDDED VIDEO • Becomes part of the SWF file • Best used for small video clips 1. Use the Import Video Wizard 2. Place the video on the Stage 3. Add controls as desired 78

PROGRESSIVE DOWNLOADING • Allows you to use Action Script to load an external FLV file into a SWF file • Resides outside the SWF file 79

STREAMING VIDEO • Requires Flash Media Server – An adobe product designed specifically for streaming video content 80

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 81

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

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 83

84