Neuro Productions

Envelope Distort with ActionScript

// July 6th, 2009 // Experiments, Source code & tutorials

You may know the Envelope Distort tool In Illustrator. I thought it would be nice to create the same effect with ActionScript, and so I did…

» View Envelope Distort test

Basically, I made a raster with drawDriangles/bitmapFill and placed the vertices on Qubic Beziers.

Thanks to Paul Tondeur for his ActionScript version of the Qubic Bezier formula:

var anchor1 : Point;
var anchor2 : Point ;
var control1 : Point ;
var control2 : Point ;
var position : Number; // between 0 and 1
 
var posX : Number = Math.pow(position, 3) * (anchor2.x + 3 * (control1.x - control2.x) - anchor1.x)
+ 3 * Math.pow(positie, 2) * (anchor1.x - 2 * control1.x + control2.x)
+ 3 * position * (control1.x - anchor1.x) + anchor1.x;
 
var posY : Number = Math.pow(position, 3) * (anchor2.y + 3 * (control1.y - control2.y) - anchor1.y)
+ 3 * Math.pow(position, 2) * (anchor1.y - 2 * control1.y + control2.y)
+ 3 * position * (control1.y - anchor1.y) + anchor1.y;

Source code: envelope_distort_source

Related Posts

Nurbs!

Custom Brushes with ActionScript

Matrix3D Perspective Projection

Image Vectors – ConvolutionFilter Fun

Pushing data to Flash using binary sockets

10 Responses to “Envelope Distort with ActionScript”

1. Ronny Karam says:

   July 6, 2009 at 2:09 pm

   Great post. The demo looks good. I’ll check the code.

   Thanks.
2. Fabrice Closier says:

   July 6, 2009 at 2:21 pm

   Opening to nurbs? Nice piece!
3. Kris says:

   July 6, 2009 at 2:54 pm

   Using this for nurbs is actually a great idea. I’m going to try that. Thanks Fabrice!
4. Nurbs! | Neuro Productions says:

   July 7, 2009 at 7:57 pm

   [...] my previous post about Envelope distortion Fabrice Closier made a short but very interesting comment. He suggested nurbs. With nurbs a 3D mesh [...]
5. Brian Russel Davis says:

   September 27, 2009 at 12:31 am

   Can you post the source for the text version of this — I modified it but can’t seem replicate the vector effects by redrawing the bitmap data from a text field.
6. kris says:

   September 27, 2009 at 11:30 am

   Hi Brain,
   I don’t have a vector version for this, the text in the example is just a transparent bitmap.
   If you want to use text, you can do something like this:

   var tf:TextField;
   var bmd:BitmapData =new BitmapData(tf.width,tf.height,true,0);
   bmd.draw(tf);
   ….beginBitmapFill(bmd, null, false, true);

   If you don’t want to use bitmaps, but do it pure vector, you should check out this: http://www.lidev.com.ar/?p=258
7. Asa says:

   November 23, 2009 at 8:55 am

   this is grate tool. nice work

   can any one please help me to work on flash as3 NOT in Flex. and also with a external loaded image to movie

   thank you very much
   Asanka
8. bijoy says:

   January 23, 2010 at 9:05 am

   Hi

   if any body want to add text pls change lines of code as follows,

   var myText:TextField = new TextField();
   myText.text = “Republic of Code”;
   myText.textColor = 0xFF0000;
   bitmapdata=new BitmapData(myText.width,myText.height,true,0);
   bitmapdata.draw(myText);
   bitmap = new Bitmap();
   bitmap.bitmapData = bitmapdata;
9. SK Imdad says:

   March 12, 2010 at 4:02 pm

   Great way to smoothly distort Bitmap Data. Everything can distorted using this technique.
   I have been searching for exactly this thing and I wasted a lot of time for coding in CS3. Finally I get the solution from you.

   Thank You a lot
   Imdad
10. ademus says:

    May 26, 2010 at 5:55 pm

    GG !!
    to Asa : flash 10/AS3 source there => http://www.softpeople.fr/Divers/envelope_distort.zip