flash 101
DESCRIPTION
Flash Concepts. Flash 101. Flash CS3 Pro Overview Development environment for creating interactive and multimedia web content that is multi/cross platform. Enables authoring and creating Flash .swf files that are playable through Flash players included with most all browsers. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/1.jpg)
1
Flash 101
Flash Concepts
![Page 2: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/2.jpg)
Flash CS3 Pro Overview–Development environment for creating interactive and multimedia web content that is multi/cross platform.
–Enables authoring and creating Flash .swf files that are playable through Flash players included with most all browsers.
–Enables the use of sound, images, video, bitmapped and vector graphics.
–Flash movies can be embedded into web pages and the .swf movies are streamable.
–Vector graphic support and built in vector drawing tools make it ideal for creating animation (very small file size possible)
![Page 3: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/3.jpg)
Starting Flash CS3
Find Application icon available on dock in lab computers, looks like Fl, double click on icon
When Flash CS3 Pro opensFile>New …>Flash File (Actionscript 3.0)
•Actionscript 3.0 vs Actionscript 2.0
•Actionscript 3.0 is the latest scripting version new with CS3
•Common to still dev using 2.0 though
![Page 4: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/4.jpg)
The Document Window Interface–Timeline–Stage–Stage pasteboard–Tools–Property inspector–Panels–etc.
Panels such as Tools and the Properties inspector can be closed, moved, resized, docked and undocked
![Page 5: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/5.jpg)
The Document Window InterfaceTimeline
Stage
Stage pasteboard
Tools
Property inspector
Panels/Windows
etc.
![Page 6: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/6.jpg)
Additional Panels/WindowsWindows that contain tools and info that help when working on your project file.
Most commonly used windows:•Tools•Properties•Timeline•Library•Actions
Useful misc toolbarsWindows >Toolbars> MainWindows >Toolbars> Edit
![Page 7: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/7.jpg)
Minimum windows:•Timeline•Tools•Properties inspector
Additional panels available:Library, Align, Color, Swatches, Info, Scene, Transform, Actions, Behaviors, Components, Component Inspector, Debug, Output, etc
![Page 8: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/8.jpg)
Timeline Where you control the static and moving elements (objects) in the project file (.fla)
![Page 9: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/9.jpg)
Stage Where your animation, images, content appear. Represents the visible area of your project. The stage has properties such as size, color, and frame rate.
![Page 10: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/10.jpg)
Toolbar Contains drawing and editing tools for creating and modifying objects
![Page 11: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/11.jpg)
Drawing Tools
–Selection–Subselection–Free Transform–Lasso–Pen–Text–Line–Rectangle–Pencil–Brush–Ink Bottle–Paint Bucket–Eyedropper–Eraser–Move–Magnifying
![Page 12: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/12.jpg)
SelectionSubselectionFree TransformLasso
Tools window
![Page 13: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/13.jpg)
PenText
LineRectanglePencilBrush
Tools window
![Page 14: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/14.jpg)
Ink BottlePaint BucketEyedropperEraserHandMagnifying Glass
Tools window
![Page 15: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/15.jpg)
Layers Ability to add, modify, delete and organize layers using the layer controls.
From the layer controls area located under the timeline you can also hide, lock, and control the appearance of the layer contents.
Here you can also rename layer names, change the viewing/stacking order, show layer contents as outlines, add folders for storing multiple layers, add motion guides and more.
![Page 16: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/16.jpg)
Layers editing options
-renaming layer names
-changing the viewing/stacking order
(top most layer=front or top)
-showing layer contents as outlines
-adding folders for storing multiple layers
-adding motion guides
![Page 17: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/17.jpg)
Layers Demo
-Create three dif layers
-Draw an object with both a stroke and fill (circle, square, or rectangle) on each layer
-Rename each layer to the shapes name like circle -Changing the viewing/stacking order,
top most layer=front or top-Show layer contents as outlines-Add a folder for storing these layers
-Adding keyframes f6 enables you to create a frame by frame animation if desired
![Page 18: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/18.jpg)
18
Using the Drawing & Color Tools
Pen Tool Creates Vector Objects–Allows you to precisely draw straight and curved lines to create more complex shapes
–Shapes created with the Pen tool consist of paths, anchor points, and tangent handles
–Shapes created can have a stroke and/or a fill
–Adjusting the Pen tool Preferences Edit>Preferences>Drawing
![Page 19: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/19.jpg)
19
Concept of Keyframes in Flash–Keyframes concept comes from traditional Animation–Important frames that define what the major motion changes will be are called keyframes
Tweening
![Page 20: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/20.jpg)
20
Tweening
Concept of Tweening in Flash–Borrowed from traditional cel animation terminology, slang for “in-betweening”
–The “in-betweener” (animator) as they were called would draw all the frames in between the keyframes that the lead animator drew
–Flash has two types of tweening:
shape tweening and motion tweening
![Page 21: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/21.jpg)
21
TweeningHow tweening is used in Flash−Tweening is used between two keyframes
−In order to tween you must have two keyframes with content
−You can animate or morph colors, shapes, gradients, positions, transformation, broken apart text, etc.
−Differences are interpolated (inserted between the two keyframes) by Flash
−Using Animation tools like Flash are a real time saver versus having to create each frame of an animation
![Page 22: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/22.jpg)
22
KeyframesKeyframes -Clicking F6 (or Insert>Timeline>Keyframe) adds a keyframe to the current frame.
-A new keyframe allows a new movement, new object, or new tween to occur.
-A keyframe also enables a change to occur and can represent a change in location, motion, size or animation.
-Or on a blank frame, as soon as you draw an object a keyframe will appear.
![Page 23: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/23.jpg)
23
KeyframesKeyframes −A keyframe looks like a Solid Circle.
−Two keyframes are required for tweening (animation) to occur.
−Tween by clicking in between the two keyframes and selecting either motion or shape tween in the property inspector.
−Additional frames can be added to a existing tween using f5.
−Additional keyframes can be added (on any of these frames) using f6.
![Page 24: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/24.jpg)
24
Frames
Frames –Clicking F5 (or Insert>Timeline>Frame) adds frames to wherever playhead is positioned.
–Can extend the time an object will stay on stage or extend an existing tween.
![Page 25: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/25.jpg)
25
FramesFrames −Inserts one frame at a time or place playhead where you want frames extended to and then press f5.
−A frame looks like a Filled Frame, a frame with no content will not have a filled frame
−A frame represents a unit of time on the timeline. FPS (number of frames per second).
−12 fps means there will be 12 frames per 1 second of our movie. If our movie is 60 seconds long then there will be 720 frames (60x12=720).
![Page 26: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/26.jpg)
26
Blank keyframes
Blank Keyframes –Clicking F7 (or Insert>Timeline>Blank Keyframe) adds a blank keyframe at desired keyframe.
–Clears stage of preexisting objects from that layer only at that frame only.
![Page 27: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/27.jpg)
27
Blank keyframes
Blank Keyframes −Inserts one blank keyframe at a time.
−A blank keyframe means there are no objects on stage for that blank keyframe, for that layer only
−A blank keyframe looks like a Hollow Circle.
![Page 28: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/28.jpg)
28
Shortcuts
Insert shortcuts
Frames F5 Adds frames
Keyframes F6 Adds a keyframe
Blank Keyframes F7 Adds blank keyframe
Clear Keyframe Shift F6 Removes a Keyframe,must be a keyframe in
that current frame
Remove Frames Shift F5 Deletes frames, can also delete multiple selected frames
![Page 29: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/29.jpg)
29
TweeningTweening in FlashTwo types of tweening in Flash,
Motion Tweening and Shape Tweening
![Page 30: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/30.jpg)
30
TweeningTweening in FlashTween between two keyframes by placing the play head anywhere in between the two keyframes and then selecting either shape tween or motion tween within the property inspector.
![Page 31: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/31.jpg)
31
Tweening
Tweening in Flash –Green solid line arrow (on layer in timeline) signifies an active shape tween
–Blue solid line arrow (on layer in timeline) signifies an active motion tween
–Broken line with no arrow signifies that tween is not working (wrong tweening accidentally selected?)
![Page 32: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/32.jpg)
32
Tweening
Tweening in Flash –Selecting a frame within a tween and then pressing F5 will extend tween/animation by one frame
–Selecting two or more layers (using shift key) and then pressing F5 will extend a tween to the same length as the current tween.
–For example if you select two layers who currently have a tween 30 frames long, pressing f5 will extend tween an additional 30 frames
![Page 33: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/33.jpg)
33
Shape Tweening
Shape TweeningUse with:
–Vector-based objects–No grouped objects–No bitmaps–No symbols–No type, must be broken apart
Examples:–Shape of object–Color of object–Position of object on stage–The transformation of object–Broken apart text–Gradients
![Page 34: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/34.jpg)
34
Shape Tweening
Shape Tweening demo –Using the type tool, type your name on stage–Select the text and then select Modify>Break Apart (Separates into letters)–Select Modify>Break Apart a second time
(Converts letters into shapes)–Insert a blank keyframe (f7) at frame 24–Draw a circle at frame 24–Shape tween text (text is now a shape) by clicking anywhere between two keyframes and selecting Shape in the properties inspector for tween options
![Page 35: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/35.jpg)
35
Shape TweeningShape Hinting demo–Create a new shape tween (try tweening/morphing between two different shapes)–Click in the first frame of tween and then click Modify>Shape>Add Shape Hint–Red circle displays shape hint, move beginning shape hint, to edge of shape–Go to the next keyframe, drag red circle(s) (shape hint) to new ending location (to edge of shape)–This second shape hint should turn green if accepted–You can add multiple shape hints by repeating steps–Remove any hints (if desired) by going to first frame of tween where shape hint was added and Ctrl Click to remove
![Page 36: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/36.jpg)
36
Motion TweeningUse with:–Symbols–Grouped objects–Text Blocks–No shapes–No broken apart text–No multiple items on same layer
Examples:–Moving a symbol–Animating a symbol–Reposition symbol–Transformation of a symbol–Moving Text–Animating grouped objects
Motion Tweening
![Page 37: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/37.jpg)
37
Motion Tweening demo–Create a symbol (draw a shape and then drag to library)–Create a keyframe (f6) on frame 48–Move symbol to a new location–Move play head in between the keyframes–Select Motion tween under property inspector–Select frame 48, then select instance on stage, and on the property inspector, under color, select alpha–Add three more keyframes (somewhere in between the two keyframes)–Use the free transform tool to adjust the size of the instance in one keyframe, skew in another keyframe, and rotate in another keyframe (change fill to gradient, if using a circle, in order to see rotation)
Motion Tweening
![Page 38: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/38.jpg)
38
Motion guide Special layer on which you can draw a path, allowing a symbol to animate or tween along the path, rather than moving in a straight line between two keyframes.
Only way in Flash to make a motion tween follow a curved path.
Motion Guide
![Page 39: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/39.jpg)
39
Motion guide demo–Draw a shape and convert to a symbol (f8)–Add a keyframe at frame 30 and move instance to new location–Select in between the keyframes and select motion tween in the property inspector–Select layer and click on the add Motion Guide icon
(in timeline below layers) –Select the guide layer and then select the pencil tool and then smooth option (under pencil options on toolbar)–Draw curved line to serve as guide (path) for symbol to follow
continued
Motion Guide
![Page 40: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/40.jpg)
40
Motion guide demo continued
–Move to frame 1 of the instance or tween layer and use the selection tool to select the registration point (center point of shape) and move to the beginning of the drawn path guide–Go to the last keyframe of the instance and move shape to the ending point of the drawn path guide–Test movie
Motion Guide
![Page 41: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/41.jpg)
41
Bitmaps
Importing and compressing Bitmaps–File>Import>Import to Stage (select a photo/.jpg)–Double click on photo in library to modify properties–For photos use photo jpeg (compression)–Uncheck the “use imported jpeg data” option–Set quality to 60%–For logos, text, solid colors use Lossless (PNG/GIF) instead–Click test to determine new file size–Click on OK to save
![Page 42: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/42.jpg)
42
Sound
Sound File Types Supported in FlashMost commonly imported sound files:
.WAV Native uncompressed PC format sound, cross platform
.AIFF Native uncompressed Mac format sound, Mac platform
(rename .aiff to .aif for use on PC computers)
.MP3 Cross platform compressed sound, commonly used and supported format, good compression=ideal file size
.MOV Apple Codec, cross platform compressed sound and/or video
![Page 43: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/43.jpg)
43
Sound
Importing a sound demo–Search for a sound–Go to google.com and search for song.aiff or song.wav or song.mp3 (or try flashkit.com and search for a sound file)–Download sound file (cntrl click on mac and download to documents)–Within flash click File>Import>Import to Library–Select sound file–Open Library (cmd l)–Double click on imported sound to adjust settings–Under Compression change to MP3 (will make file size much smaller)–Leave Preprocessing (convert stereo to mono) unchecked–Modify Bit rate to 24kbps or lower–For Quality select Best
continued
![Page 44: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/44.jpg)
44
Sound
Importing a sound demo continued
–Click Test to preview sound–OK to accept settings–Create a new layer and name soundtrack–Click on the first frame of this layer, drag sound from library onto stage–Within the Properties inspector verify that Sync is set to Event for this sound clip
(Event for sync will begin to play sound when play head reaches the frame where the sound is, frame 1 of soundtrack layer, and the playing of the sound is independent of the main timeline)
–Click on Edit if you wish to edit sound clip effects–Control>Test Movie
![Page 45: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/45.jpg)
45
Sound
Sync sound optionsEvent will begin to play sound when playhead
reaches the frame with sound, independent of the main movie timeline
Start same as event, except only one instance of sound can play at a time
Stream will begin to play sound (streaming) when playhead reaches the frame with sound, stops the sound when the movie stops
Stop stops the indicated sound, place in the frame of where you want sound to stop in order to stop a currently playing sound with this same filename
![Page 46: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/46.jpg)
46
Sound
Modifying Sound Settings demo–Create a new layer –Insert blank keyframe (f7) where you want sound to start–Drag sound from library onto stage (at blank keyframe location)–Click on f5 and extend frames until sound wave no longer appears–Remember you can always modify the sound quality and file size by double clicking on sound in library and adjusting its settings–Within the Properties inspector you can change the sound file by selecting a different sound under the Sound: field (try picking an alternative sound file, must have other sound files in your library though)–Select Effect or click on Edit… to apply an effect such as a channel, fade, or custom
![Page 47: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/47.jpg)
Movie properties
•The frame rate can be adjusted by double clicking on the document properties in prop insp
•It is based on frames per second fps
•Elapsed time indicates the amount of time that has past in the timeline since frame 1 and is based on the current frame rate
•Frame view provides options for the timeline display
![Page 48: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/48.jpg)
Movie Properties
Change a projects properties using the property inspector
1. Click on blank portion of stage
2. Property Inspector displays document properties
Size width x height
Background color of background
Frame Rate fps
Publish Settings Publishing flash settings
![Page 49: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/49.jpg)
Properties Inspector
• Reflects the properties of an object that is selected
• Click on an empty portion of stage to access the properties for controlling movie/project settings.
• Stage dimensions, frame rate, and background color.
![Page 50: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/50.jpg)
Flash file types reviewed
.fla Project file
.swf Movie file
.html Webpage, swf is embedded into page
.js AC_RunActiveContent.js, created when you publish as html and swf and is required to play file locally and when published onto a webhost
.exe Windows projector file
.app Mac projector file
.flv Flash video file, Flash requires flv file to use video within flash and flv sits outside of swf file and is referenced also has to be uploaded to web host
![Page 51: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/51.jpg)
Previewing movie
Pressing Enter plays the movie on stage, only a preview since movieclips with animations in their timeline won’t play
Control>Test Movieopens new window with .swf movie file, same .swf movie as would be published when publishing
File>Publish Preview>Default-(HTML) F12Launches movie file .swf in the default web browser
![Page 52: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/52.jpg)
Previewing inside the flash project
Press the enter key or Window>Toolbars>Controller
(Displays a controller with playing icons)
Playhead moves when project is played and moves across the frames of the timeline
Status bar is under the timeline area, gives the current frame the play head is on. Also displays fps and has a onion skinning option
However movie clips will not animate their own timelines, since they are independent of main timeline
![Page 53: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/53.jpg)
Test Movie SWF
•Recommended you test movie f12
•Some effects are only visible in the test movie mode
•Test movie allows you to see the movie in a way that is similar to the way that a browser would display it as a .swf file
•To Test Movie f12 or Control>Test Movie or cntrl+enter pc (cmnd+enter mac)
![Page 54: Flash 101](https://reader030.vdocuments.net/reader030/viewer/2022032805/5681318e550346895d97ff65/html5/thumbnails/54.jpg)
54
This concludes our Flash Review
Please ask any questions at this time.