Requirements: Flex:
Problem: When stylesheet SWF is loaded on startup application appears in default style for a fraction of second and then styles are applied. How can we avoid stylesheet flickering on loading .
Reason: When stylesheet is loaded and applied dynamically it takes a small fraction of time to implement styles and during that small time the application appears in default style.
Solution: Make application visible only after style has been applied. So we are going to let preloader stay visible and disappear only after style gets fully implemented. To achieve this we will override initialized setter in main MXML and set it to true on StyleEvent.COMPLETE event. We are doing this because preloader class uses initialized setter to hide preloader and show application when loading is completed.
Here is code with comments :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" preinitialize="loadStyleSheet(event)" >
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.StyleEvent;
//override the initialized setter to make preloader stay until stylesheet is completly implemented
override public function set initialized (value : Boolean):void
{
// do nothing here
}
// your method to load stylesheet
private function loadStyleSheet (event : FlexEvent) : void
{
var eventDispatcher : IEventDispatcher = StyleManager.loadStyleDeclarations ("myStyleSheet.swf");
//attached event listener so we can show application when stylesheet load is completed
eventDispatcher.addEventListener (StyleEvent.COMPLETE,onStyleSheetComplete);
eventDispatcher.addEventListener (StyleEvent.ERROR,onStyleSheetComplete);
}
//on complete event of stylesheet loaded we hide preloader and show application by setting initialized to true
private function onStyleSheetComplete (event : StyleEvent) : void
{
super.initialized = true;
}
]]>
</mx:Script>
</mx:Application>