[b]Web Animation with Ulead GIF Animator[/b] [quote]This is just a [u]simple[/u] tutorial in animating web images/animations.[/quote] Step One: First, we will bring objects for our animation from PhotoImpact. After creating objects for the animation in PhotoImpact, save the objects in a UFO file. Click Switch in the top right corner of the PhotoImpact workspace, and select Ulead GIF Animator. If the Wizard is shown when GIF Animator opens, click Close. A new project will automatically be started. Click Open and select the UFO file containing your objects. Click OK. All the objects are shown in the preview window, and in the Object Manager Panel on the right. [img]http://i31.tinypic.com/33nyrf9.jpg[/img] [img]http://i28.tinypic.com/25tdh51.jpg[/img] Using the Pick Tool, select an object on the Object Manager Panel and drag it across the canvas to its initial position in the animation. Use the Transform Tool to adjust the size and angle of each object. This will become the first frame. View details of the frame by double-clicking the thumbnail on the Frame Panel at the bottom of the workspace. By default, the frame delay will be 0.1 seconds. This is a little too fast for this animation, so adjust the delay and click OK, then press [F6] to increase the default delay setting to 20/100 sec in the Preferences dialog box. [img]http://i26.tinypic.com/opbhjr.jpg[/img] Step Two: Right-click the first frame and select Duplicate Frame [Ctrl+F] to create the second frame of the animation. In the second frame, we want to show the cow a little further along its trajectory and the stars twinkling. As the cow moves, it rotates clockwise slightly to follow a curved trajectory. If we rotate the cow however, it will also be rotated in the first frame. We will require a new cow altogether. Right-click the cow and select Duplicate Object(s) [Ctrl+D]. [img]http://i25.tinypic.com/n14jk2.jpg[/img] Select the second cow on the Object Manager Panel and move it to its progressed position. Then rotate it using the Transform Tool . Click Show/Hide Object to hide the first cow in the second frame. Similarly, for twinkling stars, duplicate each star, adjust the angle, and hide the original in the second frame. [img]http://i27.tinypic.com/23jq1hc.jpg[/img] [img]http://i25.tinypic.com/x5cgg3.jpg[/img] [i]Tip: Rename duplicated objects on the Object Manager Panel to avoid confusion.[/i] Add more frames, duplicate the cow in each, then adjust its position and rotation in each frame so that it progresses over the moon. In each subsequent frame, hide and show alternate star pairs. This animation takes nine frames to complete the path over the moon. [img]http://i27.tinypic.com/2v0fipw.jpg[/img] Step Three: We will now add the banner text that scrolls in from the left and fades away in the center of the screen. Ensure that the first frame is selected on the Frame Panel. Select Frame: Add Banner Text. In the Text tab, type the required text string. Format the text size, font, color and style as required. Click Shadow to add depth and increase the contrast between the text and the background. Drag the text in the preview screen to the final position it will occupy before it fades. [img]http://i32.tinypic.com/2zgu9ut.jpg[/img] In the Effect tab, select Enter scene, and select Scroll Right from the list. For this animation, we want the text to arrive at the center position two thirds of the way through before fading out. Set the number of Frames to 6. Select Exit scene, and select Fade from the list. Set the number of Frames to 3. [img]http://i32.tinypic.com/2eo9vth.jpg[/img] In the Frame Control tab, set both Delay time and Key frame delay to 20. Select Distribute to frames to ensure the banner text plays in the existing frame set. Click OK. [img]http://i26.tinypic.com/2f0fya8.jpg[/img] The banner text appears as a single object in the Object Manager Panel, and can be seen in the frames in the Frame Panel. Click Play in the Frame Panel to preview the animation. [img]http://i30.tinypic.com/w9gwzo.jpg[/img] Step Four: To ensure that the animation takes an acceptable amount of time to download and display in a Web page, GIF Animator optimizes the animation by default. Click the Optimize tab in the workspace. Notice that above the original and optimal images the projected file sizes and download times are displayed. [img]http://i26.tinypic.com/x3bqjc.jpg[/img] Customize optimization constraints on the Attribute Toolbar. When settings are customized, if the Auto-optimize button [img]http://i29.tinypic.com/2cfz8z8.jpg[/img] is not pressed, it will be necessary to click Optimize Now underneath the preview image on the right to re-optimize the animation. [img]http://i27.tinypic.com/fveg52.jpg[/img] Step Five: The file is now ready to be exported as an animated GIF file. Select File: Save As - GIF File. Specify a location, type a file name, and click Save. Note that the animated GIF file has been created, but not the project itself. To save the project, select File: Save As - UGA File. Specify a location, and give the project a name. UGA is the native file format for Ulead GIF Animator projects. The project can be edited again at a later date to produce different animated GIFs. [img]http://i30.tinypic.com/2nc3txg.jpg[/img] [img]http://i30.tinypic.com/wjb58j.jpg[/img] [quote][b]Credits:[/b] Ulead PhotoImpact 10 Ulead GIF Animator Ulead Learning Center[/quote]