Optimizing Flash BannersBy michael.gallay — October 15, 2012 - 8:11 pm
When Flash banners were first introduced, the Internet was still coming into our homes through dial-up modems. When creating banners, it wasn’t uncommon to be restricted to a max file size of 12kb. It was pretty amazing what was accomplished with such a small amount bytes to work with. Being able to optimize your creative was paramount to meeting these restrictions.
Fast forward to today and the max files size has increased to over 150kb in some instances, but so has the expectation of the experience within the banner. Art Directors have more tools and trickery in their tool belts and expect you to be able to build their visions to the pixel. On top of all the animation they request, they are still cramming 3 – 4 banner-sized bitmap images in the creative and leaving you little room to work any coding magic.
Here are a couple of tricks used over the years that are as helpful for optimizing for 12kb as they are for 40-50kb:
1. Tween Engines
Using a tween engine is one of the easiest ways to make your animation more dynamic and easier to control. As with any imported files, they add weight to the outputted file. There are quite a few different options out there.
I’ve decided to only focus on Jack Doyle’s engine because it is one of the most robust engines out there. It is continually optimized with new features and performance updates. The best part is that you can download it for free. The features these engines offer are quite impressive, but perhaps the most exciting news is that he has recently released a JS version that is sure to make HTML5 banner production a joy.
Here is a quick run down of the weight Greensock’s engine adds to your file size in AS2 and AS3.
- File with nothing* in it 657 bytes
- TweenMax 19175 bytes
- TweenLite 6526 bytes
- TweenNano 2736 bytes
- File with nothing* in it 672 bytes
- TweenMax 19028 bytes
- TweenLite 5958 bytes
- TweenNano 2624 bytes
I was actually surprised that AS2 weighed more than AS3. Albeit, not much more. If there is actually anyone still using AS2, file size is another reason to finally make the move. If TweenNano and AS3 support all the specifications for your banner, it is the clear choice when considering file size.
* I added a very small square drawn within the IDE and applied a simple Tween to it in order to be sure that the engines were in fact being used and added to the weight of the banner.
It may seem obvious to not use the specific characters of fonts you don’t need in your creative, but sometimes you inherit files from someone and there are little font easter eggs nested deep in your library. Unwanted fonts can easily add a few k to your outputted file. So, how do we seek out and destroy them.
The first tool in your arsenal is the size report. You can access it through your publish settings window. After you check this box, Flash will create the file whenever you publish. It usually appears in the output window, but you should also find a .txt file in the same folder as your .swf.
Reading the size report is pretty simple and you will find all the fonts you use listed. Each character that is exported is shown next to the font name. If you are seeing a font that you don’t want, you will need to dig through the symbols in your library to figure out where they are.
Breaking Apart Fonts – This refers to breaking the font apart until it essentially becomes a vector drawing on the stage. You can accomplish this by hitting COMMAND + B (PC: CONTROL + B) until they are no longer selectable as a font. Sometimes this practice makes sense. For instance, the words CLICK HERE may be smaller in size when broken apart vs remaining an editable font. It will start to cost you k-size if you have a lot of words.
In font form, you only get charged one time for each instance of the letter. Using this logic, CLICK HERE only uses these letters: CEHIKLR. You can see how this saves you k the more words you have. When you break the words apart, each instance of each letter adds to the total size of the banner. You will need to base your decision to break words apart on your specific situation.
Creating copy on the fly can be a pretty powerful and rewarding experience for your user. In order for your fonts to appear as you intend on any user’s computer, you will have to embed them. The first step is setting your font to be dynamic in the properties panel and then hit the Embed button located near the font name. This opens up a window where you can select which characters you want to embed and essentially include in the total size of your banner.
If you are only using uppercase letters, then you should only check that box. Basic Latin gives you a nice set of characters for writing most things in the English language. If you need special characters (é,ó,á,©,®) you can add these in the box underneath. Find the right mix of checked boxes and individual characters to fit your needs.
3. JPGs vs. PNGs
Imported jpgs are always lighter than a png version of the same file. If your creative supports the use of jpgs, using them is your best bet to shave k. The obvious drawback of a jpg is that it cannot have a transparent background and, wouldn’t you know it, rounded corners are all the rage.
One work around for having to import a png is to apply a mask to the jpg you are importing. If your image is sitting on top of a solid color, you may not even need to add a mask. However, for complex logos or unusual shapes, your best bet is to simply import a png.
4. Vector vs. Bitmap
Vectors are great. Their lines are crisp. They scale up or down and look great at any size. However, importing things as vectors doesn’t guarantee that they are the smallest they can be. Consider a complex logo that is meant to be very detailed at a very large size. There is a lot of information that goes into it, and just because you scale it down to be in the corner of your banner it doesn’t mean you are taking any of that information away. Depending on the complexity of the vector you are trying to import, it may make sense to simply import a png or jpg.
5. Symbol Instances
If you find yourself using the same graphic throughout your banner, it is important to create an instance of it in your library and use that version. It adds a little bit each time you drag it to the stage, but that amount is much smaller than having a unique copy of the asset imported into the unit.
6. Background Image Tricks
It goes without saying that this is NOT a complete list of things you can do to reduce the size of both bitmap and vector assets, but it is a good start.
If your creative has a large background gradient, it makes sense to recreate it within the Flash IDE.
Only import part of the image you need
If a decent portion of your background image is a solid color, you may be able to import the complex part of the image and then add that solid background color within the Flash IDE. This can be done with gradients as well but takes a little more skill.
Split your image
If your image is a mirror image of itself, why not just cut it and half and only import half of the k? You can duplicate, flip and move it within the Flash IDE and no one will be the wiser.
Create a seamless texture
Let’s say your background is full of clouds. You can create a tile that can be repeated in any direction and save on file size vs. imported a full background image. Check out this tutorial. Remember, you don’t have to offset your image in both directions.
Import a smaller image than you need
Flash allows you to enable image smoothing so that your bitmap won’t look crunchy if not shown at exactly 100%. If you import an image that is 80% of the size you need it to be, you can blow it up inside of the flash IDE to 125% and it will appear at exactly the size it should. This saves about 1kb per image. The smaller image’s scaled value is the inverse of the larger images scale. Using my values as an example: 80/100 = 0.8; 100/80 = 1.25.
* Be sure to set your image to Allow Smoothing so it will scale nicely.
Shrink your vector file
Similar to importing a smaller bitmap, you can also shrink the vector image you have and then make it larger in Flash. Best practice is to put the original vector art into a symbol in the Flash IDE. Then, inside the symbol, break apart the vector art (this is sometimes trickier than it may seem depending on the file you are importing). Once you have the artwork broken apart and on one layer, you can select it and scale it down. Let’s say you shrink it by 50%, you would then scale up the symbol containing it by 200%. The inverse is calculated the same way as in the previous example: 25/100 = .25; 100/25 = 4.00; (400%!!). You’d be amazed how small you can make a vector file without compromising the artwork. Don’t be afraid to shrink and scale multiple times. Keep doing it until the quality of the vector art visibly starts to suffer.
7. Timeline Code
Whenever k-size is an issue, it is in your best interest to try and achieve all of your animation with code. You be surprised how quickly timeline animation can add to the file size. It certainly has its place in a banner, but if you are ever in need of a few extra k, your timeline is a good place to look.
No Tween Engine Needed
Of course there are times when even a Tween engine weighs too much. If the animation isn’t too complicated there are a lot of big bitmap images, you may find a few more k to play with by eliminated all the external Tween libraries and coding a few functions in the Flash IDE. This is something worth exploring in more detail in a future post, so check back in the near future.
This is by no means a complete list, and not everything in this article can be implemented for every banner. You really have to assess your file-size issues on a case-by-case basis. Perhaps the best piece of advise that has not been mentioned so far is to know when to go back to the designer and tell them their banner cannot be created without making some revisions (removing an image, removing a font). It is definitely in your best interest to educate the people you work with about what is possible in a small media unit and what is not. When you are not stressed to cram as much as possible, you have more room to add other flourishes that could make the experience that much better.
Got anymore cool tips or tricks? Add them in the comments.