DistortImage
Today I had a little chat with Thomas Pfeiffer, who created the Sandy 3D engine.
A while ago I came across his AS2 image-distortion class. Remembering that while implementing hardback-pageflip functionality in my Book component, I decided to port the class to AS3.
Thomas was so kind to give me permission to publish my AS3 version of his class on my blog, so here it is:
UPDATE:
Tam Ho posted this link to a Flash CS3 example in the comments, here it is:
flashteam.com.au/dev/DistortImageAS3FlashCS3.zip
April 28th, 2008 | Quote
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
March 3rd, 2008 | Quote
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.
February 29th, 2008 | Quote
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
February 18th, 2008 | Quote
Finally had an excuse to use this and it works like a dream. Thanks a lot.
February 18th, 2008 | Quote
Totally brilliant, and a small elegant class to boot. Thanks a million!
December 7th, 2007 | Quote
Thx Ruben,
this helps alot !
cheers,
B
November 20th, 2007 | Quote
Thanks Matt, I’ll check it out
November 19th, 2007 | Quote
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/
November 17th, 2007 | Quote
@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
November 9th, 2007 | Quote
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.
September 17th, 2007 | Quote
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…
September 16th, 2007 | Quote
@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.
September 11th, 2007 | Quote
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.
September 5th, 2007 | Quote
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
August 19th, 2007 | Quote
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/
August 11th, 2007 | Quote
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!
August 10th, 2007 | Quote
Wel done Rubben!
Didn’t know you liked 3D while at TFE…
see you…
August 7th, 2007 | Quote
Thank you Tam! I updated my post with a link to your zip-file..
August 5th, 2007 | Quote
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.
August 1st, 2007 | Quote
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..
July 29th, 2007 | Quote
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!
July 24th, 2007 | Quote
Excellent, thanks for the code and the demo !
July 20th, 2007 | Quote
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..
July 16th, 2007 | Quote
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
July 4th, 2007 | Quote
@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
July 4th, 2007 | Quote
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
July 4th, 2007 | Quote
Hey!
That class is quite neat, used it a couple of weeks ago. Good werk porting it.
Hugs and kisses