You can distort MovieClips in Flash 8 using the Matrix class. But this will only allow you to do skewing and not true 3D perspective. Well there is a great 3D Actionscript library called Sandy that allows for real 3D effects. One of the classes is called DistortImage and it does just what its name implies. You give it four points and it will strech and skew your MovieClip anyway you want. In the example below I used Fuse to animate those four points so the distortion is constantly moving. I also added a slider which controls the speed of the animation. This is cool stuff so be sure to check out Sandy! The AS code is also listed below.
[as]import flash.display.BitmapData;
import sandy.util.DistortImage;
import com.mosesSupposes.fuse.*;
ZigoEngine.register(Fuse, PennerEasing, FuseFMP);
var fakes:Array = new Array();
var sp:Number = 1;
for(var i=0;i<4;i++)
{
fakes.push(this.createEmptyMovieClip(“f”+i,i+10));
}
var bmd:BitmapData = new BitmapData(photo._width, photo._height);
var clip:MovieClip = this.createEmptyMovieClip(“holder”, 1);
var di:DistortImage = new DistortImage(clip, bmd, 5, 5);
di.texture.draw(photo);
di.setTransform(25,33,80,45,67,23,9,23);
function moveFakes():Void
{
for(var i=0;i<4;i++)
{
var f:Fuse = new Fuse();
f.push({target:this["f"+i],x:Math.random()*Stage.width, y:Math.random()*Stage.height, time:sp, ease:”linear”});
if(i == 0) f.push({func:moveFakes, scope:this});
f.start();
}
}
this.onEnterFrame = function()
{
di.setTransform(f0._x, f0._y, f1._x, f1._y, f2._x, f2._y, f3._x, f3._y);
di.texture.draw(photo);
}
moveFakes();
var sl:Object = new Object();
sl.onChange = function(ev)
{
_root.sp = ev.value;
}
speed.addListener(sl);[/as]
Lee
Hey Lee, bow before you – as always
Nice example on how to combine two successful libraries. I already knew Sandy but didn’t take the time do some tests on my own.. Maybe I should start with 
lol. I have been playing with the Distort Image, and Fuse classes all day. It’s for a project I am hopeing to do my first video tutorials on. It’s pretty funny that you posted this today. Nice work.
You better hurry up Edward! I feel a DistortImage tutorial in the not so near future
Don’t worry, Distort Image is a small part of the master plan. The more I look at what I intend to create, it looks like it may be a 5 part tutorial series.
Yay for Sandy, i’ve been passively trying to use this for a few weeks now, couldnt get it to work for some reason.
Yeah, DistortImage is awesome. I’m using it with a custom 3D engine for this work-in-progress:
http://www.airtightinteractive.com/projects/photospace/
Click on the images or press the spacebar to navigate.
That is awesome Felix!
Hi there,
Cool example. Quick question. Is that code supposed to work if I just paste it into a new document? I get the following errors:
**Error** /Users/marcus/Desktop/3D Flash/FlashClassPath/sandy/util/DistortImage.as: Line 238: The same member name may not be repeated more than once.
public var points:Array;
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 10: Unexpected ‘lt’ encountered
for(var i=0;i<4;i++)
Thanks,
/ marcus
Felix, that’s wicked!
I’m working on something a bit similar to your project, i.e. positioning photos and images in a 3D space.
Did you find it better to use DistorImage than mapping photos to 3D objects?
Well done mate,
/ m
very nice but i’ve tried several times that link to sandy and it’s not working! can someone send me the distorting image.as?
thank u
> http://www.flashsandy.org/blog/distortimage-20-the-fastest-way-to-freely-distort-image-with-flash-in-actionscript.html
Thomas P.
This is all great,
but can someone tell me where the hell I’m suppost to put all the Sandy folders??????
At least has an exe file and installed itself.
I can;t find any documentation on this simple step anywhere!
The Sandy folders dont have to go in a specific place
Just go : Edit/Preferences/Actionscript then click the “actionscript 2.0 settings” button. Then click the little button that looks like a target, browse to where-ever you have you sandy folder and it should work.
P.S. Distorting Image kicks ass!!
I wanted to thank you for the DistortImage tutorial. It came in handy as I was building this
Hey, the DistortImage class is great. Is there a way to anti-alias images though? Mine aren’t crisp & clean like on this example. I’ve tried everything, even including smoothing in the copy of the image it creates, but it just makes it “foggy”. Thanks!
Hey, like James i have the crisp problem as well, but i’ve also got another problem. I’ve got a round symbol that i want to distort, but the part where it should be transparent, turns into white. not really what i hoped for. Can anybody help me out on this one?
‘stop putting your tongue in my ear’
Reply to Tresken:
make bitmapData to support per-pixel transparency (last parameter in BitmapData constructor)-
var bmd:BitmapData = new BitmapData(500, 375, true,0x00CCCCCC);
Hello,
Tresken and Anatoli, to anti-alias the image, you need to do a small change in the DistortImage class:
Go to line 205 and change the last paramter from ‘false’ to ‘true’, this way:
c.beginBitmapFill(texture, sM, false, true);
t++;
Leonardo Braga Nogueira
It’s fantastic, thanks for this example.
Hi
I seem to be getting the same errors as Marcus (above) got in October last year. Sorry if I’m being completely stupid
Marcus said:
“**Error** /Users/marcus/Desktop/3D Flash/FlashClassPath/sandy/util/DistortImage.as: Line 238: The same member name may not be repeated more than once.
public var points:Array;
**Error** Scene=Scene 1, layer=Layer 1, frame=1:Line 10: Unexpected ‘lt’ encountered
for(var i=0;i
Amazing how many flash developers are independently developing the same thing. You just have to watch the performance issues on slower machines. the distort class is certainly a cornerstone to success in our 3d development.
Hi, I still don’t get it where I can find the correct DistortImage.as for Sandy. Should I just copy the class from here: http://sandy.media-box.net/blog/distordimage-the-way-to-distord-bitmaps-by-code.html and save it as DistortImage.as? You see I’m a beginner with these classes…
same here downloading with SVN and the DistortImage.as is not even in the packages?!
Where I can get the good DistortImage.as file? Somebody?
Hello, I am having so much trouble with this library and what I want to do. I basically want to load a JPEG from my desktop and then distort the image in flash. Below is my code..why does it not work??
Please help ;(
Thank you again
import flash.display.BitmapData;
import flash.geom.*;
import DistortImage;
var targetImgURL:String = “D://DSCF0264.JPG”;
//create the picture clip
var mc:MovieClip = this.createEmptyMovieClip(“picture_mc”,this.getNextHighestDepth());
//create the image holder
this.picture_mc.createEmptyMovieClip(“image_mc”,3);
this.picture_mc.image_mc.loadMovie(targetImgURL);
var b:BitmapData = new BitmapData(picture_mc._width, picture_mc._height);
//distort
var d:DistortImage = new DistortImage ( mc, b, 0, 0 );
d.setTransform(5,5,5,200,250,170,250,35);
d.texture.draw( picture_mc );
how many flash developers are independently developing the same thing,i iike it