Jan 06 2010
Getting Fancy with Flex 4
For those familiar with the Pixel Bender feature that shipped with Flash 10 you know that it’s possible to author custom image filters or blend filters for static content. With Flex 4 and the new AnimateTransitionShader effect you can now leverage Pixel Bender filters as the “engine” behind animated custom state transitions.
The idea behind AnimateTransitionShader is that the SDK will take care of the gory details behind:
- Taking a before bitmap snapshot of the effect target before the state change.
- Taking an after snapshot of the effect target in the new state.
- Assigning the before and after images to the Pixel Bender shader and animating the ‘progress’ property of the shader, updating the screen accordingly with the results of the shader operation for each frame.
Let’s take a quick look at a simple example.
Consider the animation below where our applet has a label or caption that changes values every few seconds. In this example we transition “to” each state using a modified version of the Hexagonal Tiling shader written by Petri Leskinen.
A quick walk-through of the code below for inquiring minds:
- A standard Flex 4 applet consisting of two states.
- A label is declared whose text value has one of two values depending on the current state (”Before” or “After”).
- The magic: We declare an instance of an AnimateTransitionShader effect to serve as the default transition effect. It’s worth noting that we target the parent of the label in this case (”ticker”) because we want the bounds of our ‘before’ and ‘after’ images in our raster transition to be identical - this is a requirement of the AnimateTransitionShader effect. The effect is also initialized with a reference to the ‘HexCells’ Pixel Bender kernel.
- A timer changes the current state every 2.5s.
That’s really all there is to it. When the state change occurs the effect will grab the input images and feed them to the HexCells shader and then animate the ‘progress‘ attribute of the shader from 0 to 1 as the transition progresses. The result of each animation frame is rendered to the screen by the Flex SDK.
I won’t go into details here about the exact interface we require for the Pixel Bender shader, but I encourage you to examine the example source included as part of this post.
For what it’s worth, the Spark CrossFade and Wipe effects that ship as part of Flex 4 are further examples of Pixel Bender shaders that can be used for simple transitions.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" width="300" height="150" applicationComplete="onAppComplete()" backgroundColor="#000000" > <fx:Script> <![CDATA[ private var timer:Timer; private function onAppComplete():void { timer = new Timer(2500); timer.addEventListener("timer", onTick); timer.start(); } private function onTick(e:Event):void { currentState=currentState=='State1'?'State2':'State1'; } ]]> </fx:Script> <s:states> <s:State name="State1"/> <s:State name="State2"/> </s:states> <s:transitions> <s:Transition> <s:AnimateTransitionShader target="{ticker}" duration="1100" shaderByteCode="@Embed(source='HexCells.pbj', mimeType='application/octet-stream')"/> </s:Transition> </s:transitions> <fx:Style> @font-face { src: url("MyriadWebPro-Bold.ttf"); fontFamily: "Myriad"; embedAsCFF: true; } </fx:Style> <s:Group id="ticker" width="300" height="150"> <s:Label fontFamily="Myriad" text.State1="Before" text.State2="After" color="#FFFFFF" textAlign="center" buttonMode="true" verticalCenter="0" fontSize="44" width="100%"/> </s:Group> </s:Application> |
The sky is pretty much the limit here. In fact since the effect is just a standard Flex Effect you can also specify interpolation options. Another example (below) uses a simple “twist” shader that you can use to essentially flip between two states of an effect target. In this case I’ve added a custom Bounce easer to the transition.
The source for the twist example follows, the bulk of the sample is identical to the one prior, so I’ve excluded the common code (full source of the examples is included in the archive attached to this post below).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | ... <s:transitions> <s:Transition> <s:AnimateTransitionShader target="{ticker}" duration="1200" shaderByteCode="@Embed(source='Twist.pbj', mimeType='application/octet-stream')"> <s:easer> <local:MyBounce/> </s:easer> </s:AnimateTransitionShader> </s:Transition> </s:transitions> <s:Group id="ticker" width="100%" height="100%" > <!-- Solid fill for our effect target so captured bitmap contains bounds of our Group --> <s:Rect width="100%" height="100%"> <s:fill> <s:SolidColor color="#FFFFFF"/> </s:fill> </s:Rect> <s:BitmapImage source="@Embed(source='CalcLarge.png')" source.State2="@Embed(source='CalcSmall.png')" verticalCenter="0" horizontalCenter="0"/> </s:Group> ... |
Download the cookbook code for each of the samples here.
For more information about blend shaders check out this article by the Flex effects guru himself, Chet Haase: Shader Transitions in Flex 4.
And to browse the sources of several Pixel Bender shaders (which you’ll have to port for use as blend shaders) - check out the Pixel Bender Exchange.
Very cool, very simple. Can’t wait to start messing more with PixelBender.
Wow, great transition! Cant wait to use it everywhere…
Very slick. Loving the twist animation especially.
It’s nice to see Flex 4 is going to come with something like this - it seems more like the stuff that it usually falls to the wider Flash community as a whole to produce, nice to seem more of a focus on the visual appeal (rather than RIA components) from Adobe!
@Andre, it goes without saying but I’ll say it anyways.
…
Transitions, (as with for example, any fine alcoholic beverage), should be used responsibly. In practice you want to ensure that A) any gratuitous animations will be a help to the user, not a hindrance (either aesthetically or functionally), and B) that you understand the performance implications of any transitions in your particular use case.
For (B) it’s important to note that the raster based transitions can be expensive so be careful just how much of the screen real estate you update at one time, and stick to a sane frame rate.
Cool, thanks for these examples!
Keep up the blogging
I noticed that the Twist filter doesn’t run in the latest version of Pixel Bender (1.5) on Adobe Labs. What version does it require and is it available somewhere?
@David, the Pixel Bender Toolkit does not support (3) input parameters, so while testing inside PBT, just comment out all references to the ’src0′ input parameter (don’t forget to put it back when exporting for Flash). e.g. Comment out lines 12 and 41 or so. Load up (2) images to play with (making sure they are the same size) and make sure to set width and height to the proper values before adjusting the ‘progress’ value. All this is done for you with the Flex transition class.
[...] A couple of days ago Corey Lucier posted a couple of nice examples of the new Flex 4 AnimateTransitionShader. [...]
쟝또루푸의 생각…
Pixel Transition?…
예
really interesting article.
Finally we can really play with PB and flex4. The only doubt that is bothering me , it’s
about the resource that the flash player with these fancy effect will eat out.
I’m gonna experiment this and make you know
Sephiroth
Well, keep in mind Pixel Bender effects aren’t hardware accelerated, but the flash player will distribute processing of individual scanlines to different CPU cores if you have them. But that said you just don’t want to transition an entire display, it’s useful for transitioning smaller areas, panels, etc. Just be responsible.