Entwerfen eines Blinkie für Flash CS3-Animation

• April 25, 2024

Die Inhaberin von J3 Designs hat mich gebeten, einen Werbeblinkie für ihre digitale Scrapbooking-Website zu erstellen. Sie wollte die klassische Eleganz der Unternehmensmarke beibehalten und gab mir eine Reihe von Grafiken, die sie bereits für ihr Logo verwendet hatte. Diese bestanden aus einem Cameo, Spitze, Grunge-Hintergründen, Schleife, getrockneten Blumen und zwei Marienkäfern. Diese Grafiken wurden ursprünglich mit 300 dpi erstellt und waren sehr groß. Meine erste Aufgabe war es also, jede Grafik auf 72 dpi und auf eine Größe zu reduzieren, die klein genug ist, um sie in einem 150 x 50 Pixel großen Blinkie zu verwenden. Aus diesem Test konnte ich bestimmen, welches der Elemente bei einer so geringen Größe verwendet werden kann, ohne zu viele Details zu verlieren.

Ich war überrascht, dass die meisten Elemente bei einer solchen Größenreduzierung gut funktionierten, mit Ausnahme des Cameo und der getrockneten Blumen. Bei einer Reduzierung auf eine Höhe von 50 Pixel gingen die meisten Details dieser Elemente verloren. Aber das Cameo war ein so wichtiger Teil des Logos, dass ich mich entschied, nur die obere Hälfte des Cameo zu verwenden. Auf diese Weise musste ich das Bild nicht auf eine so kleine Größe reduzieren und speicherte die meisten Details des Cameo.

Ich begann das Design mit den statischen Hintergrundelementen zu erstellen. Diese Elemente wären nicht Teil der Animation. Ich wähle einen der vier in den Grafikbeispielen enthaltenen Grunge-Hintergründe als gesamte Hintergrundebene. Als nächstes fügte ich die Spitze und Cameo hinzu. Um oben im Blinkie Platz für die Textanimation zu sparen, habe ich die Spitze in einem Winkel in der unteren linken Ecke platziert. Schließlich fügte ich einen der beiden Marienkäfer hinzu. Aber diese Marienkäfer warteten nur darauf, animiert zu werden.

Die Grundlage der Animation würde aus mehreren Textanimationen bestehen. Aber diese Marienkäfer schauten mich immer wieder an, also beschloss ich, eine zweite Animation mit den Marienkäfern hinzuzufügen. Ein Marienkäfer würde während der Textanimation sichtbar sein und dann würde der zweite Marienkäfer unter dem Cameo erscheinen. Schließlich würden sie zusammen davonkriechen. Dazu musste ich die Hintergrundebene in mehrere Ebenen aufteilen. Die erste Hintergrundebene wäre die Grunge-Grafik. Das zweite wäre die Spitze und das Cameo. Natürlich brauchte ich PNGs von beiden Marienkäfern, der Spitze und dem Cameo, um die Transparenz in Flash aufrechtzuerhalten.

Also hatte ich jetzt vier Ebenen zu meinem Blinkie, abgesehen von der Textanimationsebene, die ich später hinzufügen würde.

Die meisten Blinkies auf Scrapbooking-Sites sind 150 x 50 Pixel groß. Dies gibt Ihnen nicht viel Platz für eine komplizierte Textanimation. Ich habe mich entschieden, die integrierten Timeline-Effekte zu verwenden, um den Text zu animieren. Der erste Teil der Animation wäre der Name des Designers. Für diese Website gibt es fünf Designer, darunter mich. Da mein Firmenname am längsten war, entscheide ich mich, die ursprüngliche Animation unter Verwendung meines Namens zu erstellen. Dann wäre es einfach, den Namen des Designers für die anderen vier Blinkies auszutauschen. Nachdem das Design erstellt wurde, können wir unsere Animation erstellen.

J3 Designs

Copyright 2018 Adobe Systems Incorporated. Alle Rechte vorbehalten. Screenshots von Adobe-Produkten mit Genehmigung von Adobe Systems Incorporated. Adobe, Photoshop, Photoshop-Album, Photoshop-Elemente, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere-Elemente, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst und Flash Paper ist / sind entweder [eine] eingetragene Marke (n) oder eine Marke (n) von Adobe Systems Incorporated in den USA und / oder anderen Ländern.

Video-Anleitungen: C# Tutorial - Flashing Label, Button And TextBox (April 2024).