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>

Do you set their dimensions dynamically when switching screens? — Exort, Sep 12 '11 at 19:22
It looks like the code in your sample has both of the viewStack's chlildren the same size. Could you address the situation by adding a show/hide transition? — JeffryHouser, Sep 12 '11 at 20:03
This came up in a Google Search http://www.flex-blog.com/flex-effects-example-in-a-viewstack/ . Any Flex Effect should work using a similar approach. — JeffryHouser, Sep 12 '11 at 20:44
** A wild video appears (http://tv.adobe.com/watch/codedependent/flex-4-states-and-transitions/) *** Its super effective. — Craig Mc, Sep 13 '11 at 08:55

Cam · Accepted Answer · 2011-09-15T15:22:35.153

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>

You might want to quote the relevant portions of the link here. Link rot has been known to destroy many a good answer. — Robusto, Sep 15 '11 at 15:11

score 0 · Answer 2 · answered Sep 13 '11 at 11:22

0

http://tv.adobe.com/watch/codedependent/flex-4-states-and-transitions/ <== There ya go

answered Sep 13 '11 at 11:22

Craig Mc

505
1
13
30

You might want to quote the relevant portions of the link here. Link rot has been known to destroy many a good answer. – Robusto Sep 15 '11 at 15:11

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

2 Answers2