Friday, September 4, 2009

Video: Pixel Bender and Flex 4 Effects

Pixel Bender Shaders in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

In this show, we see how Pixel Bender Toolkit is used to create shaders that can then be used in Flash filters to change the display of objects on the screen. We then see how to use the new AnimateFilter effect in Flex 4 (which we discussed in a previous episode) to animate the shader properties over time, enabling new and powerful transition effects. Note that the demo application shows a crossfade between two images, but the effect can be applied to any component or graphical object - shaders aren't just for images (I just happened to have the images handy when writing the application).

Here's the video:

Here is the demo application (pretty SF pictures courtesy photographer and Android-hacker Romain Guy):

And here is the source code.

Finally, here's where you can find the CodeDependent videos on iTunes.

Enjoy.

6 comments:

broschb said...

cool, but if you click again before the animation,effect is done, it jumps to then next image very ungracefully.

Chet Haase said...

@broschb: Yes, you're right. Being able to reverse an animation smoothly wasn't the point I was trying to get across in this example, so I went with the simplest implementation, which simply played the animation on each click, regardless of whether it was still playing from the last click. I prefer simple examples that illustrate the point rather than complete works that get bogged down in non-germaine details.

Anyway, it seemed useful to show how to enhance the demo to handle this situation, so I've updated the code and demo and you should no longer see that flashing artifact. The trick, shown in the clickHandler() function, is to detect a running animation, check its current playheadTime, stop() it, then play() the next animation with the inverse of that playheadTime. This is what we do internally for transitions with autoReverse="true". (Note that this technique only works when the current/next animations are of the same duration).

Viv said...

Hi Chet, how is your schedule? I am a silvafug member and located in San Jose area. Every month we meet in Adobe head office in San Jose. I was wondering if it will be possible for you to come over in one of our future meetings and give a presentation about effects?

Chet Haase said...

@Viv: sure, I'd be up for that. Contact me directly and we can figure out schedules.

Kevin Goldsmith said...

Pixel Bender came out "a couple months ago on Adobe Labs"? It came out on Adobe labs at MAX 2007 and shipped in CS4!

Chet Haase said...

@Kevin: Apologies for my error. To be fair, I said "a few months ago" and this video was shot several weeks/months before it was posted last September. But I wasn't aware of the much earlier release date and its inclusion in CS4. I got involved with it much later, when it was included in Flash Player 10.
I'll try to be more clear about this in the future...