FLASH Creates entire websites Creates animations Creates games and simulations 1.
-
Upload
julius-arnold -
Category
Documents
-
view
213 -
download
0
Transcript of FLASH Creates entire websites Creates animations Creates games and simulations 1.
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