Download Distortion Effects – From MAX 2006

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.
FlipCubeBlur1.png


With the source code, you can use all the showcased effects in your own applications. They tie into the existing Flex 2 Effects Framework infrastructure, meaning you can use them in ActionScript, Transitions, hideEffect properties etc…like any other Flex 2 Effect. Here is one simple example on how it looks like using a hideEffect:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:sides="view.sides.*"
xmlns:mxeffects="com.adobe.ac.mxeffects.*">
<mxeffects:CubeRotate
id="flipIn"
target="{ login }" siblings="{ [ registration ] }"
direction="RIGHT" duration="1000"/>
<mxeffects:CubeRotate
id="flipBack"
target="{ registration }" siblings="{ [ login ] }"
direction="LEFT" duration="1000"/>
<mx:ViewStack id="loginViewStack">
<sides:Login
id="login"
title="Login"
hideEffect="{ flipIn }"
change="loginViewStack.selectedChild = registration;"/>
<sides:Registration
id="registration"
title="Registration"
hideEffect="{ flipBack }"
change="loginViewStack.selectedChild = login;"/>
</mx:ViewStack>
</mx:VBox>

And here is how it looks like using States and Transitions:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:sides="view.sides.*"
xmlns:mxeffects="com.adobe.ac.mxeffects.*">
<mx:states>
<mx:State name="registrationState">
<mx:RemoveChild target="{ login }"/>
<mx:AddChild>
<sides:Registration
id="registration" title="Registration"
change="currentState = ''" />
</mx:AddChild>
</mx:State>
</mx:states>
<mx:transitions>
<mx:Transition fromState="" toState="registrationState"
effect="{ flipFront }"/>
<mx:Transition fromState="registrationState" toState=""
effect="{ flipBack }"/>
</mx:transitions>
<mx:Sequence id="flipFront">
<mxeffects:CubeRotate
target="{ login }" siblings="{ [ registration ] }"
direction="RIGHT"/>
<mx:RemoveChildAction target="{ login }"/>
<mx:AddChildAction target="{ registration }"/>
</mx:Sequence>
<mx:Sequence id="flipBack">
<mxeffects:CubeRotate
target="{ registration }" siblings="{ [ login ] }"
direction="LEFT"/>
<mx:RemoveChildAction target="{ registration }"/>
<mx:AddChildAction target="{ login }"/>
</mx:Sequence>
<sides:Login id="login" title="Login"
change="currentState = 'registrationState';"/>
</mx:Canvas>

You can also create your own customized Flex Framework Effects using base and utility classes of the distortion effects. Make sure you check out the chapter 15 of Creating and Extending Flex 2 Components (flex.org > Documentation) for more information on Flex Effects customizations.
Distortions
Independently of effects, you can also use the source code to create your own distortions using the com.adobe.ac.mxeffects.Distortion. The API can be very simple i.e. like:

var distortion : Distortion = new Distortion( login );
distortion.push( 50, DistortionConstants.TOP );

For more customized distortions you can use the distortion explorer, which is also included in the download.
The Flex 2 Framework is free but still, you might not able to use it because you create extremely lightweight (filesize) content or/and developing with the Flash IDE (Flash Professional 9 ActionScript 3.0 Preview). Anyway, you can still make use of distortions with using com.adobe.ac.mxeffects.SimpleDistortion.
Determining Filter Bounds at Runtime
And independently of effects and distortions, you might want to use the com.adobe.ac.util.DisplayObjectBoundsUtil if you’re looking for how to determine the bounds (width and height) of a display object at runtime that might have filters applied. Check on SimpleDisplayObjectBoundsUtil if you can’t use the Flex framework.
For usage, just add the included DistortionEffects.swc into your project, check out the included sample applications and let me know how you get on with it!
UPDATED: I’ve published a blog entry to an updated version here. The source code and example links on this blog entry contain the updated version.
And if you’re interested in the source code of the cube example, download it here.