Flash

1. 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. • Property Inspector – window at the right that contains 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. • To create an html file (web page) of your flash movie, go to Publish Preview-Default, or press F12.

3. Setting Flash Document Properties • Size – sets the size of the stage in pixels. Click the Edit button next to size in the Property inspector to change the size of the stage. • Background – Click the box next to Stage to change the background color of the movie. • Frame Rate – number of animation frames to be displayed every second (default is 24 frames per second.). Frames per second is abbreviated as fps.

4. The Flash Tools PanelImages drawn in Flash are vector graphics, which are composed of lines. (Bitmaps are composed of points.) The file size of a vector graphic is much smaller than a bitmap graphic. • Selection tool (black arrow) – selects objects • Free Transform tool – allows you to scale/skew an object • 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 • Deco tool – draws a bunch of cool patterns • Bone tool – allows you to draw objects that move like bones • Eraser tool – deletes parts of a shape (double-click to remove everything on the stage) Try not to use this when deleting stuff! It might leave a tiny bit left, which could mess up your movie. • Colors Section: • Stroke Color – changes outline color of the tool • Fill Color – changes the fill color of the tool

5. Creating a flash movie – Frames • Frame – contains an image • Playhead – the red rectangle that 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 frame • Static Frame – contains the same image as the previous frame

6. 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. • Every frame that contains a new image must be a keyframe!

7. 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. • 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) or right click the object, and select Convert to Symbol. • Give the symbol a name and choose the behavior (Movie Clip, Button, Graphic). • Go to Window, Library if you want to view your symbol.

8. Motion 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. • Right-click the first frame of your animation, and select "Create Motion Tween" • Move artwork to a new position on the last keyframe. • The length will automatically be the same as the fps. If you want to change this, you can drag the end of the last frame to the right. • The timeline should turn light blue!

9. Editing the Motion Path • A green line is automatically created when you make a motion tween. • You can position the selection tool close to the green line to curve it. • If you want to create a change somewhere in the middle of the animation, you need to right-click on the frame that you want to make the change to. Then choose Insert Keyframe. • Choose the type of change you would like to make (position, rotation, skew, etc.). You could also just choose All. • Apply the change to your animation. You may want to use the 3-D Rotation tool to make your animation rotate in 3-D!

10. Shape Tweening-morphs an object from one shape/color to another • Create artwork on the first frame (Don’t convert to a symbol). • If you choose to use an image that you already have, go to File–Import–Import to Stage. Then, select the picture and go to Modify—Bitmap—Trace Bitmap. • Insert a blank keyframe on the last frame. • Create new artwork on the new keyframe (or import an image). • Select a “between” frame. • Right-click and choose "Create Shape Tween". • The timeline should have a solid arrow and turn light green!

11. Animating/Morphing Text • Create a text block. • Select the text, and go to Modify, Break Apart. Text must be broken apart twice to turn it into separate shapes. • Add a blank keyframe and change the text. Break it apart twice! • Create a shape tween.

12. 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. • Double-click on the layer name to rename the layer. • Layers can be locked or hidden so that it is easier to edit individual layers. • To edit a layer, make sure the layer you are editing is highlighted!

13. Movie Clips • Movie clips allow you to make symbols that are also animations. • All movie clips will show up in the Library panel at the right. • To edit a movie clip: • Double-click on the movie clip. • Animate it as you would anything else. • You can drag movie clips over from the right and insert them into your movie.