Ruben’s blog

Hey!

That class is quite neat, used it a couple of weeks ago. Good werk porting it.

Hugs and kisses

I think Alex Uhlmann from Adobe already ported the same code to AS3, and used it in his distortion effects package. Check it out:
http://weblogs.macromedia.com/auhlmann/archives/2006/11/download_distor.cfm

@Erik: Thanks for the compliment Erik!

@Arul: Thanks for the heads-up. Thomas Pfeiffer had already told me that Alex (and Carles Sanz too) had also ported the distortion class to AS3.
You can find an overview of the different versions on the Sandy blog:
sandy.media-box.net/blog/distortimage-in-as3.html

Your class looks really cool. I’m trying to use it to build a photo slider where I want to show images distorted based on their position on the screen.
However, I cannot figure out how to set the source dynamically. You embed the source at the beginning but I cannot figure out how to set it with parameters. I’m trying to do something like this: myclass.source=photos[i].source;
Thanks

Thank you Damian. As for your question, it really depends on what your array-value (photos[i]) is, more specifically, it depends on what class it is an instance of.
Please reply to my email if you would like to discuss this any further..

Excellent, thanks for the code and the demo !

Thank you very much! It looks great!
I am trying to use the class in Flash CS3, but it does not work well. I am wondering if you have any Flash samples which could demonstrate me how to use it. Thank you very much!

Thanks for the kind words Rainbelt. I originally ported this class for a Flex project so I haven’t tested it for Flash CS3 yet, although I am planning to give it a go soon. I’ll let you know if I come any further..

Firstly, a big thank you to Ruben for his AS3 port of the Sandy distortImage class. Secondly, this is for Rainbelt and all Flash CS3 users. I have linked a working version of FlashCS3 files using the Ruben’s DistortImage.as.

http://www.flashteam.com.au/dev/DistortImageAS3FlashCS3.zip

I hope it will help some one as I couldn’t find a working version myself.

Thank you Tam! I updated my post with a link to your zip-file..

Wel done Rubben!
Didn’t know you liked 3D while at TFE…

see you…

Hey Fabrice! Well actually I secretly wanted to do 3d, but I knew there was this guy who would always outdo me on that field

But seriously, I’m not sure about 3d, don’t think it’s my thing. I ported this class because I need some realistic transformation for the hardcover feature of the Book component..

See you around man!

hi, 10x for the class it save me a lot of hours…. but have face few bugs.
Here is more info, and source, http://theflashblog-bg.com/_projects/2007/08/koftii/

How would you place an image with a component such as a VBox? For instance, I made simple custom componet with the code (assets.smBox)

Then I tried to distort it from the main application file with the following functions

public function init():void{
var myBox:smBox = new smBox();
this.addChild(DisplayObject(myBox));

//for distortion
var distortion:DistortImage = new DistortImage(100, 150, 3, 3);
holdBMD = new Bitmap(getUIComponentBitmapData(myBox));
distortion.setTransform(this.myVBox.graphics, holdBMD.bitmapData, tl, tr, br, bl);
}

//Distortions
private function getUIComponentBitmapData( target : UIComponent ) : BitmapData
{
var bd : BitmapData = new BitmapData( target.width, target.height );
var m : Matrix = new Matrix();
bd.draw( target, m );
return bd;
}

All that shows up is the placeholder for the distortion, but no vBox. Do you know why the VBox is treated differently that the UIcomponent?

PCarraway

Seems to me the distortion is not entirely accurate to create the illusion of 3D. Right now I am doing some research to create a similar effect of the itunes album cover flip. Tesselating the imagery into triangles seems to be the concensus way of distorting the images so that they appear turned, but no one seems to have correctly faked it that I have found.
But I have a particular image that has circular imagery and it obviously does not “distort” correctly. I compared the image to the distortion tool in Photoshop to confirm. The example you have, shows what I think is the issue. It is a little difficult for me to explain but if you were to put the top right and bottom right corners inward to fake the illusion that the image is turned, you will notice that the width of the traingles from left to right stay the same.
To maintain accuracy, wouldn’t the imagery allocated to these triangles become smaller and smaller (focal length) from left to right in the example that I “attempted” to describe? This right side should be “further away” so the imagery should be smaller in width as well the further you go “back.” Hopefully this made sense…Currently looking at the class to see if I can come up with a solution but I doubt I will be able to.

@PCarraway: First this; you probably don’t have to cast your smBox to a DisplayObject (that assuming that its already extending DisplayObject directly or indirectly).

Now about your problem, are you absolutely sure that the problem lies with the DistortImage class and not within the rest of your code?

@Anonymous: I know the code in the DistortImage class merely ‘fakes’ a 3d perspective. Do bare in mind that DisstortImage can also be used for other purposes than simulating 3d views though.

Thisi is perfect.I was lookig for this for a week.But your blog is not opened from Turkey.At last today I could visit your site and I take your application source;Really it is very very nice…

Hi Ruben, great work !
Is there any chance u make a comment on how to use non-embedded images ? Like images dynamically loaded in a mx:Image component ? Would be great appreciated.

@muhtesem: Cool, great to hear this helped you out

@Banshee: Check out the following post, I hope it helps:
Using DistortImage with dynamically loaded images

Just wanted to give those that want a CS3 version that allows tweening a heads up that I’ve expanded on Tam Ho’s example and made a DistortionTweener. You can read about it more here:

http://evolve.reintroducing.com/2007/11/18/as3/as3-distortiontweener/

Thanks Matt, I’ll check it out

Thx Ruben,

this helps alot !

cheers,

B

Totally brilliant, and a small elegant class to boot. Thanks a million!

Finally had an excuse to use this and it works like a dream. Thanks a lot.

Congratulations Ruben, that’s a great job.
I’ve been trying for some time now to change the places of the drag buttons.
So the idea is :
1st : “drag” the drag button with the mouse to the place I chose.
2nd : use your code to distort your object with the newly placed dragging button.
I have failed so far.
Anyone got on idea on this ? Ruben maybe (I’m sure)
Cheers

I think it would be even greater if one could chose where to place the white squares that command the distortion, any tips ont that, I am stuck.

Hi, thnx a lot for the script,
but I’ve got another question:
Is it possible to distort a movieclip
(with a short movie playing in it)????

If that’s possible, does anyone want to post the script for it?

thnx a bunch

Soulax

anyone got a working link for DistortImageAS3FlashCS3.zip?

Need the DistortImageAS3FlashCS3.zip!! Please repost this!

same here!!

your totally awesome dude.. wish to see more stuff from you.. goodLuck for the best

hey man, thumbs up it’s exactly what I was looking for !!

Oh Brilliant!

Kudos to you. Keep stuff like this coming.

- Tahir

Great work. Thank you for sharing.

????????????????GOOGLE CODE ??

Hi Ruben,

Nice class! Can i also use this on dynamic textfields?

Cheers Sid

Hey Sid,

I guess you could, provided you’d take a snapshot (BitmapData) of the text..

– Ruben