CREATING A MINI-LESSON MOVIEschools.tdsb.on.ca/.../upcoming/tgj3mwtopics/MiniLessonMovie.pdf · Project 4 Creating a Mini-Lesson Movie 129 STEP-BY-STEP 4.3 Continued 5. Draw three

Guided Exploration of the Macromedia Flash MXInterface

The following is a short introduction to Macromedia Flash MX. Many of the steps areleft open-ended so you can explore the Flash interface and tool set prior to starting the project.

Guided exploration combines step-by-step instructions with open-ended suggestions soyou can try different options. Comparing your results will show you the range of possibili-ties, spark your creativity, and increase your understanding of Flash.

Before starting this project, you should review Assessment Guidelines at the end ofthis project. Use these guidelines to assess the use of media and design elements in a mul-timedia project. If you are already familiar with Macromedia Flash MX, you can skip to“Activity 1: Creating a Plan for Your Animation.”

S TEP-BY-STEP 4.1

Exploring the Flash Interface

1. Start Flash. Notice the title bar at the top of the win-dow in Figure 4-1. This title bar displays the docu-ment title. When you first start Flash, the newdocument is called Untitled-1 until you save the filewith a new name.

Upon completion of this project, you should be able to:

■ Create a simple animation.

■ Create a text animation.

■ Create sound clips.

■ Create Drag and Drop learning interactions.

■ Publish your files.

CREATING AMINI-LESSON MOVIE

PROJECT 4

1 2 3

NoteSubsequent new documents willbe called Untitled-2, Untitled-3,and so on, until you exit Flash.

1 2 4 Project 4 Creating a Mini-Lesson Movie

STEP-BY-STEP 4.1 Continued

FIGURE 4-1Flash window

2. Click through the top menu bar to get an idea of the menu selections and locations. Pay partic-ular attention to the Edit, Insert, Modify, and Control menus. These menus contain many of thedesign element and manipulation functions.

1 2 5Project 4 Creating a Mini-Lesson Movie


3. Locate the Stage, as shown in Figure 4-2. The Stage contains all the elements that make up aFlash document. It defines the border of the final file you create (the SWF movie). The contentsof the Stage reflect the current frame(s) on the Timeline.

FIGURE 4-2Flash Stage area

4. Locate the Timeline. It looks similar to that shown in Figure 4-3. The Timeline is a key organiza-tional and navigational tool for your animations. Here graphics are animated over time. Youcoordinate the timing of the animation and assemble the artwork in separate layers on theTimeline. The Timeline displays each frame in the movie.

FIGURE 4-3Flash Timeline

Frame Viewpop-up menu

Emptykeyframe

Timeline headerFrame rate

Tweenedanimation

Playhead

Elapsed time

Selected frame number

Onion-skin buttons

Center framebutton

Pencil icon

Stage



5. Position the pointer over each icon on the Timeline to read the title. Leave Flash open for use inthe next Step-by-Step.

The tools on the left side of the Timeline coordinate layers. Layers are like transparentsheets of acetate stacked on top of each other. When you create a new movie, it contains onelayer. You can add more layers to help organize the artwork, animation, and other elementsin your movie. The following exercise will help you understand how frames and layers inter-act on the Stage and how you can control them with the Timeline.

S TEP-BY-STEP 4.2

Exploring Frames and Layers

1. Click File and then click Open. The Open dialog box opens, as shown in Figure 4-4.

FIGURE 4-4Open dialog box

2. From the data files supplied with this course, browse to locate the Sample Movies folder andclick the file bouncing-ball.fla. Click Open. The Bouncing Ball document opens.

3. Notice that two layers are listed on the Timeline: Text and Ball. Click Control and then click Play.This will play the short Bouncing Ball movie.



4. Click the Eye column (Show/Hide Layer) on the Ball layer. The ball disappears from the Stage. Ared X appears in the Eye column, indicating that the Ball layer is hidden from view, as shown inFigure 4-5.

FIGURE 4-5Ball layer is hidden

5. Click Control and then click Play. The keyboard shortcut is Enter (Windows) or Return(Macintosh). The only visible object is text that appears briefly near the end of the movie closeto the bottom of the Stage.

6. Click the Eye column on the Ball layer to view the layer again.

7. Explore the Timeline.a. Use the Control menu to advance one frame at a time: Click Control and then click

Step Forward. (You may need to rewind the movie first; click Control and then click Rewind.)b. Click the pointer in a new frame.c. Notice where the Pencil icon appears when you click different frames. This identifies which

layer you are currently working in.d. Note what appears on each layer.

8. Click File and then click Close to close the Bouncing Ball document. Do not save any changes.Leave Flash open for use in the next Step-by-Step.


Using Drawing ToolsThe toolbox shown in Figure 4-6 contains Flash drawing tools and other tools you’ll need

to create and manipulate graphics in order to make animations. The Tools section containsdrawing, painting, and selection tools. The View section contains tools for zooming and pan-ning the application window. The Colors and Options sections contain modifiers for theselected tool, which affect the tool’s painting or editing operations.

FIGURE 4-6Flash toolbox

You use the Rectangle tool to draw rectangular shapes, including squares. When youdraw a rectangle, you draw both an outline of the shape and its fill.

S TEP-BY-STEP 4.3

Using the Rectangle Tool

1. Click File and then click New to create a blank document if one is not already open.

2. Click the Rectangle tool in the toolbox. Thepointer changes to a cross.

3. Use the Colors controls in the toolbox to select col-ors for the stroke (outline) and fill for the rectangle.

4. Drag the pointer across the middle of the Stageto draw a rectangle there.

NoteSelect the stroke and fill colorsbefore you draw; otherwise, youmust select the object with theArrow tool and then selectstroke and fill colors.

SubselectionLasso

TextRectangleBrush

Fill Transform

Paint BucketEraser

Zoom

Stroke Color

Fill Color

Arrow

LinePen

Oval

PencilFree TransformInk Bottle

Eyedropper

Hand

Tool modifiers



5. Draw three more rectangles of various colors andsizes. To create a perfect square, hold downShift as you drag the pointer.

6. If you create an object you don’t want, click Editand then click Undo. Leave the file open for usein the next Step-by-Step.

You use the Oval tool to draw oval shapes, including circles.

S TEP-BY-STEP 4.4

Using the Oval Tool

1. In the toolbox, click the Oval tool.

2. Use the Colors controls to select Stroke and Fill colors.

3. Move the pointer over the Stage. The pointer changes to a cross.

4. Drag the pointer to create an oval with the size and proportions you want.

5. Draw three more ovals of various colors and sizes. To create a perfect circle, hold down Shift asyou drag the pointer. Leave the current file open for use in the next Step-by-Step.

You can specify or change the properties of an object, such as color, line width, or font size,with the Property inspector and floating panels. The Property inspector opens below the Stage,and panels appear on the right side of the workspace. The options available on the Propertyinspector shown in Figure 4-7 vary according to the element currently selected on the Stage.

FIGURE 4-7Property inspector

To change the properties of a shape you have drawn, you first select the part you want tomodify. Click the Arrow tool in the toolbox and then do one of the following:

■ To select the entire object, double-click the fill area.

■ To select the fill, click the fill area.

■ To select one side of the border, click the border.

■ To select the entire border, double-click the border.

A line, such as the border of a rectangle, has three stroke attributes: color, thickness, and style.

NoteThe Undo command deletes themost recently created object,element, or ef fect. You can usethis command repeatedly todelete more than one object.


S TEP-BY-STEP 4.5

Setting Stroke Attributes on the Property Inspector

1. Make sure the Property inspector is open. (Click the arrow on the left side of its title bar if necessary.)

2. Using the Arrow tool, double-click to select the border of one of your rectangles.

3. Click the Stroke color box on the Property inspector. The pointer changes to an eyedropper anda set of color boxes appears.

4. To select a color, either click a color box or key a hexadecimal value representing a color in thehexadecimal color text box. Select one of the many shades of blue.

5. To set a line thickness, enter a number between 0.25 and 10 in the Stroke height box and pressEnter (Windows) or Return (Macintosh). You can also click the triangle next to the box and dragthe slider to set a value. To explore the effect of line thickness, first set the stroke height to0.25 and then set it to 5.

6. To select a line style, click the Stroke stylemenu. Select a style of your choice.

7. Notice that the stroke options on the Propertyinspector are also available on the Color Mixer,as shown in Figure 4-8. Use the Color Mixer tochange the stroke attributes of the borders ofanother rectangle.

FIGURE 4-8Color Mixer panel

8. To draw a rectangle with no border, click theRectangle tool. On the Color Mixer, click theStroke color icon (pencil) and click the NoColor box (the box with a red line through thecenter). Leave the file open for use in the nextStep-by-Step.

NoteMake sure the Color Mixer isopen (click the triangle on theleft side of the panel title bar orclick Window and then clickColor Mixer).

Hot TipTo remove the border from anexisting shape, select the bor-der and press Delete.


Flash has five fills: none, solid, linear gradient, radial gradient, and bitmap. You set thefill type and related attributes in the Color Mixer.

S TEP-BY-STEP 4.6

Setting Fill Attributes

1. Select the fill (interior) of one of your ovals.

2. On the Color Mixer, click the Fill Color button,and from the Fill style menu, choose a fill type.The attributes for that fill type appear on thepanel below the menu. Click Solid.

3. Click the Fill color box. The pointer changes to aneyedropper and a set of color boxes appears.

4. To select a color, either click a color box or keya hexadecimal value representing a color inthe Hexadecimal Color text box. Choose alight blue.

5. Draw another oval with the new fill attributes.Leave the current file open for use in the nextStep-by-Step.

The Pencil tool gives you two free-formmodes—Straighten and Smooth—that help youdraw precise, smooth shapes.

Use the Straighten mode to eliminate smallinconsistencies that can spoil free-form sketches.Straighten changes your free-form lines intostraight lines and regular arcs.

S TEP-BY-STEP 4.7

Using the Pencil Tool

1. Click the Pencil tool in the toolbox. The PencilMode appears in the Options section of thetoolbox.

NoteIn HTML, colors are expressedeither as hexadecimal values (forexample, #FF0000) or as colornames (red). The colors commonto Netscape Navigator andMicrosoft Internet Explorer onboth Windows and Macintosh sys-tems when running in 256-colormode are called Web-safe colors.The conventional wisdom is thatthere are 216 common colorsand that any hexadecimal valuethat combines the pairs 00, 33,66, 99, CC, or FF represents aWeb-safe color. Testing, however,has revealed that only 212 colorsare Web-safe. Internet Exploreron Windows systems does notcorrectly render the colors#0033FF, #3300FF, #00FF33,and #33FF00. All color palettesin Flash use the 212-color Web-safe palette; selecting a colorfrom the palette displays thecolor’s hexadecimal value. Tochoose a color outside the Web-safe range, click the color wheelicon at the top of the colorpalette to open the system colorpicker. The system color paletteis not limited to Web-safe colors.

NoteTo select none (no fill color)for a new shape, click the boxwith a red line through the cen-ter or click None from the Fillstyle menu.



2. From the Pencil Mode pop-up menu shown in Figure 4-9, click Straighten if necessary.

FIGURE 4-9Pencil Mode options

3. Move the pointer over the Stage. The pointer changes to a Pencil icon.

4. Drag to draw a curvy line. As you drag, you see a preview of your rough draft. Release themouse button. Your curvy line turns into a set of straight-line segments and regular curves.

5. With the Pencil tool in Straighten mode, quickly draw a rectangle or circle. Release themouse button. Flash recognizes the shape and draws a perfect rectangle or oval.

6. With the Pencil tool selected, click Ink from the Pencil Mode pop-up menu.

7. Drag on the Stage to draw a curvy line. When you release, Flash makes your line less jagged butleaves your curves as you drew them. Leave the file open for use in the next Step-by-Step.

Erasing with the Eraser tool removes strokes and fills. You can quickly erase everythingon the Stage, erase individual stroke segments or filled areas, or erase by dragging.

S TEP-BY-STEP 4.8

Using the Eraser Tool

1. Use Normal mode to erase strokes and fills:a. Click the Eraser tool in the toolbox. You can modify the settings for the Eraser tool in the

Options section.b. Click Erase Normal from the Eraser Mode pop-up menu.c. Choose the size and shape of the eraser from the Eraser Shape pop-up menu.d. Drag the Eraser tool on the Stage to erase

some of your ovals.

2. Use the Faucet option to erase a line:a. With the Eraser tool selected in the toolbox,

click the Faucet button in the Options section.b. Place the Faucet over a line you want

to erase.c. Click the line to delete it.

NoteAs with other procedures, if youchange your mind after you usethe Erase tool, you can clickEdit and then click Undo torestore what you erased.



3. Use the Faucet option to erase a fill:a. Click the Faucet option for the Eraser tool.b. Place the Faucet over the fill you want to erase.c. Click the fill to delete it.d. Use the Faucet option to erase rectangle fills.

4. To quickly erase everything on the Stage, double-click the Eraser tool.

5. Exit Flash. Do not save changes to the current file when prompted.

Now you have seen the basic elements of the Flash interface. Each activity that followsprovides you with step-by-step instructions for creating a movie.

Activity 1: Creating a Plan for Your AnimationIn this activity, you learn how to:

■ Create a storyboard.

■ Work with frame animation.

■ Set the properties for the movie.

Before you start planning the movie, you should view a completed version of the projectto get an idea of what you will create. See your instructor and view the movie as explained inStep-by-Step 4.9.

S TEP-BY-STEP 4.9

Viewing the Completed Movie

1. Start Flash.

2. Click File and then click Open. The Open dialog box opens. Your instructor will tell you how toaccess the completed movie, which is named la-pelota.fla. Click Open to open the movie.

3. To watch the movie play, click Control and then click Test Movie. When the Start buttonappears, click it.

4. Click each of the Play buttons.

5. Click Matching. Then listen and try to match the Spanish phrases to the English phrases.

6. Click File and then click Close to close the movie file. Close the file la-pelota.fla. Do not saveany changes. Leave Flash open for use in the next Step-by-Step.


This is the movie you will create in this project. You can vary the content by creatingyour own sound files and text.

A storyboard is a plan for your animation. Storyboarding is an important first step increating a Flash movie. A storyboard is a series of panels with sketches that show how themovie will progress. The storyboard becomes increasingly important the more complexthe movie or animation.

S TEP-BY-STEP 4.10

Planning the Animation

1. Use notebook or blank paper to draw out a series of panels, similar to a comic book. Each panelrepresents the Stage, where the action takes place.

2. Use numbers to designate each “frame” of the action on the Stage. These transition actions arecalled keyframes. Keyframes define the changes in an animated sequence, such as the object’smovement or change in characteristics. Figure 4-10 shows the storyboard for the beginningsequence of the movie.

FIGURE 4-10Storyboard for movie

The movie contains three scenes:1. The introduction sequence with the animated ball2. The sound-interaction sequence with play buttons and bouncing ball3. The matching learning-interaction sequence

3. Create a storyboard for each of the three scenes. Be sure to note how the viewer controls theprogression from one scene to the next.

You use the Document Properties dialog box to set important properties such as Stagesize, background color, and frame rate. The Stage is the area where all the action takes place.Just as in a theater production, it is the area in which the actors perform for the audience.


The background color is the color of the backdrop for the Stage (the background color foryour movie). A frame is one single still image among the many that make up a movie. Theframe rate is the number of frames per second of a Flash movie.

S TEP-BY-STEP 4.11

Setting the Movie Properties

1. In Flash, click File and then click New to create a new Stage.

2. Click Modify and then click Document. The Document Properties dialog box opens, as shown inFigure 4-11.

FIGURE 4-11Document Properties dialog box

3. To change the Stage size, you can enter values for Height and Width in the Dimensions textboxes. Click Printer to have your Stage size match the maximum print area currently available toyou. Click Contents to create a Stage area just large enough to cover the elements in yourmovie. For this project, use the default size of550 × 400 pixels.

4. From the Ruler Units pop-up menu, choose theunits in which you prefer to work. Flash will usethese units to calculate all measured items onthe Stage: rulers, grid, spacing, and dimensions.If you change the ruler units, the width and heightdimensions of the Stage will stay the same.Flash will automatically calculate and convert thesize into the requested equivalent units.

5. Click the Background Color box to change theStage’s background color. For this project, selectwhite as the background color, if necessary.

NoteA frame rate that’s too slowmakes the animation appear tostop and star t; a frame ratethat’s too fast blurs the detailsof the animation. A frame rate of12 frames per second (fps) usu-ally gives the best results onthe Web (the standard motion-picture rate is 24 fps). MostQuickTime and AVI movies havea frame rate of 12 fps. Flashallows only one frame rate forthe entire Flash movie, so it is agood idea to set this rate beforeyou begin creating an animation.



6. Leave 12 as the value for Frame Rate. The total number of frames times the frame rate deter-mines the length of the movie. Twelve frames per second is the default set in Flash. The major-ity of computers can display this frame rate smoothly.

7. When you have made all the changes, click Make Default. Click OK. Leave the file open for usein the next Step-by-Step.

Activity 2: Creating a Short AnimationYou are ready to create a short movie. In this activity, you learn how to:

■ Create animation.

■ Insert different frame types (empty, key, regular, tweened).

■ Use the playhead.

■ Work with the Timeline.

■ Modify attributes.

■ Add shape-tweened animation.

ToolTips are annotations that appear when the pointer is positioned over a button or icon.To make it easier to identify tools and buttons, make sure ToolTips are turned on in Flash.

S TEP-BY-STEP 4.12

Using ToolTips

1. If the toolbox is not already open, click Window and then click Tools.

2. To turn on ToolTips, click Edit and then click Preferences (Windows) or click Flash and then clickPreferences (Macintosh OS X).

3. In the Preferences dialog box, click the General tab.



4. Make sure the Show Tooltips box is checked, as shown in Figure 4-12. Click OK. Leave the fileopen for use in the next Step-by-Step.

FIGURE 4-12Preferences dialog box

S TEP-BY-STEP 4.13

Creating a Simple Bouncing Ball

1. If you do not already have an Untitled document in the Flash window, click File and then clickNew. Flash creates a document with one layer and a keyframe in frame 1 of the Timeline.

2. Click File and then click Save As. The Save As dialog box opens.

3. In the File name (Save As in Macintosh) text box, key la-pelota.fla.

4. Click Save.

5. On the Timeline, click frame 1 on Layer 1 toselect it.

6. In the toolbox, click the Oval tool. Set the strokecolor to None (see Step-by-Step 4.5). Set the fillcolor to orange.

NoteCreate a file folder in which tosave your movie, if necessar y,from the Save As dialog box.Place the folder on the mainhard drive of the computer,preferably in the same rootfolder where the project graphicand sound file folders werecopied. You might want toinclude your initials in the file-name, such as la-pelota-jm.fla.



7. Draw a circle near the middle of the Stage.

Next you create a motion tween for your circle.Before you can use a drawn shape in a motiontween, you must convert it to a symbol.

8. Use the Arrow tool to select your circle. ClickInsert and then click Convert to Symbol to openthe Convert to Symbol dialog box.

9. Name the symbol Ball and click Graphic as the Behavior. Click OK. Flash saves the graphic inthe library for la-pelota.fla, as shown in Figure 4-13. To see this library, click Window and thenclick Library.

FIGURE 4-13Ball symbol in Library

10. From the menu bar, click Insert and then clickCreate Motion Tween.

11. On the Timeline, click frame 5.

12. From the menu bar, click Insert and then clickKeyframe.

13. Click the Arrow tool and drag the circle to the bot-tom of the Stage. The solid bullet in frame 5 indi-cates you have created content in a keyframe.

14. On the Timeline, click frame 10.

15. Click Insert and then click Keyframe.

NoteTo help orient the drawing on theStage, you can turn on rulers andgrids. Click View and then clickRulers, and click View, clickGrid, and then click Show Grid.

NoteAlternatively, you can right-click(Windows) or Control-click(Macintosh) frame 1 on theTimeline and click Create MotionTween from the context menu.

NoteAlternatively, you can right-click(Windows) or Control-click(Macintosh) frame 5 and clickInsert Keyframe from the con-text menu, or press F6.



16. Move the circle back to the middle of the Stage where it began.

17. Click Window, click Toolbars, and then click Controller (Windows), or click Window and thenclick Controller (Macintosh). Click Play on the Controller to preview your animation, as shown inFigure 4-14.

FIGURE 4-14Animation in progress

Using the circle you created, you will add new colors to each “bounce.” The circles inframes 5 and 10 are each instances of the library symbol Ball. Each instance of a symbol canhave its own color effect.

S TEP-BY-STEP 4.14

Changing the Color of the Ball

1. Click frame 5 and click the circle. The Property inspector displays options for the selectedinstance of Ball.

2. On the Property inspector, choose Tint from the Color pop-up menu shown in Figure 4-15.

FIGURE 4-15Change ball color using Tint



3. Click the Color box and select a tint color.

4. Click Play on the Controller to preview your animation.

5. Click frame 15. Click Insert and then click Keyframe.

6. Drag the circle to the bottom of the screen.

7. With frame 15 selected, click the circle and change the tint color on the Property inspector.

8. Repeat Steps 5 through 7 every five frames, changing the position and color of the circle eachtime, ending at frame 35. (The ball in frame 35 will be positioned at the bottom of the Stage.)

9. Test the animation by clicking Play on the Controller. The circle has turned to a color-changingbouncing ball, as shown in Figure 4-16.

FIGURE 4-16Ball with color change

10. Click File and then click Save to save your work. Leave the file open for use in the next Step-by-Step.


Using what you have created, you will adjust the size of each instance of the “bouncingball.” You do all the editing through keyframes, now that you have created a motion tween.

S TEP-BY-STEP 4.15

Adjusting the Size of the Ball

1. Click frame 5.

2. Click Modify, click Transform, and then click Scale. Square handles appear on the four cornersand four sides of the box surrounding the ball.

3. To change the size of the ball without distorting its shape, drag one of the corner handles in adiagonal direction. Make this instance of the ball larger.


5. Repeat Steps 1 through 4 every five frames, alternately changing the size from larger to smaller.

6. Test the animation. When you are satisfied with the appearance, click File and then click Save,or click Ctrl+S (Windows) or Command+S (Macintosh). Leave the file open for use in the nextStep-by-Step.

Using what you have created, you will manipulate the position of your “bouncing ball.”

S TEP-BY-STEP 4.16

Manipulating the Graphic Elements

1. Click frame 10.

2. Use the Arrow tool to drag the ball to the left side of the Stage.

3. Click frame 15. Drag the ball to the top.

4. Click frame 20. Drag the ball to the right.

5. Click frame 35. Drag the ball to the center of the Stage.


7. Save your work, and leave the file open for use in the next Step-by-Step.

Using what you have created, you will create some special effects for the “bouncing ball.”


S TEP-BY-STEP 4.17

Creating Special Effects

1. Click frame 40 on the Timeline.

2. Click Insert and then click Keyframe.

3. Click the ball and use the Property inspector to change the tint color to red.

4. Click frame 75, click Insert, and then click Keyframe.

5. Click Modify, click Transform, and then click Scale. Drag a corner of the square surrounding theball to make it larger.

6. On the Property inspector, choose Brightness from the Color pop-up menu.

7. Set the Brightness to 100%. The ball becomes white, so it disappears from view, as shown inFigure 4-17.

FIGURE 4-17Ball disappears from view

8. Click Play on the Controller to preview youranimation.

9. Save your work and close the file. Exit Flash.

Hot TipYou may need to close panels atthe right side of the screen tosee the Brightness Amount box.


Activity 3: Creating a Text AnimationYou will now complete the first scene and transition to the second scene with a viewer

control. In this activity, you learn how to:

■ Add text.

■ Change text attributes.

■ Create navigation buttons.

■ Add action to buttons.

Using what you have created, you will create and add some text animation.

S TEP-BY-STEP 4.18

Creating Animated Text

1. Start Flash, and open your file titled la-pelota.fla.

2. To create a new layer, click Insert and then click Layer. Double-click the title Layer 2, and keySpanish, as shown in Figure 4-18.

FIGURE 4-18Key new layer name

3. On the Spanish layer, click frame 75. Click Insert and then click Keyframe.

4. Click the Text tool in the toolbox.

5. On the Property inspector, click the Font pop-up menu and select Times New Roman. Key 40 inthe Font Size box, and use the Color Selection box to make the text red.

6. Click on the left side of the Stage and key Spanish.

7. Use the Arrow tool to select the text. Click Insert and then click Convert to Symbol to open theConvert to Symbol dialog box.

8. Name the symbol Text 1 and click Graphic as the Behavior. Click OK.

9. Use the Arrow tool to select the text. Click Insert and then click Create Motion Tween.



10. On the Spanish layer, click frame 90. Click Insert and then click Keyframe, as shown in Figure 4-19.

FIGURE 4-19Insert keyframe in Spanish layer

11. Return to frame 75 and select the text. Click Modify, click Transform, and then click Scale.Reduce the size of your text.

12. Use the Arrow tool to select the text.

13. On the Property inspector, choose Brightness from the Color pop-up menu and increase theBrightness to 100%.

14. In frame 75, use the Arrow tool to move the text to a position on the left half of the Stage nearthe center.

15. In frame 90, use the Arrow tool to position the text on the left half of the Stage near the center.

16. Create a new layer and name it Lesson.

17. On the Lesson layer, click frame 85. Click Insertand then click Keyframe.

18. Click the Text tool. On the Property inspector, clickthe Font pop-up menu and make sure Times NewRoman is selected. Key 40 in the Font Size box,and make the text black.

19. Using the Text tool, key Lesson on the Stage.Align “Lesson” to the right of “Spanish.”

20. In frame 85, use the Arrow tool to select the text.Click Insert and then click Convert to Symbol toopen the Convert to Symbol dialog box.

NoteAfter you have created the motiontweens and put the keyframes inplace, you can use the OnionSkin tool to help line up your ani-mation. To see several frames ofan animation simultaneously onthe Stage, click the Onion Skinbutton. All frames between theStar t Onion Skin and End OnionSkin markers (in the Timelineheader) are superimposed as oneframe on the Stage.



21. Name the symbol Text 2 and click Graphic as the Behavior. Click OK.

22. On the Lesson layer, click frame 85. Click Insert and then click Create Motion Tween. Then clickframe 100, click Insert, and click Keyframe. Click frame 110, click Insert, and then click Frame.

“Spanish” disappears at frame 110 because frame 90 is the last frame on the Spanish layer,as shown in Figure 4-20.

FIGURE 4-20Frame 110 on Lesson layer

23. To keep “Spanish” on the Stage, click frame 110 on the Spanish layer. Click Insert and thenclick Frame.

24. Click the Onion Skin button to turn on Onion Skin and align the Spanish and Lesson animations.

25. On the Lesson layer, click frame 85 and then click the “Lesson” text.

26. On the Property inspector, choose Brightness from the Color pop-up menu and increase theBrightness to 100%.

27. With frame 85 still selected, hold down Shift and drag “Lesson” to the far right of the Stage.

28. Turn off Onion Skin. Test the movie.

29. Create another layer and title it One.

30. On the One layer, click frame 101. Click Insert and then click Keyframe.

31. Click the Text tool. On the Property inspector, set Times New Roman as the font. Key 95 in theFont Size box, and make the text red.



32. Using the Text tool, key 1. Use the Arrow tool toposition “1” to the right of “Lesson.”

33. Use the Arrow tool to select the text. Click Insertand then click Convert to Symbol to open theConvert to Symbol dialog box.

34. Name the symbol Text 3 and click Graphic as theBehavior. Click OK.

35. Use the Arrow tool to select the text. Click Insertand then click Create Motion Tween.

36. On the One layer, click frame 110. Click Insertand then click Keyframe.

37. Click frame 101 and select the “1” text. On theProperty inspector, change the Brightness to100%. Click on the Stage to apply the change.

38. Click frame 110 and select the “1” text. On the Property inspector, change the Brightness to 40%.Click on the Stage to apply the change. Your Stage should resemble Figure 4-21.

FIGURE 4-21Text items inserted

39. Test the movie. When you are satisfied with the appearance, save your work. Leave the file openfor use in the next Step-by-Step.

NoteNormally, Flash displays oneframe of an animation sequenceat a time. To help you positionand edit a frame-by-frame ani-mation, you can view two ormore frames on the Stage atonce by turning on the OnionSkin tool. The frame under theplayhead appears in full colorand surrounding frames aredimmed, making each frameappear as though drawn on asheet of translucent onionskinpaper with the sheets stackedone on top of another. Dimmedframes cannot be edited. Withthe Onion Skin tool turned on,use the Arrow tool to repositionthe text as needed.


S TEP-BY-STEP 4.19

Creating Navigation Buttons

1. Click Insert and then click New Symbol.

2. Name the button Start/Behaviorbutton and click Button as the Behavior, as shown in Figure 4-22.Click OK. Flash opens a blank Stage on which you will create the new button. There are four frameson Layer 1: Up, Over, Down, and Hit.

FIGURE 4-22Create new button symbol

3. Click the Oval tool. Set the stroke color to black. Set the fill color to light gray.

4. Draw an oval on the Stage, approximately 3 cm wide by 2 cm high.

5. Click the Text tool.

6. On the Property inspector, choose Times New Roman from the Font pop-up menu. Key 20 in the FontSize box, and make the text black.



7. Use the Text tool to key START on the Stage, as shown in Figure 4-23.

FIGURE 4-23Key text on Stage

8. Use the Arrow tool to drag the word “START” to the center of the oval.

9. Click the Over frame. Click Insert and then click Keyframe.

10. Select the gray area of the oval and change the fill color to dark gray.

11. Click the Scene 1 label at the top left of the Stage, or choose Scene 1 from the Edit Scene pop-up menu at the top right of the Stage, as shown in Figure 4-24. Flash closes the ButtonStage and returns to Scene 1.

FIGURE 4-24Return to Scene 1



12. Insert a new layer in Scene 1 and name it Start.Click frame 110. Click Insert and then clickKeyframe.

13. Click Window and then click Library and find yourbutton, as shown in Figure 4-25. Drag your buttononto the Stage below the text.

FIGURE 4-25Drag button from Library

14. Close the Library if desired. Save your work, and leave the file open for use in the next Step-by-Step.

S TEP-BY-STEP 4.20

Adding Action to a Button

1. Click Insert and then click Scene to insert a new scene. Scene 2 will be the destination whenthe Start button is clicked. You’ll construct this scene in the next activity.

2. While you’re in Scene 2, click frame 1. On the left side of the Property inspector, click the<Frame Label> text box and key scene2frame1. Press Enter (Windows) or Return (Macintosh).

It’s good practice to label any frame that is the destination for a button action.

3. Return to Scene 1. Click frame 110 of the Start layer and select the button on the Stage.

4. Click Window and then click Actions. Flashopens the Actions panel.

5. In the Actions toolbox at the left of the Actionspanel, click the Actions folder to open it. In theActions folder, open the Movie Control folder.

NoteThe button name may changein the Librar y to Star t-Behaviorbutton.

NoteMake sure the panel that opensis labeled “Actions - Button,” not“Actions - Frame.” If necessar y,close the Actions panel, clickthe Start button, and then clickWindow and Actions again.



6. In the Movie Control folder, do either of the following:a. Double-click the goto action.b. Drag the goto action into the Script pane (at the lower right of the panel).

7. Set the following options for the action, as shown in Figure 4-26:a. Above the Script pane, click the option Go to and Stop.b. Click Scene 2 on the Scene pop-up menu.c. Click Frame Label on the Type pop-up menu.d. Click scene2frame1 on the Frame pop-up menu.

FIGURE 4-26Set options for action

8. Click frame 110 of the One layer.

9. On the Actions panel, double-click the stop action to place it in the Script pane. Close theActions panel.

When a viewer plays this movie, the Stop action causes the movie to stop at frame 110 until theviewer clicks the Start button. The action attached to the Start button will cause the movie toplay Scene 2 when the viewer clicks Start.

10. Click Control and then click Enable Simple Frame Actions, and then click Control and EnableSimple Buttons.

11. Click Control and then click Test Scene to test Scene 1 of your movie.

12. Close the test screen. Save your work, and leave the file open for use in the next Step-by-Step.


Activity 4: Importing SoundTo add sound to the mini-lesson movie, you will attach the audio clips to buttons. In

this activity, you will learn how to:

■ Import sounds to the movie’s library.

■ Use the Common Library to add buttons.

■ Add sound to the buttons.

S TEP-BY-STEP 4.21

Importing Sound Files to the Library

1. Open Scene 2.

2. Click File and then click Import. Flash imports.aif, .wav, and .mp3 audio files.

3. Locate the Sounds folder.

4. To import all the audio files to the library, selectall the audio files in the folder, as shown inFigure 4-27. Click Open.

FIGURE 4-27Select all files to import

5. Click Window and then click Library to see if the files have successfully been imported into thelibrary. Each sound file should be in the library.

NoteThe original sound files arelocated in the data files sup-plied for this course. If you didnot already copy those files ontothe computer hard drive into thefolder you have designated forsaving the project files, do sonow. The sound files are savedin a format compatible witheither Windows or Macintoshplatforms. Select the soundfiles that correspond to the com-puter platform you are using.



6. Select a sound file in the library, as shown in Figure 4-28. Test the sound file by clicking the Playbutton (near the top right of the Library panel).

FIGURE 4-28Click a file to test


S TEP-BY-STEP 4.22

Adding the Text Layer

1. In Scene 2, change the layer name Layer 1 to Text.

2. Click the Text tool. On the Property inspector, set Font to Times New Roman, set Font Size to 27,and set the color to gray.

3. At the top of the Stage, key Listen to the phrase in both languages. (Be sure to key the periodat the end of the sentence.)

4. Below the first sentence, key English.

5. Below the word English, key The Ball Bounces.

6. Near the bottom of the Stage, key Espanol.

7. Under the word Espanol, key La Pelota Rebota.

8. Use the Arrow tool to select the word English. On the Property inspector, set Font Size to 39and set red for the color.

9. Select the sentence The Ball Bounces. On the Property inspector, set Font Size to 24 and setred for the color.

10. Select the word Espanol. On the Property inspector, set Font Size to 39 and set red for the color.



11. Select the sentence La Pelota Rebota. On theProperty inspector, set Font Size to 24 and setred for the color.

12. Select the four text elements from Steps 4through 7. Click Modify, click Align, and then clickLeft, as shown in Figure 4-29.

FIGURE 4-29Align the text elements


S TEP-BY-STEP 4.23

Adding Buttons to the Movie

1. In Scene 2, add a new layer and name it Play Buttons.

2. Click Window, click Common Libraries, and then click Buttons (this option may display asButtons.fla).

NoteMake sure the To Stage optionis not selected; otherwise thetext elements align to the leftside of the Stage.



3. Double-click the Circle Buttons folder to open it. Click the Play button in that folder, as shown inFigure 4-30.

FIGURE 4-30Click Play button

4. Drag the Play button to the Stage, to the right of The Ball Bounces.

Once the button is on the Stage, it automatically appears in your la-pelota.fla Library. Close theLibrary - Buttons.fla panel.

5. Click Window and then click Library. Click the Play button in the la-pelota.fla Library. Locate theOptions menu at the top right of the Library panel. To rename the button, click Rename on theLibrary panel's Options menu, and key Playing. Press Enter (Windows) or Return (Macintosh).

6. To create another play button in the library, click the new Playing button on the Library panel,and then click Duplicate on the Library panel's Options menu.

7. Name the new play button Spanish. Set the Behavior to Button and click OK.

8. Drag the Spanish play button to the Stage, to the right of “La Pelota Rebota.”


To add sound to these play buttons, you will use the sound files you imported at thebeginning of Activity 4.


S TEP-BY-STEP 4.24

Adding Sound to the Buttons

1. On the Library panel, double-click the Playing button. This opens the layers of the button andthe Button Attribute frames, as shown in Figure 4-31.

FIGURE 4-31Button Attributes frames

2. Click Insert, then click Layer, and name the new layer Audio.

3. Click the Down frame on the Audio layer. Click Insert and then click Keyframe.

4. On the Property inspector, choose The ball bounces (eng) from the Sound menu. Flash inserts thesound into the Down frame of the button.

5. Click Scene 2 to return to Scene 2.

6. To test the new play button, make sure EnableSimple Frame Actions and Enable SimpleButtons are selected on the Control menu.

7. To add audio to the Spanish play button, repeatSteps 1 through 5 with the corresponding Spanishaudio file.

8. Test the sounds by clicking each button.


Activity 5: Combining ScenesYou will combine the scenes you have created into one movie. In this activity, you will

learn how to:

■ Join a previously created animation into the movie.

■ Create a continuous animation (film loop).

■ Add a viewer control button.

NoteTo change the position of eitherplay button by dragging, EnableSimple Frame Actions andEnable Simple Buttons must bedeselected on the Control menu.


S TEP-BY-STEP 4.25

Combining Frames

1. Make sure the la-pelota.fla file is open. Click File and then click Open. Browse to locate theSample Movies folder in the data files supplied with this course, and click bouncer.fla. Click Open.

2. Click Layer 1 to select all the frames in that layer of bouncer.fla.

3. Click Edit and then click Copy Frames.

4. Close bouncer.fla without saving any changes.

5. In Scene 2 of la-pelota.fla, click Insert, then click Layer, and label the new layer Bouncing Ball.

6. Click frame 1, click Edit, and then click Paste Frames.

7. Click Play on the Controller to see the bouncing ball animation.

8. To keep the text and buttons on the screen while the ball bounces: Click frame 40 on the Textlayer, click Insert, and then click Frame; click frame 40 on the Play Buttons layer, click Insert,and then click Frame.

9. Click Play on the Controller to see a preview of the scene.


To create a continuous animation of the bouncing ball (film loop), you must add actionsto the frames.

S TEP-BY-STEP 4.26

Creating a Film Loop

1. Click frame 1 of the Bouncing Ball layer.

2. Click Window and then click Actions.

3. In the Actions toolbox at the left of the Actions panel, make sure the Actions folder is open. Inthe Actions folder, open the Movie Control folder.

4. In the Movie Control folder, double-click the play action.

Flash adds the play action to the Script pane on the right side of the Actions panel.

5. Click frame 40, the last frame on the Bouncing Ball layer.

6. On the Actions panel, double-click the goto action in the Movie Control folder.



7. Above the Script pane on the Actions panel, click the option Go to and Play. For Scene, leave<current scene>. For Type, click Frame Label. For Frame, click scene2frame1, as shown inFigure 4-32.

FIGURE 4-32Actions for looping bouncing ball

8. Close the Actions panel and save your work.

9. Click Play on the Controller to see your Flash movie. When the movie reaches the last frame, itloops back to the first frame and plays again repeatedly. To stop the movie, click Stop on theController, or press Enter (Windows) or Return (Macintosh). Leave the file open for use in thenext Step-by-Step.

To finish up this scene, you need to add two links. First, create a button that links backto Scene 1. Then create a button that links forward to Scene 3, a matching exercise you’llconstruct in the next activity.

S TEP-BY-STEP 4.27

Adding Scene Links

1. Click Insert and then click New Symbol.

2. In the Create New Symbol dialog box, name the symbol Movie, and set the Behavior to Button.Click OK.

3. Using the Text tool, key Movie on the Stage for the Movie button.

4. Use the Arrow tool to select the word Movie. On the Property inspector, set Times New Romanfor the Font, 14 for the Font Size, and dark gray for the Text color.


6. With the Over frame selected, use the Text tool to highlight the text.



7. On the Property inspector, set the text color to blue.

8. Click the Hit frame. Click Insert and then click Keyframe. With the Hit frame selected, use theRectangle tool to draw a rectangle around the word Movie.

This rectangle will not be visible on the Stage, so it doesn’t matter what stroke and fill colorsyou use. The rectangle defines the area of the button that responds when clicked.

9. Click the Arrow tool and go to Scene 1, which will be the destination when the Movie button isclicked. Click frame 1 in Layer 1. On the Property inspector, key scene1frame1 as the framelabel and then press Enter (Windows) or Return (Macintosh).

10. Return to Scene 2. Click frame 1 on the Text layer.

11. Locate and click the Movie button on the Library panel. Drag it just left of center at the bottomof the Stage.

12. With the Arrow tool, click the Movie button. Click Window and then click Actions.

13. On the Actions panel, double-click the goto action.

14. Above the Script pane on the Actions panel, click the option Go to and Play. For Scene, clickScene 1. For Type, click Frame Label. For Frame, click scene1frame1.

15. Close the Actions panel and save your work.

16. Click Insert and then click Scene to create Scene 3. Click frame 1. On the Property inspector,key scene3frame1 as the frame label, and press Enter (Windows) or Return (Macintosh).

17. Return to Scene 2. Click Insert and then click New Symbol.

18. In the Create New Symbol dialog box, name the symbol Matching, and set the Behavior toButton. Click OK.

19. Using the Text tool, key Matching on the Stage for the Matching button.

20. Use the Arrow tool to select the word Matching. On the Property inspector, set Times NewRoman for the Font, 14 for the Font Size, and dark gray for the Text color.


22. With the Over frame selected, use the Text tool to highlight the text.

23. On the Property inspector, set the text color to blue.

24. Click the Hit frame, click Insert, and then click Keyframe. With the Hit frame selected, use theRectangle tool to draw a rectangle around the word Matching.

25. Click the Arrow tool and click Scene 2 to return. Click frame 1 on the Text layer.



26. Locate and click the new Matching button on the Library panel. Drag it just right of center at thebottom of the Stage (next to the Movie button).

27. With the Arrow tool, click the Matching button. Click Window and then click Actions.

28. On the Actions panel, double-click the goto action.

29. Above the Script pane on the Actions panel, click the option Go to and Stop. For Scene, clickScene 3. For Type, click Frame Label. For Frame, click scene3frame1.

30. Close the Actions panel and save your work. Leave the file open for use in the next Step-by-Step.

Activity 6: Creating a Drag and Drop InteractionIn Scene 3 you create a matching quiz, called a learning interaction. In this activity, you

learn how to:

■ Use the Drag and Drop learning interaction found in the Common Library.

■ Set the quiz parameters.

S TEP-BY-STEP 4.28

Creating an Interaction

1. Open Scene 3, using the Edit Scene menu.

2. Click Window, click Common Libraries, and then click Learning Interactions.fla.



3. In the Learning Interactions folder on the Library panel, click Drag and Drop and drag it to theStage. Use the Arrow tool to center the Drag and Drop interaction outline near the top of theStage, as shown in Figure 4-33.

The Drag and Drop Component info panel on the left side will not be visible when a viewer playsyour movie. Ignore it when centering the Drag and Drop interaction.

FIGURE 4-33Place Drag and Drop interaction

4. Click the Drag and Drop interaction, click Modify, and then click Break Apart.

5. Click Edit and then click Deselect All, or click the workspace outside the Drag and Drop inter-action to deselect everything.



6. Click the Drag and Drop Component info panel. On the Property inspector, click LaunchComponent Parameters Panel. The Component Parameters panel opens, as shown in Figure 4-34.

FIGURE 4-34Component Parameters panel

7. Enlarge the Component Parameters panel to make it more legible, make the following changes,and then close the panel: a. In the Interaction ID box, key Learning Spanish.b. In the Question box, key Listen to each audio clip and drag the Spanish phrase to the

matching English phrase. (Make sure to key the period at the end of the sentence.)



c. Ignore the columns Drag Object Name and Matches Target Name for now; you will fill thesein later.

d. Click Options at the bottom of the panel. For the number of Tries (top right), key 10. Edit theFeedback options as you choose. Deselect the Knowledge Track check box, as shown inFigure 4-35.

FIGURE 4-35Options tab selections

8. Collapse or move the Component Parameters panel so you can see the learning interation onthe Stage. In the Drag and Drop interaction,double-click Target 4 and press Delete. Double-click Drag 4 and press Delete.

There will be only three pairs of objects to matchin your quiz.

9. Align Drag 1, Drag 2, and Drag 3 in a row acrossthe top of the interaction area.

NoteTo align objects precisely, clickModify and then click Align, andselect options from the sub-menu. You can also use theAlign panel (click Window andthen click Align).



10. Align the Target objects in a matching row near the bottom of the interaction area, as shown inFigure 4-36.

FIGURE 4-36Align the Drag and Target objects

11. Create a new layer in Scene 3 and name it English Labels.

12. Click the Text tool. On the Property inspector, set Font to Times New Roman, set Font Size to16, set color to red, and click Bold style.

13. Using the Text tool, key Skateboard below Target 1, Dog below Target 2, and Ball below Target 3.

14. Use the Arrow tool to center each of the words below the target squares.

15. Create a new layer and name it Spanish Audio.

16. Click Window, click Common Libraries, and then click Buttons (or Buttons.fla).

17. Double-click the Playback folder to open it.

18. Click the gel Right button and drag it to the left of Drag 1 on the Stage.

19. Close all other libraries. Click Window and then click Library.

20. Find and click gel Right and, in Library Options, choose Duplicate.



21. Label the new button Gel 2 and click Button for the Behavior. Click OK.

22. Duplicate Gel 2 and label the new button Gel 3.

23. From the Library, drag Gel 2 to the Stage, placing it to the left of Drag 2. Drag Gel 3 to the leftof Drag 3, as shown in Figure 4-37.

FIGURE 4-37Drag Gel buttons into place


Use what you learned in Activity 4 to add sound to each Gel button.

S TEP-BY-STEP 4.29

Adding Sound

1. Add an Audio layer to each of the Gel buttons, insert a keyframe in the Down frame, and add thefollowing Spanish audio file:a. Button for Drag 1: dog(Span).aifb. Button for Drag 2: skate(Span).aifc. Button for Drag 3: the ball(Span).aif



2. Make sure Enable Simple Buttons is selected onthe Control menu, and test the sounds.

3. Now go back and set the correct matches on theComponent Parameters panel. Click the Dragand Drop Component info panel. On the Property inspector, click Launch ComponentParameters Panel.

4. In the text boxes for Matches Target Name, change the match for Drag1 from Target1 to Target2.Change the match for Drag2 from Target2 to Target1. Keep Target3 as the match for Drag3.

5. Delete Drag4 and Target4 because your interaction has only three pairs of matches. Your panelshould look like Figure 4-38.

FIGURE 4-38Completed Component Parameters panel.

6. Close the Component Parameters panel.

7. Finally, create links back to the previous twoscenes. Refer to Activity 5, Step-by-Step 4.27.a. In Scene 3, add a layer and name it

Navigation Buttons.b. Create a symbol named Movie 2, a button

that goes to and plays Scene 1. Position thebutton in frame 1 of the Navigation layer, atthe bottom of the Stage.

c. Create a symbol named Lesson 1, a button that goes to and plays Scene 2. Position the but-ton in frame 1 of the Navigation layer, at the bottom of the Stage, next to the Movie button.

NoteThe sound files for Windows usethe .wav extension.

NoteAs a shor tcut, you can dragfrom the Librar y panel theMovie button you created forScene 2 and set the appropriateoptions on the Actions panel.



8. Click Control and then click Test Movie to see the Macromedia Flash movie in action.

9. Close the Test window, save your work, and leave the file open for use in the next Step-by-Step.

Activity 7: Exporting Your FilesThe movie you created in Flash is saved as a file with a .fla extension and can only be

viewed within Flash. When you are ready to deliver the movie to an audience, you must pub-lish or export the Flash FLA file to another format for playback.

The Flash Publish feature is designed for presenting animation on the Web. The Publishcommand creates a Flash Player file (SWF) and an HTML document to house it and make itready for a browser window. In this format, the file can only be viewed. The SWF file cannotbe edited.

The Export Movie command enables you to create content that can be edited in otherapplications and exported into a single format. You can export movies in a variety of formatsranging from a series of bitmaps to an AVI or QuickTime movie.

If you have Dreamweaver, you can easily add a Flash movie to your Web site.Dreamweaver generates the necessary HTML code.

S TEP-BY-STEP 4.30

Setting Publishing Options for Movie Files

1. To specify where the movie will be published (saved), create the folder where you want to savethe published files. Click File and then click Save As and save the Flash movie file in the folderyou created.

2. Click File and then click Publish Settings.



3. Select the options for each file format you want to create, as shown in Figure 4-39. You can usethe default filenames or enter filenames of your choosing.

FIGURE 4-39Select publishing options

4. When you have finished selecting options, do one of the following:a. To generate all the selected files, click Publish.b. To save the settings with the FLA file and close the dialog box without publishing the files,

click OK.

5. Leave the file open for use in the next Step-by-Step.

S TEP-BY-STEP 4.31

Using Default Settings or Publishingfrom Previous Settings

1. Click File and then click Publish to create the filesin the formats and location specified in the PublishSettings dialog box. Then click OK.

2. To export your movie, click File and then clickExport Movie.

NoteClick the Help button at the bot-tom of the Publish Settings dia-log box for specific instructionson specifying an absolute or rela-tive path for publishing the files.



3. Select the format in which your movie is to beexported, enter a filename for the output file, andselect a folder location for exporting the movie.

4. Click Save.

5. Click OK in the Export Flash Player dialog box.

6. Save your work and close the file. Exit Flash.

After you have published your movie, it isready to be viewed by the audience.

NoteYou can choose an expor t moviefile format either from theExpor t Movie dialog box or fromthe Flash tab in the PublishSettings dialog box. On theFlash tab, you can set imageand sound compression optionsor choose an option to protectyour movie from being impor ted.

Documents

CREATING A MINI-LESSON MOVIEschools.tdsb.on.ca/.../upcoming/tgj3mwtopics/MiniLessonMovie.pdf · Project 4 Creating a Mini-Lesson Movie 129 STEP-BY-STEP 4.3 Continued 5. Draw three