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

Share:

Post on Twitter
Share on Facebook
Bookmark this on Delicious
Share on LinkedIn
Stumble Now!
Digg This
Reddit This
Vote on DZone

8 Responses to “Envelope Distort with ActionScript”

  1. Ronny Karam says:

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

    Thanks.

  2. Opening to nurbs? Nice piece!

  3. Kris says:

    Using this for nurbs is actually a great idea. I’m going to try that. Thanks Fabrice!

  4. [...] my previous post about Envelope distortion Fabrice Closier made a short but very interesting comment. He suggested nurbs. With nurbs a 3D mesh [...]

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

    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:

    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:

    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;

Leave a Reply