Close Flash
First, download the AIR 1.5.2 SDK for your OS.
Extract the files and open the containing “AIR SDK” folder, we’ll need the stuff inside.
Now, in a new folder window, browse to and duplicate (to backup) the AIK1.5 folder in Flash CS4 program folder.

Windows:
C:\Program Files\Adobe\Adobe Flash CS4\AIK1.5

MAC:
\Applications\Adobe Flash CS4\AIK1.5

Copy the extracted files from the downloaded SDK folder and paste to the new AIK1.5 folder. From that new SDK copy airglobal.swc from frameworks/libs/air. Backup the same named swc in this folder (I suggest renaming to airglobal_backup.swc):
Windows:
C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\AIR1.5

MAC:
\Applications\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\AIR1.5

Now you can paste airglobal.swc in.

Setting up Flash

Since I like to be as throurough as possible, I also want to be able to get access to all the AIR api as much as possible, as easy as possible. This is easy.
Open Flash and go into Preferences. Click on the ActionScript category and Click ActionScript 3.0. In the Library Path section click the red swc icon and browse to the first swc we’ll want located here:
Windows:
C:\Program Files\Adobe\Adobe Flash CS4\AIK1.5\frameworks\libs\air\
MAC
\Applications\Adobe Flash CS4\AIK\frameworks\libs\air\
Click the plus sign to add another line and browse to the next swc. Repeat for the third.

Cool, now we have those ready when ever we need them without having to do the process of adding them to each projects Publish Settings.

Making your AIR app work with the new SDK
Now that we got the SDK all set up and ready to use, you can use 1.5.2 at anytime. But, there is one more small issue. 1.5.2 doesn’t work unless you have it in your name space in your application’s descriptor file. Once you publish or test movie of your app, open the descriptor file and add the  dot 2 to the end of the namespace:

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5.2">

Your 1.5.2 SDK is completely ready to use.

Let’s test it.

Make a new AIR fla, create a movie clip with a rectangle in it. Put it on the main stage and give it an instance name of btn_fullScreen.

I’m borrowing some of Ryan Stewart’s code on preventing the ESC key in fullscreen mode found here:

http://blog.digitalbackcountry.com/2009/08/new-air-1-5-2-api-examples-and-features/

But since he used Flex, I had to change it up a bit.
In your document class write this:

package
{
    import flash.display.MovieClip;
    import flash.events.KeyboardEvent;
    import flash.events.MouseEvent;
    import flash.display.StageDisplayState;
    import flash.ui.Keyboard;

    public class Airapp extends MovieClip

    {
        public var btn_fullScreen:MovieClip;

        public function Airapp()
        {
            btn_fullScreen.addEventListener(MouseEvent.CLICK, btn_fullScreen_clickHandler);
            stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
        }

        public function btn_fullScreen_clickHandler(event:MouseEvent):void
        {
            stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
        }

        private function keyDownHandler(event:KeyboardEvent):void
        {
            event.preventDefault();

            if (event.keyCode == Keyboard.ESCAPE)
            {
                trace("do nothing");
            }
            if (event.keyCode == Keyboard.ENTER)
            {
                stage.displayState = StageDisplayState.NORMAL;
            }

        }
    }

}

Test your app – cntrl+enter, but don’t change the descriptor file yet. If you click the button, then hit ESC, notice how it goes back to normal? This is because we haven’t changed the descriptor. Change that now to the 1.5.2 namespace. Test your app again. Should work.

Enjoy!

P.S. A BIG thanks to Andreas Heim for getting me started in the right direction.

Also, once I find that pesky descriptor file template, I will post about how to change that so you won’t have to change the file everytime.

I have heard, and asked, the question many times: “How do I get this swf down to file size?” This question has a cousin in another form: “How come this swf plays so slow at times?”

The two sound different, right? Well, they are, but at the same time they are the exact same.

Balancing File size and Performance can be very tricky. In fact, it can be down-right frustrating. There are a lot of factors that go into optimizing for performance. In order to keep your brain from frying into molten lava, here are a few things to keep in mind.

First let’s talk a little about how Flash Player renders – or “draws”.

Flash must abide by the rules of a computer system and the monitors in which computers display their visual output. Flash is subject to the laws of the computer bit system¹, an incremental system of numeric values starting with 8 bits (one piece of information with 2 values: on and off) to a byte and building onward. Flash must also bow itself to the laws of pixels. Your computer screen is made up of tiny little squares called pixels. Your monitor resolution might be 1024×768, which means there are 1024 pixels along the top and 768 pixels along the side.

With this understood we can now see that Flash Player must “draw” within these confines. It must know that there is – essentially – an unlimited amount of colors (or information) that each pixel of your monitor can display (not at the same time, of course). And, it can only “draw” in squares.

Try this:

Take out a piece of paper and draw a perfect, straight line diagonally across it. Easy, right? Now, draw a half inch grid on your piece of paper, perpendicular to the edges. Try to draw a perfect, straight, diagonal line by filling in adjacent squares. Not so easy, is it? Now try to do it with color while moving the line square by square to one side than the other. Nah, just kidding.

Bitmaps vs. Vectors

If you tried the above example, you didn’t just stumble on how Flash Player must “draw” a straight line, but you also proved the difference between vector and bitmap. The first line you drew was a vector, whereas the second (with the grid) was a bitmap. Flash authoring environment can create vectors, but when Flash Player plays on your screen, it must abide by pixel laws. That is not to say that Flash Player turns vectors to bitmaps automatically, really it doesn’t.

Vectors are basically made up of “imaginary” lines connected by points, then “filled” with color. This takes quite a bit of mathematical calculations to be converted to pixels. Since Flash must do the math for drawing lines between points, the more points that are on a vector path, the more math Flash must do. This not only can lead to slower performance, but also higher file size. Gradients in vectors can be hard on Flash Player, too, since it must draw even more colors.

Bitmaps can be created in just about any photo or illustration software (PhotoShop and Illustrator for example), as a .png, .jpg, or .gif. These are basically dozens to thousands of pixels filled with a predefined color. It is easier to do the math of something that is already defined than it is to have to figure it out every time you would want to draw it. Keep in mind that the more complex the bitmap pixels – the more colors and large dimensions used – the more math Flash has to do.

Bitmaps themselves generally aid in visual performance, but can lead to large, up-front file sizes and thus longer load times. Vectors are great for loading quickly – smaller file size – but can be a beast for Flash to have to redraw every frame during an animation, especially if they are complex.

If you are using bitmaps, first thing you will want to do is make sure the quality settings aren’t obscene. To do this, first go to the Publish Setting (File>Publish Settings), click on the Flash tab and adjust the bitmap quality slider. This works for pngs, but what about jpgs? To change their settings, simply double click on each jpgs little green icon in the library and check its quality settings. (In CS4 you can highlight multiple items, right click and choose Properties.) Jpgs will most likely have “Use Imported Bitmap Quality” checked which is 102% (weird huh?). Uncheck its radial and enter your own percentage. 75 – 80 is good for quality, less is better for file size. Also, if your jpgs are in constant motion, click the “Allow Smoothing” radial. This will keep your bitmaps from those gross “scan lines” but will be fuzzy if static (or standing still), so if they aren’t constantly moving, leave it unchecked.

With Vectors, setting cacheAsBitmap with ActionScript or turning on the “Use Runtime Bitmap Caching” in the Properties Panel on the containing movie clip will help performance a little. But when static, they may look fuzzy. Vectors look great without being turned to bitmaps and are static.

Filters and Blend Modes

Filters and Blend Modes have little to nothing to do with load but can severely hinder performance, especially during animations. This is because Flash Player has to do even more math on the fly, as the animations play out. When you apply a Filter to a movie clip, Flash Player has to render that out immediately while playing. FP sort of runs your movie clip with cacheAsBitmap, essentially rendering your movie clip as a faux “bitmap” on the fly. This puts a damper on how well FP runs simply because it has to figure all the information within a tiny fraction of a second. Filters can also lead to strange “pixel shifts” or even large jumps, depending on the intensity and of which filter you are using.

Blend Modes kill performance, much in the way Filters do. Using Blend Modes not only has to force Flash to render the movie clip they are applied to, but also any below them. Obviously, there is a lot involved in doing that, so Flash Player has to think through that as well.

**Reuse and Recycle to Reduce

Reuse as any graphical elements as possible. Whether they are vector or bitmap, reusing common or shared symbols will greatly reduce file size.

Let’s say you have 12 rectangular movie clip buttons. You would not want to recreate 12 different rectangles. Instead, create one square and scale, rotate, and manipulate that one square as often as you need to. If you need to alter colors, simply tint that same square to the color of your choice. Try to find all the ways you can possibly reuse and recycle graphics as often as possible. In fact, make it a habit.

Masking

Even though it looks great, in general Masking puts a damper on performance. This is further explained in another post found here.

The End User

The user’s hardware does come into account as well. If the computer your Flash piece is being viewed on has great amount of RAM, an awesome video card, plenty of hard drive space, etc. then your flash piece will usually play nicely. If the user has a machine with fewer capabilities, your Flash piece will render slower.

Size Reporting

To see just what all is taking up loading and how large bitmaps and vectors are, go to your publish settings (File>Publish Settings), in the Flash tab click on “Generate File Size Report.” Also, when testing your movie (cntl+enter) hit cntl+B to bring up the Bandwidth Profiler. These will show you file size, but not necessarily performance hits.

Conclusion

Balancing File Size and Performance is not a simple task. There is a lot to keep in mind when creating your Flash piece. It might be best to ask yourself a series of questions before even getting to the nitty-gritty of designing.

1. What is the allowable file size, if there is any?
2. What is going to be animating and what is going to be static?
3. What kind of computer might my audience be viewing my work on?
4. Am I shooting for better performance, faster loading times, smaller file size, or a combination?
5. Can I create that as vector or will I need to use photography?
6. Does my bitmap quality really need to be very high if it is just animating?
7. Do my bitmaps need to be large size or can I crop them down?
8. Can I clean up parts of my bitmap images so there aren’t so many colors and they aren’t so detailed? Or do they need to be really crisp and pixel perfect?
9. Do my vectors need to be complex or can they be rather simple?
10. How many items are animating on the screen at one time? Does there need to be so many?
11. Do I need to use filters or is there a better way to obtain the same visual appearance?

Keep these all in mind and your Flash work will be that much more exceptional. Do this all on a consistent basis and optimizing will become like second nature.

¹ In decimal calculations: Each bit is a piece of information (on or off), there are 8 bits to a byte, 1000 bytes to a kilobyte, 1000 kilobytes to a megabyte, etc. This is based off of the metric systematic calculation. Binary calculation is actually 8 bits to a byte, 1024 bytes to a kilobyte, 1024 kilobytes to a megabyte, etc. To learn more, run a simple internet search.

But masks can be serious runtime performance killers. How? Why?

Well, without getting into way too much detail, timeline masks aren’t actually keeping your animations and artwork contained within their bounds. They’re just making everything outside at 0% alpha. Flash still has to re-draw that 0%-edness.

This can seriously hurt performance, especially with complex animations/artwork.

Speaking with Andreas Heim, and working with Greg Schlimm on a small project, we discovered a couple helpful tips to keep performance dives to a minimum.

First, if at all possible, try not to turn layers to masks. There’s absolutely no way of getting performance back.

In order to have a mask and not have it set on the timeline and not hurt at runtime, do these quick/easy steps:

1. After creating your vector mask and your animation/artwork where you like it, give both a unique instance name. (Here I will call them maskee for the artwork, and masker for the actual mask.)

2. Check “Use runtime bitmap caching” on the properties of maskee only.

3. Create an AS layer – if there isn’t one already.

4. On the first frame where the artwork/mask appear, on the AS layer, type this:

maskee.mask = masker;

This will keep the animation only within the bounds of the mask. No drawing anything outside at 0% alpha.

**Note** if you animate the mask itself, Flash still doesn’t redraw maskee outside of the bounds but does have to redraw masker. **End Note**

Also note that this works solely with vector masks. To use a bitmap or gradient mask, you MUST check “Use runtime bitmap caching” on both mcs. But you lose the performance enhancement.