<a name="1000016"> </a>Animations for the World Wide Web
</h2>
<p id="1000021" class="Body">
<a name="1000021"> </a>Corel Painter lets you export a frame stack as an animated GIF file. The animated GIF format is ideal for displaying simple animations on the World Wide Web (WWW).
</p>
<p id="1000034" class="Body">
<a name="1000034"> </a>Animated GIFs are easy to create and add to your Web pages. You give them the same HTML tag you would any GIF image. The only difference is that the browser displays the file as an animation. Animated GIFs can be used as a link anchor or as an image map. However, they cannot be used as a background.
</p>
<p id="1000035" class="Body">
<a name="1000035"> </a>Your browser must support GIF animations for the images to display properly.
</p>
<p id="1008357" class="Body">
<a name="1008357"> </a>Refer to <a href="21-Web2.html#1003716">"The Web"</a> for more information about creating content for Web pages.
</p>
<h3 id="1000036" class="Heading2">
<a name="1000036"> </a>Creating Animated GIFs
</h3>
<p id="1000037" class="Body">
<a name="1000037"> </a>If your movie is intended for the Web, you should consider file size and number of colors in your animation, as these factors affect the speed of the animation.
</p>
<p id="1008428" class="Body">
<a name="1008428"> </a>Create your animation in a Corel Painter frame stack. Take advantage of your favorite animation features and techniques to develop the images.
</p>
<p id="1000044" class="Body">
<a name="1000044"> </a>As you design your animation, consider the file size and transfer time necessary. Your animations will be more accessible if they're small enough to download in a reasonable time. You can minimize file size by considering the following:
</p>
<ul>
<li class="SmartList1"><a name="1009411"> </a>Reduce the frame size. A smaller frame leads to a smaller file. You choose the frame size when you create a new movie. If you import an existing animation or video, you cannot resize the frames.</li>
<li class="SmartList1"><a name="1000045"> </a>Limit the number of frames. Each frame increases the file size, so if you can get by with fewer frames, do it. </li>
<li class="SmartList1"><a name="1001047"> </a>Limit the number of colors. Fewer colors in the image reduces the size of the color palette and leads to smaller files. For best results, choose colors from the default 256-color set. This color set matches the color palette of Netscape Navigator, so the colors in your GIF will be reproduced on the client without dithering.</li>
</ul>
<p id="1008465" class="Body">
<a name="1008465"> </a>If the animation requires transparency, you must set up a selection for each frame. For information about creating selections, refer to <a href="12-Selections4.html#999057">"Creating Selections"</a>.
</p>
<h3 id="1008472" class="Heading2">
<a name="1008472"> </a>Exporting Animated GIFs
</h3>
<p id="1008510" class="Body">
<a name="1008510"> </a>There are many options available when saving to the GIF file format.
</p>
<p id="1009336" class="Body">
<a name="1009336"> </a>You can choose the number of colors and the imaging method-Quantize or Dither.
</p>
<p id="1008836" class="Body">
<a name="1008836"> </a>If you want to gradually display images in the Web browser as they load, you can enable the Interlaced option.
</p>
<p id="1008834" class="Body">
<a name="1008834"> </a>If you have created selections in each frame, you can make your image transparent and choose your background option. You might need to adjust the Threshold slider to determine at what selection mask value the image becomes transparent.
</p>
<p id="1008582" class="Body">
<a name="1008582"> </a>For more information on these GIF options, refer to <a href="03-Basics5.html#999738">"Saving GIF Files"</a>.
</p>
<p id="1008517" class="Body">
<a name="1008517"> </a>You can also set animation-specific GIF options-Frame Delay, Disposal Method, and Looping.
</p>
<p id="1008518" class="Body">
<a name="1008518"> </a>The Frame Delay allows you to specify a pause (in 100ths of a second) between each frame. Without a delay, the frames appear as quickly as the system can load and display them. The display of each image (especially with larger frames) will vary between computer systems, so the actual animation display rate may be lower. You can use the Frame Delay to approximate a particular frame rate. For example, you capture some one-quarter size video at 8 frames per second (fps). You want 8 frames to appear in one second, so divide one second (100 hundredths of a second) by 8. The result is 8/100=12.5. Discard the decimal portion and enter 12 as the frame delay. Discarding the decimal is the only allowance for the time required to display each image. For a large frame size, you might want to allow more time for display.
</p>
<p id="1008924" class="Body">
<a name="1008924"> </a>The Disposal Method lets you specify what happens to an image after it has been displayed (and its frame delay has passed), and before the next image is displayed. The disposal method is significant only when using transparency that differs between frames.
</p>
<ul>
<li class="SmartList1"><a name="1008638"> </a>With Default, the client browser's default disposal method is used. </li>
<li class="SmartList1"><a name="1008642"> </a>With None, the image is left on-screen and the next frame is rendered over it.</li>
<li class="SmartList1"><a name="1008643"> </a>With Background, the region covered by the image is restored to the background color. </li>
<li class="SmartList1"><a name="1008644"> </a>With Previous, the region covered by the graphic is returned to the imagery of the previous frame.</li>
</ul>
<p id="1009470" class="Body">
<a name="1009470"> </a>If you want the animation to repeat, enable the Loop option. Enter the number of times the animation should repeat. If you want it to repeat indefinitely, enter 0 (zero).
</p>
<h5 id="1000068" class="ToDoHead">
<a name="1000068"> </a>To export a frame stack as an animated GIF
</h5>
<ol type="1">
<li class="SmartList1" value="1"><a name="1000069"> </a>With the frame stack open, choose <span style="color: #000000; font-style: normal; font-weight: bold; text-decoration: none; text-transform: none; vertical-align: baseline">File menu > Save As</span>. </li>
<li class="SmartList1" value="2"><a name="1013525"> </a>In the Save Movie dialog box, choose Save Movie as GIF Animation. </li>
<li class="SmartList1" value="3"><a name="1013526"> </a>In the Enter Movie Name dialog box, choose a location, enter a filename, and click Save. </li>
<li class="SmartList1" value="4"><a name="1000081"> </a>In the Save as GIF Options dialog box, specify the options you want. </li>
</ol>
<p id="1000106" class="Body">
<a name="1000106"> </a>You can now use your browser to open the file and view the animation. You can place the animation on a Web page with the same HTML image tag you'd use for a simple GIF file.
</p>
<p id="1000107" class="Body">
<a name="1000107"> </a>In the client browser, the animation will appear one frame at a time during the download. In most cases, this will be significantly slower than the intended display rate. After all frames have been downloaded, the browser will loop the animation (if the loop option is used), with the specified delay between frames. The animation plays from the browser's cache so it's much faster.
</p>
<p id="1000108" class="Body">
<a name="1000108"> </a>If the animation in the browser window stops playing, it's probably finished the set number of loops. In some browsers, you can get it started again by resizing the window. In all browsers, you can get it started again by reloading the page.
