Runtime styles are great. They allow you to dynamically change the look-and-feel of your application, and they reduce the size of your deployed SWF.

But when you load your style SWF at startup, there is a potential delay between when your application is displayed and your runtime styles are applied.

Why does this matter? Because in that minute fraction of time your application is visible before your runtime styles are applied, the default Flex styles are visible. The result is a not-so-subtle flicker as your styles change.

Fortunately, there is an easy solution.

It turns out you can prevent the Flex preloader from disappearing until your runtime styles have been loaded. If you override the initialized setter in your main MXML file, the preloader will not disappear until you call super.initialized = true.

Here’s the sample code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application
    xmlns:mx=”http://www.adobe.com/2006/mxml”
    preinitialize=”onPreinitialize (event)”>

    <mx:Script>
        <![CDATA[

            import mx.events.FlexEvent;
            import mx.events.StyleEvent;

            private function onPreinitialize (event : FlexEvent) : void
            {
                var eventDispatcher : IEventDispatcher =
                    StyleManager.loadStyleDeclarations ("my_style.swf");

                eventDispatcher.addEventListener (StyleEvent.COMPLETE,
                    onStyleComplete);
                eventDispatcher.addEventListener (StyleEvent.ERROR,
                    onStyleComplete);
            }

            private function onStyleComplete (event : StyleEvent) : void
            {
                super.initialized = true;
            }

            override public function set initialized (value : Boolean) :
                void
            {
                // wait until the style swf is done loading!
            }

        ]]>
    </mx:Script>

</mx:Application>

Possibly related posts: (automatically generated)