1. 1 Flash 101 Flash Concepts

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. Selection Subselection Free Transform Lasso Tools window

13. Pen Text Line Rectangle Pencil Brush Tools window

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

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

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

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

20. 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. 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. 22 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. 23 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. 24 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. 25 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. 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. 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.

28. 28 Shortcuts Insert shortcuts Frames F5Adds frames Keyframes F6Adds a keyframe Blank Keyframes F7Adds blank keyframe Clear KeyframeShift F6Removes a Keyframe, must be a keyframe in that current frame Remove FramesShift F5Deletes frames, can also delete multiple selected frames

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

30. 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. 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. 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. 33 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. 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. 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 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

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

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

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

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

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

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

45. 45 Sound Sync sound options Event will begin to play sound when playhead reaches the frame with sound, independent of the main movie timeline Startsame as event, except only one instance of sound can play at a time Streamwill begin to play sound (streaming) when playhead reaches the frame with sound, stops the sound when the movie stops Stopstops 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. 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 1.Click on blank portion of stage 2.Property Inspector displays document properties Sizewidth x height Backgroundcolor of background Frame Ratefps Publish SettingsPublishing flash settings

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

50. Flash file types reviewed.flaProject file.swfMovie file.htmlWebpage, 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.exeWindows projector file.appMac projector file.flvFlash 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

51. Previewing movie Pressing Enter plays the movie on stage, only a preview since movieclips with animations in their timeline won’t play Control>Test Movie opens new window with.swf movie file, same.swf movie as would be published when publishing File>Publish Preview>Default-(HTML) F12 Launches movie file.swf in the default web browser

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

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

54. 54 This concludes our Flash Review Please ask any questions at this time.