Video: Custom Easing in Flex 4 Effects

Custom Easing in Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

In this show, we see an introduction to the new approach to easing in Flex 4 effects, using the new IEaser interface. "Easing" is a term in Flash and Flex that means changing the way that time is interpolated in animations, to give more interesting and natural movement. In Flex 3, different easing behavior was applied by assigning easing function references to to the "easingFunction" property in effects. This was a powerful and easy-to-use mechanism, but we've changed the approach in Flex 4 to make easing more flexible and also simpler to customize. This video shows how we can write and alter a simple easing implementation to get arbitrary, custom easing behavior.

Here's the video:

Here is the demo application. Note that the real action here is in building the application and playing with the CustomEaser implementation. The demo below is just one iteration of that example, where we are accelerating in with a cubic ease by multiplying the elapsed fraction times itself three times:

And here is the source code.

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

Enjoy.

Interview: RIA Revolution

Shashank Tiwari (co-author of AdvancED Flex 3) and I chatted about Flex 4, effects, MAX, and books at the MAX 2009 conference last week. Check out the interview on the RIA Revolution site.

Video: Effects in Flex 4 (MAX Session)

Effects in Flex 4, the talk I gave earlier this week at Adobe MAX, is now available from Adobe TV. This is pretty awesome; I've never known talk recording to be published so soon after the actual event (in this case, actually published while the event was still going on).

The talk covers the overall architecture of the new effects in Flex 4, covering all of the new effects classes and also (my favorite part) the underlying details of how it all works, using the Animate class, the underlying Animation class, and all of the low-level helper classes. Lots of nitty-gritty details for those that care (and those that don't). If you saw my FlashCamp talk that I posted last June, you'll recognize some of the information and demos, but this talk goes into a lot more detail on the architecture and underlying details since I had more time to do so. For the code-hungry folks in the audience, I showed many demos throughout the talk to illustrate how the concepts and classes actually work in real code.

Here's the video. I show a lot of demos during the talk with plenty of code wading, so you might want to pop the player into fullscreen mode (look for the icon in the lower-right of the player).

Many of the demos are already posted in other CodeDependent posts, others are ones that I developed for MAX and have not yet published. But I will push these demos out eventually as well - look for future posts that cover these other demos in more detail.

Be sure to check out the other MAX talks, too. There was some great stuff at MAX this year, and it's pretty cool that we've posted the talks for all of the folks that couldn't make the conference, or had conflicts with other sessions, or simply couldn't stumble early enough for morning sessions after late night sessions in the bar the night before.

Enjoy.

MAX Online

I'm sure you'll be at Adobe MAX next week. I mean, all the stuff going on there, you have to show up, right? Besides, all the cool kids will be there. But suppose, just for a lark, that you can't make it. Maybe your leg gets caught in a wood chipper and you miss your flight. Maybe you can't find "Los Angeles" on a map. Maybe you'll be having so much fun playing with Flex 4 effects that you forget to go. What to do? Well, how about watching MAX online? There are lots of conference goodies that will be posted in realtime and real-soon-time, so that you can watch them online. In particular:

• Keynotes: The keynotes on October 5th and 6th will be streamed live.
• Top Sessions: The top three sessions each day will be recorded and posted by 8 P.M. California time that evening.
• All Sessions: All of the technical sessions will be recorded next week and will be posted on Sunday, October 11th.

For all of these things, go to the online site to register (http://max.adobe.com/online/), and check back there when its time for the shows. Sure, it's not as much fun as being there. But it's more fun that getting caught in a wood chipper again.

Video: 3D Effects in Flex 4

3D in Flash Player 10 and Flex 4, the next episode in the gripping and suspenseful series CodeDependent, is now available from Adobe TV.

In this show, we see some of the 3D capabilities in Flash Player 10 and how we take advantage of them for some of the new 3D effects in Flex 4.

Here's the video:

Here is the demo application:

And here is the source code.

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

Enjoy.

Video: Shader Transitions in Flex 4

First, some housekeeping announcements:

• The Adobe TV site (where my CodeDependent show is hosted) has been completely redone. The new site is much more searchable and functional than the previous one, so it's easier to browse around there and find the content you like. I'll continue to embed my CodeDependent videos here on my blog, but I encourage you to also check out the TV site itself and see what else is there.
• The embedded player from the TV site has been improved, so now you can expand the video below to run fullscreen.
• The URLs for shows like CodeDependent have also changed. The old links still work (for now at least), but I'll be using the new links from now on to link to the more comprehensible page http://tv.adobe.com/watch/codedependent instead of the older more obtuse "#vi+f16095" page.

And now, back to our show.

Shader Transitions 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 shaders created in Pixel Bender Toolkit are used in the new Wipe and CrossFade effects to create easy and powerful transitions. These new effects are subclasses of the new AnimateShaderTransition effect which allows you to supply completely custom shaders to get your own shader-based effects for transitions, although you are welcome to simply use Wipe and CrossFade and not worry about the pesky details of shaders if you just want some simple transitions. We covered shaders in a previous episode, where we talked about how to use the new AnimateFilter effect to animate shader properties, and filter properties in general. Now see how we use shaders and shader animations internally to implement some standard transition effects.

Here's the video (note the new ability to expand the player to run in fullscreen mode):

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.

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.