Fading to a Vanishing Point in Flash, Programatically (of course)

Question

I'm trying to do a vanishing Star Wars type thing like this, but programatically.

Most of what they've done is easy to program (make a motion tween), but I wish to generate the text-based graphic programatically as well (from text using a dynamic text obj, for example).

The question, as I see it (but I'm open to other ways of seeing it, of course) is: is there any way to get a slanty-sided rectangle from my dynamic-text object? The scale9grid mentioned here will not do it, I'm quite sure. I want to specify four points to get a rhombus (if that's what it's called).

Answer 1

If you are compiling for flash player 10 (which requires CS4 or a recent flex sdk), you can just rotate the text field in 3d:

text.rotateX = -45;

There are a few more issues with this, such as you need to use font embedding, and getting the vanishing point in the center of the field.

Doing this in flash player < 10 with bitmaps is also possible, if you are masochistic, and don't mind some vertical aliasing. The idea would be to use BitmapData.draw() to draw each line with a height 1 clipping rect and a transform to do the perspective division. Eg (in flex):

class Main extends Sprite
{
    [Embed(systemFont="Arial", fontName="embedFont", mimeType="application/x-font")]
    var embedFont:Class;

    public function Main()
    {
        var text:TextField = new TextField();
        text.defaultTextFormat = new TextFormat("embedFont", 30);
        text.embedFonts = true;
        text.autoSize = TextFieldAutoSize.LEFT;
        text.text = "Hello, world\nHow nice\nto have\nmultiple\nlines!";
        var bmp:BitmapData = new BitmapData(150, 100);

        for (var i:int = 0; i != bmp.height; ++i) {
            var m:Matrix = new Matrix();
            // x-division, change 0.8, 0.2 to change scale increase, scale at top
            m.a = i*(0.8/bmp.height)+0.2;
            // horizontal center
            m.tx = bmp.width * (1-m.a) / 2;
            // y-division, and align text to bottom
            m.ty = (bmp.height-i)/m.a - bmp.height; 
            bmp.draw(text, m, null, null, new Rectangle(0, i, bmp.width, 1));
        }

        addChild(new Bitmap(bmp));
    }
}

I haven't done the maths, so I don't know if that's physically accurate, but it should give you an idea.

Answer 2

You might consider converting the text object to an image, and then doing that to the image.

-Adam

Answer 3

You can't really do this in a simple way in Flash Player 9 and earlier.
Flash player 10 and Flash CS4 introduces some basic support for 3D transformations, but these are quite simple, and i guess this "extreme" perspective could be tricky to get right. I have however not used the CS4 authoring tool, so it might be easier in there.

There are also the full 3D engines like papervision and away3d although they are a bit overkill.

What I think might be best is using a DisplacementMapFilter, I had some trouble finding any good examples of this online, and I've never actually done it myself, but I think the example in the docs should get you started just fine.

If you feel up for it you can also just draw all the pixels to a bitmap and have at them one by one, that might be the most fun thing to code, but it will likely be quite slow and not look as good ;)