flash_imageready_animations

Animation With ImageReady and Flash A Faculty Exploratory/Knowledge Navigation Center Workshop Table of Contents What is animation? Why use it? ................................................................................. 2 Academic use of animation......................................................................................................... 2 Types of Animations ..................................................................................................... 3 Common animated file types ...................................................................................................... 3 ImageReady vs. Flash................................................................................................... 3 ImageReady ................................................................................................................................ 3 Flash............................................................................................................................................ 3 Getting Started with ImageReady ................................................................................ 4 Creating a simple animation ....................................................................................................... 4 “Tweening” in ImageReady........................................................................................................ 5 Using PhotoShop Layers with ImageReady ............................................................................... 5 Saving from ImageReady ........................................................................................................... 6 Tips for ImageReady................................................................................................................... 6 Getting Started with Flash............................................................................................ 7 Creating a simple animation ....................................................................................................... 7 “Tweening” in Flash...................................................................................................... 8 Simple Motion Tweening ........................................................................................................... 8 Motion Guides ............................................................................................................................ 8 Tweening Scale, and “Ease” ....................................................................................................... 9 Tweening Color .......................................................................................................................... 9 Tweening Shapes ........................................................................................................................ 9 Additional Flash Information...................................................................................... 10 Saving in Flash.......................................................................................................................... 10 Saving a GIF ......................................................................................................................... 10 Saving in Flash format for the web....................................................................................... 10 Tips for Flash ............................................................................................................................ 10 Wrapping Up................................................................................................................ 10 All example files (and files referenced in this handout) are available at http://www.lib.umich.edu/knc/classes/animation. 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: 1/23/04 1 of 10 Animation With ImageReady and Flash A Faculty Exploratory/Knowledge Navigation Center Workshop What is animation? Why use it? At its most basic, an animation is a series of images presented in rapid sequence to produce the illusion of motion. Many people make a distinction between animation as nonphotographic artwork presented in this way, and movies as photographic images presented in sequence; but conceptually they’re very similar. On web pages, animation can be used for many purposes. It often seems that on most web pages, it is used purely to annoy viewers! This is usually because the animations have been implemented awkwardly or overused. Reasons to use animations 1. To call attention to something. 2. To illustrate a point that can’t be made with static images, or to enhance a static image or text example. 3. Entertainment/amusement. Academic use of animation In teaching or academic discussion, animations can be tremendously useful. Animations can illustrate such widely varied concepts as population movements on a map, changes in charts and graphs, and mathematical and statistical models. For a creative writing class, students could be asked to create animations as a new way of looking at sequencing a narrative. With more advanced knowledge, you can create interactive learning tools for your class. The use of the animation is up to you! Here are some examples of university-level uses of animation in teaching: http://www.sp.uconn.edu/~terry/DHE/terry.html http://www.cellsalive.com/ouch.htm http://www-stat.stanford.edu/~susan/ http://ficp.engr.utexas.edu/conservationMyths/heatingCooling/drapeDefense.cfm Reasons NOT to use animations 1. Distracting to your users. 2. Are you sure it enhances the explanation? 3. Can look very unprofessional. 4. Will add to the download time. 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: 1/23/04 2 of 10 Animation With ImageReady and Flash A Faculty Exploratory/Knowledge Navigation Center Workshop Types of Animations There are many options for displaying animations, using the web browser alone, using browser plug-ins, or using proprietary image viewers. Each of these display options 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 both 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 ImageReady vs. Flash ImageReady ImageReady comes bundled with the latest versions of PhotoShop, and is the Adobe solution for preparing all kinds of images for the web (not just animations). It is a pixel-based animation tool; this means that it stores animations as frames where each varies from the next based on differences in the small square dots of color that are used to display things on the screen. The only animated output type ImageReady offers is the animated gif. Flash Flash is a very popular piece of software that can be used to add animation and interactivity to your website. Unlike ImageReady, Flash is a vector-based animation tool. This minimizes file sizes, since 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. Unfortunately, because of this, Flash has limited capabilities for animating photographs. Flash can output animated gifs, as well as Flash-proprietary formats. 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: 1/23/04 3 of 10 • • Animation With ImageReady and Flash A Faculty Exploratory/Knowledge Navigation Center Workshop Getting Started with ImageReady The ImageReady interface is very similar to PhotoShop. It is very easy to move between the two programs. PhotoShop Layers can be used in ImageReady for a number of purposes. In ImageReady, you will use the Animation Window to add and remove frames, and control timing. If you do not see the Animation Window (usually at the bottom left of your screen), go to Window on the menu bar, and select Animation from the pull-down list. Creating a simple animation 1. Create a new file, by going to File > New on the menu bar. The New Document dialog box will open. Under Size, choose “ImageReady Default”. Then click OK. A new file window will open in your work area. Note that the bottom of your file window includes useful information such as approximate download times and approximate file size, as well as percentage zoom. 2. Select the Ellipse Tool ( ). You may have to look under the Rectangle Tool to find Ellipse. 3. Draw an ellipse near the top of your document window. 4. In the Animation Window, click on the Duplicate Frame button. This creates a second frame that is a copy of your first. ), and move your ellipse a little ways down the screen. You 5. Select the Move Tool ( will find that holding down the Shift key while you are moving the ellipse helps you move it in straight lines. 6. Repeat steps 4 and 5 several times, until you have at least five different frames in your Animation Window. 7. In the Animation Window, click on the Play button ( ). After you are sufficiently ) to stop playing the animation. dizzy, click on the Stop button ( 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: 1/23/04 4 of 10 Animation With ImageReady and Flash A Faculty Exploratory/Knowledge Navigation Center Workshop “Tweening” in ImageReady 1. Create a new ImageReady document. 2. Draw a shape in your document window. 3. In your Animation Window, create two duplicate frames. 4. In frame 2, use the Move Tool to move your shape to a very different location in the document window. 5. Select frame 2, then click the Tween Tool ( ). 6. In the Tween Dialog Box, select the following settings, then click OK. • Tween With: Previous Frame • Frames to Add: 3; • Layers: Selected Layer • Parameters: Position 7. Keeping the present frame selected (it should now be frame 5), click the Tween button again, and leaving all other settings the same, change Tween With: to Next Frame, then click OK. 8. Play your animation again. Photoshop has created the intervening frames for you. Using PhotoShop Layers with ImageReady 1. Open PhotoShop, and open “angell.jpg” from the Desktop. 2. Go to Layer > Duplicate Layer. This creates a duplicate of your background layer. 3. Make some slight changes on your duplicate layer, perhaps using the “Liquify” filter. 4. Duplicate the duplicate layer, and make some changes on the new layer. Repeat until you have several progressively different layers. 5. Save your work as a PhotoShop Document (.PSD file), and close. 6. Open your file in ImageReady. 7. In frame 1, make sure that all layers except the Background layer are hidden. (Go to the Layers Palette and click the Eye icon next to the layer to hide that layer.) 8. Duplicate frame 1, and in frame 2, show the second layer. 9. Repeat step nine until you have as many frames as you have layers, revealing a new layer in each frame. 10. To smooth transitions, create tweens between frames, making sure to tween layer Opacity instead of Position. 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: 1/23/04 5 of 10 Animation With ImageReady and Flash A Faculty Exploratory/Knowledge Navigation Center Workshop Saving from ImageReady When you are done working on a file in ImageReady, save the work file as a PhotoShop Document (.PSD) by going to File > Save As…, and choosing a filename. To save for web use, go to File > Save Optimized As…, and make sure the file type is set to GIF. Tips for ImageReady Use Layers for “cel” type animation. If you have a background that won’t change much throughout your animation, create it on one layer. Create other separate layers for intermediate items that don’t change much, and for active items that move or change frequently. Most Photoshop Filters and Effects are available in ImageReady, so you don’t have to hop back and forth between PhotoShop and ImageReady very much. If you do create a new layer in ImageReady, it is visible in all existing frames by default. You can change timings between frames by clicking on the time displayed beneath each frame. You can select multiple frames by Shift-clicking or Ctrl-clicking. This can be useful for changing timing of multiple frames, or for changing visibility across many frames. 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: 1/23/04 6 of 10 Animation With ImageReady and Flash 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. This can be used for traditional animation (as in ImageReady), if you create multiple keyframes in quick succession. Alternatively, you can create relatively few keyframes, and let Flash fill in the differences (tweening). Flash also allows you to use multiple layers. Flash layers are similar to PhotoShop/ImageReady layers in that they can be used to keep items that should be animated separately, separate. Flash layers are different from PhotoShop/ ImageReady layers in that each layer in Flash can have its own independent keyframes. Creating a simple animation 1. Draw a shape on your Stage using the Circle Tool ( 2. Select frame 2 in your Timeline, and go to Insert > 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. 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: 1/23/04 7 of 10 Animation With ImageReady and Flash A Faculty Exploratory/Knowledge Navigation Center Workshop “Tweening” in Flash Flash tweening is a bit more powerful than ImageReady tweening, and works a little differently. Simple Motion Tweening 1. Create a new Flash document, by going to File > New. 2. Draw a rectangle on your Stage. 3. In the Timeline, select frame 1, and go to Insert > Create Motion Tween. Your rectangle will be highlighted in blue and will have a crosshair in the center. 4. In the Timeline, select frame 12, and go to Insert > 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. Use the Arrow Tool to move your rectangle somewhere else on the Stage. 6. Select frame 1 on the Timeline and hit Enter to see your animation play. Motion Guides 1. Insert a new layer in your Flash document, by going to Insert > Layer. 2. Draw an object onto your new layer. (Make certain that Layer 2 is selected before you begin drawing). 3. Select frame 1 in Layer 2, and go to Insert > Motion Guide. 4. Select frame 1 in the new Guide layer, and use the pencil tool ( that goes all over your Stage. ) to draw a wavy line 5. Select frame 1 in Layer 2, and use the Arrow Tool to snap the object to the beginning of the line you drew. 6. With frame 1 of Layer 2 still selected, Insert > Create Motion Tween. 7. Select frame 20 in Layer 2 and in the Guide for Layer 2, and Insert > Keyframe. 8. Use the Arrow Tool to move your shape to the end of the line in Frame 20. 9. Insert a keyframe in frame 20 of Layer 1. 10. Hide the Motion Guide by clicking the black dot under the Eye icon in the Timeline. 11. Select frame 1 in the Timeline, and hit Enter to see your animation play. 12. 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: 1/23/04 8 of 10 Animation With ImageReady and Flash A Faculty Exploratory/Knowledge Navigation Center Workshop Tweening Scale, and “Ease” 1. Insert a keyframe in Layer 2 at frame 10. 2. Use the Transform Tool ( ) to increase the size of the object on Layer 2 in frame 10. 3. Select frame 1 and play your animation. 4. Click in the Timeline on Layer 1 between frame 1 and frame 12. 5. 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. Try changing the ease to a negative number and play the animation again. 6. Save your Flash file. Tweening Color 1. Make a new Flash document and draw an object on the Stage. 2. Insert a keyframe around frame 20. Move the object in frame 20, if you want; then go to the Properties box, and set Color: to Tint. Select a color to tint the object in frame 20. 3. Select any frame between frame 1 and frame 20, and go to Insert > Create Motion Tween. You will find that your object changes color when you play the animation. Tweening Shapes This is the point at which Flash tweening really diverges from ImageReady tweening. Using Flash shape tweening, you can cause one object to “morph” into another. 1. Make a new Flash document, and use the Pen Tool ( 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 show some ) , you can use it additional information. When the cursor has a curved line next to 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. 5. Select any frame between your two keyframes, and choose “Shape” from the Tween box in the Properties box. 6. 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: 1/23/04 9 of 10 )to draw a shape. Animation With ImageReady and Flash A Faculty Exploratory/Knowledge Navigation Center Workshop Additional Flash Information 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 for Flash Use Layers to preserve separation of items that will be moving independently. Drawing in Flash can be very different from other graphic programs you may have used. It is worth your while to take the “Illustrating in Flash” lesson. 1. Go to your File menu and Open the file “illustrate.fla” – it is stored in C:/Program Files/Macromedia/Flash MX/Lessons/Work files; or on a Mac, in Applications/Macromedia/Flash MX/Lessons/Work files. 2. Then go to the Help menu, select Lessons, and then Illustrating in Flash. Try out some of the other Lessons as you get more accustomed to Flash. Wrapping Up Open “smile1.gif” and “smile2.gif” in your web browser. Can you tell just by looking at them which one was made in Flash and which in ImageReady? Take a look at “angell.gif”. Which program was used to create this file? These examples give a good idea of what kinds of animations are practical for various purposes. All example files (and files referenced above in this handout) are available at http://www.lib.umich.edu/knc/classes/animation. 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: 1/23/04 10 of 10