Animating GIF files

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.

Designing GIF animations

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.

Creating 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:

  1. Enter the number of frames (the more frames, the smoother the animation but the larger the file size).
  2. Select a starting frame and set the initial properties for the layers or objects you want to animate.
  3. Select an ending frame and set the position, opacity, size, or other properties for the object or layer.
  4. Play the animation.
  5. Export the animation. For export information, see Exporting documents.

Using the Animation panel

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.

To display the Animation panel:

Choose Window> Animation.

To select a frame:

Click the frame number. The frame is highlighted in blue.

Adding and deleting frames

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.

To add frames:

Type a value in the Total box in the Animation panel.

To delete frames:

Select the frame you want to delete and choose Animation> Delete Frame. The frame count decreases by one.

To insert a frame:

Choose Animation > Insert Frame. The new frame is inserted before the selected frame and the frame count increases by one.

Displaying and hiding frame properties

Each layer or object in a frame has specific properties such as opacity, size, or position. These properties are listed in the Animation panel.

To display or hide the properties of layers or objects, do one of the following:

Moving from frame to frame

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.

To move to a specific frame, do one of the following:

To move to the next or previous frame:

Choose Animation Next Frame or Animation> Previous Frame.

To move to the beginning or end of the animation:

Choose Animation> First Frame or Animation> Last Frame.

Copying and replacing frames

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.

To copy a frame:

Select the frame and choose Edit> Copy Frame.

To paste the frame:

  1. Select the frame before which you want to paste the frame.
  2. Choose Edit> Paste Frame. The frame count increases by one.

To replace a frame:

  1. Select the frame you want to replace.
  2. Choose Edit > Replace Frame.

Controlling animation with key frames

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.

To add a key:

  1. Select the frame where you want the animation to begin, where you want a property to change, or where you want the animation to end.
  2. Select the object or layer from the Objects or Layers panel and set the properties. A key is automatically added to the frame.

To delete a key:

  1. Select the key (the key turns red).
  2. Click the trash in the Animation panel.

To add a key for every property:

  1. Select the frame in the Animation panel.
  2. Choose Animation> Add Keys to Frame.

To delete a key from every property:

  1. Select the frame in the Animation panel that contains the keys.
  2. Choose Animation> Delete Keys From Frame.

Editing layer properties

A layer can be opaque or have varying degrees of opacity. You set the opacity in the Layers panel.

To change a layer's opacity:

  1. Select the frame in which you want the opacity to change.
  2. Select the layer in the Layers panel.
  3. Type a value in the Opacity box or click the triangle and drag the slider.

Editing object properties

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.

To make an object visible or invisible:

  1. Select the frame where the object is to be visible or hidden.
  2. Select the object in the Object panel.
  3. Click to turn the eye icon in the first column of the Object panel on or off. The object stays hidden or visible until you select another frame and click the eye icon again.

To change the color of an object:

  1. Select the frame for the new color.
  2. Double-click the object in the Object panel and change the color in the Tool Inspector.

To change the position of an object:

  1. Select the frame for the new position.
  2. Click the arrow tool and select the object in the document window.
  3. Drag to the new position.

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.

To change the size of an object:

  1. Select the frame for the new size.
  2. Click the arrow tool and select the object in the document window.
  3. Click a box in the selection border. The arrows turns into a double-headed arrow.
  4. Drag to increase or decrease the size.

To change the orientation of the object:

  1. Select the frame for the new orientation.
  2. Click the arrow tool and select the object in the document window.
  3. Click the selection border anywhere except on a box. The arrows turns into the rotate cursor.
  4. Drag to rotate.

    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
    Rotate and resize shortcuts

To change the opacity of an object:

  1. Select the frame for the new opacity.
  2. Select the object in the Objects panel.
  3. Type a value in the Opacity box or click the triangle and drag the slider.

Playing animations

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.

To play an animation once, do one of the following:

To play an animation continuously:

To stop playing an animation:

Click the stop button or choose Animation> Stop.

To move forward or backward in the frame:

Click the next frame or previous frame button.

To move immediately to the first or last frame:

Click the first frame or last frame button.