Share
Haben Sie sich jemals gefragt, wie der Design-Guru Joshua Davis diese Bilder kreiert? Ich tat. Mit seiner Kunst als Inspiration nahm ich eine Tasse Kaffee und machte mich daran, seinen Stil zu imitieren. Dieses Tutorial wendet sich an Designer und Flash-Anfänger und dokumentiert meinen Prozess, etwas zu erreichen, das den frühen Kompositionen von Joshua ähnlich ist.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Nehmen wollen Ein weiterer schauen wir uns das Endergebnis an, auf das wir hinarbeiten werden? Klicken Sie auf den Flash-Film (um sicherzustellen, dass er scharfgestellt ist) und drücken Sie eine beliebige Taste, um das Chaos bei der Arbeit zu sehen!
Erstellen Sie eine neue ActionScript 3-Datei.
Sie können die Einstellungen ganz nach Ihren Wünschen ändern. Ich habe meine Standardeinstellung beibehalten und die Hintergrundfarbe in Schwarz geändert.
Öffnen Sie Ihre Bibliothek (wenn sie nicht angezeigt wird, können Sie "crtl + l" wählen), klicken Sie mit der rechten Maustaste auf die leere Liste und wählen Sie "Neues Symbol"..
Wir werden einen Movieclip hinzufügen, der die Formen enthält, die in der endgültigen Komposition erscheinen sollen. Wir müssen es in der Bibliothek installieren können. Wir erreichen dies, indem wir sagen, dass das soeben erstellte Symbol eine eigene Klasse ist, die eine Movieclip-Klasse erweitert.
Auf diese Weise können wir durch einfaches Schreiben einen neuen Satz von Objekten erstellen var object = neue Objekte ();
Wenn Sie mit dieser Methode ein neues Symbol erstellen, wird es von Flash auf der Bühne automatisch zur Bearbeitung geöffnet. Lassen Sie Ihrer Kreativität freien Lauf und fügen Sie eine Reihe von Formen hinzu, jede in einem eigenen Keyframe. Hier sind einige von mir:
Machen Sie sich keine Sorgen über die Farben, wir werden sie durch eine Palette zufällig bestimmen, die wir später beim Codieren definieren werden.
Es ist jetzt Zeit, den Code einzustellen. Gehen Sie zu Ihrer Hauptzeitleiste (die derzeit leer sein sollte, mit nur einem leeren Keyframe) und öffnen Sie Ihr Aktionsfenster (oder verwenden Sie F9 als Verknüpfung)..
// Kompositionseinstellungen; var count: Number = 100 // Dies ist die Anzahl der Formen, die wir unserer Komposition hinzufügen werden. var maxscale: Number = 10 // Dies ist der maximale Skalenwert, den unsere Formen var minscale erreichen dürfen: Number = 1 / / Dies ist der minimale Skalierungswert, den unsere Formen für var maxrotation erreichen dürfen: Number = 180 // Maximaler Rotationswert für unsere Shapes var offsetX: Number = 100 // Der Offset ist der Wert, der die Diskrepanz Ihrer Komposition auslöst var offsetY: Number = 100 // var marginX: Number = 100 // Dies ist der Rand für die x-Achse. var marginY: Number = 100 // Dies ist der Rand für die y-Achse
Wir müssen unserer Komposition noch Farbe hinzufügen. Ich tue das nicht, indem ich versuche, eine Palette zu finden, die gut genug ist, um sie zu benutzen, sondern indem ich eine Palette benutze, die ich benutze kennt ist gut genug. Ich benutze Kuler.
Gehen Sie zu kuler.adobe.com und laden Sie die neueste Air-Version der Kuler Air-Anwendung herunter.
Was Sie dabei tun können (neben der Suche nach Paletten, die Sie möchten), ist das Kopieren der Hexadezimalfarben als getrennte Kommawerte, indem Sie einfach auf diese Schaltfläche klicken:
Gehen Sie zurück zu Ihrer Flash-Datei, öffnen Sie Ihr ActionScript-Bedienfeld und fügen Sie folgende Codezeile hinzu:
var colorPalete: Array = []
Innerhalb dieses Arrays können Sie die Werte aus der Zwischenablage hinzufügen, die Sie aus der Air-App von kuler übernommen haben.
var colorPalete: Array = [191919,182828,60702D, AAB232, E6FA87]
Vergessen Sie nicht, sie zu bearbeiten, damit Sie echte Hexadezimalzahlen erhalten. Ihre letzte Palette wird ein Array sein, das folgendermaßen aussehen sollte:
var colorPalete: Array = [0x191919,0x182828,0x60702D, 0xAAB232,0xE6FA87]
Unsere Zusammensetzung enthält einige Regeln, daher müssen wir diese Regeln jetzt anwenden. Lassen Sie uns eine Funktion erstellen, die die Komposition für uns generiert.
Anmerkung des Herausgebers: Ich fürchte, der ActionScript-Code in diesem Schritt führt dazu, dass unser Syntax-Highlighter Firefox auslöst (dies passiert manchmal und ich habe keine Ahnung, warum). Im Moment laden Sie es am besten herunter, um einen Blick darauf zu werfen. Entschuldigung für die Unannehmlichkeiten.
Sie können das Kunstwerk so testen, wie es ist, obwohl Sie bemerken, dass etwas fehlt, obwohl es gut aussieht. Ja, der Hintergrund mit Farbverlauf.
Um einen Hintergrund mit Farbverlauf zu erstellen, fügen Sie diese kleine Funktion hinzu:
// Hintergrundgradienteneinstellungen; var type: String = GradientType.LINEAR; Var Farben: Array = [0x990000, 0x220000]; var alphas: Array = [1, 1]; var Verhältnisse: Array = [0, 255]; var matr: Matrix = neue Matrix (); var sprMethod: String = SpreadMethod.PAD; var bg: Sprite = neuer Sprite (); var g: Graphics = bg.graphics; // Hintergrunderstellungsfunktion createBackground () // startet eine Verlaufsbox matr.createGradientBox (500, 440, 90, 0, 0); // Verändere den Gradienten der Größe deiner Bühne, setze die Drehung auf 90 Grad // Beginne die Füllung g.beginGradientFill (Typ, Farben, Alphas, Verhältnisse, Matr, SprMethod); // zeichnet das Rechteck g.drawRect (0, 0, 500, 440); // Zeichne das Rechteck so, wie es deiner Bühne entspricht. // füge zur Bühne hinzu addChild (bg);
Fügen Sie dazu in der ersten Zeile Ihrer Funktion createComposite () einen Aufruf hinzu.
Dies funktioniert, indem Sie einfach die untergeordneten Objekte der Bühne durchlaufen und sie entfernen.
function removeComposite () while (numChildren> 0) // entfernt alle untergeordneten Objekte aus der Hauptzeitleiste removeChildAt (0)
Um Kompositionen zur Laufzeit zu erstellen, verwende ich die Tastatur als Auslöser. Ich füge der Bühne einen KEY_DOWN-Listener hinzu, so dass die Komposition bei jedem Tastendruck zu einer neuen wird.
stage.addEventListener (KeyboardEvent.KEY_DOWN, onKeyPress) Funktion onKeyPress (e) removeComposite (); createComposite ();
Das ist der knifflige Teil. Um Ihre Komposition zu speichern, müssen Sie sie in eine Datei drucken. Ich verwende dafür Bullzip-PDF-Drucker.
Gehen Sie zu bullzip.com und laden Sie ihre Druckertreiber herunter. Folgen Sie den Installationsanweisungen.
Starten Sie Ihr SWF, erstellen Sie Kompositionen, indem Sie eine beliebige Taste drücken, bis Sie eine für Sie passende erreicht haben.
Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie "Drucken"..
Wählen Sie den Bullzip-Drucker aus und klicken Sie auf Drucken.
In "Format" wählen Sie, was Sie bevorzugen.
Wenn Sie sich jedoch für PDF entscheiden, erhalten Sie alle Vektorformen, was bedeutet, dass Sie sie frei skalieren und später bearbeiten können.
Wie Sie sehen, ist dies ein ziemlich einfacher Ansatz, um das Gefühl zu erreichen, das Joshua zu seiner Arbeit bringt (was offensichtlich weitaus komplexer ist)..
Ich hoffe, Ihnen hat dieses Tutorial gefallen, zögern Sie nicht, Kommentare und Fragen zu hinterlassen. Danke fürs Lesen!
Hinweis: Wenn Sie daran interessiert sind, den Code von Joshua zu verwenden, sollten Sie unbedingt das kürzlich veröffentlichte HYPE-Framework von Joshua Davis und Branden Hall unter hype.joshuadavis.com besuchen.
Accentsconagua