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.

106 Responses to Download Distortion Effects – From MAX 2006

  1. Woa.
    These look *great*.

  2. Jack says:

    This effects are great!, thanks

  3. stef says:

    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

  4. AlexU says:

    stef,
    there are various examples included in the download. Check out the examples folder. Read the readme.txt
    Cheers,
    Alex

  5. Alberto says:

    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

  6. Alex, Been a fan since animationpackage 1.0, great stuff as always – thanks!

  7. Marcel Fahle says:

    Wow, nice one!
    Gruß aus Bochum
    Marcel

  8. Alex, definately the full chumby – thanks for the example code.
    Andrew

  9. 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

  10. AlexU says:

    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

  11. Firdosh Tangri says:

    Hey Alex,
    I emailed you the example file and source code. Hope you got it 🙂
    cheers
    firdosh

  12. Patrick says:

    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

  13. Matt Freer says:

    Nice work Alex!
    Cheers
    Matt

  14. Patrick says:

    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

  15. lee says:

    thanks

  16. Patrick says:

    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

  17. Chad says:

    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

  18. AlexU says:

    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

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

  20. Joe says:

    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.

  21. AlexU says:

    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

  22. Joe A. says:

    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.

  23. Brian Dunphy says:

    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

  24. AlexU says:

    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

  25. Jorge Tejada says:

    Thanks for the update 🙂

  26. Alex says:

    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.

  27. AlexU says:

    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

  28. Chad says:

    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 🙂

  29. AlexU says:

    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

  30. Alex says:

    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.

  31. AlexU says:

    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

  32. Joe says:

    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

  33. AlexU says:

    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

  34. joshy says:

    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 ^^

  35. Dave says:

    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

  36. AlexU says:

    @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

  37. Al says:

    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

  38. Tomas says:

    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>

  39. Bill White says:

    Have you posted the cube effectCube.mxml code yet?

  40. AlexU says:

    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

  41. Peter Ent says:

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

  42. joshy says:

    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.

  43. AlexU says:

    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.

  44. Jake says:

    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

  45. Joshy says:

    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

  46. Jaap Cammeraat says:

    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

  47. nick says:

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

  48. AlexU says:

    @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

  49. nick says:

    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”

  50. Abdul Qabiz says:

    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

  51. Abdul Qabiz says:

    Hey never mind, haha…I thought…It was login screen, my bad…. I get it now 🙂
    sorry for confusion….UI confused me totally 🙂
    -abdul

  52. nick says:

    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

  53. http://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.

  54. John Wright says:

    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;
    }

  55. John Wright says:

    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;
    }

  56. John Wright says:

    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;
    }

  57. I am not sure, what is reason behind that?

  58. JamesBlunt says:

    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.

  59. Sean Lonergan says:

    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

  60. James says:

    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

  61. AlexU says:

    @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

  62. James says:

    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

  63. Kaligula says:

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

  64. John says:

    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.

  65. James says:

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

  66. resimler says:

    l think very nice article

  67. arabalar says:

    l think very nice article

  68. John Nelson says:

    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.

  69. smartkit says:

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

  70. Big Andy says:

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

  71. Big Andy says:

    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…

  72. Louiswu says:

    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.

  73. Jimmie says:

    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.

  74. Jmmie says:

    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?

  75. anderson nunes says:

    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.

  76. ali says:

    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

  77. Samson says:

    Good article!Thanks for your code.

  78. scotto says:

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

  79. 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…

  80. Buy photo says:

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

  81. vaibhav says:

    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

  82. flexdeveloper says:

    Hi,
    This stuff is great! Can I use it with Flex Builder 3?
    Please advice.
    Thanks!

  83. songhuan says:

    where is api ?

  84. Pratap Ramanujam says:

    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

  85. Pratap Ramanujam says:

    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

  86. flamman says:

    Hi
    Cool stuff you made. Is it possible to use it with flash and not flex? Any example?
    Thanx in advance!
    Best regards/ Flamman

  87. resim says:

    l think very nice article

  88. Venkat says:

    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;
    }

  89. Rpg games says:

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

  90. Vinnie says:

    Alex,
    you are a God! OK….maybe a small deity.
    -vinnie

  91. Msn Nickleri says:

    thank you very muck

  92. Z.Tariq says:

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

  93. Nomans says:

    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!

  94. sam says:

    Thanks very much!
    Regards,
    felsefe forum edebiyat

  95. efe says:

    Nice work Alex, thanx.

  96. carlos says:

    i just cant get it >.<

  97. carlos says:

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

  98. bwise says:

    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?

  99. örgü says:

    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.

  100. 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 🙂

  101. sharp aquos says:

    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:

  102. Aral Balkan says:

    Thanks, Alex. Very cool 🙂
    PS. Your post seems to have gotten some spam ^^^

  103. tata668 says:

    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!

  104. sean says:

    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!

  105. Bruno says:

    hello guys, I ask a little help here, the example I keep working, that is wrong?
    <?xml version=”1.0″ encoding=”utf-8″?>
    <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” currentState=”s1″ xmlns:mxeffects=”com.adobe.ac.mxeffects.*”>
    <mx:states>
    <mx:State name=”s1″>
    <mx:AddChild position=”lastChild”>
    <mx:Canvas x=”169″ y=”73″ width=”374″ height=”238″ borderColor=”#9B4748″ backgroundColor=”#9C3D3D” id=”cs1″ hideEffect=”{adelante}”>
    <mx:Button x=”154″ y=”108″ label=”Avanzar” id=”avanzar” click=”this.currentState=’s2′”/>
    </mx:Canvas>
    </mx:AddChild>
    </mx:State>
    <mx:State name=”s2″>
    <mx:AddChild position=”lastChild”>
    <mx:Canvas x=”169″ y=”73″ width=”374″ height=”238″ borderColor=”#9B4748″ backgroundColor=”#3D429C” id=”cs2″ hideEffect=”{atras}”>
    <mx:Button x=”154″ y=”108″ label=”Retroceder” id=”retroceder” click=”this.currentState=’s1′”/>
    </mx:Canvas>
    </mx:AddChild>
    </mx:State>
    </mx:states>
    <mxeffects:CubeRotate target=”{cs1}” siblings=”{[cs2]}” direction=”LEFT” id=”adelante” duration=”1000″/>
    <mxeffects:CubeRotate target=”{cs2}” siblings=”{[cs1]}” direction=”RIGHT” id=”atras” duration=”1000″/>
    </mx:Application>
    CubeRotate need to apply the effect of a change to another state, can do, he could give me a simple example? I need to make a presentation on my work, my boss ask me, any help is welcome .. thanks …