Ever wanted to create an animated banner with minimal image compression? Check out this Flash tutorial!
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.
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:
When exporting the file as a GIF, what results is a pixelated and grainy sequence of images with dither. See below:
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:
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:
3. When we’re ready to export the animation, go to “Library” > Right click the first ‘Bitmap 1’ image > click “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.
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!