Why does Flex Viewstack "blink" when switching between views?

Question

I'm working on an app in which I want the viewstack to switch views on certain events. I have them switching correctly but there appears to be a slight "blink" when the change between views occurs. I've tried creationPolicy="all" but that doesn't fix the problem. The reason the "blink" is so noticeable is the fact that the views in the viewstack are different width/heights. Is there a way to stop this "blinking" effect on viewstack view switch?

Here is the code in which the view switch happens:

                function show(value:String):void {
                  switch(value) {
                    case "ShapeObject":
                        viewstack.selectedIndex = 2;
                        break;
                    case "AssetObject":
                        viewstack.selectedIndex = 0;
                        break;
                  }
                }

Here is the mxml for the viewstack:

       <mx:ViewStack id="viewstack" resizeToContent="true" clipContent="false" creationPolicy="all" mouseDown="stopPropagationClick(event)" click="stopPropagationClick(event)">
            <mx:HBox id="shapeMenu" width="250" height="44" verticalAlign="middle" horizontalAlign="center" horizontalGap="0">
                <mx:Image source="@Embed(source='assets/objectTools_greyBack_left.png')" height="100%" width="10"/>
                <mx:HBox verticalAlign="middle" horizontalAlign="center" backgroundSize="100%" height="100%" width="100%" styleName="contextualCenterBkg">
                    <ui:HTMLLabelButton id="ConstrainShape" name="{_appData.textXML.designer.toolbars.shapeControlEditor.proportionalResize.@tooltip}" styleName="btnContextualConstrain" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <mx:ColorPicker name="{_appData.textXML.designer.toolbars.shapeControlEditor.shapeColorPicker.@tooltip}" close="onColorPickerClose(event)" change="{onShapeColorPickerChange(event)}" open="onColorPickerOpen(event)" click="stopPropagationClick(event)" mouseDown="stopPropagationClick(event)" focusEnabled="false" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.bringForward.@tooltip}" styleName="btnContextualSendForward" click="{onSendToFrontClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.sendBackward.@tooltip}" styleName="btnContextualSendBack" click="{onSendToBackClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.deleteControl.@tooltip}" id="DeleteShape" styleName="btnContextualDelete" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                </mx:HBox>
                <mx:Image source="@Embed(source='assets/objectTools_greyBack_right.png')" height="100%" width="10"/>
            </mx:HBox>

            <mx:HBox id="multiMenu" width="250" height="44" verticalAlign="middle" horizontalAlign="center" horizontalGap="0">
                <mx:Image source="@Embed(source='assets/objectTools_greyBack_left.png')" height="100%" width="10"/>
                <mx:HBox verticalAlign="middle" horizontalAlign="center" backgroundSize="100%" height="100%" width="100%" styleName="contextualCenterBkg">
                    <ui:HTMLLabelButton id="ConstrainShapeMulti" name="{_appData.textXML.designer.toolbars.shapeControlEditor.proportionalResize.@tooltip}" styleName="btnContextualConstrain" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.bringForward.@tooltip}" styleName="btnContextualSendForward" click="{onSendToFrontClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.sendBackward.@tooltip}" styleName="btnContextualSendBack" click="{onSendToBackClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                    <ui:HTMLLabelButton name="{_appData.textXML.designer.toolbars.shapeControlEditor.deleteControl.@tooltip}" id="DeleteShapeMulti" styleName="btnContextualDelete" click="{btnClick(event)}" mouseOver="_tips.tip(event);" mouseOut="_tips.tip(event);"/>
                </mx:HBox>
                <mx:Image source="@Embed(source='assets/objectTools_greyBack_right.png')" height="100%" width="10"/>
            </mx:HBox>
        </mx:ViewStack>

Answer 1

flex-blog.com/flex-effects-example-in-a-viewstack

Thanks www.Flextras.com

First make a viewstack:

<mx:LinkBar dataProvider="viewStack"/>
    <mx:ViewStack height="200" width="300" id="viewStack">

      <!-- Red View -->
      <mx:VBox backgroundColor="#FF0000" label="Screen One">

      </mx:VBox>

      <!-- Green View -->
      <mx:VBox backgroundColor="#00FF00" label="Screen Two">

      </mx:VBox>

      <!-- Blue View -->
      <mx:VBox backgroundColor="#0000FF" label="Screen Three">

    </mx:VBox>

</mx:ViewStack>

Then make some transitions:

<mx:WipeLeft duration="500" id="wipeLeft"/>
<mx:WipeRight duration="500" id="wipeRight"/>

Then apply the transitions:

<mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}"
    backgroundColor="#FF0000" label="Screen One"/>
</mx:VBox>

<mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}" 
    backgroundColor="#00FF00" label="Screen Two"/>
</mx:VBox>

<mx:VBox showEffect="{wipeRight}" hideEffect="{wipeLeft}" 
    backgroundColor="#0000FF" label="Screen Three">         
</mx:VBox>