Verblassen zu einem Fluchtpunkt in Flash, Programatically (natürlich)

Question

Ich versuche, einen verschwindenden Star Wars Art Ding wie , dies zu tun , aber programmatisch.

Die meisten von dem, was sie haben, ist getan einfach zu programmieren (Bewegungs-Tweens machen), aber ich mag auch die textbasierte Grafik programmatisch erzeugen (aus Text ein dynamisches Text obj verwendet wird, zum Beispiel).

Die Frage, wie ich es sehe (aber ich bin offen für andere Möglichkeiten, es zu sehen, natürlich) ist: Gibt es eine Möglichkeit, ein slanty seitige Rechteck zu erhalten aus mein dynamic-Textobjekt? Die scale9Grid erwähnt hier wird es nicht tun, ich bin ganz sicher. Ich möchte vier Punkte geben Sie eine Raute zu bekommen (wenn das ist, was es heißt).

Answer 1

Wenn Sie Flash Player kompilieren 10 (die CS4 oder eine neuere Version Flex SDK erfordert), können Sie drehen einfach das Textfeld in 3D:

text.rotateX = -45;

Es gibt ein paar Probleme mit diesem, wie Sie brauchen, Schrifteinbettung zu verwenden, und immer den Fluchtpunkt in der Mitte des Feldes.

Auf diese in Flash Player <10 mit Bitmaps ist auch möglich, wenn Sie masochistisch sind, und nichts dagegen haben, eine gewisse vertikale Aliasing. Die Idee wäre BitmapData.draw () zu verwenden, um jede Zeile mit einer Höhe 1 clipping rect zu ziehen und eine Transformation, die Perspektive der Division zu tun. 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));
    }
}

Ich habe nicht die Mathematik gemacht, so dass ich weiß nicht, ob das physikalisch korrekte, aber es sollte Ihnen eine Idee geben.

Answer 2

Sie betrachten könnten das Textobjekt in ein Bild umwandelt, und tun, dass dann auf das Bild.

-Adam

Answer 3

Sie können dies auf einfache Art und Weise nicht wirklich in Flash Player 9 und früher.
Flash Player 10 und Flash CS4 stellen einige grundlegende Unterstützung für 3D-Transformationen, aber diese sind recht einfach, und ich denke, die „extreme“ Perspektive könnte schwierig sein, richtig zu machen. Ich habe jedoch nicht das CS4-Authoring-Tool verwendet, so könnte es dort einfacher sein.

Es gibt auch die vollen 3D-Engines wie Papervision und Away3D obwohl sie ein bisschen übertrieben sind.

Was glaube, ich könnte am besten unter Verwendung eines DisplacementMapFilter , ich keine guten Beispiele für diese Online einige Mühe hatte zu finden, und ich habe es nie wirklich selbst getan, aber ich denke, die Beispiel in der Dokumentation sollten Sie gut.

Einstieg

Wenn Sie danach fühlen Sie können auch alle Pixel in eine Bitmap nur zeichnen und haben auf sie eins nach dem anderen, die vielleicht am meisten Spaß, was zu Code sein, aber es wird wahrscheinlich ziemlich langsam und nicht so gut aussehen;)