How to export high-res SWF banners with minimal compression

Ever wanted to create an animated banner with minimal image compression? Check out this Flash tutorial!

flash

If you work as a graphic, web or production designer, you might one day come across a situation where a client requests an animated ad that features high-resolution photographs. It sounds easy at first, but you might inevitably hit a wall when it comes to exporting said banner while trying to meet IAB standards & guidelines, especially if you are working with a GIF.

To comply with IAB standards, a banner that is 300×250 in size can be no larger than 40KB and have a maximum animation length of 15 seconds. For the full list of requirements, see the image below, or check out the IAB site.

IAB

The problem with using a GIF in this situation is that it is a compressed image file format that uses 256 colours to reduce file size. GIFs are great for exporting images with minimal colours, but aren’t the best for displaying high-quality photos. For example, compare the original photo below (left) to the GIF on the right:

Original vs GIF when exporting in Photoshop

Original vs GIF when exporting in Photoshop

When exporting the file as a GIF, what results is a pixelated and grainy sequence of images with dither. See below:

Compressed GIF with dither & forever loop

Compressed GIF with dither & forever loop

As you can see, the image quality isn’t ideal. So how do we fix this issue? One way is through high-quality SWF files via Flash.

1. First, we open up Flash CC and drop the images into their own separate layers, animated on the timeline. Your timeline should look like this:

Flash timeline

Flash timeline

2. This next step is optional, however if you want the ad to loop three times, create a new layer on the first keyframe and the last keyframe with the following actionscript:

actionscript1actionscript2

3. When we’re ready to export the animation, go to “Library” > Right click the first ‘Bitmap 1’ image > click “Properties”

Properties

Properties

3. A popup will appear. Click the radio button for “Custom” and set the value to your desired quality. Do the same for the second “Bitmap 2” image in your timeline. Click “OK” when you’re done.

Popup

Popup

Save your file as a SWF. (File > “Save as” > choose the SWF format)

All done! Check the size of the SWF to make sure it is under 40KB. If not, reduce the “Custom” quality number. You should having something crisp!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s