Accentsconagua

So erstellen Sie Farbverläufe mit ActionScript

Code
Share

Es gibt viele Optionen zum Konfigurieren von mit AS3-Code generierten Verläufen. In diesem Artikel untersuchen wir verschiedene Optionen mit einer interaktiven App, mit der Sie diese Optionen im Handumdrehen ändern können.

Spielzeit

Spielen Sie mit den Optionen in der obigen SWF-Datei. Das linke Rechteck zeigt den resultierenden Farbverlauf so, wie er aussehen würde, wenn er in ein 50x50-Rechteck gezeichnet wird. Das rechte Rechteck zeigt die Matrix mit der aktuellen Einstellung. Vergleichen Sie die beiden, während Sie alle Einstellungen erkunden, und es wird alles sinnvoll sein.

Wenn Sie einen Farbverlauf erstellt haben, den Sie mögen, klicken Sie auf Klicken Sie hier für den Code Um eine AS3-Codeliste anzuzeigen, die Sie kopieren und in Ihr eigenes Projekt einfügen können, um den von Ihnen erstellten Verlauf zu erzeugen.

Bei der Codegenerierung wurden zusätzliche Variablen hinzugefügt, sodass Sie das Erscheinungsbild des Verlaufs leicht ändern können.

  • gradientScaling, Verwenden Sie dies, um die Größe zu erhöhen.
  • gradientOffsetX, Verwenden Sie diese Option, um den Farbverlauf horizontal zu verschieben.
  • gradientOffsetY, Verwenden Sie diese Option, um den Farbverlauf vertikal zu verschieben.

Verlaufsüberblick

Um einen Farbverlauf zu erstellen, müssen Sie die Grafik Objekt von a Gestalten, oder jede Klasse, die er unterordnet. Dann müssen wir die Farbverlaufsfüllung erstellen, indem wir aufrufen

 graphics.beginGradientFill ()

Diese Parameter sind erforderlich:

  • Typ: Zeichenfolge
  • Farben: Array
  • alphas: Array
  • Verhältnisse: Array

Diese Parameter sind optional:

  • Matrix: Matrix = Null
  • spreadMethod: String = "pad"
  • interpolationMethod: String = "rgb"
  • focalPointRatio: Number = 0

Ich werde später jeden Parameter durchgehen. Wenn Sie lieber damit herumspielen und versuchen, es selbst herauszufinden, habe ich aus diesem Grund eine SWF-Datei erstellt, und es kann sogar Funktionscode für den von Ihnen erstellten Farbverlauf generiert werden. Schau es dir oben im Artikel an.

Die vollständige Dokumentation zum Erstellen von Farbverläufen finden Sie in den LiveDocs zum Thema.

Verlaufstyp

Stellen Sie den Verlaufstyp mit ein: flash.display.GradientType

Farben, Alphas, Verhältnisse

Diese drei Arrays müssen übereinstimmen. Wenn Sie also drei Farben wünschen, müssen Sie auch drei Alphas und drei Verhältnisse angeben.

Das Farben-Array benötigt hexadezimale Werte. (mögen 0xFF0000 für rot)

Das Alphas-Array benötigt Zahlen von (bis einschließlich) von 0 bis 1.

Das Ratios-Array benötigt Zahlen von (bis einschließlich) von 0 bis 255. Diese müssen in der richtigen Reihenfolge sein [100,0.200] ist nicht gültig, aber [0,100,200] ist.

Hier ist ein Beispiel, was passiert, wenn Sie die Verhältnisse ändern:

Matrix

Die Matrix definiert, wie der Farbverlauf aussehen wird. Wenn Sie es nicht definieren, hat es eine Breite von 200px. Wenn Sie steuern möchten, wie der Farbverlauf aussehen soll, müssen Sie eine neue Matrix erstellen:

 var gradientMatrix: Matrix = neue Matrix ();

Dann müssen Sie ein Verlaufsfeld in der Matrix erstellen, indem Sie Folgendes aufrufen:

 gradientMatrix.createGradientBox

Folgende Parameter sind erforderlich:

  • Breite: Anzahl
  • Höhe: Anzahl

Diese Parameter sind optional:

  • Rotation: Anzahl = 0
  • tx: Anzahl = 0
  • ty: Anzahl = 0

Breite ist die Breite der Matrix (nicht betroffen von der Matrixrotation).

Höhe ist die Höhe der Matrix (nicht betroffen von der Matrixrotation).

Drehung ist die Rotation der Matrix im Bogenmaß.

tx ist der horizontale Versatz der Matrix (nicht betroffen von der Matrixrotation).

ty ist der vertikale Versatz der Matrix (nicht betroffen von der Matrixrotation).

Spread-Methode

Wenn die Matrix den gesamten gezeichneten Bereich nicht bedeckt, muss der Rest gefüllt werden. Es gibt drei verschiedene Möglichkeiten, dies zu verwalten:

Stellen Sie die Ausbreitungsmethode mit ein: flash.display.SpreadMethod

Interpolationsmethode

Auf diese Weise wird der Farbübergang berechnet. Es gibt zwei Optionen:

Stellen Sie die Interpolationsmethode mit ein: flash.display.InterpolationMethod

Brennpunktverhältnis

Dies wirkt sich nur aus, wenn Sie radiale Farbverläufe verwenden. Es akzeptiert Werte von und einschließlich -1 bis 1. Wenn Sie eine Zahl über 1 angeben, machen Sie sich keine Sorgen, sie wird standardmäßig auf 1 gesetzt. Dies ist auch von der Rotation betroffen (so dass Sie es von oben nach oben machen können) Setzen des Brennpunkts auf -1 und Drehung auf Pi / 2).

Zeichnung

Wenn Sie fertig sind, müssen Sie die Füllung zeichnen. Dies kann mit jeder der Methoden zum Zeichnen von Grafiken ausgeführt werden, z. B. beginFill ()..

Wenn Sie (0,0) nicht als Startpunkt für die Zeichenmethode verwenden, müssen Sie daran denken, die Zeichenfolge zu ändern tx und ty Werte der Matrix.

Fazit

Jetzt sollten Sie bereit sein, neue Abenteuer mit durch Code generierten Farbverläufen zu unternehmen.

Danke fürs Lesen!

Code
×