Printable File
Animated Gifs
Image Maps & Rollovers
Optimize Slices and Export to Dreamweaver


 

ANIMATED GIFS

Animated GIFs can bring little sparkles of animation to your websites.

 

To see an animated GIF, click here:

www.awdsf.com/courseware/examples/animated_gif.htm or here web design course

 

Animated GIFs work on the same principle as old school frame-by-frame animation. Every time anything changes, a totally separate image is downloaded. Each image is stored inside of the main animated GIF, and is downloaded one frame at a time. So, each time the animation changes, your user has to wait for a whole new image to download. What this means to you is that you wont be able to go too crazy making things animated. You dont want to over animate your site, anyway. It gets real annoying. Movement draws the eye. You want people to be able to look at your site without being too distracted.

 

That said; if you really want to use a small animation to add to user experience, go right ahead! Animation is better used when your site first opens, or on rollover buttons. Just please, please, please, please dont overdo it, okay?

 

Thanks. I love you, too.

 

Using Frames To Animate

In traditional animation, artists paint pictures on frames of film. Each frame is one little picture on the filmstrip. When shown quickly one after another, animation gives the illusion of motion. Animated GIFs in Fireworks work the same way. Youll place different objects on different frames, and then play them back quickly.

 

Keep in mind that a Frames Based Website, where more than one web page is displayed at the same time, is totally different than the frames were talking about right now. Im sorry that the word "Frames" is being used in two different ways in web design.

 

Making an Animated GIF

Youll use the Frames Palette to make animated GIFs.

1.      Create a new image, 150 pixels by 150 pixels

2.      Open the Frames Palette WINDOW-> FRAMES

Notice that theres only one frame, conveniently labeled "Frame 1"

3.      Draw a circle in your image.



4.      Add a frame by clicking the New Frame button on the lower left corner of the Frame Palette
Now youll have two Frames. Notice that your new frame is automatically selected. Clicking the New Frame Button automatically adds and selects a new frame to the end of the frames list.

5.      Draw a square in the image.
Make sure that you have Frame 2 selected on the Frames Palette. Each frame is a totally different image, and will display separately when you play the animated GIF.

 

You just made an animated GIF! An animated GIF is simply a collection of different frames (images) that are displayed one after another. You can click each frame and edit it separately.

 

To Play an Animated GIF

In the lower right corner of the image window, youll see controls much like the ones on your CD player at home. Click the triangle to play your animation.

Cool, huh?

 

Animation, Made Easy

There are a number of cool tricks you can use to animate an image.

 

Copy the Current Frame and Edit the Copy

Instead of drawing a whole new frame, you can copy the current frame, and edit your new-copied frame.

To copy a frame, drag the frame you wish to copy onto the New Frame Button .

Youll get a new frame. Itll be an exact copy! Change it as you wish.

 

Drawing Everything On One Frame, and then Distribute Objects Across Frames

If you wanted a star to move across an image, youd have to draw the star, copy it, create a new frame, paste on the new frame, move the star, copy the star, create a new frame paste on the new frame, ect

That would get real old after a while.

Fireworks can help you out by doing much of the work for you.

 

1.      Create a new image, 500 x 500.

2.      Draw a small star in the upper left corner.

3.      Holding ALT, drag the star to copy it.

4.      Copy a bunch of stars. The order in which you make them will be the order they will display on the screen, so set them up in a thoughtful fashion.

 

We could have drawn totally separate objects. Copying with ALT is kinda fun, though.

Now that weve got a bunch of objects on the screen, well place them each on a different frame.

 

5.      Select all the stars (SHIFT+CLICK, or CTRL/CMD + A)

6.      Click the Distribute to Frames button on the Frames Palette
The Distribute to Frames button makes a new frame for each selected object!

7.      Play your animation!

 

You can still click each frame and edit it separately.

 

Creating Automatic Motion

You can also give Fireworks a starting point, and a finishing point, and let it do all the work. Fireworks will animate all the frames in-between.

Automatic animating will only work if youre trying to move an object, change its color, proportionally change its size, or fade it with opacity. You cant use automatic animation to, say, make someone smile.

Fireworks makes animation like this easy.

1.      Create a new image 250 x 250

2.      Draw a star in the left side of the image.



3.      Make sure the star is selected and click:
MODIFY-> ANIMATE-> ANIMATE SELECTION

The Animate Window should pop-up. Youll need to set the parameters for your animation. Dont worry, these settings are editable later.

 

4.      Choose your settings and click OK

 

Fireworks will warn you that new frames will have to be added. This is fine with you. Click OK.

 

The file will display with animation marks!

5.      Play your animation!

 

You can change your automatic animation settings by clicking MODIFY-> ANIMATE-> SETTINGS or by dragging the animation markers.

Dragging the Animation Markers

 

Making one Object Appear on All Frames in an Animation

If youve got to place text or graphics on every frame in an animation, it can get really old without this trick

1.      Make an animation.

2.      On the Layers Palette, create a new layer. Name it "Shared Layer", or something like that.
To correctly distribute an object across frames you must place it on the Layers Palette, not the Frames Palette.

3.      With the new layer selected, type some text on the screen.

4.      Double click the layer and choose Share Across Frames. Click OK

 

1.      You will get a warning window telling you that if youve already created objects on this layer and placed them on different frames, theyll be deleted! Click OK

 

Everything on the shared layer will appear on every frame!

 

Controlling Animation Speed and Looping

You can control the animation speed and number of times the animation loops, if at all.

 

Animation Speed

The faster a animation changes frames, the smoother the animation will appear, but the more frames an animation has, the longer it will take to load. Keep in mind that the frames will only display as fast as a user can down load them.

 

On the Frames Palette, next to each frame, is a number (default 7). This number represents the frame display time in hundredths of seconds.

To change the frame display time, double click on the number.

 

To change the speed for all the frames at the same time, select them by clicking the first frame, holding SHIFT and clicking the last frame. Then double click any frames speed.

 

Optimizing and Exporting an Animated GIF

�.       You MUST choose Animated GIF on the Optimize Palette before exporting.

On the Preview Tab, you will see the total download time for the whole GIF.

 

�.       When optimizing an animated GIF, you need only optimize one frame. All of the frames will take on the same optimization characteristics, except for transparency.

�.       Transparency must be set for each frame, or you can set the transparency before you optimize as an animated GIF and the transparency will apply to the whole image.

 

Animation Tricks

There are a couple of tricks that might help your animations use less frames and appear smoother.

 

Animating with Fast Moving Frames

Remember that your animation will only display as quickly as a users computer can download it. That means if your animation has fast moving frames it will appear slow and jerky the first time around for most viewers. To get around this evil frame display problem, simply set the first frame to display for the same amount of time the whole GIF takes to download. The first frame can even be blank. You can find the total download time in the Preview Tab while optimizing.

 

Using Motion Blur to Simulate Speed

If something moves by us quickly, our eyes see the object as a blur. You can achieve this in an animated GIF by blurring the image yourself.

1.      Open Flying_face.png from the fw_images folder. Play the animation.
Or check it out on the web at:

www.awdsf.com/courseware/examples/flyingface.htm

 

Watch the animation roll over and over. Notice how its blurred in the middle?

The first frame is blank, and displays for one second so that the rest of the animation can load. The actual animation is made of only four frames:

Frame 1:

Frame 2:

Frame 3:

Frame 4:

 

You can blur an image to approximate motion using PhotoShops Motion Blur Filter

1.      Open your image in PhotoShop.

2.      Click FILTER-> BLUR-> MOTION BLUR

3.      Set the blur angle and distance (amount)

4.      Copy and paste the image into Fireworks

 

The middle frame should blur more than the others, and the frames should slightly overlap.

 

Spinning Objects

If an object is symmetrical, (like a wheel) you can give the appearance that it is spinning in a full circle, by moving it a little bit and setting the animation to repeat.


Example:



Continue to Image Maps and Rollovers |