Mond und Sterne

Ziel:

Erstellung eines Banners im Standard-Banner-Format 468x60px mit animierten Mond und Sternen. Beim Klicken auf das Banner soll eine bestimmte Webseite aufgerufen werden

Arbeitsschritte

Zunächst wird eine neue Datei erstellt, mit 468x60px

Der Hintergrund

• • Mit Insert > Sprite einen Sprite erstellen

  • dort mit Rechteck-Werkzeug ein Rechteck in der Größe 468x60 zeichnen

  • linearen Farbverlauf mit 2 unterschiedlichen Dunkelblautönen (natürlich ist auch ein ganz und gar einfarbiger Hintergrund oder ein Hintergrund mit mehr Farben möglich

  • diesem Sprite den Namen Hintergrund geben

  • wieder zur Hauptszene wechseln

Der Mond

• • Mit Insert > Sprite einen Sprite erstellen

  • mit dem Shape-Werkzeug 2 Kreise zeichnen, die sich teilweise überlappen

  • mit Combine Subtract shape daraus ein Shape erstellen, wir haben einen Kreis, an dem ein Teil ausgeschnitten ist. Das sieht dann wie ein zu- oder abnehmender Viertelmond aus

  • mit Farbwerkzeug einen linearen Farbverlauf einfügen (gelb, hellgelb, hellgrau damit der Mond nicht so langweilig aussieht)

  • diesem Sprite den Namen Mond geben

  • wieder zur Hauptszene wechseln

Der bewegte Mond

• • Mit Insert > Sprite einen Sprite erstellen

  • Sprite Mond mit Drag & Drop an den linken Rand der Zeichnungsfläche ablegen

  • Mit Insert Transform motion einen Animation erzeugen,

  • zum Ende der Animation gehen und dort den Mond rüberziehen zum rechten Rand der Zeichnungsfläche.

  • diesem Sprite den Namen Mondbewegt geben

  • wieder zur Hauptszene wechseln

Der Stern

• • Mit Insert > Sprite einen Sprite erstellen

  • mit dem Shape-Werkzeug einen Stern zeichnen

  • mit dem Farbwerkzeug Farbe gelb geben

  • diesem Sprite den Namen Stern1 geben

  • wieder zur Hauptszene wechseln

Der blinkende Stern

Die Sterne sollen sich nicht bewegen, es soll eine Art Blinkeffekt erreicht werden

• • Mit Insert > Sprite einen Sprite erstellen

  • Sprite Stern1 mit Drag & Drop in der Mitte ablegen

  • mit Insert Transform motion einen Animation erzeugen

  • Größe des Sterns am Ende oder Anfang der Animation vergrößern oder verkleinern

  • diesem Sprite den Namen Stern1blinkend geben

  • wieder zur Hauptszene wechseln

URL-Verlinkung

Jetzt ist die Animation fertig, zumindest der sichtbare Teil. Es fehlt noch die Verlinkung.

• • Mit Insert > Button eine Buttonvorlage erstellen, in der Buttonvorlage befinden sich automatisch 4 leere Layer: Hit state, Down state, Over state, Up state.

  • der Layer Hit state wird aktiviert und mit dem Shape Tool ein Rechteck genau in der Mitte und genau in der Größe der Zeichnungsfläche gezeichnet

  • das Shape wird mit dem Auswahlwerkzeug selektiert und dann wird die Linienstärke auf 0 gesetzt

  • der Button muss mit einer Farbe gefüllt sein, sonst funktioniert er nicht, er soll aber auch durchsichtig sein. Dazu wird in der Farbauswahlleiste Transparency auf 100% gesetzt, dann das Shape markiert, dann das Farbwerkzeug für einfaches Füllen (flat fill) und das Shape gefüllt. Um die Wirkung und Funktionsweise besser beobachten zu können, kann man zunächst testweise auch die Transparency auf 75% setzen.

  • dieses Shape wird jetzt mit Edit > Copy und Edit > Paste in die anderen drei Button Layer Kopiert

  • der Button erhält den Namen URLButton

  • wieder zur Hauptszene wechseln

  • URLButton auf die Zeichnungsfläche ziehen, jedoch so, dass er zunächst nicht über den anderen Objekten liegt, da er sich sonst schwer markieren lässt

  • mit dem Auswahlwerkzeug den Button markieren, im Actionscript-Fenster On Release wählen (die Webseite soll beim Loslassen aufgerufen werden) und dort den Code

  • getURL("http://google.de");

  • eingeben.

  • abschließend den Button mit Tool > Align > Align to Canvas center in der Mitte der Zeichnungsfläche platzieren

Abschluss

Jetzt werden die Sprites Hintergrund, Mondbewegt, Sternblinkend auf die Zeichnungsfläche gezogen. Sternblinkend wird sinnvollerweise mehrfach auf der Zeichnungsfläche platziert.