Clients will frequently ask us to create flash ads using eye-catching animations, illustrations and photographs. As best practice we always include their logo and try to adhere to their style guide, as well as use fonts that are commonly associated with their brand. All of these different elements increase file size, which can make it tricky to adhere to the 38k standard banner size. We frequently have to find ways to decrease file size while maintaining the best resolutions in the images as possible.
There are a few basic steps to optimize animations, which include:
1) Compare the file size and image quality of JPGs, GIFs, and PNGs in Photostop. Save images in Photoshop at 100% quality and then decrease file size in Flash.
- Step 1: Double click the image icon in the Library
- Step 2: Compress your image by lowering the custom quality
- Step 3: Test your image and view the quality while taking notice of the file size at the bottom.
- Step 4: Test your animation (command + enter) and open file info (command + B) while the flash animation is playing to see how the compressed image looks and how the overall file size has been affected.
2) Crop images to the smallest size possible in Photoshop. Flash will count the entire image even if it is outside of the live stage.
3) Copy and Paste logos from an EPS/AI file into Flash instead of importing them as a JPG or PNG. On occasion, if the logo or image has a lot of jagged edges it will not work to your benefit so test which works best by importing both and comparing file size.
4) If you want to get really tricky try using a mask layer in Flash to isolate an object from the background. This might decrease the size of the file that you’ve imported from Photoshop. Below is an example of an isolated image using a green mask and the original image on the right. When the flash animation is played the books and apple will be isolated on white (or whatever background is present) and the grey background will be cut out of the file.
5) Try to only use 1-2 fonts per ad. Every font will increase file size especially fonts that are scripted or handwritten.
If you want to see how much file size each element is consuming then follow these steps:
- File>Publish settings>Open drop down for the advanced dialogue box>Check Generate size report.
- Test your animation (command + enter) and open file info (command + B). You should be taken to a tab (where you would typically be viewing your timeline) called output.
- Scroll down the report to view how much all the images and fonts are taking. Below is an example of how font can eat up file size:
After taking all these steps you should be able to stay below your file size limit. If not, considering losing an element or two that is not necessary to your ad. Good luck!
