This section describes the Animation panel you use to create animated GIF files. An animated GIF is a single file made of up a series of individual frames and the timing information needed to swap them. Viewing these frames in sequence gives the impression of motion.
In e-Picture, animation is an integrated part of the design process. You can create, animate and test ideas incrementally, instead of having to visualize the entire animation before creating the images and animating them. For example, if after creating a ten frame animation you decide that it would be more interesting with a graphic in the lower left hand corner, simply add the new element in frame 1 and it will automatically appear in every frame thereafter. It's easy to make changes to your objects and layers at any time in the design process and have these changes reflected immediately in the selected frame.
When you're creating animations, make sure to select colors that will work well on a variety of monitors, platforms, and browsers. Creating animation files that will compress well, so that the file is as small as possible, assures that more people will actually see your animation. Viewers quickly become impatient if it takes too long to download an animation.
e-Picture takes a frame based approach to animation. An animation is composed of a series of frames, or snapshots, of your banner. Motion is created when you change a property of one of your banner elements. You can animate any layer or object you've drawn in e-Picture or images and 3D models that you've imported from other applications. For more information on importing, see Importing documents.
To create an animation, you only need to set the initial and final properties for the object or layer that you wish to animate. With objects, the properties you can animate are the position, size, color, opacity and orientation. You can animate the opacity for a layer. Once you have set the initial properties in one frame and the final properties in a later frame, e-Picture automatically determines the composition of each frame in between in order to produce the smoothest animation possible. The initial and final frames that you set are called key frames. These are the frames that e-Picture keys off of in determining how to animate your objects and layers.
For example, if you position an object in the upper left corner in Frame 1 (the beginning key frame) and drag it to the bottom-right corner in Frame 15 (the ending key frame), e-Picture calculates its placement in each of the frames in between to present a smooth transition across the screen.
Similarly, you can add filters that get phased in over the length of the animation. To animate a blur, you simply move to the frame where you want the blur to begin and set the initial blur level. You then move to the frame where you want the blur to end and set the ending blur level. Each time you edit an object, e-Picture recalculates the contents of each frame and generates a new animation.
Because e-Picture automatically calculates the content of every frame in between the beginning and ending key frames, it takes very little effort to make changes to your animation. If your animation isn't as smooth as you would like, you can create additional frames between your established key frames. e-Picture automatically breaks the animation into smaller steps which produces a smoother transition from the beginning to the ending frame. If you decide that you want to change an object or layer property in the middle of an existing animation, you just select a middle frame and make changes to the object or layer in your document.
For example, if you select Frame 7 in the example above and change the red circle to green and drag it to a new location, then select Frame 15 and change the circle to blue and reposition it again, e-Picture calculates the color and position changes necessary to create a smooth transition from red to green and upper left to the bottom center in frames 1 through 7 and from green to blue and bottom center to upper right in frames 8 through 15.
See Controlling animation with key frames for more information on how to insert and manipulate keys.
Creating an animation in e-Picture consists of five simple steps:
In e-Picture you animate an image by setting the position, size, or orientation of objects in the document window, by setting the opacity of Layers in the Layers panel, and by modifying the other object properties (such as opacity, color, and filters) in the Objects panel or the Inspector.
The Animation panel displays the frames and the state of the objects or layers in each frame and is used to set starting and ending points for your animations. You also use the Animation panel to set playing options and to play animations.
Click the frame number. The frame is highlighted in blue.
By default, the Animation panel contains 1 frame. You can try out different numbers of frames to test how they effect the animation. More frames create a smoother transition between starting and ending key frames. Fewer frames create a quicker transition. Each animation file can contain up to 6000 frames.
Note: The Duration setting controls the timing for each frame when you export to an animated GIF file. This setting does not control the frame timing for animations played from within e-Picture. For more information, see Information options.
Type a value in the Total box in the Animation panel.
Select the frame you want to delete and choose Animation> Delete Frame. The frame count decreases by one.
Choose Animation > Insert Frame. The new frame is inserted before the selected frame and the frame count increases by one.
Each layer or object in a frame has specific properties such as opacity, size, or position. These properties are listed in the Animation panel.
When you're creating an animation, you may want to move quickly from one frame to another. You move to a new frame by clicking individual frames or by using the commands in the Animation menu.
Choose Animation Next Frame or Animation> Previous Frame.
Choose Animation> First Frame or Animation> Last Frame.
As you're testing out your animation, you may find that you want to repeat certain sequences of frames, move a series of frames, or replace one set of frames with another. To copy, paste, and replace frames, you use the commands in the Edit menu.
Select the frame and choose Edit> Copy Frame.
A key frame is a frame in which a change takes place (represented by a small key icon in the frame). Keys are automatically added to a frame when you select a frame and modify the layer or object properties in the document window, the Layers panel, the Object panel or the Inspector. When a frame contains a key, the state of the layer or object is recorded at that point.
An object or layer that transforms throughout an entire animation has a key in the first and last frames. Objects or layers that transform for some of the animation and remain static for the rest of the animation have keys in the frames where a change begins or ends. In the first example shown below, the ellipse moves from left to right over the 10 frames and is opaque in frame 1 and completely transparent in frame 10. In frame 5, the ellipse would be in the middle of the canvas and 50% transparent.
In the second example, the ellipse moves throughout the animation but remains opaque until frame 5 and then becomes increasingly transparent in frames 5 through 10. The ellipse is 50% transparent between frames 7 and 8. Because the ellipse begins moving in frame 1 and finishes moving in frame 10, the position keys for the ellipse are set only in frames 1 and 10. However, since the ellipse is opaque in frames 1 through 5 and then becomes transparent in frames 5 though 10, keys appear in frames 1, 5 and 10 for the opacity property of the ellipse. Only those properties that have been changed will contain keys.
Adding a key to every property in a frame has the effect of locking all the properties for each layer and object at that point. When you make changes in subsequent frames, all change begin in the frame with the key and end in the frame where the change is made. In the example below, frames 1 through 9 contain a static orange background on which text appears gradually in frames 5 through 9. In frame 9, keys were added to all the frames to end the segment. In frame 10 an abrupt change takes place and a red background appers with black text.
A layer can be opaque or have varying degrees of opacity. You set the opacity in the Layers panel.
In an animation, you can choose to make an object visible or invisible or change its color, position, size, orientation or opacity. When the animation is played, the changing object properties make the object appear to move.
Note: Use the arrow keys on your keyboard to move the object one pixel at a time. Press Shift + an arrow key to move the object eight pixels at a time.
Press: |
To do this: |
---|---|
X | rotate an object 1 degree clockwise |
Shift + X | rotate an object 8 degrees clockwise |
Z | rotate an object 1 degree counterclockwise |
Shift + Z | rotate an object 8 degrees counterclockwise |
Shift-click and drag a handle | resize an object maintaining proportions |
Ctrl + right arrow | increase the horizontal size by 1 pixel |
Ctrl + left arrow | reduce the horizontal size by 1 pixel |
Ctrl + up arrow | increase the vertical size by 1 pixel i |
Ctrl + down arrow | reduce the vertical size by 1 pixel |
Shift + right arrow | increase the horizontal size by 8 pixels |
Shift + left arrow | reduce the horizontal size by 8 pixels |
Shift + up arrow | increase the vertical size by 8 pixels |
Shift + down arrow | reduce the vertical size by 8 pixels |
You can test out different animation effects at any time during the design process. You use the control buttons in the Animation panel to play the animation.
Click the stop button or choose Animation> Stop.
Click the next frame or previous frame button.