Recently in Effects Category

Imagine an airplane that takes off the ground, flies across a distance and lands at an arbitrary destination. This post will explain how to do the same in Flex, using the Flight effect, which you can download here.

Before I explain any further, take a look at a running example. I've taken the Cairngormstore and added the Flight effect to the point when the user wants to add a product to his shopping cart. Simply click on the "Add to Cart" button to see the effect playing.

The key here is that the product doesn't immediately appear in the shopping cart DataGrid control as the user presses the "Add to Cart" button. Instead, the Flight effect animates the product into the shopping cart control. Download it here.

There’s a slightly updated version of the distortion effects shipping with the amazing Tour de Flex AIR application (flex.org/tour). This update adds another feature that our User Experience team found “adding to reality”. Lighting!

Lighting works on all effects supplied. Here’s how it looks like on CubeRotate:

But see all the effects in action from this example. Download it here directly.

Here’s a new version of the distortion effects.

Thanks for all your tremendous feedback on the previously released distortion effects. Some of that feedback is now included in this updated version. This version adds various features and updates. Here’s an excerpt:

Exceed Bounds

Much of the feedback I’ve received was about making the flip effect more realistic. The hint was to let its bounds overlap while the flip effect is coming towards the user. (flipping in). The new exceedBounds property on the Flip effect does exactly that and is now turned on by default!

Pop mode UP

The Pop effect now has an additional mode. The default mode is DOWN, which pops a display object off a stack/pile, away from the user. The new UP mode pops it towards the user.

For everyone who couldn’t attend my MAX presentation in Las Vegas, here is the presentation as PDF. Furthermore, I’ve released the complete source code for every effect shown.

And here is the Flex 2.0.1 version.

Behind the scenes, these effects are using the DistortImage utility from the open source 3D Engine Sandy. Make sure you check out Sandy if you haven’t yet! The effects included are called Flip, CubeRotate, Push, Pop, Door and Gate. But instead of talking about them, just see them in action for yourself:

Distortion Effects

This sample application lets you play with all effects available. You can also see different configurations, i.e. try enabling the blur checkbox.

As MAX 2006 in Las Vegas is coming closer and it’s shaping up to be a fascinating conference. I’m talking about

Leveraging Flex 2 and Flash Player 9 for Truly Cinematic Experiences

and I’d like to give you more information where this will be about, in hope you consider joining my session!

I’ll talk about how cinematic effects can dramatically improve the user experience of a Rich Internet Application and can contribute significantly to the success of how your RIA will translate the experience that your costumer wants to deliver.

You will see new types of effects and learn best practices toward their use and creation.