When you use ordered creation, the order in which containers appear in the instantiation queue determines in what order Flex displays the container and its children on the screen.

You can set the order in which containers are queued by using the container's creationIndex property, in conjunction with setting the creationPolicy property to queued. Flex creates the containers in their creationIndex order until all containers in the initial view are created. Flex then revisits each container and creates its children in the same order. After creating all the children in a container that is in the queue, Flex displays that container before starting to create the children in the next container.

All containers support a creationIndex property.

If you set a creationIndex property on a container, but do not set the creationPolicy property to queued, Flex ignores the creationIndex property and uses auto, the default value, for the creationPolicy property.

The following example sets the creationIndex property so that the contents of the panel3 container are shown first, then the contents of panel2, and finally the contents of panel1:

<?xml version="1.0"?>
<!-- layoutperformance/QueueOrder.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        private function logCreationOrder(e:Event):void {
            ta1.text += e.currentTarget.id + " created\n";
        }
    ]]></mx:Script>

    <mx:Fade id="SlowFade" duration="4000"/>

    <mx:HBox>
        <mx:Panel id="panel1" title="Panel 1 (index:2)" creationPolicy="queued" creationIndex="2"  creationComplete="logCreationOrder(event)" creationCompleteEffect="{SlowFade}">
            <mx:Button id="button1a" label="Button 1A" creationComplete="logCreationOrder(event)"/>
            <mx:Button id="button1b" label="Button 1B" creationComplete="logCreationOrder(event)"/>
        </mx:Panel>

        <mx:Panel id="panel2" title="Panel 2 (index:1)" creationPolicy="queued" creationIndex="1"  creationComplete="logCreationOrder(event)" creationCompleteEffect="{SlowFade}">
            <mx:Button id="button2a" label="Button 2A" creationComplete="logCreationOrder(event)"/>
            <mx:Button id="button2b" label="Button 2B" creationComplete="logCreationOrder(event)"/>
        </mx:Panel>

        <mx:Panel id="panel3" title="Panel 3 (index:0)" creationPolicy="queued" creationIndex="0" creationComplete="logCreationOrder(event)" creationCompleteEffect="{SlowFade}">
            <mx:Button id="button3a" label="Button 3A" creationComplete="logCreationOrder(event)"/>
            <mx:Button id="button3b" label="Button 3B" creationComplete="logCreationOrder(event)"/>
        </mx:Panel>
    </mx:HBox>
    
    <mx:TextArea id="ta1" height="200" width="350"/>
    
</mx:Application>
The executing SWF file for the previous example is shown below:

This example uses the inherited creationCompleteEffect effect to play an effect just as the container finishes creation. The result is that the panels fade in slow enough that you can see the order of creation. After a container is initialized and displayed, Flex waits for all effects to finish playing before initializing the next container.

If you set the same value of the creationIndex property for two queued containers, Flex creates and displays their contents in the order in which they are defined in the application's source code. The value of the creationIndex property can be any valid Number, including 0 and negative values.