Macromedia Flash MX 2004

Introduction
Macromedia Flash MX 2004 is used to create a Flash movie that can be inserted into a website. When creating a Flash movie, you have the option to create animated buttons, animated text or an entire web application. For example, a web application could be a graphic image of a map with display text and a highlighted trail of the route. So, when the user rolls over a map with their mouse, a trail is highlighted in color and a text description is displayed. Flash File Extensions – An original Flash file has the extension of .fla, this is the working file. When the Flash file is complete the .fla file needs to be published by clicking on the File menu and clicking on Publish or hold down the Shift key and press F12. Once the Flash file is published the file it creates is a .swf file which can then be inserted into a website. Flash buttons and Flash text can be created in Macromedia Dreamweaver by clicking on the Insert menu, move your mouse down to Media and click on Flash Button. When the window opens fill in the blanks in the window that opens. The following are examples of Flash buttons that can be created in Dreamweaver.

Flash text in Dreamweaver – can include a rollover of color. The original text can be blue in colour and change to yellow in the rollover state and a link to create a rollover text with a hyperlink. To do this click on the Insert menu, move your mouse down to Media and click on Flash Text. All other animations or web applications beyond these Flash buttons will need to be created in Flash MX 2004, which is part of the Macromedia Studio MX suite. Flash Plug-in’s are incorporated into the Windows XP operating system, Netscape and Internet Explorer. Make a website come to life by using Flash movies tools to create animations, advertisements, ad banners and interactive advertisements. Add website movement by adding sound, make online games interactive or to tell a story with interactivity. Read the following pages carefully as there are many instructions that can be used to modify the tools you will use in this module.

Page 1

Macromedia Flash MX 2004

Flash Workspace - Timeline

The

Timeline consists of a sequence of frames that allows you to store pictures. Each frame on the Timeline is identified by a frame number indicating the position of the frame in the frame sequence. An animated effect is produced when the picture in each frame is displayed sequentially. The number of frames displayed per second is called the frame rate. The default frame rate is 12 frames per second. Flash repeats displaying the sequence of frames over and over again when you execute the animation. Flash Workspace

Page 2

Macromedia Flash MX 2004

Flash Workspace - Timeline

Toolbar

Page 3

Macromedia Flash MX 2004

Properties

Page 4

Macromedia Flash MX 2004

Panels - Colour Mixer

Create a Grid and Rulers

Page 5

Macromedia Flash MX 2004

Text options

Page 6

Macromedia Flash MX 2004

Activity 1
1. Double click on the Macromedia Flash MX 2004 shortcut on your desktop. If this shortcut is not on your desktop ask your teacher to set it up for you. 2. To create a New Flash Document, Click on Flash Document under Create New.

3. The window will change and at the top you will see the Timeline open. The Timeline consists of a sequence of frames that allows you to store pictures. Each frame on the Timeline is identified by a frame number indicating the position of the frame in the frame sequence. (For more details see the image on Page 3). 4. An animated effect is produced when the picture in each frame is displayed sequentially. The number of frames displayed per second is called the frame rate. The default frame rate is 12 frames per second. Flash repeats displaying the sequence of frames over and over again when you execute the animation.

Page 7

Macromedia Flash MX 2004

Stage - Stage Properties 1. Click on the stage. (Refer back to Page 2) 2. Click on the Size button.

3. In the Document Properties window, double click the Size and set the dimensions to 500 px (width) x 250 px (height)

4. Click on Make Default. This will keep your size of canvas for future drawings. 5. Double click the 12.0 fps (frames per second). This option allows the user to adjust the speed the movie will play. 6. Click on OK. 7. Double click the hand in the tool bar to center the stage Stoke and Fill 1. Click on the Oval Tool in the toolbox. 2. A circle has two parts a Stroke and a

Fill.

3. Move your mouse to the center of the Stage (drawing area) on your screen. 4. Hold down the left mouse button and drag the mouse to create a circle.
Page 8

Macromedia Flash MX 2004

5. Click on the Selection tool in the toolbox. 6. Click in the center of the circle. 7. In the Property Inspector at the bottom of the Flash window, click on the down pointing arrow next to the Paint Can (Fill). 8. From the Color Palette that opens choose a Bright Blue Color. 9. Using the Select tool again click on the very outer edge of the Circle. 10. In the Property Inspector at the bottom of the Flash window, click on the down pointing arrow next to the Pen (Stroke). 11. Choose a Bright Red Color and change the Stroke Height to 3. 12. Your Circle should now be Blue with a Bright Red Circle around it. 13. By using the select tool you can separate the fill from the stroke simply by placing your mouse in the middle of the Circle and dragging it away from it’s original location. 14. Save your drawing as Circle in your Student Folder. 15. Close the drawing window. Drawing Tools 1. Create a New Document. 2. Click on the Pencil tool. 3. Click on the down pointing arrow in the Options window under the toolbox. 4. Click on the Straighten Option. 5. Move your mouse to the stage and draw a square. 6. Notice that the lines will straighten when you release the mouse. 7. Click on the Smooth Option. 8. Try writing your name on the stage. 9. Notice that the line will smooth out. 10. Click on the Ink Option and draw a figure or flower. 11. Notice that this time the image is smoothed the very least. 12. Save your work as Lines in your Student Folder and close the stage window.

Note: To delete all content from the stage, use the selection tool and select all items by dragging over the content and hit the backspace key.

Page 9

Macromedia Flash MX 2004

Paintbrush tool The Paintbrush is a fill tool. 1. Select the Paintbrush and notice that the options at the bottom of the toolbar change. 2. To open the Color Mixer if is not already open: a. Click on Window b. Move down to Design Panels c. Move your mouse across to Color Mixer and Click. d. The Color Mixer will appear in the upper right corner of your window. Create a gradient using the Colour Mixer 1. Click a linear gradient in the Color Mixer. 2. Click the down pointing arrow in the colour box. 3. Choose a colour for the gradient. 4. Should you wish to create a gradient in the middle click under the bar and another gradient option will appear. 5. Continue to click the arrow buttons and colour until a gradient colour is established. 6. Choose the Oval tool. 7. Draw a circle with the new gradient. 8. Make sure that the stroke is set to 1 in the Property Inspector. 9. Use the pencil to draw the arm of the glasses. 10. Use the Options at the bottom of the tool bar to curve the handle of the glasses. 11. Try the various options until you have a proper curve on the arm of the glasses. 12. Use the Lasso Tool to draw around the glasses, creating a full circle. 13. Notice that the circle and arm are now selected. 14. Click the Edit menu and choose Copy. 15. Click the Edit menu and choose Paste in Place. 16. Click on the Select tool and move the items that you pasted to form a set of glasses. 17. Save this drawing as Glasses in your Student Folder and close the window.

Page 10

Macromedia Flash MX 2004

Activity 2
More About Drawing in “FLASH”
As you have probably noticed in the “FLASH” interface, there are several different tools that can be used to create images, such as the line tool, paint brush tool, oval tool, and others.

In order to introduce you to the different ways that you can draw and create images, the following activity will help to get you started in becoming comfortable in using some of the different tools and tool options to trace some basic shapes. This activity will also introduce you to creating and drawing in a new layer in your flash file, and show you how it can be useful in layering different objects to achieve the desired effect when you finally create an animation. 1. Open the file named basic_draw_1.fla which is found in the Student Shared Folder. 2. Click on the add new layer button which is just above the stage.

3. Once you have added the new layer in the Timeline window it should now look like the one below.

Page 11

Macromedia Flash MX 2004

4. Double click on the new layer to change the name. 5. Type in the words Traced Shapes.

6. 7. 8. 9.

Read the following information. To change the colour of a chosen tool. Select the tool you want to use. Choose the colour that you want to use in the options panel for the selected tool.

Square Tool with Yellow Fill 10. The pencil represents the outline colour of the object. 11. The paint bucket represents the fill colour of the object. 12. For tools like the paintbrush, it is the paint bucket which determines the colour you will paint with. 13. For the pencil tool, it is the pencil colour which determines the colour you will be drawing with. 14. Complete the following steps from the items listed below on the new drawing layer, using different colours for each of the items. Pencil Tool 1. Click on the layer called Traced Shapes. 2. Click the Pencil tool. 3. Set the tool option to smooth so that you can draw smooth curves. 4. Choose a color for your pencil.Trace the first line.

Page 12

Macromedia Flash MX 2004

Line Tool 1. Click on the Line tool 2. Choose a different color from the one that you used previously. 3. Trace the second line.

*Hi

nt: hold the ‘shift’ key to draw a straight line.

Paint Brush Tool 1. Click on the Paint Brush. 2. Choose a different color for the Paint Brush. 3. Trace the third line.

Rectangle Tool 1. Click on the Rectangle tool. 2. Choose one color for the outline and a different color for the fill. 3. Trace the square starting at the first red X and finishing at the second red X. Outline Colour Fill Colour

Circle Tool 1. Click on the Oval tool. 2. Choose a different color for the circle. 3. Trace the circle starting at the first red X and finishing at the second red X.

Page 13

Macromedia Flash MX 2004

Penicl or Paint Brush Tool 1. Click on the Pencil or Paint Brush tool. 2. Select a different color. 3. Trace the organic “blob”.

Finished Shapes 4. Once you have finished tracing all of the items, the stage should look similar to the following figure, depending on the colours that you have chosen.

5. Save the file as Activity 2 Shapes in your Student Folder. 6. Close the Drawing window.

Page 14

Macromedia Flash MX 2004

Activity 2 Questions
1. How many kinds of drawing tools does Flash have in its toolbox? a. 1 b. 2 c. 3 d. 5 2. How many options does the pencil tool have? a. 1 b. 4 c. 5 d. 3 3. Using the pencil of the line tool, is it possible to draw with a gradient fill colour? a. yes b. no 4. Using the line drawing tool, what key on the keyboard can you use to draw a straight line? a. tab b. shift c. ctrl d. alt 5. If you want to trace an image using the drawing tools in Flash, where does the layer that you are doing the tracing on go? a. on top b. underneath

Page 15

Macromedia Flash MX 2004

Activity 3
Basic Painting in FLASH
The following activity will involve skills that you learned in the previous activity, such as creating and re-naming a new layer, as well as choosing a colour from the tool options. Because the starting point for this activity is an image that may appear complicated, it is important that you follow the steps very carefully, and make sure to save your work on a regular basis. 1. Open the basic_paint_1 from the shared file folder. 2. Save a copy in your student folder with the name Activity 3. 3. Add two new layers by clicking on the add layer icon in the window. 4. Name the first layer as characters. 5. Name the second layer as background. 6. Save the file again. 7. Select the layer that you want to work on by clicking once on the layer label “characters”. 8. Select the Pencil tool. 9. Adjust the width of the pencil in the Properties window to 2.25 pt. timeline

10. Using the pencil tool, trace all of the lines that make up the characters. 11. Save the image to your student folder with the name Traced Characters. 12. Your traced characters should look similar to the following image.

Page 16

Macromedia Flash MX 2004

13. Click on the Paint Bucket tool. 14. Set the option to Close Large Gaps. Make sure that the paint bucket tool option is set to, “close large gaps”, which will allow the paint bucket tool to paint a shape that may have gaps that you can’t easily see. *Remember to select “Close Large Gaps” option. 15. Choose an appropriate fill color. 16. Position the tool inside the shape you want to fill with color. 17. Click once with your mouse to complete the operation.

Before – line drawing only

After – painted-in drawing

18. For the areas that you can’t fill with the paint bucket tool, you can use the paint brush. 19. Altering the tool options for the paint brush will only paint the fill of an area that has been outlined with the pencil tool. 20. Save your file again as, painted_characters in your student folder. Modifying Colors Learn how to modify the colours of filled areas, as well as how to change the colour of lines that you have drawn.
Page 17

Macromedia Flash MX 2004

1. Click on the Paint Bucket tool. 2. Select a custom fill from the paint bucket tool options menu. 3. Start by changing the fill of the following different areas: a. Select a gradient fill from the colour options menu, and then change the pants fill of the man. b. Select a different gradient fill or one of the rainbow coloured fills, and then change the shirt colour of the man. c. Select two different gradient fills than the previous step, and change two different areas of the penguins body. d. Using the colour mixer panel, create your own gradient fill and use it to fill any two areas on the penguin. 4. Save your file with the name painted characters 2 in your student folder. 5. Click on the Paint Bucket tool or the Ink Bottle tool. 6. Make the following changes to the colors: a. The man’s shirt to blue b. The man’s shoes to light green c. The man’s hair to orange d. The penguin’s beak to red e. The penguin’s teeth to pink f. The penguin’s stomach to dark green 7. Save your file with the name painted characters 3 in your student folder.

Page 18

Macromedia Flash MX 2004

Activity 3 Questions
1. When you are painting an image that you have traced with one of the drawing tools, what would be the best painting tool to fill large areas? a. paint brush b. pencil c. paint bucket d. ink bottle 2. When using the paint bucket tool, how many options are there for closing gaps which might exist in the traced image? a. 2 b. 4 c. 5 d. 3 3. If you need to adjust the colour for an object fill or gradient fill, what tool would be the best to choose? a. arrow (black) b. paint bucket c. fill transform d. eye dropper 4. When using the paint brush tool to paint in areas with colour, how many painting options are there? a. 5 b. 3 c. 2 d. 4 5. Which tool would be the best to add or change the outline colour of a shape that has already been drawn? a. paint brush b. ink bottle c. paint bucket d. pencil

Page 19

Macromedia Flash MX 2004

Activity 4
Animation – Motion Tweening
This activity will help you learn the basics of motion tweening, which is one of the terms that Flash uses to animate objects. The other method of animating objects in Flash is called shape tweening, and will be discussed in the next activity. 1. Open a new flash document from the “File” menu. 2. Click on the Modify menu and select “Document”. 3. Change the movie properties to the following values: a. b. c. d. e. 4. 5. 6. 7. 8. 9. width = 320 height = 240 background colour = white frame rate = 15 fps units = pixels

Save the file to your student folder as Basic Anim1. Create one new layer by clicking on the “add layer” button in the timeline window. Rename the first layer “animation” Rename the second layer “actions”. Save your document again with the same name. Pay close attention to the following few steps in order for the animation to work properly.

Animate in Flash “Keyframes” are used to define the specific changes in time and orientation of objects in your animation. A ‘keyframe’ can be added in the timeline window, and is represented as a small block with a circle inside. The following steps will demonstrate the use of ‘keyframes’ and ‘motion’ tween animation. Although we have only used one layer and a very basic shape, applying the same techniques will allow you to create very complicated animation sequences with several different layers.

Page 20

Macromedia Flash MX 2004

For the more complicated animations, you can always combine the use of motion or shape tweening, and the use of an unlimited number of keyframes. 10. Make sure that you have the “animation” layer selected. 11. Create one of the shapes from the following list on the left hand side of the stage: Circle - circle tool Square - square tool Blob - pen tool with a fill colour 12. Double-click the shape (circle, square, etc. ) 13. From the ‘Modify’ menu, select Group. 14. Select Frame 15 in the animation layer (see the figure below)

15.

Click on the Insert menu,

choose Timeline and then select Keyframe. 16. Use the arrow keys on the keyboard and move the object to the right of the screen and down a little bit, so that the movement will be evident at the end of the animation. 17. Double-click on the layer name with the animation in it. 18. All of the frames from 1 to 15 should darken. 19. The shape should still be selected. 20. At the bottom of the screen in the Property Inspector, select motion from the Tween option. 21. Save the file to your student folder as Basic Anim2. 22. Click on Control from the main menu and select Play or you can hit the return key to test out your moving box.

Congratulations, you have just completed your first animation in Flash!

Page 21

Macromedia Flash MX 2004

Activity 4 Questions
1. Is the ‘keyframe’ one of the most important parts when creating an animation in the Flash timeline window? a. No b. Yes 2. If an animation is 4 seconds long, and has a frame rate of 20 frames per second, how many frames would the animation have? a. 96 b. 80 c. 60 d. 40 3. How many different types of animations are there in Flash? a. 3 b. 5 c. 4 d. 2 4. If you are trying to animate the motion of an object from point A to point B, what would be the easiest type of animation to use? a. keyframe b. motion c. shape d. pencil 5. When you are working on a very complicated animation, how many keyframes are you allowed to use? a. unlimited b. 50 c. a few d. 1000

Page 22

Macromedia Flash MX 2004

Activity 5
Animation – Shape Tweening
This activity will help you learn the basics of shape tweening, which is the other method of tweening used by Flash. Combined with the use of keyframes, the ‘shape’ tweening option will allow you to animate such things as a bouncing ball, or even to change one shape into another. 1. Open a new file in Flash from the File menu. 2. In the Modify menu, select Document. 3. Change the movie properties to the following values: a. width = 320 b. height = 240 c. background colour = white d. frame rate = 15 fps e. units = pixels 4. Save the file in your student folder as Shape Tween. 5. Name the default layer Tween1. 6. Select the Ttween1 layer. 7. Use the text tool and type a large upper case “I” in the middle of the window. 8. From the Modify menu choose the Break Apart option. This converts the text into a useable shape. 9. On frame 15 in the Tween1 layer, select the Frame. 10. From the Insert menu, choose Timeline and then select Keyframe. 11. Click on the Selection tool in the toolbox. 12. Carefully select only the elements in keyframe 15 and delete them. 13. Click once on the Onion Skin feature in the timeline window. 14. The onion skin feature is useful in drawing elements in or on top of other elements in a desired location or orientation. (see following figure) The other icons to the right of the onion skin icon allow for adjustments. 15.Click on the Pencil tool. 16. Select the smooth option.

Page 23

Macromedia Flash MX 2004

17. Click on the Paint Bucket tool and choose a bright fill color. 18. Draw and fill in a heart. 19. You can use the Onion Skin markers (see figure above) to help in drawing the heart directly over top of the place of the “I”. *you can adjust the sliders as necessary to cover more or less frames by grabbing the small circle shaped handles.

20. Click on frame 30 in the Tween1 layer. 21. From the Insert menu, choose Timeline and then select Keyframe. 22. Click on the selection tool from the toolbox. 23. Carefully select all of the heart elements in keyframe 30 and delete them. 24. Select frame 30 again. 25. Click on the text tool and choose a different fill and outline colour. 26. Type in a large U. 27. From the modify menu choose the Break Apart option. 28. This will convert the text into a useable shape. Using multiple letters, as in the case of one or several words, will require that you repeat the second part of the previous step several times. 29. Save the file to your student folder with the name Shapetween2. 30. Click on the Control menu and select Play. 31. With Shapetween2 still open on your screen, save the file again with the name Shapetween3. 32. Click on the direct selection arrow. 33. Click once on the keyframe at frame 15. 34. Select the paint bucket tool from the toolbox. 35. Change the fill colour of the heart to the red radial glow pattern from the bottom of the swatch palette in the Color Mixer palette. 36. Click on the direct selection arrow tool. 37. Select and modify the shape of the outside edge of the heart shape. 38. Select the ink bottle tool from the toolbox. 39. Choose a different line colour, size, and type of line from the property inspector. 40. Using the modified ink bottle settings, click on the outside edge of the heart to adjust its outline properties. 41. With the information from the previous steps, select and modify with different fill and outline settings, each of the different letters in the last keyframe of the animation. 42. Once you have completed all of the changes, save the file again using the name Shapetween3.

Congratulations as you have just completed
Page 24

Macromedia Flash MX 2004

your second animation in Flash!

Page 25

Macromedia Flash MX 2004

Activity 5 Questions
1. Is it possible to shape tween more than one graphic image on a single layer? a. yes b. no 2. What is the name of the feature which helps you to position drawings in the same location, but across more than one frame? a. drawing help b. onion skins c. drawing panel d. motion guide 3. When you are going to shape tween an object in Flash, it should be _______ for things to work properly. a. cut in parts b. filled c. outlined d. ungrouped 4. If you have an object selected in a keyframe in the middle of an animation, can you adjust the colour of a fill or outline? a. yes b. no 5. If you start out with one graphic on the screen, how many different shapes can you shape tween it into by the end of the animation, if the animation is 35 frames long? a. 2 b. 35 c. 40 d. 33

Page 26

Macromedia Flash MX 2004

Activity 6
Animation – Advanced Techniques
Please follow all of the directions as closely as possible. Remember to take your time in completing each of the steps, as they are designed to achieve a specific end product. Do not worry about what you are creating, only about the tools and techniques which you are using, as your final unit projects will allow you room for creativity. Some of the items you will learn in this activity include creating movie clips, using a motion guide, and how to use items from the library. 1. Open a new file in Flash from the File menu. 2. In the Modify menu, select Document. 3. Change the properties to the following values: a. width = 640 b. height = 480 c. background = white d. frame rate = 15 fps e. units = pixels 4. Double click on the layer that appears. 5. Rename the layer to background. 6. Click on the add layer button at the bottom of the timeline. 7. Add three layers to your document. 8. Double click the layer closest to the background layer. 9. Rename the layer ball. 10. Rename the top most layer bucket. 11. Use the drawing and painting tools that you learned in the first few activities to create a path where you might want to bounce a ball. 12. Click on the Window menu in at the top of the screen and select the Library option. 13. The library panel should open up. 14. Click the small arrow on the top right corner of the library window. 15. Select the New Symbol from the pop-up menu that appears. 16. Rename the symbol Ball. 17. Make sure that the option Movie clip is chosen. 18. Click the OK. 19. A new window will pops up. 20. Use the drawing and painting tools to design a small bouncy ball of your own design. 21. From the edit menu, choose select all.

Page 27

Macromedia Flash MX 2004

22. Make sure that all the parts of your bouncy ball are selected. 23. Click on the Modify menu and choose Group. 24. Click on the Direct Selection tool. 25. Click on frame 15. 26. From the Insert menu, choose Timeline and then select Keyframe. 27. Click once on the layer name to select all of the frames. 28. In the Property Inspector choose Motion from the Tween drop-down menu. 29. Set the rotations to 4 or 5. 30. Set the direction to Clockwise. (Rotate drop down menu) 31. Click on the Scene 2 icon (see the figure below), which will return you to the main part of the animation.

32. Go to the library panel that you opened in a previous step. 33. Select the layer you labeled ball. 34. Drag the ball icon from the library panel to the stage. 35. Right click, choose the Free Transform option. 36. Adjust the ball to an appropriate size. 37. Place the ball near the top left corner of the stage. 38. With the ball layer still selected, click on the “add motion guide” icon. (see the figure below)

39. Click once in the layer with the motion guide icon. 40. Click on the pencil tool. 41. Draw a line that resembles a ball that has bounced several times on the ground. a. Starting from the point where you placed the ball initially. b. Each point on the line where the ball touches the ground, should be drawn slightly below the bottom of the stage. 42. Click on the arrow tool. 43. Select the ball. 44. Drag it until it snaps to the start of the line. 45. With your arrow tool still selected. 46. Add a keyframe at frame 15. 47. One at frame 30. 48. One at frame 45. 49. Create the keyframes above for the guide layer, ball layer and the background layer.

Page 28

Macromedia Flash MX 2004

50. Click on frame 15 in the ball layer. 51. Use the arrow to drag the ball so that it snaps to one of the points on the line where it bounces off the ground. 52. At frame 30 and frame 45, drag the ball to a similar point which is further away from the place where the ball started. 53. Click on the bucket layer so that it is selected. 54. Draw and paint in a bucket that the ball can fit into. 55. Click on frame 45, insert a keyframe. 56. With your arrow tool, go to frame 45 of the guide layer. 57. Adjust the end point of the line so that it ends up in the area of the bucket. 58. We want the ball to look like it is going to bounce into the bucket. 59. Make sure that the bucket layer is at the top of the layer list, as it needs to be here in order for the ball to look like it is going into the bucket. 60. Save your file as Act6 in your Student Folder. 61. From the control menu, select test movie to see the results of your efforts.

Page 29

Macromedia Flash MX 2004

Activity 6 Questions
1. What tool would be the easiest to use to draw in a motion guide to for an element in your animation? a. pencil b. paint brush c. pen d. line 2. When using motion guides to animate a graphic element, where should the guide layer be? a. on top of element layer b. below the element layer 3. Can you animate a movie clip element using motion guides? a. no b. yes 4. When you complete new ‘movie clip’ elements, what panel does Flash keep them in? a. object b. information c. actions d. library 5. When editing a movie clip, which of the following icons in the timeline window do you press to get back to the main animation? a. center frame b. scene c. trash d. new layer

Page 30

Macromedia Flash MX 2004

Activity 7
Create a New Flash Movie
1. Click on File and choose New. 2. Set a Stage size 500 x 250 * Blank key frame (grey dot) extends the content and leaves a frame blank for new content. * Key fame (black dot) – is used when you want the content to continue * Frame – has a small white square inside the frame

3. On the toolbar set the stroke colour royal blue.

to black and the fill colour

to

4. Use the Oval Tool to draw a circle on the stage. 5. Notice that a keyframe with a black dot is now on the timeline. 6. Rename the default layer to Shapes. 7. Name the layer by double clicking in the text area. 8. Click the plus sign to create a new layer. 9. Name this layer Text. 10. Click on the Text tool in the toolbar. 11. Click above the circle that you had previously drawn. 12. Type the word Circle in the textbox. 13. Click the eye to turn off the layer, turn back on. 14. Click the lock to lock the layer, unlock the layer. * The layer that has the pencil showing is the layer that is active. * Frames per second 12.0 fps (Double click to view options) 15. Insert a keyframe. 16. Click on the Shape layer. 17. Click in frame 10. 18. Click on the Insert menu, move to Timeline and choose keyframe (this copied the content from frame 1 to frame 10). 19. Click in the Text layer. 20. Click in frame 10. 21. Click in frame 10 and go to the Insert menu, move to Timeline and choose keyframe. 22. Click on File and choose Save As and name the file Act 7a Flash. This file should be save in your Student drive in a folder that you have created called Flash.
Page 31

Macromedia Flash MX 2004

23. The timeline should appear as the image below.

24. Click on the Shapes layer to activate this layer. 25. Click on the last keyframe in the Shapes layer. 26. Using the Rectangle tool draw a square beside the circle and fill in the square with a different colour. 27. Click on frame 20 and insert a keyframe. (Insert>Timeline>keyframe) 28. Click on the Select tool. 29. Click on the Text layer. 30. Click on Frame 10 in the timeline so that your text will appear. 31. Click the word circle on the stage. 32. Hold down the alt key and the mouse button and drag the text so that it is over the square, release the mouse button and alt key. 33. Click on the Text tool and click in the text box above the square. 34. Rename the Circle to Square and change the color to match the square. 35. The timeline should appear as the image below. Keyframe should be at 20 for the Shapes Layer

36. Click on Frame 20 and insert a keyframe. (Insert>Timeline>Keyframe) 37. Click on the Shapes layer. 38. Click in the last keyframe in the Shapes layer. (20) 39. Use the Rectangle tool to draw a rectangle at keyframe 30.

Page 32

Macromedia Flash MX 2004

40. Choose a color to fill in the shape. 41. Click the Text layer. 42. Click in the last keyframe in the Text layer (20), add to keyframe 30. 43. Click on the word Square and hold down on the alt key and drag over the rectangle image and release the mouse and alt key. 44. Click on the Text tool and click in the text box above the rectangle. 45. Rename the Square to Rectangle. 46. Change the text colour of the word to match the color of the rectangle. 47. Your screen should resemble the one shown below. 48. Save your work again as Act 7b Flash.

49. Click on Control in the menu and choose Test Movie. 50. Save Movie File by clicking on File and choosing Save. 51. Create a third layer and name it Actions. 52. Go to keyframe 30 and click in this frame. 53. Insert a keyframe by clicking on Insert>Timeline>Keyframe. 54. Click on the Actions in the Frame window located at the bottom of the screen under the stage window. 55. Click the Global Functions. 56. Click on Timeline Control. 57. Scroll through the options provided and double click on Stop. 58. This will stop the movie from playing. A small “a” will appear on the frame.

Page 33

Macromedia Flash MX 2004

59. To test your movie Click on Control and then Test Movie. 60. File, click Save As, name the file Act 7c Flash. Be sure to be saving in your Student Folder.

Page 34

Macromedia Flash MX 2004

Activity 8
More Motion Tweening.
1. 2. 3. 4. 5. 6. 7. 8. 9. Create a new canvas that is 350 by 400 pixels. Create four layers and name them Power, Knowledge, Key and Background. The Background layer should be below the Knowledge and Power layers. In the Background layer, fill the stage with a dark blue color. Select the first frame and stretch it to frame 60. Insert a keyframe. In the Power layer, write the text POWER in the middle of the stage. Use the Arial Black font, size 80 with a color of white. Right click on the text and from the drop down menu select “Convert to Symbol”. 10. Position the text to the far left, so only the ER appears on the stage. 11. In the Power layer, click and drag from frame 1 to frame 40, so that the frames in between are selected. 12. Insert a keyframe in Frame 40. 13. Move the text to the far right, so only the PO appears on the stage. 14. Click on Frame 20. 15. In the Property Inspector window, select tweening and then motion from the drop down menu. 16. Click on Frame 1. 17. Select the text POWER. 18. In the Property Inspector window, adjust the color to alpha from the drop down menu.

19. Decrease the opacity to 20%. 20. In frame 20, change the opacity to 80%. 21. In frame 40, decrease it again to 50%. 22. In the Knowledge layer, type the text KNOWLEDGE IS near the top of the stage. 23. Use Arial Black font, size 63, with a color of Orange. 24. Right click on the text and from the drop down menu, select Convert to Symbol. 25. Insert a keyframe in Frame 1. 26. Move the text to the right so it is not visible on the stage. 27. Click on Frame 40. 28. Insert a keyframe. 29. Move the text to the far right so it is not visible.

Page 35

Macromedia Flash MX 2004

30. Now click on Frame 20 and in the property inspector window, select motion from the tween drop down menu. 31. In the key layer, insert a keyframe into frame 35. 32. Type Learning Flash is Key. 33. Use Times New Roman, Size 40 with a color of white. 34. Convert the text into a symbol and move it to the top right. 35. Insert another keyfram around frame 8. 36. Move the text into the center of the stage. 37. Click in between fram 45 and frame 48. 38. Select motion from the tween drop down menu in the property inspector window. 39. Save your work as Act 8 Flash in your Flash folder.

40. Adjusting Easing – go to the key layer and click in frame 45 and go to the properties option and adjust the easing to 100. 41. Notice this will start the word quick and slow down at the end. 42. Click on File and choose Save As and save the file as Act 8 Flash. Save content in your folder named Flash.

Page 36

Macromedia Flash MX 2004

Activity 9
Sound - Importing Sound in Flash
Types of files that are used in the Windows format are .wav and .mp3. If you wish to use sounds for your project that are not in the Student Shared drive you may go to www.flashkit.com. The sounds that are provided here are royalty free and can be downloaded to your folder. 1. 2. 3. 4. 5. 6. 7. Locate a sound file in the Flash folder on the S:/StuShare folder to import into Flash. To import a sound choose File, Import and click on Import to Library. Click on Window then choose Library (Ctrl+L). Drag the sound file to the stage. Press F5 to see the file in the time line. Each time you press F5 the file will expand. Choose Control and click on Test Movie to hear the mp3 play.

8. Adjust Volume – Activate the timeline layer where the sound is located and then click the edit button in the properties option. 9. A new edit window appears showing the sound waves and identifies the frame the sound is playing. 10. Adjust the volume from the drop down menu. 11. Edit the sound so it will fade from left to right. 12. Customize options are available by moving the handles.

Page 37

Macromedia Flash MX 2004

13. By double clicking on the sound in the library the sound properties window appears. 14. Deselect the option – use imported mp3 quality. 15. The option to increase or decrease the Bit Rate of the sound or adjust the quality to Fast, Medium or Best. 16. The lower Bit Rate of the number, the lower the file size. Test the various selections. 17. Save your work as Act 9a Flash in your Flash folder on the Student drive.

Symbols – always reside in the Library. 1. To open the Library, go to the main menu select Window and choose Library. 2. Three kinds of symbols: Button, Movie, Graphic symbols are available. 3. Common Button Library is opened by choosing Window, Other Panels, Common Libraries and then Buttons.

Page 38

Macromedia Flash MX 2004

4. Drag a button to the stage and notice the various states of the button (Up, Over, Down, Hit).

5. 6. 7. 8. 9.

Add Sound to a button by opening the Library. Choose Window, Other Panels, Common Libraries and then Buttons. Double click on the button. Import sound into a Library then click in the down state of the button. Drag the sound to the stage and notice that the sound wave is now on the down state of the button. 10. To test out the button, click the back arrow to go back to the scene. 11. File save and name the file Act 9b Flash. 12. Choose Control and Test Movie. Sound Properties:

Sync: Event – play until some other form of activity. This could be another sound for example. Start – play from start to finish. Stream sound will sync and lock to the layer, locked to the time line. This only happens when the sound is set to stream.

Page 39

Macromedia Flash MX 2004

Activity 10
Final Project
Now that you have complete all of the activities for the module, it is time to complete the final project, which will allow you to use all of the things that you have learned up to this point. Bonus points can be awarded, up to a maximum to be determined by the teacher, for those students who go beyond the basic requirements for this project. Please follow these basic directions for the basics of your final project. 1. Select a topic for your final project and have it approved by the instructor. 2. Your project should be a maximum size of 640 pixels by 480 pixels 3. Have a clearly labeled file name. 4. Have a frame rate of 15 fps. 5. Your project should be a minimum of 300 frames, and should not exceed 1000 frames. 6. It should also incorporate your name in some form, whether it appears in the background, or whether you use it on one of the items (ie. Stick person) in the animation. 7. All of the other the items and techniques for completing the final project are completely up to you, and could include such things as stick people, vehicles, or other creatures or objects. When you have completed your animation, have it marked by your teacher!

Page 40

Macromedia Flash MX 2004

Additional Information
Creating a New Scene To create a new scene choose Insert then click on Scene. This will allow you to start a new scene with the same properties as the previous scene.

Publish a Flash Movie Produce a Flash movie by choosing File then click on Publish

Page 41

Macromedia Flash MX 2004

File Formats

Insert Published Flash Document into Dreamweaver Choose the Insert menu then move to Media and click on Flash.

HTML Flash Code <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ver sion=6,0,29,0" width="500" height="250"> <param name="movie" value="circle.swf"> <param name="quality" value="high"> <embed src="circle.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/xshockwave-flash" width="500" height="250"></embed> </object> Other Resources - Flash Lessons

Page 42

Sign up to vote on this title
UsefulNot useful

Master Your Semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master Your Semester with a Special Offer from Scribd & The New York Times

Cancel anytime.