views:

741

answers:

3

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).

+1  A: 

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

Adam Davis
yeah, I believe that no image would work. those kinds of distortion transforms, at least in the flash cs4 interface, only work with certain types of objects. Thanks for your answer.
Yar
+1  A: 

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 ;)

grapefrukt
I did not know that CS4 and CS3 talk to different Flash APIs. Interesting. I just tried out the DisplacementFilterMap example and it looks like it will work just fine for Flash Player 9 (CS3), but man those 3D transforms for CS4 are attractive. Thanks for your answer.
Yar
+1  A: 

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.

Simon Buchan
Lovely... I mean, the CS4 thing. The other one is somewhat painful. Nice work on the loop. Now I guess I'll actually have to use/debug this stuff, since I've gotten innocent people involved :)
Yar
Wow, just tried out your CS3 code... great stuff. Now I'll have to... oh forget it, I'll post a link here when it's done. THANKS AGAIN SIMON.
Yar
Still not sure if the the fonts are going to look too crappy, but here's a first HelloWorld http://confusionstudio.com/starwars001.swf, pure Flex code (with the swcs from Flash imported, of course).
Yar
Hmm... looks like you are moving it in screen-y, rather than text-y. An easy way around that is "var p = new Sprite(); p.addChild(text); p.rotateX = -45; ... text.y -= 10;". Or is that the Flash 9 code?
Simon Buchan
Hey, it was the Flash 9 code. On the other hand, I think that the squashed bitmap looks pixelated, and I bettered it a bunch by doing everything HUGE and scaling, but it's still not pretty.
Yar
Yeah, I'm not scaling properly in the y-direction, so you get bad aliasing - might look at this tonight. Try re-drawing the bitmap each frame with `m.ty = ... - frameNo * speed;` for better scrolling.
Simon Buchan