Flash 101

1. Flash Concepts Flash 101

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

3. Starting Flash CS3 Find Application icon available on dock in lab computers, looks like Fl, double click on icon When Flash CS3 Pro opens File>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

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

5. The Document Window Interface Timeline Stage Stage pasteboard Tools Property inspector Panels/Windows etc.

6. Additional Panels/Windows Windows that contain tools and info that help when working on your project file. Most commonly used windows: Tools Properties Timeline Library Actions Useful misc toolbars Windows >Toolbars> Main Windows >Toolbars> Edit

7. Minimum windows: Timeline Tools Properties inspector Additional panels available: Library, Align, Color, Swatches, Info, Scene, Transform, Actions, Behaviors, Components, Component Inspector, Debug, Output, etc

8. Timeline Where you control the static and moving elements (objects) in the project file (.fla)

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

10. Toolbar Contains drawing and editing tools for creating and modifying objects

11. Drawing Tools Selection Subselection Free Transform Lasso Pen Text Line Rectangle Pencil Brush Ink Bottle Paint Bucket Eyedropper Eraser Move Magnifying

12. Tools window Selection Subselection Free Transform Lasso

13. Tools window Pen Text Line Rectangle Pencil Brush

14. Tools window Ink Bottle Paint Bucket Eyedropper Eraser Hand Magnifying Glass

15. LayersAbility 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.

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

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

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 PreferencesEdit>Preferences>Drawing

19. Tweening 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

20. Tweening Concept of Tweeningin 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

21. Tweening How 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

22. Keyframes Keyframes 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.

23. Keyframes Keyframes 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.

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.

25. Frames Frames 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).

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.

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 likea Hollow Circle.

28. Shortcuts Insert shortcuts FramesF5 Adds frames KeyframesF6 Adds a keyframe Blank KeyframesF7 Adds blank keyframe Clear Keyframe Shift F6 Removes a Keyframe, must be a keyframe in that current frame Remove FramesShift F5 Deletes frames, can also delete multiple selected frames

29. Tweening Tweening in Flash Two types of tweening in Flash, Motion Tweening and Shape Tweening

30. Tweening Tweening in Flash Tween 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.

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?)

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

33. Shape Tweening Shape Tweening Use 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

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

35. Shape Tweening Shape 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 beginningshape 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

36. Motion Tweening Motion Tweening Use 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

37. Motion Tweening 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)

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

39. Motion Guide 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 addMotion 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

40. Motion Guide Motion guide democontinued 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

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

42. Sound Sound File Types Supported in Flash Most 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

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

44. Sound Importing a sounddemo 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

45. Sound Sync sound options Event 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

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

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

48. Movie Properties Change a projects properties using the property inspector Click on blank portion of stage Property Inspector displays document properties Size width x height Background color of background Frame Rate fps Publish Settings Publishing flash settings

49. PropertiesInspector 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.

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