On our website, we use SWFObject which provides a cross-platform HTML-compliant method for embedding a Flash SWF to a webpage. A web developer creates a DIV element in an HTML document with content that is displayed if the user doesn’t have Flash or JavaScript enabled in the browser. If the user’s browser is compliant, then SWFObject replaces that DIV with the Flash SWF, and the user never sees the original content.

We also use SWFAddress to enable browser-recognized pages in our Flash website. Including SWFAddress adds a hash (“#”) into our url; everything before the hash points to our website root, and everything after the hash is sent to our SWF so it can display the correct page. Clicking a browser’s back or forward button displays the correct internal page even though the same SWF is displayed each time.

Google has made great strides in indexing Flash applications, but they still treat all internal pages within a single SWF as one page. For example, the following urls are unique:

• http://www.humancentric.com/
• http://www.humancentric.com/#/portfolio
• http://www.humancentric.com/#/labs

However they are all treated as if http://www.humancentric.com/ was a giant page with varying content. We want Google to recognize our different pages. And because we strive to be Good Web Developers™, we also want non-Flash browsers and search engines to view our content.

For non-Flash clients to view our site, we’ve created a second HTML-only version. All of our content lives in XML files that the Flash version reads, parses and displays for Flash-compatible clients. Our HTML version reads these same XML files and, using PHP, dynamically produces XHTML-compatible code for non-Flash clients. Thus our content lives in one place, but now it’s accessible to both types of users.

We’ve configured our site so if a user goes to http://www.humancentric.com/portfolio, the HTML version of the Portfolio page is generated. If a user has JavaScript and Flash, then the browser is automatically redirected (via JavaScript) to http://www.humancentric.com/#/portfolio. When the user go to the new url, our homepage is generated and displayed in a DIV element, but SWFObject immediately replaces it with the SWF, and SWFAddress sends it the “/portfolio” portion.

Our website is browser-accessible because a user can use the browser’s back and forward buttons, and each of our pages appears in the browser history. It is SEO-friendly because each internal page has its own unique link with non-Flash HTML content. And it is accessible to non-Flash users for the same reasons.

When dynamically loading different color variations of the same graphic, Flash developers can use flash.filters.ColorMatrixFilter to lessen website loading times. Below is an example of how we use ColorMatrixFilter in our own website.

Among other specialties, I develop Flash prototypes and websites. In fact, I’m part of the team that built the HumanCentric website. And one aspect that’s important to me is the time it takes a user to load individual parts of a website. For example, if a user goes directly to one of our pages, their browser will retrieve a pre-loading Flash application, a main Flash application, a site xml description, a page-specific xml description, and any images specific to that page.

Our About Us | Clients page has a grid of grayscale client logos. When a user hovers her mouse over a logo, it fades to a color image. At 30 logos with two variants for each logo (grayscale and color), the application must load 60 images. That’s a lot of graphics, even if they are small, especially if someone has a slow Internet connection.

I was able to reduce our count of images by 50% using ColorMatrixFilter, which alters the colors of an entire image on-the-fly. For each logo, I can load up a single color image and later apply a ColorMatrixFilter to display a grayscale image. If I want to apply a different effect, such as lowering saturation or increasing brightness or emphasizing the redness of an image, ColorMatrixFilter can dynamically provide these effects. This has an added benefit that when a color image is loaded, the grayscale variant is created immediately, preventing any cases where only one image is loaded when the user hovers her mouse over a logo.

Below is some sample ActionScript 3.0 code with the package declaration and import statements removed. Within ClientSprite, I have two DisplayObjects: graySprite which loads the bitmap and applies a ColorMatrixFilter, and colorSprite which borrows the bitmapData loaded from graySprite.

[code lang="actionscript"]

public class ClientSprite extends Sprite
{
    // private constants

    private static const GRAY_FILTER_PARAMS:Array = [
        0.3086, 0.6094, 0.082, 0, 0,
        0.3086, 0.6094, 0.082, 0, 0,
        0.3086, 0.6094, 0.082, 0, 0,
        0, 0, 0, 1, 0];
    private static const GRAY_FILTER_MATRIX:ColorMatrixFilter
        = new ColorMatrixFilter(GRAY_FILTER_PARAMS);
    private static const GRAY_ALPHA:Number = .4;

    private static const TWEEN_DURATION:Number = .2;

    // private variables

    private var graySprite:Loader;
    private var colorSprite:Sprite;
    private var tween:Tween;

    // constructor

    public function ClientSprite(bmpUrl:String)
    {
        // create gray image
        this.graySprite = new Loader();
        this.graySprite.alpha = GRAY_ALPHA;
        this.graySprite.filters = [GRAY_FILTER_MATRIX];
        this.graySprite.contentLoaderInfo.addEventListener(
            Event.COMPLETE, this.onColorImageLoaded);
        this.graySprite.load(new URLRequest(bmpUrl));
        this.addChild(this.graySprite);

        // create color image
        this.colorSprite = new Sprite();
        this.colorSprite.alpha = 0;
        this.addChild(this.colorSprite);

        // add callbacks
        this.addEventListener(MouseEvent.MOUSE_OVER,
            this.onMouseOver);
        this.addEventListener(MouseEvent.MOUSE_OUT,
            this.onMouseOut);
    }

    // private callbacks

    private function onColorImageLoaded(e:Event):void
    {
        var grayBitmap:Bitmap =
            (this.graySprite.content as Bitmap);
        var colorBitmap:Bitmap = new Bitmap(
            grayBitmap.bitmapData, PixelSnapping.ALWAYS,
            true);
        this.colorSprite.addChild(colorBitmap);
    }

    private function onMouseOver(e:MouseEvent):void
    {
        this.tweenColorAlphaTo(1);
    }

    private function onMouseOut(e:MouseEvent):void
    {
        this.tweenColorAlphaTo(0);
    }

    // private methods

    private function tweenColorAlphaTo(newAlpha:Number):
        void
    {
        if(this.tween)
        {
            this.tween.stop();
        }
        this.tween = new Tween(this.colorSprite, "alpha",
            Regular.easeOut, this.colorSprite.alpha, newAlpha,
            TWEEN_DURATION, true);
    }
}

[/code]

I gleaned most of my knowledge of the ColorMatrixFilter class from Adobe’s Developer Connection article Using Matrices for Transformations, Color Adjustments, and Convolution Effects in Flash. They even have a live app where you can supply your desired Brightness, Contrast, Saturation and Hue settings, and it will calculate the equivalent matrix data.