|
Creating Animated .GIF Banner
The most popular form of animated graphics used on the Web is the .GIF file. 2D&3D Animator lets you create these files so fast so doesn't allow any other animator. You can create animation for your Web site or create a banner to join a banner exchange program.
In this tutorial, pictured below, you will learn how to create a banner, add preset images and export the animation into a .GIF file.
Step 1: Starting a New Animation
When you start, 2D&3D Animator opens an empty Animation.
To start a new Animation
On the File menu, click New.
Step 2: Setting Size of Animation
By default, a new animation has the same dimensions as desktop area, however, you can easily resize the new animation.
Select Animation Size | Size 468x60 pixels from the Modify menu. The 468x60 pixels size is most popular banner's size in Internet.
Step 3: Setting the Animation Background
The background of an animation can be filled with colors, or with image. For this tutorial animation, we will fill the background with silver solid color with bevel.
We will fill the background with silver solid color  and bevel.
To set animation color
- Select Animation Properties from the Modify menu.
- The Scene Properties dialog box appears.
- Select the Background tab.
- Click the Color
 button and choose color from the Color selection tool.
- Set the Bevel Width equals 2 pixels.
- Set the Color of Top-left Bevel's Side as white color.
- Set the Color of Bottom-right Bevel's Side as gray color.
Step 4: Adding the window title bar
Next step, we will add the title bar to the animation that our banner looks like a pop-up window.
Step 5: Adding the exclamation icon
We will add an exclamation icon, which will point that our banner has a warning message.
To add the exclamation icon
- Click the Images button from the Presets panel.
- Drag the image with exclamation icon at the left side of our banner.
Step 6: Adding the warning message
We will now add a string with our message to the animation.
To add the warning message
- Click Artistic Text from the Insert Menu.
- Click anywhere in the Document Window and drag away (in any direction) from this point to size the text layer. The layer is created when you release the mouse button.
- Type the message. You can type any message you like.
- Set the text’s color as black and background color as silver.
- Drag the text to the center of animation.
Step 7: Adding the “Ok” button
The “Ok” button will pretend to be clicked by the mouse cursor.
To add “Ok” button
- Click the Images button from the Presets panel.
- Drag the image with "Ok" button at the right side of our banner.
Step 8: Adding the moving mouse cursor
The mouse cursor will move like a real mouse pointer to click the “Ok” button.
To add mouse cursor
- Click the Images button from the Presets panel.
- Drag the image with mouse cursor at the left side of our banner.
- Adding the mouse cursor motion
- Drag the frame control in the Timeline panel at the 15th frame position.
- Click Motion | Add Linear Motion from the Insert menu.
- Click the keyframe marker at the end of the layer's motion.
- Move the image with mouse cursor to right side of our banner. A line appears showing the path of the motion.
Step 9: Adding pressed "Ok" button
Our mouse cursor is stopped over the “Ok” button, now we need that the button will be pressed.
To add the pressed “Ok” button
- Click the Images button from the Presets panel.
- Drag the image with pressed Ok button to the same position as "Ok button".
- Drag the frame control in the Timeline panel at the 31th frame position.
- Click Motion | Add Fixed Position from the Insert menu.
- Drag the frame control in the Timeline panel at the 1th frame position.
- Hide the pressed Ok button in this period of time by clicking the Visibility control
 in the Timeline panel.
Step 10: Exporting the animation to a GIF file
To place our artwork on a web side, we need to save it in .GIF format, which can be displayed in any web browser.
To export the animation into a GIF file
- Click Export from the File menu
- Type a file name to export.
- Select the GIF image format from the Save as type list.
- Click Ok to continue export.
- The Export to the "XXXX" file dialog box appears.
- Specify the Number of Frames of animation, which will be exported.
- Image Size and Resample Process.
- Click the Next button to continue the export.
- Click the Finish button to save the image.
| 
