Alex Uhlmann: Download Distortion Effects – From MAX 2006

« Using Binding Securely | Main | Best Practice: Code Behind versus MXML Script Blocks versus View Helper »

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.

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.

Posted by auhlmann at November 3, 2006 01:08 AM

Comments

Woa.

These look *great*.

Posted by: Tom Chiverton at November 3, 2006 06:28 AM

This effects are great!, thanks

Posted by: Jack at November 3, 2006 10:30 AM

would you be willing to post the source to the sample app? if not, perhaps an app that uses the two code snippets above? for those getting started with FLEX... :) STEF

Posted by: stef at November 3, 2006 04:11 PM

stef,

there are various examples included in the download. Check out the examples folder. Read the readme.txt

Cheers,
Alex

Posted by: AlexU at November 3, 2006 04:24 PM

Hello Alex!

This is post is superb ( as usual if it's coming from you ) Congratulations for your work and your presentation at MAX and, of course, for sharing your code with us.

Again..superb!

Alberto

Posted by: Alberto at November 4, 2006 01:19 AM

Alex, Been a fan since animationpackage 1.0, great stuff as always - thanks!

Posted by: Patrick Lemiuex at November 5, 2006 10:43 AM

Wow, nice one!

Gruß aus Bochum
Marcel

Posted by: Marcel Fahle at November 5, 2006 12:21 PM

Alex, definately the full chumby - thanks for the example code.

Andrew

Posted by: Andrew Muller at November 5, 2006 02:32 PM

This is so cool . These are some really cool effects :) . Thanks for sharing the code .

Example of using it with the Yahoo Api
http://seas.mgmt.purdue.edu/~firdosh/YahooAPI/cube/bin/MyYahoo.html

There seem to be some issues with it though, for example a custom component does not load correctly sometimes.

All in all an excellent lib :)

cheers :)
firdosh

Posted by: Firdosh Tangri at November 5, 2006 06:20 PM

Thanks for your comments, guys.

Firdosh, let's fix the issues you have with it. Maybe send me an email with more information about your environment and let's go from there. auhlmann at you know what.

Cheers,
Alex

Posted by: AlexU at November 6, 2006 04:18 AM

Hey Alex,
I emailed you the example file and source code. Hope you got it :)

cheers
firdosh

Posted by: Firdosh Tangri at November 6, 2006 10:31 AM

Nice yahoo example, man this stuff is going to be cool.

However, can someone tell me exactly how to import this archive, i can't seem to open it correctly and compile.. I've tried to create a new project then import the file system but nothing comes up when i try to compile the mxml file. Would anybody mind compiling up a project so I can get started learning the API please, or just specific steps to make the source files work??

Much appreciated,
Patrick

Posted by: Patrick at November 6, 2006 07:25 PM

Nice work Alex!

Cheers
Matt

Posted by: Matt Freer at November 8, 2006 02:29 AM

There's an issue with these distortion effects and compiling this project in flex. Team flex is on it but if you get a compile error, this issue has been documented.

The example archive works on only one of my computers.

Severity Description Resource In Folder Location Creation Time Id
2 1023: Incompatible override. CubeRotate.as p1/com/adobe/ac/mxeffects line 48 November 9, 2006 9:40:09 AM 2


Posted by: Patrick at November 9, 2006 10:26 AM

thanks

Posted by: lee at November 13, 2006 09:04 PM

Ah, team flex responded to me. The issue is that in the new version of flex 2.015 (which is in beta, the one I have been using)... Flex changed the EffectInstance class to IEffectInstance so you need to change the animation classes to import the IEffectInstance and need to override that method as well in the upcoming flex release.

The Flex team is preparing a migration document to detail this change when they release Flex 2.015 to the world.

Flex On.
Patrick

Posted by: Patrick at November 14, 2006 09:46 PM

Love what you've released. Is it possible to use the distortions as part of complex composite effects?

I'm currently trying to apply a composite sequencial effect..

Zoom (shrink component)
CubeRotate (rotate shrunken component)
Zoom (return to normal size)

I haven't yet had any luck and hope that it's possible... being able to use these distortions as a tool in our effect arsenal is a huge asset!

Thanks again,

Chad

Posted by: Chad at November 25, 2006 08:24 PM

Hi Chad,

You can do that. From what I can hear of your use case this should simply work within a Sequence effects using Zoom, CubeRotate, Zoom as you say. The distortion effects extend the Flex 2 Effects framework and therefore can do everything that flex 2 effects can do. However, if you need distortion effects that aren't supplied here, you can always create your customized subclasses of either TweenEffectInstance or I'd recommend, DistortImageBase. Check out the source code of the existing effects on how to do that.

Let me know how you get on with customizations.

Best,
Alex

Posted by: AlexU at November 26, 2006 03:37 AM

To compile with newer SDKs, you must change EffectInstance to IEffectInstance in the import and overriden initInstance()'s signature.

Posted by: Tom Chiverton at December 19, 2006 02:27 AM

Nice stuff Alex.

I have a question. How would you change your code to handle going from any target to any sibling? Currently, you are going from the 'login' to the 'registration' object. I've got this kind of working where I am binding to a variable that holds the old target (and is passed into the 'targets' property), and binding to another variable that holds the new target (and is passed into the 'siblings' array). Both variables are declared as type Object.

The weird things is that my effects don't play until I have tried change to each state a couple of times, and then after that everything seems to be fine. Any ideas?

Thanks...Joe.

Posted by: Joe at December 29, 2006 08:09 AM

Hi Joe,

going from any target to any sibling(s) is possible, also with saving references to display objects in local variables. Unfortunatly, I cannot give you a "solution" based on the information you've given. I currently don't think this has much to do with a limitation in the framework classes above, but feel free to send me an email with an isolated example.

Best,
Alex

Posted by: AlexU at December 29, 2006 11:44 AM

Hi Alex,

I sent off the email you requested. I hope I sent it to the desired email...to you at Adobe. If you don't get it you can send me an email (I believe you have it) and I will respond with the attachment.

Thanks again!

Joe.

Posted by: Joe A. at December 30, 2006 11:34 AM

I just downloaded the new Flex Builder 2.0.1 and noticed that there was a compile error in Flip.as. I've posted a solution on Flexcoders and I thought I'd post one on here for you as well:

For anybody having issues with this, I have found a solution. The main problem is on line 51 of Flip.as (com.adobe.ac.mxeffects.Flip).

It seems the TweenEffect class, which Flip extends, now uses IEffectInstance instead of EffectInstance. If you change the following function to accept an IEffectInstance and fix
your import to reflect the same class name at the top of Flip.as, you should have a working version again.

Change this:

override protected function initInstance( instance : EffectInstance ) : void

To this:

override protected function initInstance( instance : IEffectInstance ) : void

And this:

import mx.effects.EffectInstance

To this:

import mx.effects.IEffectInstance

Cheers!

Brian

Posted by: Brian Dunphy at January 5, 2007 06:19 AM

Hi Brian and all previous comments regarding this:

Due to the effects framework update in Flex 2.0.1 there are two versions of the Distortion effects available now. You can download the Flex 2.0.1 compatible version here:

http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects_Flex_2_0_1.zip

Posted by: AlexU at January 5, 2007 06:29 AM

Thanks for the update :-)

Posted by: Jorge Tejada at January 13, 2007 09:15 AM

Hi Alex,

great work as usual, i was wondering if you cold point me to the right direction?
I noticed that in all your examples you can see only one element (ie. login or registration page), what i'm trying to do is to make it look like you have a bunch of papers in the box, you can see there's a document behind the one you're curently viewing.

Posted by: Alex at January 17, 2007 09:07 AM

Thanks Alex,

when the above effects take a bitmap screenshot they will maintain transparency, so if you make your view components transparent (alpha property) then the one below it should be visible. You can see this when using transparent view components with the Pop or Push effect. But I'm not really sure what (effects?) you're looking for here, though.

Cheers,
Alex

Posted by: AlexU at January 17, 2007 10:02 AM

Thanks for the reply Alex it's very much appreciated. I've actually hit a minor hurdle before attempting the sequence (zoom, rotate, zoom).

I have a viewstack whose children are components that call XML data from a server. I'm using the cube rotate effect as a hideEffect for each child. The problem is I get some bizzare overlapping of faces, initially i thought from the lag time required to make the httpservice call.

I've made a multitude of attempts (great learning experience)... creationPolicy="all", hiding the canvas and iterating through each child then showing the canvas again, etc, etc, etc.

If you have a spare moment i'd love to show you a link with the bug, yahooIM: m3_515hp :-)

Posted by: Chad at January 17, 2007 10:00 PM

Hi Chad,

if you've got an isolated example that shows that the distortion effects don't work in a certain environment, feel free to send me an email (rename a zip file to zippo i.e.).

Best,
Alex

Posted by: AlexU at January 18, 2007 02:11 AM

I'm aming to use slides similar to how they are displayed in your ViewStack3D example.
however i don't seem to be able to find menthods how to re-position distorted bitmaps inside the container - i.e for example i need to be able to move the latest element on top, preferably with some effects, and once it's on top, i would just destroy distortion so it can be used as expected.

Posted by: Alex at January 18, 2007 03:34 AM

Alex,

to "re-position" distorted bitmaps you can just call some of the methods of the Distortion class with different parameters. Checkout the DistortionExplorer on what methods are available. There's quite a few there. Looks like what you want is a new effect. Check out how the current distortion effects like Flip, CubeRotate, Pop etc are done. This can be a template for you. You might want to subclass their base class DistortBaseInstance, which provides utilities and subclasses TweenEffectInstance.

Alex

Posted by: AlexU at January 18, 2007 03:40 AM

Hey Alex, I completely love these effects, awesome job! There's just one thing that stood out to me and that is that the property 'exceedBounds' on the Flip effect doesn't seem to do anything. I looked through the code and it looks like it might have been overlooked or something because after the property is defined it is never used anywhere :/
I'd like to set that to true and get a sort of iPhone flipping effect you know :)

Thanks, and keep up the great work!
Joe

Posted by: Joe at January 19, 2007 07:30 AM

Hi Joe,

I'm planning on releasing a new version soon with this working. If it's urgent for you, send me an email and I can send you a patch with this working.

Alex

Posted by: AlexU at January 19, 2007 08:07 AM

Hi Alex, it's a great job! By the way, could there possibly be an error with this since it is using Bitmapdata? I've made an application which loads swfs somewhat like a slideshow and sometimes, though quite rarely, it throws an error coded 2015 - BitmapData related error. Could you please guide me on this? Any known issues? Thank you in advance ^^

Posted by: joshy at January 24, 2007 09:35 PM

Hi Alex. Tremendous job on these effects. Another great addition to the Flex library that is building up out there. I have run across a behavior that I hope you can provide some insight on. I am setting the scale in my Application tag (scaleX=".75" scaleY=".75")and when any of the distortion effects run, the target and siblings seem to resize to full scale. This interferes with the overall desired smoothness of the effect. Is there a way to prevent this from happening?

Thanks,

Dave

Posted by: Dave at January 24, 2007 10:08 PM

@joshy: this looks like as if the display object isn't initialized yet when the effects are drawing the bitmap. Could you investigate this further and send me an isolated example of this? I'm happy to work on any potential problems regarding this.

@Dave, same to you, can you send me an isolated example of this. Scaling isn't supported in this version, but I'm working on the next version, which will have this feature supported. I'd love to test your use case.

Best,
Alex

Posted by: AlexU at January 25, 2007 03:01 AM

Hi Alex,
Outstanding effects.
Is it possible to post the source code for : http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/

I didn't see it in the zip file...

thanks in advance!
-Al

Posted by: Al at January 29, 2007 01:11 PM

Great job on these! Thanks.

Helpful hint for others running experiencing a momentary flash of the component when using the flip effect:

In implementing the flip effect within my app, I found that the first time I flipped to a component, the component would appear full-size for just a moment, then the animation would continue. Also would happen once again after the browser window was resized.

I found the cause. The component that I was flipping to had a width and height of 100%. In the examples, the panels were given explicit heights. I found the solution was to bind the height/width of the component to the ViewStack container.

Here is my code for the ViewStack container that holds 2 panels that I flip between:

<?xml version="1.0" encoding="utf-8"?>
<mx:ViewStack
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mxeffects="com.adobe.ac.mxeffects.*">

<mxeffects:Flip
id="flipToBack"
target="{ front }" siblings="{ [ back ] }"
direction="RIGHT" duration="1000"/>

<mxeffects:Flip
id="flipToFront"
target="{ back }" siblings="{ [ front ] }"
direction="LEFT" duration="1000"/>

<dash:ToDoFront id="front"
width=" { width } "
height=" { height } "
change="selectedChild=back"
hideEffect="{ flipToBack }"/>

<dash:ToDoBack id="back"
width=" { width } "
height=" { height } "
change="selectedChild=front"
hideEffect="{ flipToFront }"/>

</mx:ViewStack>

Posted by: Tomas at February 1, 2007 10:06 AM

Have you posted the cube effectCube.mxml code yet?

Posted by: Bill White at February 3, 2007 07:22 PM

Bill,

I won't release the source to the effectCube sample. It's kind of a test harness that isn't a usefull way to show how to use the effects. In there, I'll use it basically the same way as shown in the provided SimpleFlip.mxml. You'll have a much easier time looking at this, instead.

Best,
Alex

Posted by: AlexU at February 4, 2007 11:28 AM

This is great. Sorry I didn't see your post sooner. Most excellent.

Posted by: Peter Ent at February 5, 2007 08:38 AM

Hi Alex,

I've tried to duplicate the case where I met with the error I said way above but failed.

To simplify my problem, it's like this...

It runs so well for about 2 ~ 3 days. Yet after a couple of days, (my application should run 24/7), it throws the kind of error in one of the methods like __render etc..

I can't understand why at all but it seems to have something to do with a failure to initialize the application. One thing I suspect as the cause is the operating system, which is Windows 2003 Server. Could it possibly cause this sort of error?

For your refernce, I'm loading sub-application pages through an I-Frame. So technically there cannot be a problem with this kind of initialization failure.


Posted by: joshy at February 6, 2007 01:39 AM

joshy, this error would appear when the DistortImage class of Sandy (www.flashsandy.org) would try to draw the bitmap but there is no bitmap to draw because the component was not initialized yet and is simply not there. Maybe in your app, there's a SWF, which isn't loaded at times, or isn't correctly initialized.

Posted by: AlexU at February 6, 2007 11:32 AM

I'm running the 2.01 version ... Way cool, BTW ...nothing is happening when I run the DistortionExcamples.mxml file (blank grey screen, no errors). Probably something simple, but I can't figure it out.

Thanks --

--Jake

Posted by: Jake at February 6, 2007 06:11 PM

Alex, what could possibly prevent normal initialization? Do you have any ideas on this subject? I just cannot understand why 'at times' it throws this kind of error. Please, any hints would be deeply apperciated.

Thank you

Posted by: Joshy at February 7, 2007 04:33 PM

I'm also running the 2.01(mac) version but nothing is happening when I run the DistortionExcamples.mxml file (blank grey screen, no errors). Probably something simple, but I can't figure it out.

Thanks!
Jaap

Posted by: Jaap Cammeraat at February 20, 2007 06:04 AM

Nice stuff indeed. My question: how do you flip between multiple screens with only one click?

Posted by: nick at February 20, 2007 06:53 PM

@Jaap

make sure you're using the Flex 2.0.1 version from
http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects_Flex_2_0_1.zip
I've updated the blog entry to make this clearer.

@Nick

Check out the siblings property on each effect. This is an array of display objects that you can animate through.

Best,
Alex

Posted by: AlexU at February 22, 2007 08:55 AM

Thanks Alex. I've tried that already but I get an error. I define 3 states s1, s2, s3. There is one canvas per state: c1, c2, c3. When I change the state from s1 to s3 I want to pass through s2. So I guess I should do something like this?

mxeffects:CubeRotate target="{c1}" siblings="{[c2,c3]}" direction="LEFT"

Posted by: nick at February 22, 2007 01:12 PM

Just wondering, why do I need to login/register, to see this?

I have noticed the same with previous apps on your blog. And I never registered and closed the application instead...

I am not sure, what is reason behind that?

-abdul

Posted by: Abdul Qabiz at February 23, 2007 01:17 AM

Hey never mind, haha...I thought...It was login screen, my bad.... I get it now :)

sorry for confusion....UI confused me totally :)

-abdul

Posted by: Abdul Qabiz at February 23, 2007 01:19 AM

Two more questions:
- How would one make a multiple page transition smoother, i.e. no stops between pages?
- I get a weird effect if not all the widths are the same in a "Form1 to Form2 to Form3" transition. What could be done here?

Thanks,
nick

Posted by: nick at February 24, 2007 10:05 PM

www.charlieszymanski.com/flex/CubeStack.zip

I made a simple ViewStack subclass that rotates like a cube (thanks to Alex's effects).

To switch faces you'd do something like this:

cubeStack.selection(childOfCubeStackComponent);

it'll calculate the shortest direction (forward or back) to rotate, and move on its way in that direction.

You can assign an "animationDuration" and a "blurFilter" (which takes a blur filter) for the effect.

Frankly, it needs a ton of work, and I'm not smart enough to make it very efficient (and it took me far too long to figure out), so if anyone wants to make it more flexible, have at it.

Posted by: Charlie Szymanski at February 28, 2007 07:23 AM

Here is a little function that you can throw inside a ViewStack component doubling as a cube with 4 sides that can rotate the cube automatically once or twice. You can modify it for other types of rotations but it cuts down on putting effects tags and makes nav easier.

public function rotate(direction:String, numberOfSides:Number)
{
var hideEffect:CubeRotate = new CubeRotate(this.getChildAt(this.selectedIndex));
if (numberOfSides == 2)
{
hideEffect.siblings = [this.getChildAt((this.selectedIndex+1) % 3),this.getChildAt((this.selectedIndex+2) % 3 )];
}
else
{
hideEffect.siblings = [this.getChildAt((this.selectedIndex+1) % 3) ];
}
hideEffect.direction = direction;
hideEffect.duration = 1000;
this.selectedChild.setStyle("hideEffect", hideEffect);
this.selectedIndex = (this.selectedIndex + numberOfSides) % 3;
}

Posted by: John Wright at March 5, 2007 11:28 AM

Whoops, that should be mod 4 not mod 3. Here is the whole code (tested this time ):

public function rotate(direction:String, numberOfSides:Number)
{
var hideEffect:CubeRotate = new CubeRotate(this.getChildAt(this.selectedIndex));
if (numberOfSides == 2)
{
hideEffect.siblings = [this.getChildAt((this.selectedIndex+1) % 4),this.getChildAt((this.selectedIndex+2) % 4 )];
}
else
{
hideEffect.siblings = [this.getChildAt((this.selectedIndex+1) % 4) ];
}
hideEffect.direction = direction;
hideEffect.duration = 1000;
this.selectedChild.setStyle("hideEffect", hideEffect);
this.selectedIndex = (this.selectedIndex + numberOfSides) % 4;
}


Posted by: John Wright at March 5, 2007 11:36 AM

Here is that code one more time and this time correct. Call like: cubeViewStack.rotate("LEFT", -1) or cubeViewStack.rotate("RIGHT, 1) or cubeViewStack.rotate("RIGHT", 2).

public function rotate(direction:String, numberOfSides:Number)
{
var newSelectedIndex:Number = (this.selectedIndex + numberOfSides) % 4;
if (newSelectedIndex == -1) newSelectedIndex = 3;

var hideEffect:CubeRotate = new CubeRotate(this.getChildAt(this.selectedIndex));
if (numberOfSides == 2)
{
hideEffect.siblings = [this.getChildAt((this.selectedIndex+1) % 4),this.getChildAt((this.selectedIndex+2) % 4 )];
}
else
{
hideEffect.siblings = [this.getChildAt(newSelectedIndex) ];
}
hideEffect.direction = direction;
hideEffect.duration = 1000;
this.selectedChild.setStyle("hideEffect", hideEffect);
this.selectedIndex = newSelectedIndex;
}

Posted by: John Wright at March 5, 2007 01:29 PM

Wow, nice one!

Posted by: pearl-jewelry-wholesaler at March 5, 2007 08:24 PM

I am not sure, what is reason behind that?

Posted by: pearl-jewelry-wholesaler at March 5, 2007 08:25 PM

Fantastic, i have one question, let say i make a popup:

myWindow = PopUpManager.createPopUp(this, Titlewindow, false);

now from the window it self i'd like to call a flip effect, (MAC OS X dashboard info button) So that the entire titlewindow changes do another title window.

Posted by: JamesBlunt at March 14, 2007 02:20 PM

I was able to get the DistortionEffects working only when choosing the option to compile at the server. In FlexBuilder it wouldn't compile locally. Do you know what might be the cause of this?

thanks

Posted by: Sean Lonergan at March 20, 2007 11:18 PM

I downloaded the Flex version of these distortion effects and created a flex project. However, before I even attempt to run the examples, I get some errors:

- "1046: Type was not found or was not a compile-time constant: Flip."
- "1180: Call to a possibly undefined method Flip."
- "1120: Access of undefined property DistortionConstants."

Any suggestions on how to resolve these issues?

Thanks! :)

James

Posted by: James at April 3, 2007 06:46 AM

@John Wright: Thanks for posting your solutions here!

@JamesBlunt: popups are indeed not supported currently, next version they will be, though. ;)

@James: Looks like you're missing the correct import statements.

Best,
Alex

Posted by: AlexU at April 3, 2007 11:09 AM

Alex,

I am using your source code that I downloaded from the article above. I haven't changed any code. Is there something else I need to do to set the example up properly?

Thanks,

James

Posted by: James at April 5, 2007 01:45 PM

James:

Probably need to make sure the DistortionEffects.swc is in your library path when compiling. It will work then.

Posted by: Kaligula at April 8, 2007 12:04 AM

Has anyone here used SimpleDistortion class to apply the effects.

I am trying to use it in order to avoid Flex +150K extra size SWF.

I would appreciate if someone shares it.

Posted by: John at April 11, 2007 10:54 AM

Thanks, Kaligula! I am new to using swc files. I added the DistortionEffects.swc into my library path and it works! :)

Posted by: James at April 13, 2007 12:03 PM

l think very nice article

Posted by: resimler at April 23, 2007 11:13 AM

l think very nice article

Posted by: arabalar at April 23, 2007 11:13 AM

Alex, I want to say thanks and express high gratitude. Your components, as well as the initial discussion of the distortion API is the exact thing that I Had been researching for a current Flex 2 project. While I'm a seasoned .NET developer, and an old hand at earlier versions of Flash, I've been on a rather intense "crash course" campaign with Flex in these last few days. I find my self in these situations where I need to learn more advanced stuff prior to getting the basics down. The majority of the Flex information that exists out there really pushes the Databinding ORM concepts down your throat (which, I admit was what I was obsessively focused on when I first fired up Flex builder). However, as I got involved with this project, there's not been too much documentation concerning the "fun" aspect of Flex. Which, we must all just come clean about: We develop things in Flash and Flex because it's pretty above all. The rest of the more advanced databinding/object creation is there so these products can be taken more seriously. However, Adobe's current marketing (a residue of the past two versions of Flash) has overkilled the fact that one is able to do advanced *serious* development with these tools, and forgot to mention more technical means to do the fun stuff. Well, you basically have opened the gate to the more advanced fun stuff one can create with a Flex interface, and once again I thank you for that.

Posted by: John Nelson at May 7, 2007 04:07 PM

HI! ALex
How long will U release the CubeRotate 3D effect, is it possible?

Posted by: smartkit at May 17, 2007 02:48 AM

Fantastic piece of kit by the way, provides hours of fun messing around with the code.

Just one question regarding your effectCube sample, how are you switching between more than two components in a view stack, i.e. from the login page switching to either product list on the left or quick search on the right...?

I've been trying to adapt your simpleFlip example to achieve this effect but to no evail..

Posted by: Big Andy at July 4, 2007 05:18 AM

Ignore me, I'm being stupid.
It's was so simple - a quick change to the metaData tags:

[Event("changeName1", type="mx.events.Event")]
[Event("changeName2", type="mx.events.Event")]
etc...


And then change the dispatchEvent from:
dispatchEvent( new Event( Event.CHANGE ...
To:
dispatchEvent( new Event ( "changeName1" ...

Making sure the viewStack component that contains the 2 or more links, contains the attributes changeName1="" and changeName2="" instead of simply change="".

Fantastic piece of kit, keep up the good work...

Posted by: Big Andy at July 4, 2007 08:27 AM

I can't seem to get any code to compile, there are no errors but the application is blank when it loads, I believe I have the paths set up correctly.

Posted by: Louiswu at July 6, 2007 07:10 AM

Does anyone know how to make this work if you are trying to make another form rotate other than the one where the button is located? For example, I have two containers. When the user clicks a button on container 1, container 2 rotates.

Posted by: Jimmie at July 6, 2007 12:18 PM

I have this working but for some reason when the rotation occurs, the new side shows up in the wrong location instead of appearing exactly where the original side was located. Anyone have any ideas as to why this would be?

Posted by: Jmmie at July 10, 2007 08:05 AM

hi Alex, I´m from Brazil and i think this effect awesome!! congratulations!! but i have one problem when i test this code:
i click one by one but when i go to last size (size 6 for example)and click it don´t load de size 1... I´m not a developer so i think that i could be done someone wrong in code. would you like to help me? i will be so grateful for that.

Posted by: anderson nunes at July 10, 2007 05:35 PM

hello Alex

thanks for the code, I managed to get it working but with 4 sides, now I would like to add 2 sides more( top/bottom of the cube). Where and how do I need to proceed? Also, I would like to make a button with "home" pointing to the first side of the cube, how would I do that.

Anyone?

thanks

ali

Posted by: ali at August 2, 2007 07:57 PM

Good article!Thanks for your code.

Posted by: Samson at August 9, 2007 08:03 PM

Anyone able to get the SimpleDistortion class working in Flash CS3 Pro? If so, some example would really help.

Posted by: scotto at August 21, 2007 06:28 AM

Thank you for the useful informations. I really enjoyed reading all of your posts. It?s interesting to read ideas, and observations from someone else?s point of view? makes you think more. So please keep up the great work. Best regards...

Posted by: Check Page Rank at September 8, 2007 05:06 AM

Thanks for this very good article ... Can i translate this and insert on my site in Poland? ... Thanks and Greetings

Posted by: Buy photo at September 8, 2007 05:06 AM

hi

i am working on flex 3 Beta. can u guys help me to put these effects in that. also i want to ask, how to give same effect to more than one panel in an application? i m trying to give dissolve, iris effects but only one of the panel is displaying the effect. pls mail me at pareekvaibhav@gmail.com

thanx in advance

Posted by: vaibhav at September 11, 2007 12:22 AM

Hi,

This stuff is great! Can I use it with Flex Builder 3?

Please advice.
Thanks!

Posted by: flexdeveloper at September 20, 2007 07:11 PM

where is api ?

Posted by: songhuan at October 9, 2007 09:03 PM

Hi Guys,

BTW, great application Alex. Since there are a couple of questions asked how to
Get Distortion Effects code up and running, well here are the steps.

Flex IDE: 2.0.1

Step 1: Download the code from http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects.zip

Step2: Unzip the zip file contents in a folder. The folder structure is as follows
a) bin
b) examples
c) Source
d) license.txt and
e) readme.txt

Step3: Create a new project in your Flex builder

Step4: Paste all the above folders in the main project you created in Flex IDE directly.

Step5: Right click on the project Properties Flex Build Path  Library Path  Add SWC  At this point Browse “DistortionEffects.swc” in bin folder.

Step6: Copy-Paste all the folder contents of “Examples” to the main project folder in Flex IDE. (You may want to delete folder “examples” and its contents after pasting) .Then set “DistortionExamples.mxml” as the default application.

Press F11. We are ready to go

Posted by: Pratap Ramanujam at October 18, 2007 02:28 AM

Hi Guys,

BTW, great application Alex. Since there are a couple of questions asked how to
Get Distortion Effects code up and running, well here are the steps.

Flex IDE: 2.0.1

Step 1: Download the code from http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects.zip

Step2: Unzip the zip file contents in a folder. The folder structure is as follows
a) bin
b) examples
c) Source
d) license.txt and
e) readme.txt

Step3: Create a new project in your Flex builder

Step4: Paste all the above folders in the main project you created in Flex IDE directly.

Step5: Right click on the project -->Properties -->Flex Build Path --> Library Path --> Add SWC --> At this point Browse “DistortionEffects.swc” in bin folder.

Step6: Copy-Paste all the folder contents of “Examples” to the main project folder in Flex IDE. (You may want to delete folder “examples” and its contents after pasting) .Then set “DistortionExamples.mxml” as the default application.

Press F11. We are ready to go

Posted by: Pratap Ramanujam at October 18, 2007 02:29 AM

Hi

Cool stuff you made. Is it possible to use it with flash and not flex? Any example?

Thanx in advance!

Best regards/ Flamman

Posted by: flamman at October 22, 2007 11:53 AM

l think very nice article

Posted by: resim at November 2, 2007 04:30 AM

Hi Alex,

Great component.

And for those who are wondering how to use it with a tab bar, this might help

public function clickHandler()
{
var direction:String = "RIGHT";
var pageStack = allpages.loginViewStack;
var myhideEffect:CubeRotate = new CubeRotate(pageStack.getChildAt(pageStack.selectedIndex));
myhideEffect.target=pageStack.getChildAt(pageStack.selectedIndex);
myhideEffect.siblings= new Array( pageStack.getChildAt(topbuttonbar.selectedIndex));
if (topbuttonbar.selectedIndex < pageStack.selectedIndex ) {
direction = "LEFT";
}
myhideEffect.direction = direction;
myhideEffect.duration = 1000;
pageStack.getChildAt(pageStack.selectedIndex).setStyle('hideEffect',myhideEffect);
pageStack.selectedIndex=topbuttonbar.selectedIndex;


}

Posted by: Venkat at November 4, 2007 10:24 AM

The distortion effects looks pretty cool, thanks for sharing, i will sure try to use that :)

Posted by: Rpg games at November 7, 2007 07:46 PM

Alex,

you are a God! OK....maybe a small deity.

-vinnie

Posted by: Vinnie at November 12, 2007 02:29 PM

thank you very muck

Posted by: Msn Nickleri at November 13, 2007 11:41 PM

in one word i will said that is Just Great !!!

Posted by: Z.Tariq at November 19, 2007 08:37 AM

Hello.


What a pretty good work Alex! It looks so nice.
I'm a flex beginner since few mounthes and to test these effects, i've only as a first time precisely do what is written in : "Post by: Pratap Ramanujam at October 18, 2007 02:29 AM".

But i'm directly faced with issues from compiler wich notify me : "unable to load SWC DistortionEffects.swc: multiple points" twice based on : xmlns:distortion="view.distortion.*".

Anybody for a clue ?? :)

Thanks a lot!

Posted by: Nomans at November 19, 2007 09:36 AM

Thanks very much!
Regards,
felsefe forum edebiyat

Posted by: sam at November 21, 2007 10:54 AM

Nice work Alex, thanx.

Posted by: efe at November 26, 2007 12:20 PM

i just cant get it >.<

Posted by: carlos at November 30, 2007 04:23 AM

Pleasure.. i got it!!! i only install the Flex 2.0.1 update 3 days trying thx to all post

Posted by: carlos at November 30, 2007 04:34 AM

Has anyone had the problem of the cube rotate effect appearing on top of something popped up using the popup manager?

I dug around the code, and the Distortion effect seems to be using the parent as the target. I am popping up a window with Application.application as the target, but the effect still appears to go infront of my window.

Any ideas?

Posted by: bwise at December 4, 2007 01:03 PM

Nice stuff Alex.

I have a question. How would you change your code to handle going from any target to any sibling? Currently, you are going from the 'login' to the 'registration' object. I've got this kind of working where I am binding to a variable that holds the old target (and is passed into the 'targets' property), and binding to another variable that holds the new target (and is passed into the 'siblings' array). Both variables are declared as type Object.

The weird things is that my effects don't play until I have tried change to each state a couple of times, and then after that everything seems to be fine. Any ideas?

Thanks...Joe.

Posted by: örgü at December 5, 2007 04:13 AM

ORG,

I think my example of the tab bar answeres your questiion
It works for any of the tabs clicked on the tab bar.

NOrmans,

you got to add the distortioneffects.swc to your flex path.Right -click on ur project -> properties
You get an add swc button somewhere. use it :-)

Posted by: Venkat from INDIA at December 13, 2007 01:12 AM

I just downloaded the new Flex Builder 2.0.1 and noticed that there was a compile error in Flip.as. I've posted a solution on Flexcoders and I thought I'd post one on here for you as well:

Posted by: sharp aquos at December 19, 2007 01:20 PM

Thanks, Alex. Very cool :)

PS. Your post seems to have gotten some spam ^^^

Posted by: Aral Balkan at January 6, 2008 07:49 AM

I have a small issue with the library.

I'm using the cube effect to change from one view to another in my main ViewStack. The views are complete pages with a lot of components in them. The first time I switch to a view, the animation is way too short, sometimes there is no animation at all. I think this is because the target view is not loaded yet so the animation can't make a bitmap of it and start the animation early. The second time I switch to the view, or I switch back to the first one, everything is smooth!

I guess I should preload the target view in a way or another so the animation is smooth even the first time.. But that preloading should be hidden to the user! Any thoughs, ideas, tricks?

Thanks a lot for those cool effects!

Posted by: tata668 at January 31, 2008 07:25 AM

Wow! nice work I love the cube effect! WHERE CAN I FIND A JAVA VERSION OF THE CUBE EFFET? ANY IDEAS OR ATLEAST THE ALGO?

THANKS!

Posted by: sean at February 13, 2008 04:25 PM

Post a comment




Remember Me?