Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Table of Contents Moving Images on the Web .......................................................................................... 2 Common animated file types ...................................................................................................... 2 What’s so great about Flash? ...................................................................................... 2 Getting Started with Flash............................................................................................ 3 Drawing in Flash......................................................................................................................... 3 Making a simple movie ................................................................................................. 4 “Tweening” in Flash...................................................................................................... 4 Simple Motion Tweening ........................................................................................................... 4 Tweening using Motion Guides.................................................................................................. 5 Tweening Scale and “Ease” ........................................................................................................ 5 Tweening Color .......................................................................................................................... 6 Tweening Shapes ........................................................................................................................ 6 Shape Hints ............................................................................................................................. 7 Shape Hints Tips ..................................................................................................................... 7 Getting Interactive......................................................................................................... 8 Stopping a movie ........................................................................................................................ 8 Your Library ............................................................................................................................... 8 Creating a Graphic Symbol..................................................................................................... 8 Making Your Graphic Interactive............................................................................................... 9 Go To A Web Page ..................................................................................................................... 9 Wrapping Up................................................................................................................ 10 Saving in Flash.......................................................................................................................... 10 Saving a GIF ......................................................................................................................... 10 Saving in Flash format for the web....................................................................................... 10 Tips and Tricks ......................................................................................................................... 10 Layers.................................................................................................................................... 10 Photos.................................................................................................................................... 10 Transparent Objects .............................................................................................................. 10 Grouping, Aligning, Arranging Stacking Order ................................................................... 10
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 1 of 10
Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Moving Images on the Web There are many options for displaying moving images on the web. Some of these options require just the web browser to show the image. Others require additional software such as a free browser plug-in, or free or for-fee proprietary image viewers. The different types of plug-ins and proprietary software may be able to play one or more type of animated file. Common animated file types • Animated .GIF file + Many programs can create animated gifs, including ImageReady and Flash + All web browsers can view animated gifs without a plug-in. - File size increases rapidly with animation length and complexity - Little to no interactive capabilities. Flash movies + Allow for detailed, long animations with fairly small file sizes + Most web browsers already have the plug-in + Lots of interactivity - Still large files for modem users - Users must have Flash plug-in installed Proprietary image types (e.g. Quicktime movies, .AVI files, 3D rendering tools) + Interactivity + 3-D capabilities o File size varies - All users must download plug-in in order to see your content What’s so great about Flash? Prior to Flash, almost all web-based animations were saved as series of static pixel-based images. If you’ve worked with Photoshop at all, you know that even small pixel-based images can be large-sized files. Multiply the size of each image times the number of frames needed for smooth animation, and you can see that file sizes get very large after just a few seconds. And that’s not even considering interactivity! Flash is a vector-based animation tool. This means that Flash does not actually store animations as a series of frames. Rather, Flash animations are saved as a set of mathematical instructions indicating how to display shapes on the screen at various times. So when using the Flash movie file type, you can have long animations at low file sizes. Unfortunately, because it is not a pixel-based image editor, Flash has limited capabilities for animating photographs. But it can output animated gifs as well as Flash-proprietary formats. Additionally, Flash includes rich possibilities for interactivity. Movies, button images, whole interactive interfaces, online computer games - this workshop barely brushes the surface of what Flash can do!
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 2 of 10
•
•
Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Getting Started with Flash The Flash interface is very dense. Important features to note as you begin include the Stage, Toolbox, Properties box, and Timeline. An important concept in Flash is that of keyframes. Because Flash is a vector-based animation tool (see page 2 for more information on vector-based animation), you must indicate frames in which key changes have been made. Flash also allows you to use multiple layers. Flash layers are similar to PhotoShop layers in that they can be used to keep items that should be animated separately, separate. Flash layers are different from PhotoShop layers in that each layer in Flash can have its own independent keyframes. Drawing in Flash Drawing in Flash is similar to other graphic programs you may have used, such as Adobe Illustrator (the Adobe vector-image-editor). Common tools include: Shape tools – Hold down the shift key as you draw to make perfect circles and squares. Note that shapes are filled with a color by default. Pencil tool – draws free-form lines. Note the “Straighten”, “Smooth”, and “Ink” line Options. Pen tool – draws geometric shapes. Click once to make a corner point, click-and-drag to curve your lines. Selection and sub-selection tools – These select objects and parts of objects. There is one MAJOR difference between Flash and other image editors – the outline of a shape and the shape itself are treated as two separate objects. If you single-click on the outline of a shape, you will select just the line segment that you clicked on – double-click to select the entire outline. If you single-click on the “fill” of a shape, you select only the “fill” area – doubleclick to select both fill and outline. More tips about drawing shapes and objects will appear throughout the rest of this handout.
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 3 of 10
Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Making a simple movie Creating a frame-by-frame animation 1. Draw a shape on your Stage using the Circle Tool ( ).
2. Select frame 2 in your Timeline, and go to Insert > Timeline > Keyframe. A tiny black circle will appear in frame 2. 3. As soon as you have created the new keyframe, all the objects in your layer are selected on the stage. Use the Arrow Tool ( ) to move your shape slightly.
4. Select frame 2 in your Timeline, insert a keyframe, and move the shape again. 5. Repeat step four to create keyframes in frames 3-10. 6. In the Timeline, click on frame 1, and hit Enter. Your animation will play. “Tweening” in Flash Traditionally, each frame of an animated movie had to be created separately, with incremental changes from one frame to the next. The beauty of computerized animation tools is that you can give them a “point A”, and a “point B”, and ask the computer to fill in the space between the two points. This is called “tweening” – other programs can do it, but Flash does it exceptionally well. There are several types of tweens. Simple Motion Tweening 1. Create a new Flash document, by going to File > New. 2. Draw a circle on your Stage. 3. In the Timeline, select frame 1, and go to Insert > Timeline > Create Motion Tween. Your circle will be highlighted in blue and will show a crosshair in the center. 4. In the Timeline, select frame 12, and go to Insert > Timeline > Keyframe. An arrow will appear pointing from frame 1 to frame 12, and the background for that layer in the Timeline will turn pale blue. 5. With the keyframe of frame 12 still selected, use the Arrow Tool to move your circle somewhere else on the Stage. 6. Select frame 1 on the Timeline and hit Enter to see your animation play.
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 4 of 10
Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Tweening using Motion Guides 1. Select frame 13 in Layer 1, and go to Insert > Timeline > Keyframe. 2. Select frame 13 in Layer 1, and go to Insert > Timeline > Motion Guide. 3. Select frame 13 in the new Guide layer, and go to Insert > Timeline > Keyframe. 4. With frame 13 of the Guide layer still selected, use the pencil tool ( line that starts near your existing circle, and goes all over your Stage. 5. Select frame 13 in Layer 1, and use the Arrow Tool to snap the object to the beginning of the motion guide line you drew. 6. Select frame 35 in Layer 1 and the Guide Layer, and Insert > Timeline > Keyframe. 7. Select frame 35 in Layer 1, and use the Arrow Tool to move your shape to the other end of the line. We did not have to tell the program to add a motion tween between frames 13 and 35, because it automatically continued the existing tween from frames 1 through 13. One tween may have many keyframes. 8. Hide the Motion Guide by clicking the black dot under the Eye icon ( 10. Save your Flash file. Tweening Scale and “Ease” 1. Go to Insert > Scene. This will create a new, blank “scene” for your Flash movie. 2. Draw a shape of some kind on the stage. 3. In keyframe 1, go to Insert > Timeline > Create Motion Tween. 4. Insert a keyframe at frame 20, and move your object to a new location. Use the Transform Tool ( ) to increase the size of the object in frame 20. ) in the Timeline. ) to draw a wavy
9. Select frame 1 in the Timeline, and hit Enter to see your animation play.
5. Click in the Timeline between frame 1 and frame 20. 6. In the Properties box, find the Ease box, and move the slider to the very top of the range. Positive ease values make the animation start out quickly, and slow down towards the end. Negative ease values make it start slowly, and speed up towards the end. 7. Save your Flash file.
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 5 of 10
Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Tweening Color 1. Make a new scene and draw an object on the Stage. 2. Insert a keyframe around frame 20. Move the object in frame 20, if you want; then change its color in the fill box. 3. Select any frame between frame 1 and frame 20, and choose “Shape” from the Tween box in the Properties palette. You will find that your object changes color when you play the animation. Tweening Shapes This is the point at which Flash tweening really shows its power. Using Flash shape tweening, you can cause one object to “morph” into another. 1. Make a new layer in the scene you used for Tweening Color, insert a keyframe in the new layer at frame 1, and draw a shape. 2. Insert a keyframe around frame 30. 3. Select the Arrow Tool, and in frame 30, deselect the object by clicking somewhere in the white area of the Stage. 4. As you move the Arrow Tool towards the edges of the shape, it will change. When the cursor has a curved line next to it ( ), you can use it to reshape lines at the edge of the shape. When the cursor has an angled line next to it ( ), you can use it to move points at the edges of the shape. Deform the shape into something new and interesting.
E.g: From
To
5. Select any frame between your two keyframes, and choose “Shape” from the Tween box in the Properties box. 6. Insert a keyframe in frame 30 of Layer 1 7. Play your animation. Save the Flash file.
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 6 of 10
Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Shape Hints Often with a more complex shape tween, Flash gets a little confused about what’s supposed to go where. Shape hints can be used to keep things moving in the right direction. 1. Select the first keyframe of your tween. 2. Go to Modify > Shape > Add Shape Hint OR press Ctrl-Shift-h. A small red circle labeled “a” will appear on your Stage. Move the red “a” circle to a point on your shape. 3. Click in the final keyframe of your tween. You’ll see the same red “a” circle. Move the circle to the point in your final shape that corresponds to the “a” point you labeled in the original keyframe. When it’s lined up with a point on your shape (though not necessarily only when aligned with the right point on your shape), the shape hint will turn green. The circle in the initial frame of the tween will turn yellow.
Shape hints in initial and final keyframes
4. Repeat this process of adding a shape hint and aligning it with beginning and end points of the shape tween until you have as many shape hints as you need. 5. Save your movie, and play it back. If you’ve placed your shape hints correctly, the complex shape will now transform more smoothly. Shape Hints Tips Shape hints work best when placed around your shape consistently in a counterclockwise manner. You may have to place more shape hints than you expect – and you may have to spend some time getting them placed in the exactly correct spots. Shape tweening, even with shape hints, is very difficult when lines that do not cross in the initial frame, do cross in the final frame, as at right. Avoid this if possible…
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 7 of 10
Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Getting Interactive Your movie already contains at least three scenes. Go to Window > Design Panels > Scene to open your Scene Panel. You can rename and re-order these scenes in the Scene Panel. However, by default, each movie plays straight through all scenes. To interact with your users, you’re going to have to stop the movie sometimes to wait for a user response. Stopping a movie 1. Select the final keyframe of the first scene of your movie. 2. Open the Actions Panel below the Stage. 3. Check that the Actions Panel title bar displays “Actions – Frame”, and that the bottom “tab” in the Actions Panel displays a Layer and Frame number. This assures that you are placing your new action on the frame itself, not on any object in the frame. 4. Click on the Add Behavior button ( ) at the center top of the Actions Panel. Go to Global Functions > Timeline Control > Stop. 5. Save the movie and play it back. It should stop on the final frame of the first scene. 6. Add Stops to the final frames of your second and third scenes as well. Eventually, we’ll let users choose which scene to play back when! Your Library Each Flash document has a Library Panel (open by going to Window > Library), which stores any multimedia resources you may choose to use (sound, video, imported bitmap images, etc.) It can also be used to store Symbols – items created in Flash that you may wish to re-use. Symbols may be Flash Graphics, Buttons, or Movie Clips. Any item stored as a Symbol can be re-used without adding any file size to your finished document. When a Symbol appears, it’s called an Instance of the Symbol. Instances of Graphics, Buttons, and Movie Clips can all be used to add interactivity to your document! Creating a Graphic Symbol 1. Go back to the first scene of your movie and click on the New Layer button ( Timeline Panel to add a Layer. 2. Insert a keyframe on your new Layer in the final frame of the existing movie. 3. Draw a shape on your new Layer in the final keyframe. 4. Using the Selection Tool to move the shape you’ve just drawn, drag it to your Library Panel. 5. In the “Convert to Symbol” dialog box that pops up, name this new Symbol something descriptive, and be sure the Button option is selected. 6. Save your Flash document.
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 8 of 10
) in the
Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Making Your Graphic Interactive We’re now going to take the Button you made a moment ago, and turn it into an Event Handler – that is, your Button will now cause something to happen in your movie. 1. Open the Actions Panel below the Stage. 2. Check that the Actions Panel title bar displays “Actions – Button”, and that the bottom “tab” in the Actions Panel displays the name of your button. This assures that you are placing your new action on the button object, not on the frame itself. 3. Click on the Add Behavior button ( ) at the center top of the Actions Panel. Go to Global Functions > Movie Clip Control > On. 4. In the pop-up window in the Actions Panel, double-click on “release”. Your Action Script editor (the white space in your Actions Panel) will now display this code:
5. Click just to the right of the first curly-bracket in your Action Script editor, and click on the Add Behavior button again. This time go to Global Functions > Timeline Control > gotoAndPlay. In the brackets that get added to your script, add the name of the Scene you want to skip to, and the frame number in that screen – so that your Action Script code now looks like this:
6. Save the Flash file, and go to Control > Test Movie. This will test out your movie within the Flash software. If your Actions work right, you’ll see that. If not, the Test Movie command reports back what errors may be occurring. Add more Button Symbols, at the ends of other scenes, for more navigation options. Remember, text can be turned into a Button Symbol just as easily as shapes and lines! Go To A Web Page You can easily use Button symbols to open new web pages, as well. 1. Drag an instance of a Button onto your stage. In the Behaviors Panel on the right side of the screen, click on the Add Behavior button ( ). 2. Choose Web > Go To Web Page from the menu, and type in the full address of the destination page in the “Go to URL” dialog box that opens up. You can open the new web page in “_self” to replace the Flash movie in a browser window; or “_blank” to create a new browser window. (“_parent” and “_top” options are only used with HTML frames.) 3. Save your Flash file and play it back. Click on your button to go to the web page!
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 9 of 10
Getting Started with Flash MX 2004
A Faculty Exploratory/Knowledge Navigation Center Workshop
Wrapping Up Saving in Flash Flash work files are saved as Flash documents (.FLA). To share with others who do not have the Flash program, you must save in another format. Saving a GIF From the File menu, select Export Movie. Under Save As Type, choose “Animated GIF”. Accept the settings in the Export GIF window (or change them to see what results). Saving in Flash format for the web The native file format for Flash on the web is the ShockWave Flash (.SWF) format. You may follow the steps above to Export Movie as a .swf file, but more likely you will want it to play within a web page. Go to File > Publish Settings to view the settings for your page output. Then click Publish, and a .swf file and accompanying html files will be saved to the same folder as your original .fla file. Tips and Tricks Layers Use Layers to preserve separation of items that will be moving independently. Layers can be “locked” (to prevent you accidentally selecting items on that layer) by clicking the black dot under the Lock icon ( ) in the Timeline. Photos Photographs can be used effectively in Flash, though it is difficult to make changes to the image itself. They can be imported as outside graphics, and moved around the stage in the same way as objects created in Flash. Transparent Objects To fade an object in or out (this works best with Symbols), you can select the object at a keyframe, and in the Color box of the Properties Panel, select Alpha. An object with 100% Alpha is fully visible, 0% Alpha is fully invisible – numbers in between allow partial visibility. Grouping, Aligning, Arranging Stacking Order Objects can be grouped together, aligned to one another, and their stacking order (that is, which item is “on top of” or “behind” another) can be changed. All these options are accessible through the Modify menu. Grouped objects can even be added to the Library as Buttons, Graphics, and Movie Clips
The Faculty Exploratory and KNC are located on the second floor of the Harlan Hatcher Graduate Library. exploratory@umich.edu | http://www. lib.umich.edu/exploratory | (734) 647-7406 knc-info@umich.edu | http://www..lib.umich.edu/knc | (734) 647-5836
rev: 4/14/05 10 of 10