March 05, 2007

Distortion Effects - Updated

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.

Scaling Support

Some of you have experienced issues with distortions done on display objects that are below other display objects, which are being scaled. You can scale display objects either using UIComponent’s or DisplayObject’s scaleX, scaleY properties or with modifying the DisplayObject’s transform matrix (a and d properties). This version of the distortion effects supports any scalings applied to any parent display objects in your display list.

Support of More Environments

My goal with these effects always was to support all possible environments where you can use these effects and distortions. With environments I meant i.e. using distortions or utilities in a non Flex framework environment, using only the Flash Player API. But also the use in different Flex framework containers and effect setups, i.e. States and Transitions, hideEffects, ActionScript effects, with ViewStacks, custom containers etc.

This version increases the number of environments to support to the point that I currently haven’t heard of an environment that isn’t supported. If you have one, let me know and feel free to send me an isolated example and I’ll try to help out.

This version added support for some States and Transition usages i.e. with supporting multiple siblings and improves error handling in case views cannot be initialized.

See them in action here.

Download here!

Posted by auhlmann at 12:37 AM | Comments (154)

November 03, 2006

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.

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.

Posted by auhlmann at 01:08 AM | Comments (105)

September 08, 2006

MAX 2006: Leveraging Flex 2 and Flash Player 9 for Truly Cinematic Experiences

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.

New Flex Effects Leveraging Flex 2 Features

I’ll showcase a variety of different effects but most importantly I'll showcase a new type of cinematic effects, leveraging the performance improvements, the new bitmap manipulation features and the new Effects Framework in Flex 2. You'll be given ideas and complete source code for these new type of effects and will be able to create your own customized effects based on the principles demonstrated.

One of these effects is a flip effect. I’ve a little teaser for you here:

See the Flip effect

How this is done, how you can use it in your own work and how all the other effects look like…stay tuned for MAX 2006!

Future of AnimationPackage

Some of you might know that I’ve developed AnimationPackage, an ActionScript 2 library for Flash and Flex 1.x developers. I’ll outline how I see the future of this framework and how I see it fitting alongside the Flex 2 effects framework.

See you soon, on the
25. October, Wednesday, 1:45 p.m
and the
26. October, Thursday, 3:00 p.m.
in Las Vegas!

I'm excited!

Posted by auhlmann at 10:35 AM | Comments (5)