Creating an Animated GIF No tour of PHOTO-PAINT would be complete without a tutorial on how to build an animated GIF. Although GIF files are giving way to Flash and other video file formats, GIFs are universally supported by Internet browsers—they don’t require your audience to go fetch a browser plug-in. GIF animations can make terrific banner ads for websites, and the following sections take you through some CorelDRAW and PHOTO-PAINT moves to create a sample animation. Playing with a Paper Airplane When you design an animation, you follow a checklist as you do in gathering resources for any composition. The example in this section is a paper airplane, which has already been drawn for you as a CDR file. Let’s pretend that a travel agent wants you to put a web banner on their site advertising that children under 12 fly free this month only, or some similar offer. The concept is to fly a paper airplane across a sky, with a tag attached that spells out the offer. 834 CorelDRAW X5 The Official Guide FIGURE 26-11 The object is already significantly blurred, so scaling it won’t produce any more visible degradation. The sky photo has been provided for you in the ZIP archive for this chapter, but the paper airplane CorelDRAW illustration is blank—it needs something written on the tag—so it’s off to CorelDRAW to begin the next tutorial. The tag is intentionally blank: feel free to work with the file, take it apart and learn from it, and use it as a part of your own composition with a different slogan written on it. Let’s begin. Adding Text and Exporting a CorelDRAW Drawing 1. Open Paper Airplane in CorelDRAW, and then zoom into the tag area. 2. With the Text tool, type Kids Fly Free (or whatever you like) over the tag area. You can put a line break after “Kids” to avoid running over the tag’s hole in this area. 3. With the text selected with the Pick tool, choose a contrasting color for the text, such as bright yellow, by clicking the color well on the Color Palette. 4. On the property bar, choose a lighthearted typeface such as Comic Sans MS, bold. Scale the text up or down so it nearly fits inside the tag area. 5. Choose the Envelope tool from the effects group of tools on the toolbox, and then distort the text a little, as shown in Figure 26-12. The drawing is at an angle to an imaginary camera, so the text shouldn’t be perfectly parallel to the screen. 6. Select all the objects (press CTRL+A) and then click the Export button on the standard toolbar. In the Export dialog, choose PNG-Portable Network Graphics (*.PNG) from the Save As Type drop-down list. Make Paper Airplane.png the name for the file, choose a hard drive location for the bitmap file, and then click OK. 7. In the Export dialog, make sure the export Resolution is 96 dpi—if the Transformation area is not visible, click the down arrow to expand your view—or the airplane will be far too large for the GIF animation (see the following Note). Check the Transparency check box if it’s not checked, and finally, look to see if the export file width is 513 pixels—choose Pixels as the Transformation | Units if it’s not set this way. CHAPTER 26: PHOTO-PAINT Effects and Advanced Editing 835 26 FIGURE 26-12 Don’t export with the text you’ve added looking too perfect! Click OK to export and after CorelDRAW makes a bitmap copy of the illustration, you’re finished and can close CorelDRAW and launch PHOTO-PAINT. Ill 26-22 You didn’t have to set a lot of options in the Export dialog, because the CorelDRAW file was carefully set up and the airplane scaled to a predetermined size that made the tutorial work easily. When exporting drawings to be used as bitmap versions in PHOTO-PAINT, you begin your drawing with a new file in CorelDRAW whose resolution is 96 dpi, the same as your screen and the same resolution as graphics you see in your Internet browser. In the Create a New Document dialog, type 96 in the Rendering Resolution field and you’re good to go. Then set the Units in CorelDRAW to Pixels by choosing from the Units drop-down on the property bar. Keep in mind that GIF animations have to have small dimensions. For example, the airplane is about 500 pixels wide because the composition you’ll make is about that width. When you draw a foreground object, you keep it to the width you want it to be, measured in pixels, for your final composition. Then, exporting the drawing to the correct pixel width and height is a simple and nearly automatic process. Measuring is a pain, so when you set up your document for web export, it’s a pain you have only once when you begin a new drawing. 836 CorelDRAW X5 The Official Guide Animation: Defining Frames and Basic Setup You’ll move procedurally, and this means “not at breakneck speed” through the next sections, because unlike with Flash movies (covered in Chapter 28), you need to build each frame of a GIF animation one at a time—PHOTO-PAINT doesn’t perform “tweening” to auto-create intermediate animation frames. First on your “To Do” list is to import the Background image, Sky.jpg, and to turn the document into a movie. Then you’ll open, and keep open, the imported paper airplane file, and then copy it several times into the movie document. By changing the airplane file’s position in each frame you add to the movie via the Movie docker, you create an animation of the airplane traveling from left to right, thus creating an animation cycle that will play indefinitely on a web page. You’ll create six frames of animation as the airplane travels from camera left to an exit at camera right, and it will pause in the middle of the frame so audiences can clearly read the text. Let’s get moving! Building a GIF Animation: Part 1 1. In PHOTO-PAINT, press CTRL+O and then choose Sky.jpg from your hard drive. 2. Choose Movie | Create From Document. Open the Movie docker by choosing Window | Dockers | Movie. Note that currently one frame is on the Movie docker list, and it’s set to a 200 millisecond (ms) duration. Duration can be changed, and you’ll do so a little later; a millisecond is a tenth of a second, about the duration of a 1/16th note in music (at an average tempo of 60 beats per minute), also evaluated as the minimum time it takes for a human to recognize a picture. 3. Open Paper Airplane.png. Because you exported this PNG file with Transparency, it’s floating against a transparent background and is easy to animate against the sky image. 4. Click the title bar of what PHOTO-PAINT is now calling Sky.AVI to make it the foreground document. Click the Insert Frame button at the lower left. In the Insert Frames dialog, type 5 in the Inset Frames box, click After, Frame 1 (this is not critical, but just a good practice), and click the Copy Current Frame button, and then click OK. 5. Let Figure 26-13 be your visual reference for the rest of this chapter. What you’re going to do is to create frames, and they exist in time as the airplane animates across the screen. The Objects docker isn’t going to be of help—it won’t show you what’s going on in the document at any point in time—but the Movie docker will. First, click the First Frame button on the Movie docker. Your document is now at the first point in time for the GIF animation you’ll build, and at this time there’s nothing in the foreground. CTRL+click-drag the airplane in the Paper Airplane window into the Sky.avi window to copy (not move) the airplane object to on top of the sky. You have not really added the airplane to a “normal” document—it’s a movie document and although the Objects docker shows the airplane object, it exists only in Frame 1 in time, not in any other frames. CHAPTER 26: PHOTO-PAINT Effects and Advanced Editing 837 26 6. Drag the window edges away from the center of the document so you can see white surrounding the composition, and can move Object 1, the airplane, to put it in position for an entrance, camera left. 7. With the Object Pick tool, move the airplane mostly out of frame, just so its nose is sticking out. Your four-arrowhead cursor should be slightly in the white border area as you move the airplane out of frame, and vertically centered. 8. You’re going to turn Frame 1 now into an honest-to-gosh movie frame that features the nose of the airplane for a duration of 200 ms—a fifth of a second. Right-click over the Object 1 title on the Objects docker, and then choose Combine | Combine All Objects With Background. The Objects docker now shows only the Background in the Sky.avi file, and evidently you cannot move the airplane more to the right for 838 CorelDRAW X5 The Official Guide FIGURE 26-13 The Movie docker features DVD player–like controls for advancing and rewinding to the exact frame you want to build or edit. Previous Frame Next Frame Last Frame Play Stop First Frame Insert Frame Insert From File Overlay Frame 2. Fortunately, that’s not how you animate a GIF file—this is why you have five more frames on the Movie docker. Yes, Frame 1 has the nose of an airplane, so the background sky has been altered, but only in Frame 1. Frame 2 has no airplane; let’s add one now. 9. Click the Next Frame button on the Movie docker; you’ll see that the nose of the airplane isn’t in this frame, because at Frame 2 in time, it’s not there. CTRL+click- drag the airplane from the Paper Airplane.png document window into the Sky.avi window. 10. It’s not critical here, but when you want to move objects in time in PHOTO-PAINT, use the Overlay feature on the Movie docker to display a combination of the frame and the next frame at once in the document window. In traditional animation, this is known as “onion skinning.” Ill 26-23 CHAPTER 26: PHOTO-PAINT Effects and Advanced Editing 839 26 Frame 1 Frame 2 Frame 1 overlaid on Frame 2 11. First click the Overlay button on the Movie docker to activate the slicer. Click the First Frame button, and automatically Frames 1 and 2 are bracketed, and you see a blend of both frames in the document window. Drag the Overlay Amount slider to adjust how much of Frame 1 intrudes on Frame 2. 12. Using the Pick tool, drag the airplane to the left until it more or less aligns vertically with the nose of the plane in overlaid Frame 1. You can progress the plane to camera right so you can almost see the tail of the plane, but not the message tag. 13. When you think the airplane has moved enough to suit Frame 2, do what you did in step 8: flatten the copy of the airplane against the copy of the sky. Take a well-deserved break, but don’t save the file and don’t close it. This movie file is a special file format that cannot be saved as a CPT file. It’s PHOTO-PAINT’s presumption that when you save the file, you’re saving a movie…but the movie’s not finished yet. This tutorial is, but there’s much more ahead. Instead of using the Next Frame and Previous Frame buttons on the Movie docker, you can double-click the frame title (or the thumbnail) to go to a specific frame. It’s a good idea just before combining the plane object with any Background frame to look at which frame is the current one. You can easily see this on the bottom of the document window. In fact, the document window has advance and rewind controls you can use instead of the Movie docker buttons. Remember, an object doesn’t belong to any frame. It’s a floating element within the context of the animation and only “belongs” to a frame after you choose Combine | Combine Objects With Background—accessed by right-clicking the thumbnail on the Objects docker, by right-clicking in the document window, or via the Object main menu. Finishing the Animation You have four frames remaining that don’t contain the plane. You don’t need a repetition of the preceding tutorial steps to finish animating the plane: use the Next Frame button to advance to the next missing-plane frame, CTRL+click-drag a new copy in from the PNG document, position it, and then combine the plane with the frame’s Background. The last frame, Frame 6, should show only the extreme tail of the plane’s message tag. Once you’ve done that, it’s fun to click Play and see what you’ve whipped up! 840 CorelDRAW X5 The Official Guide Ill 26-24 The following steps take you through timing; as mentioned earlier, the frame where you get a good view of the message you typed on the tag needs to have a longer view duration. Follow these steps to put the finishing touches on the animation, and then you’ll see how to export it to GIF file format. Exporting an Animation 1. Now that the frames all have content in them and no objects are in the composition— only Backgrounds—go to the frame that’s centered with the text easy to read, probably Frame 3 or 4. Double-click an entry on the Movie docker. 2. Click the “200 ms” title for this frame to select it for editing; then type in 800. Press ENTER, PHOTO-PAINT automatically adds “ms” at the end, and you’re all set. Four- fifths of a second is plenty of time for the audience to see the message. Also, this GIF will continuously loop (coming up next), adding more time for the “sell” sandwiched in-between the light entertainment. 3. Choose File | Save GIF - GIF Animation (*.gif) as the file format from the Save As Type drop-down list. Choose a file location, give the file an appropriate name, and then click OK to enter a couple more dialogs where you specify color depth and the means by which certain colors are averaged to produce a relatively small file size. CHAPTER 26: PHOTO-PAINT Effects and Advanced Editing 841 26 4. In the Convert to Palette dialog, set the type of dithering and color palette used in your animation frames. You’ll see that many options are dimmed on the Options tab and on the other tabs. This is because you’re exporting a special animated file and not a still image. GIFs can be stills or animations. You’re best off with either Uniform colors or Image Palette as the Palette choice; GIFs have a maximum of 256 unique colors, and these palettes help preserve the delicate shading of the cloud photo and some of the fountain fills used in the CorelDRAW airplane drawing. 5. Jarvis, Stucki, and Floyd-Steinberg are all types of diffusion dithering. They evaluate the most predominant colors in the animation and attempt to represent these colors accurately, while letting less frequent colors degrade by scattering similarly colored pixels around in the frame to represent, to “fake,” the colors the process will eliminate. The other choices are Ordered dithering, which looks like a pattern weave and is usually inappropriate for photographic GIF animations, and None (don’t use this unless your animation uses uniform-colored geometric shapes). When no dithering is used on photographic images, the result looks like a bad poster print made by silk- screening. Click OK to proceed to the next and final dialog. 6. In the GIF89 (that’s its proper name) Animation Options dialog, choose Automatic for the Page Size, because we intended all along for this slightly larger than usual GIF animation to be presented as the frame size of the sky image. You could make the dimensions smaller by unchecking the Automatic box and typing in custom values in your work to make an animation smaller in both file size and dimensions. In Color Options, PHOTO-PAINT calculates in this example animation that only 236 of the 256 possible colors are necessary, saving a little on the file size of the animation, and the evaluation is based on the Dithering and Palette preferences you set in the previous dialog. You can decrease the number by using the spin controls or by typing in a value; then click Preview to see if fewer colors are acceptable, or if they make your animation look hideous. You can also try Adaptive Palette; with this example animation, Adaptive removes a lot of the visual dithering in the finished animation file. 7. Click the Loop Frames check box to make the animation start over again after the last frame. You can choose Forever, or set the number of times the animation loops. It’s usually a good idea to set it to Forever; if visitors to your web page are distracted, for example, and your animation plays only five times before stopping, your audience misses the show unless they know how to reload a web page—but probably won’t bother. 8. Check the Save Difference Between Frames Only box for sure! This helps reduce the saved file size, because only the pixels that change from frame to frame are rewritten with each successive frame. 842 CorelDRAW X5 The Official Guide 9. Nothing on the Frame Settings tab applies to this example animation, but here is what you might want to choose from in your own animation work: Transparency is actually assigned to a single color in your animation, and this option makes that color invisible. This is great for composing a web page with a colored background you want to “float” an animation against, but the paper airplane doesn’t need this option because we want the entire background area visible. In the Palette area, Use Local and Use Global are a strategy for making your animation a little higher in quality at the same or slightly smaller file size. “Global” means that one palette is used to dither down colors in the entire animation, while “Local” means that the PHOTO-PAINT rendering engine examines each frame for the most predominant colors while dithering down. Frame Delay is your last chance to speed up or slow down frames, and the How To Dispose list box is an option for clearing a single frame before the following frame loads. Dispose options are only relevant for experienced users who want to do something tricky or startling with how an animation plays. Your airplane animation doesn’t fit into this category of special effects. You’ve created a highly interesting animation, so let’s leave the options at that. Click OK, and then drag the GIF file into an Internet browser window to watch it play! Ill 26-25 Kids fly Free.gif is the completed animation file in the Gallery folder in the ZIP archive you downloaded. You owe yourself a big congratulations for getting through this chapter. Imagine: you now not only have quite a few advanced image-retouching tricks tucked under your belt, but you now know how to make a visually rich GIF animation with a moving object that loops continuously. This is a lot better than learning how to make a GIF animation that blinks on CHAPTER 26: PHOTO-PAINT Effects and Advanced Editing 843 26 . Animation: Part 1 1. In PHOTO-PAINT, press CTRL+O and then choose Sky.jpg from your hard drive. 2. Choose Movie | Create From Document. Open the Movie docker by choosing Window | Dockers | Movie illustration, you’re finished and can close CorelDRAW and launch PHOTO-PAINT. Ill 2 6-2 2 You didn’t have to set a lot of options in the Export dialog, because the CorelDRAW file was carefully set up and. won’t show you what’s going on in the document at any point in time—but the Movie docker will. First, click the First Frame button on the Movie docker. Your document is now at the first point in