As a quick follow-up to my last post, here is another nifty transition. It’s a radial version of the classic “Squish” transition, in that the old image starts to peel away from the center out, to reveal a new image.

Here’s a simple example where I exaggerate the effect a bit to show you how it works - a possible prototype for a dynamic color picker (or something, yeah I’m grasping):

I wanted to go a bit further and mention that you can use any of these transitions within your AIR applications as well, makes for very fun desktop toy..or at least for fun transitions between states of a fun desktop toy, whether it be a cross fade, twist, morph, radial wipe… just experiment!

 

Click here to install the ‘flowers’ applet for desktop use.

Click here for the sample and shader source code.

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:

1. Taking a before bitmap snapshot of the effect target before the state change.
2. Taking an after snapshot of the effect target in the new state.
3. 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.

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

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.