1 Reply Latest reply on Aug 20, 2007 12:48 PM by chrisstolte

    Transitions without "preview"

    java the hutt Level 1
      Hello,

      I am having trouble with transitions between view states on a dialog (TitleWindow). Sometimes when I change states, I see a "preview" of the destination state before the transition starts to play. For example, my test case uses a TitleWindow with the following mxml:

      <?xml version="1.0" encoding="utf-8"?>
      <TitleWindow xmlns="(standard mxml namespace here)"
      title="Test Dialog"
      layout="vertical"
      height="600"
      width="600">
      <states>
      <State name="small">
      <SetProperty name="height" value="100"/>
      </State>
      </states>

      <transitions>
      <Transition>
      <Resize target="{ this }" duration="1000"/>
      </Transition>
      </transitions>

      <ComboBox id="stateComboBox" change="currentState = String(stateComboBox.selectedItem)">
      <dataProvider>
      <Array>
      <String></String>
      <String>small</String>
      </Array>
      </dataProvider>
      </ComboBox>
      </TitleWindow>

      When switching states using the combo box, sometimes the destination state is rendered to the screen before the transition starts to play. The visual effect is that of the destination state "flickering" momentarily before the transition begins.

      I've analyzed the cause of the problem. In essence, the destination state is applied to the TitleWindow before the transition plays. If the flash player renders the TitleWindow after the destination state is applied but before the transition begins, the user will see the flicker. Because rendering and user event processing appear to occur on separate, independent threads, the behavior is nondeterministic.

      Has anyone tackled this problem already? Especially, if someone from Adobe can shed some light on this issue that would be very helpful.

      Thanks.

      Michael
        • 1. Re: Transitions without &quot;preview&quot;
          chrisstolte
          Java,

          I am seeing the same problem, but it seems to be specific to Firefox. I have two canvasses that grow (or shrink) in parallel, triggered by two distinct label clicks. After the application loads, the following happens IN FIREFOX:

          1. I click on the first label, and the transition runs perfectly.
          2. I click on the other label, which is intended to reverse that action, and the transition runs, but not before the flicker that you mentioned. I can see the "preview" briefly before it runs.
          3. From there on out, I see the preview for either transition.

          Things to note:

          1. This only happens in Firefox (v. 2.0.0.6) and not in IE (v. 7.0.5730.11)
          2. If I use a mouseOver event to trigger the transition, instead of a click, things work great, no "preview".
          (doubleClick also seems to work, mouseUp does not...)
          3. Both browsers are running Flash 9.0.47

          Has anyone else encountered this?

          Here's the State/Transition code
          ------------------------------------------------------------------------------------------ ------------------------------------------
          <mx:states>
          <mx:State name="Search">
          <mx:SetProperty target="{consoleStack}" name="width" value="85%"/>
          <mx:SetProperty target="{sidebar}" name="width" value="15%"/>
          </mx:State>
          <mx:State name="Sidebar">
          <mx:SetProperty target="{consoleStack}" name="width" value="65%"/>
          <mx:SetProperty target="{sidebar}" name="width" value="35%"/>
          </mx:State>
          </mx:states>

          <mx:transitions>
          <mx:Transition id="toSidebar" fromState="Search" toState="Sidebar">
          <mx:Parallel id="tSidebar" targets="{[consoleStack,sidebar]}">
          <mx:children>
          <mx:Resize duration="700"/>
          <mx:Move duration="700"/>
          </mx:children>
          </mx:Parallel>
          </mx:Transition>
          <mx:Transition id="toSearch" fromState="Sidebar" toState="Search">
          <mx:Parallel id="tSearch" targets="{[consoleStack,sidebar]}">
          <mx:children>
          <mx:Resize duration="700"/>
          <mx:Move duration="700"/>
          </mx:children>
          </mx:Parallel>
          </mx:Transition>
          </mx:transitions>
          ------------------------------------------------------------------------------------------ ----------------------------------------------------

          Thanks,
          Chris