Ch. 7 Flash

1. Ch. 7 Flash Fun Stuff!

2. Flash creates movie files for Web sites!Basic Vocab: • Tools Panel – contains tools for drawing, painting and selecting. • Timeline – correlates images to a frame in a movie. • Stage – area used to create a Flash movie. • Library – place where images, graphics, symbols will stored and can be accessed later • Property Inspector – contains options to modify object properties. • Saving a Flash file: • Flash files are automatically saved in .FLA format,but this cannot be used in a Web page document. • Press Ctrl+Enter to view your movie as it will appear on the Web and to create a .SWF movie file, which can be used in a Web page.

3. Setting Flash Document Properties • Select the black arrow and click on the gray area outside the stage to view document properties (make sure you have the properties panel open) • Size – sets the size of the stage in pixels. Click the button next to size in the Property inspector to change the size of the stage. • Background – Click the box next to Background to change the background color of the movie. • Frame Rate – number of animation frames to be displayed every second (default is 24 fps.).

4. The Flash Tools PanelImages drawn in Flash are vector graphics, which are composed of lines connected by points. The file size is much smaller than a bitmap graphic. • Arrow tool (black arrow) – selects objects • Line, Oval, Rectangle tools – draw basic shapes • Text tool – creates a text block • Pen tool – draws straight or curved lines • Pencil tool – draws free-form lines and shapes • Brush tool – paints with brush-like strokes • Paint Bucket tool – fills enclosed areas with a selected color • Eraser tool – deletes parts of a shape (double-click to remove everything on the stage) Try not to use this! • Colors Section: • Stroke Color – changes outline color of the tool • Fill Color – changes the fill color of the tool

5. “Snapping” • Guesses how you would like one shape to be related to another and “snaps” them together • You can turn snapping options on and off by going to “View” and selecting “Snapping”. • Can also be turned on/of by clicking the “U shaped magnet” button in the lower right corner of the tools panel

6. Creating a flash movie – Frames • Frame – contains an image • Playhead – can be dragged to a specific frame to display the image for that frame on the stage • Keyframe – a frame that contains an image different from the image in the previous keyframe • Static Frame – contains the same image as the previous frame (known just as a “frame”) • Elapsed Time – total length of the animation

7. Keyframe Types • Insert Blank keyframe – inserts a BLANK frame • Insert Keyframe – inserts an exact copy of the previous keyframe

8. Frame-by-Frame Animation • Frame-by-frame animation is a movie created from a set of specified images – a beginning image is drawn and then altered slightly in each frame to produce animation. • Adding a keyframe – clicking a new frame on the Timeline and selecting Insert Keyframe adds the image from the previous keyframe in the new keyframe and creates static frames in between the two keyframes. (right clicking on a frame will give you the option to add in frames also)

9. Creating Symbols • Symbol –a graphic that is imported into a library which can be used throughout a Flash movie • Symbols reduce the size of a movie file because the browser downloads the graphic only once. • Symbols can be easier to work with because they will “group” together a shape that consists of many different items. • When you use a symbol in a movie, it becomes an instance on the stage. • Creating a symbol: • Select the artwork. • Go to the Modify menu and choose Convert to Symbol (F8) • Give the symbol a descriptive name and choose the behavior (we will use graphics for now, but we will get to buttons and movie clips) • Go to Window, Library to view your symbol.

10. CLASSIC Tweening – a single symbol is tweened to move from a start location to an end location. • Create artwork on the first frame of the tweening and select it. • Convert to a symbol (YOU MUST CONVERT IT)(if you don’t, it will convert it for you) • Insert a keyframe on the frame where you want the tweening to end. • Move artwork to a new position on the new keyframe. • Select a “between” frame. • Go to the Property inspector and set Tween to Motion. (you can also select a frame in between the start and end of the tween, right click and select motion tween) • The timeline should have a solid arrow and turn light purple! (a dotted line means something is not right) • NO OTHER ITEMS MAY BE IN THE SAME LAYER AS SOMETHING THAT IS BEING MOTION TWEENED!

11. Classic Tweening with a Motion Path • Create a motion tween.(CREATING THE TWEEN AHEAD OF TIME WILL AUTOMATICALLY MAKE THE MOTION GUIDE THE APPROPRIATE LENGTH) • Select the first frame. • Go to Insert, Timeline, Classic Motion Guide to add a Guide Layer. • Click on the Guide Layer key frame to draw a motion path using any drawing tool (The pen is a good idea) • In the first frame, “snap” the graphic to the beginning of the line. • In the last frame, “snap” the shape to the end of the line. • NO OTHER ITEMS MAY BE IN THE SAME LAYER AS SOMETHING THAT IS BEING MOTION TWEENED!

12. Motion Tweening • Create the item you wish to animate • Convert to a symbol by right clicking (Flash will do this for you if you skip this step) • Add Motion Tween (right click the key frame) • Adjust the length of the movie by “stretching out” the frames • Change the location of the object in ANY frame by selecting the frame and moving the object to a new location (the key frames will be added in for you) • You may also add curvature to your motion path by using the black arrow and placing it on top a path and then “bending” it.

13. Shape Tweening • Create artwork on the first frame (Don’t convert to a symbol). • Insert a blank keyframe on the last frame. • Create new artwork on the new keyframe. • Select a “between” frame. • In the Property inspector, set Tween to Shape. • The timeline should have a solid arrow and turn light green!

14. Animating Text (Morphing) • Create a text block. • Add a keyframe (you can use a blank one, but its easier if you don’t) and change the text. • It is good practice to add and change all text before you start to break apart (see next step) • Select the text, and go to Modify, Break Apart. Text must be broken apart twice to turn it into separate shapes. Do this in ALL keyframes for all text. • Create a shape tween (this should usually be the last thing you do)

15. Using Layers • Layers are used with more complex movies. They allow you to combine several different types of animation in one movie. • Layers are like transparent sheets of paper that can be placed on top of one another. You can modify one image without affecting other images. • To add a new layer: • Go to Insert, Layer or click on the icon at the bottom of the Timeline (or right click on an existing layer and select insert layer) • Double-click on the layer name to rename the layer. • Layers can be locked (to prevent accidental changes) or hidden so that it is easier to edit individual layers. • To edit a layer, make sure the layer you are editing is highlighted. • Naming your layers descriptively can help when you are working with multiple layers

16. Creating Multiple Animations • Each animation should be created in a SEPARATE LAYER!!!!!! • If you try to do multiple animations on a single layer, things will NOT go well!

17. Hiding a layer You will no longer see this easier It is usually easier to work with on layer at a time with the other layers showing Locking a layer Prevents you from making any changes to this layer Helps in preventing accidental changes

18. Masking • In a single layer, insert a picture/graphic/movie… etc. • Create a second layer directly above the layer you just created. • Right click on this new layer and select “mask” • Draw shapes in this mask layer to “poke holes” in the mask and see what’s behind it. (these shapes in the mask layer can be tweened also) • The lower the threshold number, the higher the quality

19. Shape tween a photograph • Insert a photo onto the stage (copy and paste works just fine). • Insert another photo in the next key frame • BOTH PHOTOS must be changed into bitmaps by selecting “Modify ->Bitmap -> Trace Bitmap” • After both photos are converted, shape tween them as normal.

20. Additional Tools • Deco Tool (add special effects) • 3D Effects Tool

21. Bone Tool • CANNOT BE APPLIED TO OBJECT DRAWING OR SYMBOLS (turn off object drawing before using this tool) • Applies “joints” to items so that they can be manipulated

22. Ad Banners • Create/edit all graphics/pictures in fireworks and make them all the same size (usually small for ads). • Import these pictures into the library or stage into your flash movie. • Adjust the size of your stage to match the size of your images. • Every 12 frames (or however long you wish) insert a new blank key frame and a new advertisement image. • You could also do this in fireworks using an animated gif.