Почему Flex Viewstack "мигает" при переключении между представлениями?

Question

Я работаю над приложением, в котором я хочу, чтобы viewstack переключал представления определенных событий. У меня они правильно переключаются, но при смене взглядов кажется, что они слегка мигали. Я пробовал creationPolicy="all", но это не решает проблему. Причина, по которой "мерцание" так заметно, заключается в том, что виды в стеке просмотра имеют различную ширину / высоту. Есть ли способ остановить этот "мигающий" эффект на переключателе вида в стеке?

Вот код, в котором происходит переключение вида:

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

Вот mxml для стека просмотра:

       <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

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

Спасибо www.Flextras.com

Сначала создайте видовой стек:

<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>

Затем сделайте несколько переходов:

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

Затем примените переходы:

<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>

Answer 2

http://tv.adobe.com/watch/codedependent/flex-4-states-and-transitions/ <== Вот и все