«
»

AnimateTransitionShader

A couple of days ago Corey Lucier posted a couple of nice examples of the new Flex 4 AnimateTransitionShader.

Like Flex 3, the new effects don’t handle being interrupted well. They jump abruptly to the end of the current IEffectInstance, then start a new one. The abruptness is what your trying to get away from when you decide implement an effect, opting for a smooth transition.

With a bit of tweaking about it was fairly easy to hack around this. Here’s what i changed

  • When an effect instance is interrupted it takes a snapshot of the view, and passes this a a bit of other info to the effect factory.
  • The effect instance then stops the final value being applied.
  • When creating an effect instance the effect factory looks inside itself for any interrupted effects that have the same target. If it finds one it passes the data through to the instance.
  • The effect instance then uses the snapshot to transition from.

    • In the examples below I’ve added a couple of more states and a ButtonBar to navigate. I’ve also removed the easing to make it a little simpler to see. If you click around a bit you should see the difference.

    Here’s the original (right click for source)

    Here’s the Efflex version (right click for source)

    I’ve added the code to the Efflex library, although I’d expect it to change as I play with the Flex 4 effects more.

    On a side note you’ll see I have a try and catch in the ButtonBar handler. This seems to be a bug where event.newIndex returns -1 (SDK-24981).

    EDIT – The above isn’t a bug but the intended way for a ButtonBar to work.

    This entry was posted on Monday, January 11th, 2010 at 11:36 am and is filed under ActionScript 3.0, Flex 4.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    6 Responses to “AnimateTransitionShader”

    1. Jochen Szostek says:
      January 15, 2010 at 1:04 pm

      Very nice!
      FYI: I do get an error when I do some hardcore switching between states. But I don’t think a lot of sane people would run into it. :)

      Greets

      ArgumentError: Undefined state ‘State0′.
      at mx.core::UIComponent/getState()[E:\dev\trunk\frameworks\projects\framework\src\mx\core\UIComponent.as:9894]
      at mx.core::UIComponent/findCommonBaseState()[E:\dev\trunk\frameworks\projects\framework\src\mx\core\UIComponent.as:9914]
      at mx.core::UIComponent/commitCurrentState()[E:\dev\trunk\frameworks\projects\framework\src\mx\core\UIComponent.as:9736]
      at mx.core::UIComponent/setCurrentState()[E:\dev\trunk\frameworks\projects\framework\src\mx\core\UIComponent.as:9687]
      at mx.core::UIComponent/set currentState()[E:\dev\trunk\frameworks\projects\framework\src\mx\core\UIComponent.as:6077]
      at ShaderTransition/onButtonBarChange()
      at ShaderTransition/__buttonBar_change()
      at flash.events::EventDispatcher/dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at mx.core::UIComponent/dispatchEvent()[E:\dev\trunk\frameworks\projects\framework\src\mx\core\UIComponent.as:12251]
      at spark.components.supportClasses::ListBase/commitSelection()[E:\dev\trunk\frameworks\projects\spark\src\spark\components\supportClasses\ListBase.as:1072]
      at spark.components.supportClasses::ListBase/commitProperties()[E:\dev\trunk\frameworks\projects\spark\src\spark\components\supportClasses\ListBase.as:773]
      at spark.components.supportClasses::ButtonBarBase/commitProperties()[E:\dev\trunk\frameworks\projects\spark\src\spark\components\supportClasses\ButtonBarBase.as:238]
      at mx.core::UIComponent/validateProperties()[E:\dev\trunk\frameworks\projects\framework\src\mx\core\UIComponent.as:7759]
      at mx.managers::LayoutManager/validateProperties()[E:\dev\trunk\frameworks\projects\framework\src\mx\managers\LayoutManager.as:572]
      at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\trunk\frameworks\projects\framework\src\mx\managers\LayoutManager.as:730]
      at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\trunk\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]
      at flash.utils::Timer/_timerDispatch()
      at flash.utils::Timer/tick()

    2. Tink says:
      January 15, 2010 at 1:08 pm

      Yeah this is down to my mis-use of the ButtonBar, NOT the effect.

      See the link below for more info

      https://bugs.adobe.com/jira/browse/SDK-24981

    3. Jochen Szostek says:
      January 22, 2010 at 12:46 pm

      Hello Stephen,

      I’m trying to get this example to work but I still get an error message saying something like:
      component SimpleMotionPath is defined multiple times in this namespace. Remove the link to spark.effects.animation:SimpleMotionPath or spark.effects:SimpleMotionPath.

      I guess it has something to do with changes in the latest Flex 4 build I’m using?

      Kind regards,

      Jochen

    4. Tink says:
      January 22, 2010 at 12:56 pm

      ez Jochen

      It works fine for me in the latest SDK.

      That error would imply that you have multiple imports for the same class. My class doesn’t import any of those, so do you get the same error with the default classes that these extend?

    5. Khera says:
      March 10, 2010 at 11:54 pm

      Ausum work on the effects!!!!!
      But I was unable to use them b’coz when i imported the swc, it showed an error saying:

      component SimpleMotionPath is defined more than once in this namespace. Remove the mapping to spark.effects.animation:SimpleMotionPath or spark.effects:SimpleMotionPath

      I am working in the Adobe Flex SDK version 4.0 (build 13875)….any solutions????

    6. seb says:
      April 14, 2010 at 4:31 pm

      Hi,

      I am getting the same error Khera.

      “component SimpleMotionPath is defined more than once in this namespace. Remove the mapping to spark.effects.animation:SimpleMotionPath or spark.effects:SimpleMotionPath”

      I am using the SDK 4.0.0.14159.

      thanks
      S

    Leave a Reply