Article Archive by Shawn Escott

The Basics of Optimizing Images for the Web

by Shawn Escott

When it comes to the optimization of images for the web, it is important to know when, why and how to compress them. This short tutorial will help you get the most out of your images and will keep your file sizes smaller for faster page loads.

The main image compression formats:

Jpeg —use when compressing an image such as a photograph or illustration.

Gif — use when compressing images with flat color, such as a logo, chart or other graphic. A transparent background can be used with gifs, however, there will be a ragged edge of pixels around your image.

Png — use if a transparent background is required. Most browsers accept transparent pngs with the exception of Internet Explorer 6.

Compressing Photographic Images  

Original Image.

Jpeg at 70% quality.
File size: 13K
Very close to the high quality of the original and file size is acceptable.
Best option

Jpeg at 5% quality.
File size: 3K
Quality is unacceptable.

Gif with 256 color max.
File size: 26K
Good quality with some pixilation but higher file size.

Png.
File size: 93K
Great quality but file size too large.  

Compressing Flat Color Graphic Elements  

Original image

Gif with 16 colors.
16 colors were used instead of 2 because the pixels around the text are transitional colors to give the appearance of soft edges.
File size: 3K
Best option.

Jpeg at 50% quality.
File size: 6K
Poor quality, not acceptable.

Png.
File size: 5k
Good quality but larger file size.

You can clearly see from the above examples that optimizing your images correctly can make a huge difference in look and load-time. Stick with these examples as a guide to compressing your images and you’ll be up and loading in no time.

Principles of Animation For Flash

by Shawn Escott

In this post I will cover some important animation principles used to give life and interest to Flash animations.

1. Squash and Stretch
The classic example of this principle is a bouncing ball. When a ball bounces on the floor the shape of the ball is “squashed” because of the effect of gravity. To add a feeling of speed to the ball you can “stretch” it out while it is at its fastest key frame.

2. Anticipation
Anticipation is the act of preparing for action. Think of someone winding up for a pitch. To use this principle in Flash, simply drop your object back in the opposite direction for a few frames and add a slight pause, then let the action carry through.

3. Follow Through
Think of “follow through” as if a person just threw a ball and their arm is continuing to swing downward. The momentum of the swing carries the arm forward and down.

4. Easing In and Out
Easing is slowing in or slowing out of a movement. It can add grace and elegance to an animation, making it more believable by creating the illusion of weight and resistance.

5. Exaggeration
To give a larger-than-life feel to your animation, try exaggeration. Scale your objects on your extreme key frames to add punch. Animate some things larger or smaller than they normally would be. Be careful not overdo it or your animation will become overbearing and garish.

Creating Smooth Animations in Flash

by Shawn Escott

Have you ever wondered how some Flash sites have slick, smooth animations? When it comes to creating smooth animation in Flash, there are some things to keep in mind.

A common mistake for Flash beginners is to use Flash’s preset frame rate which is 12 frames per second (fps). This will invariably cause animation with a choppy, stuttering look. What we really want is a smooth, crisp animation similar to video and film. To do this, we must increase our frame rate.

The frame rate of a motion picture is 24 frames per second. Television uses 30 frames per second. These frame rates are what’s required to create convincing movement of still images.

Flash gives you the option to choose a frame rate between .01 and 120 fps. Chances are, you will never need to go as high as 120 fps or as low as .01 fps. Somewhere in-between is the magic number.

To get a better idea of how frames per second works take a look at the chart below. You can see visually how frame rate can make a big difference between choppy and smooth animation.

I’ve found through many years of animating in flash that a good round number is 30 fps. You can get a good smooth animated punch with this frame rate. I’ve even used up to 60 fps which can have a great snap and crispness to it. Be careful, however, when using a rate this high, as some people may have slower computers and cannot process the information being streamed over the internet.

Next time we’ll discuss the principles of animation and how to utilize them for maximum effect.