KK01003 Multimedia System

The Stage The stage is what will be viewed in the browser. This is where Flash movies or animations are played. The Work Area surrounds the stage like the wings in a theatre. It is useful for starting animations offstage. Change the size of the stage by using the Properties panel, which should be at the bottom of the display. (Select Window | Panel Sets | Default Layout if you cant see it.) The default stage is 550 x 400 pixels although most Flash animations will be smaller than that. You can select different units e.g. inches (best to stick with pixels) and a Web-safe background color for the whole movie. This will be the default background color of the default HTML page Flash generates for your movie. Try selecting a dark blue color (#3366CC). A movie is divided into scenes. Each scene has a timeline divided into individual frames and several layers. The playhead (small rectangle) is always over the current frame and when played back moves from left to right at the specified frame rate (12 fps by default). You can play the movie by pressing Enter. If you check Control | Loop Playback the movie repeats indefinitely. To pause, press Enter again. In a given frame, think of each layer as a sheet of acetate with something drawn on it. Stacking layers on top of one another allows the author much greater control over her animations. For instance it is very common to have a bottom layer called background which has an unchanging background picture upon which the other layers play out their animations. Only simple animations have a single layer. Adjacent frames differ slightly from one another creating the illusion of movement as they are played. The frame rate may be set in the Movie Properties dialogue the default of 12 fps is usual for the Web. Sometimes authors draw each frame individually. This can be very effective but is very tedious! Flash embodies the concept of keyframes between which the intermediate frames are automatically drawn by tweening. (Match Printer and Contents adjusts the movie size to suit your printer, or just large enough for all your contents respectively. OK saves these settings for your movie. Save Default saves these as the new defaults for every movie.) Try a simple exercise - make a mushroom grow. Make sure Snap To Objects is selected. (horseshoe option or Ctrl+Shift+/ or View | Snap to Objects). Also, or alternatively, experiment with the View | Grid options to control the drawing actions. Select the Oval tool and Stroke Color dark brown (#663300) and Fill Color light brown (#FF9900). Many objects drawn in Flash have an outline and a filled interior which are usually in different colors. Then draw a small circle at the bottom centre of the stage with a larger flat oval above it. Leave a small gap. If you make any mistakes, you can undo them with Ctrl+Z.
Oval tool

The mushroom is in frame 1 which is now marked with a black blob. This is a keyframe. Save your work: File | Save and save it as 'Mushroom' in a suitable folder. Flash adds the extension .fla for a Flash movie.

KK01003 Multimedia System

Click on frame 14 and press F6 (or Insert | Keyframe) to make this a keyframe too (it has the same content as frame 1). All grayed frames between contain the same static image (if you move the cursor over them the hint 'Static' appears). The little rectangle in frame 13 signifies that all frames from the previous keyframe contain the same content. Double-click on the timeline between the two keyframes for layer 1. They all turn black, again showing that they have the same content. You can verify this by dragging the playhead back and forth, or by playing the movie. You can add extra frames between keyframes. Click away from the highlighted frames to deselect them, then click any frame between 2 and 13. This selects this frame only. Insert frames at this point by pressing F5 (or Insert | Frame) twice. (To select a range of frames, click and drag) Experiment by converting one of the normal frames in the timeline into a blank keyframe (Ctrl+click and F7 (or Insert | Blank Keyframe). You will find that this frame and the frames after it are now blank, except for the final keyframe. The frame before it now has a small rectangle marking the end of a static range. What do you think would happen if you select this frame and draw something else in it - a rectangle, say? Get rid of the intermediate keyframe. Select it and press Shift+F6 (or Insert | Clear Keyframe). This clears the keyframe. If you want to delete a frame altogether, select it and press Shift+F5 (or Insert | Remove Frames). You should now have 15 frames in your movie. To modify frames you can proceed as above or right-click a frame to pop up a context menu. Edit frame 15 to turn it into a (double-click it) and move it up. help to drag it in a straight line, snap to grid.) Double-click the context menu. Select Scale and mushroom cap - use the middle big mushroom. Select the mushroom cap (If you press Shift while dragging, Flash will provided Snap to Objects is turned on. Or, small stalk and then right-click it to get a stretch the stalk to just below the handle on the top.

If you make mistakes, remember that you can retrieve them with Ctrl+Z. Alternatively, delete everything in frame 15 (Select All with Ctrl+A and hit Delete key), go back to frame 1 and copy everything from there, go to frame 15 and Ctrl+Shift+V or Edit | Paste in Place to get an exact copy of frame 1 again. To make the mushroom grow smoothly between keyframes 1 and 15: Click any frame in this range, and in the Properties panel type "Growth" in the Label box and select Shape from the drop-down menu. Flash has colored the frames green to indicate a shape tween, added the label and some red flags. Run the movie to see the effect. Add another layer for the moon: Double-click the name "Layer 1" in the timeline and re-name it "Mushroom". Enter another layer by pressing the Insert Layer button (leftmost icon) or Insert | Layer. Rename this layer "Moon". Click the Default Colors button under the color boxes to reset a black stroke and white fill.

KK01003 Multimedia System

Making sure the Moon layer is selected, go to the final frame and draw a circle on top of the mushroom. (Delete a layer by selecting it and clicking on the trashcan icon.) Replay the movie. The moon is in front of the mushroom, so we need to rearrange the layers. Click on the name of the mushroom layer and drag it to the top, as in the illustration on the previous page. Layer modes Clicking the dot underneath the eye icon in a layer will hide that layer (make it invisible so you can concentrate on another layer), indicated by a red cross. Clicking the dot underneath the padlock icon will lock the layer (stop you from accidentally editing it), indicated by a padlock. Clicking the dot underneath the square icon will display the layer content in outline only, indicated by outlining the square. Each layer has its own color for outlining purposes. Movie Explorer This can be useful for navigating a complex Flash movie: Alt+F3 or Window | Movie Explorer. The Show Frames and Layers button (second from right) should be depressed. Publishing the movie This consists of compiling the .fla file into a .swf (Shockwave Flash) file and generating a default HTML page to view it in a browser. Your browser must have the Shockwave Flash plugin enabled. Press Shift+F12 or File | Publish to create Mushroom.swf and Mushroom.html. Note the much smaller size of the compiled .swf file. Flash does an excellent compression job, even if you use bitmaps and sounds. View Mushroom.html in the browser to see the effect. Quiz 1 5 minutes (Lab on 1st & 2nd March 2011) * What do you think is wrong with the design? Give suggestion to improve or enhance the design. And, please do not forget to upload your mushroom.fla file once youve finished the next exercise. (Due on 1st March & 2nd March 2011)

*only ONE attempt is allowed.

KK01003 Multimedia System

Drawing tools Flash provides 14 different drawing tools. The Arrow tool selects objects, moves and modifies them. Start a new movie and draw a big circle with the Oval tool with a black stroke color. Select arrow tool (top left). Click & drag in the circle. This moves the fill only. The fill and outline are separate objects. Move it again and note that the outline has a bite out of it. Select all (Ctrl+A) and delete. Draw a new circle, use the arrow tool and this time double-click it or click & drag a rectangle around it or select all. Now when you drag it drags both fill and outline. To group objects together, select them and Ctrl+G (Modify | Group). This makes modification easier. Draw an oval and a rectangle, group them and drag them around. Right-click the group and experiment with Scale and Rotate. Ungroup objects with Ctrl+Shift+G (Modify | Ungroup). Alternatively, you can create symbols from a collection of objects see below. Load Mushroom.fla Click on keyframe 15 in the Mushroom layer. (Hide the Moon layer if you want). Use the Arrow tool, click on the stage to make sure nothing is selected and move it to touch the top of the oval for the mushroom cap. The cursor changes to an arrow with a curve under it, indicating that you can change the shape of this segment of the oval. (If you clicked on a corner, the cursor would change to an arrow with a corner under it, indicating that you can move this corner.) Click and drag up to make a more natural mushroom cap. Replay the movie and note that the tweening has changed automatically. Use the Zoom tool (magnifying glass) to draw craters (ovals) on the moon. Hide the Mushroom layer and zoom in on the moon (+ option increases size, - option decreases size). The hand tool lets you move the stage to center the moon. Add a signpost in an extra layer. Create a new layer called "Signpost". In this layer (frame 1), draw a rectangle with rounded corners (15 points) - choose the rectangle tool and click on the corners option. Put it above the moon and left of the mushroom. You can make the post with the same tool, but try the Line tool. This draws lines in the current stroke color. Click on the Line tool (below the Arrow tool) and press the Show Info button - the left-most in the Launcher bar at bottom right. Click on the Stroke tab and set the stroke width to 10 and choose a suitable color e.g. dark brown (#663300). Making sure you are in Snap to Objects mode and/or Snap to Grid, draw the post. Using the Paint Bucket tool (on the right, last but one row) color the moon pale yellow and the craters a darker yellow. (Zoom the moon for better control.) The Ink Bottle tool (on the left, last but one row) changes stroke colors instead of fill colors. Use it to change the post to a gray hue.

KK01003 Multimedia System

The Eyedropper tool (below the ink bottle) copies a color from elsewhere. Use it to color the signboard the same yellow as the moon. It's a bit fiddly - it works out whether you mean a stroke or a fill color. Add a new layer called "Text" and use the Text tool (Letter A) to write "Keep Out" on the sign. Note how the text is enclosed in a box as you type it Use Arial Black with a suitable font size see the Properties panel. Use the Pencil tool (underneath the Oval tool) to grow some grass on a new layer called "Grass". (The Pencil tool draws in the current Stroke color select a nice green hue.) Note that under "Options" you have a choice of three modes - Straighten which flattens out curves; Smooth rounds out kinks; and Ink draws exactly as you move the mouse. Experiment with a new movie (you don't have to close the Mushroom movie). Then go back to your Grass layer and draw some green tufts of grass at the base of the sign (use Zoom). Other tools: The Brush tool (alongside Pencil) paints in the Fill color. It has five Brush modes, a brush size, and a brush shape. The Eraser tool also has five modes, a shape and a "faucet" (tap to us Limeys) which will erase an entire fill at once. The Pen tool is the most complex. It uses Bezier curves. The Oval and Rectangle tool make use of this tool.