Dieses Tutorial beschreibt, wie man einen Hover-Effekt in Flash erzeugt. Dabei wird ein Button erzeugt, der beim Überfahren mit der Maus sowohl die Hintergrundfarbe als auch die Textfarbe ändert. Es werden jedoch keine allgemeinen Grundlagen erklärt, wobei ein gewisses Maß an Grundlagen schon vorhanden sein sollte (Rechtecke erstellen, etc.).

Zuerst erstellen wir ein komplett neues Dokument. Da es sich allerdings nur um ein Lernprojekt handelt, ist die Wahl der Größe jedem selbst überlassen. Lediglich die Bildrate sollte hochgestellt werden, da sonst eine stockende Animation zustande kommt.

Dazu eine kleine Erklärung:
Unser Auge nimmt genauso eine Bewegung dar, wie sie in der Filmtechnik erschaffen wird. Nämlich als Folge von Bildern. Man sagt, dass das menschliche Auge ab ca. 18-24 Bildern pro Sekunde eine Bilderfolge als "fließend" erkennt. Alles, was darunter liegt, wird meistens als Stocken (Ruckeln) empfunden.


Von daher stellen wir die Bilderrate der Animation am besten auf 24 FpS (Frames pro Sekunde) ein.


Einstellen der Bildrate

Sobald dies erledigt wurde, können wir richtig loslegen.
Was wir brauchen ist eine Form für unseren Button. Um diese erzeugen, erstellen wir erst einmal ein neues Symbol (Strg+F8). Den Namen für das Symbol sollte man möglichst sinngemäß vergeben. Als Beispiel nehmen wir hier einfach mal "Btn_Back". Und die Art des Symbols ist ein Movieclip.


Erstellen eines neuen Symbols

Automatisch gelangen wir nach der Erzeugung des Symbols in die "Leinwand" des Symbols, in dem wir jetzt die Form für den Button festlegen können. Das machen wir hier einfach mal, indem wir ein Rechteck mit abgerundeten Kanten erstellen, das einen weißen Hintergrund und einen schwarzen Rahmen hat.


Die Grundform

Anschließend gehen wir wieder auf die "Hauptleinwand" zurück und erstellen wieder ein neues Symbol, welches diesmal den kompletten Button darstellen soll. Benennung und Art des Symbols sind wie in dem folgendem Bild zu wählen.


Neues Symbol

In der neuen Leinwand öffnen wir zuerst mal die Symbolbibliothek (Strg+L) und ziehen das eben erstellte Symbol in die Leinwandmitte. Das brauchen wir, damit der Hintergrund nachher verfärbt werden kann.


Hintergrund in den Button setzen

Nun ist der Zeitpunkt gekommen, an dem spätestens feststehen sollte, wofür der Button überhaupt gut sein soll. Jetzt wird nämlich die Schrift auf den Button gesetzt. Aber da die Schrift vom Hintergrund unabhängig sein soll, muss zuvor eine neue Ebene erstellt werden. Hier wäre eventuell ein guter Zeitpunkt, um zu erwähnen, dass eine Zweckgemäße Benennung der Ebenen den Arbeitsaufwand erheblich mindern kann. Ich habe mich bei der Beschriftung des Buttons mal einfach für "News" entschieden.


Button beschriften

Sodann müssen wir in der Zeitleiste einige Schlüsselbilder erstellen und einige Motion-Tweens hinzufügen. Dafür müssen wir vorher überlegen, wie lange der Button brauchen soll, um die Farbe vollständig zu wechseln, und wie lange, um wieder in den Ursprungszustand zurückzukehren. Ich persönlich nehme gerne eine Sequenzlänge von 15 Bildern. Das entspricht 0,6 ms und veranlasst den Betrachter nicht ungeduldig zu werden.
Deshalb müssen wir jeweils pro Ebene einen Keyframe beim 15ten und 30sten Bild setzen (Rechtsklick->Keyframe hinzufügen). Direkt im Anschluss können wir auch die Motion-Tweens erstellen (rechtsklick auf zwischenliegenden Frame -> Bewegungs-Tween einfügen).


Keyframes und Bewegungstweens

Jetzt gilt es, den Hintergrund so einzufärben, wie er beim "Überfahren" mit dem Mauszeiger aussehen soll. Das ist allerdings am 15ten Frame zu machen. Das heißt, dass wir den 15ten Frame der Hintergrundebene markieren, dann nochmal auf den Hintergrund klicken und anschließend in der Eigenschaftsleiste den Punkt Färbung im Drop-Down-Menü auswählen, wo wir dann eine passende Farbe auswählen können.


Hintergrundfarbe ändern

Um jetzt die Animation allerdings nicht immer direkt durchlafen zu lassen, müssen wir ein wenig in der Flash-eigenen Programmiersprache "Actionscript" programmieren. dafür öffnen wir zu aller erst mal das Aktionen-Fenster (F9). Jetzt kann man links in dem Ereignissexplorer unter [Globale Funktionen]->[Zeitleistensteuerung] mit einem Klick auf "stop()" der Animation befehlen, an genau dem markiertem Frame die Animation anzuhalten. Deshalb müssen wir das einmal auf Frame 1 und einmal auf Frame 15 machen.


Animation befehlen zu stoppen

Damit wäre der Button im Prinzip schon fertig. Deshalb gehen wir jetzt auch wieder auf unsere Hauptleinwand Und ziehen unseren soeben erstellten Button auf die Fläche.


Button auf die Leinwand ziehen

Selbstverständlich reicht das noch nicht aus, da der Button nicht weiß, wie er sich verhalten soll, wenn der Mauszeiger ihn überfährt. Deshalb ist ein bisschen weitere Programmierung in Action-Script notwendig. Wenn das Aktionen-Fenster von eben nicht mehr offen ist, dann wieder mit F9 öffnen. Jetzt gehen wir aber einen Schritt weiter, als einfach nur die gewünschte Aktion reinschreiben, da dies im Prinzip zu lange dauern würde. Wir wollen jetzt unser Script selber eintippen. Ist auch ganz einfach: Einfach nur auf das große Textfeld im Aktionen-Fenster klicken, und lostippen.
Um das gewünschte Ziel zu erreichen, muss folgendes eingegeben werden:


Quelltext für den Button

Was das heißt ist eigentlich ganz offensichtlich:
Das "on" bedutet soviel wie "Bei". Das "rollOver" bedeutet "Überfahren mit dem Mauszeiger". Das heißt, dass die erste Zeile sinngemäß soviel wie "Bei überfahren mit dem Mauszeiger" bedeutet. Die geschweiften Klammern dienen dazu, mehrere Befehle dieser Abfrage von gerade zuzuordnen, was aber hier nicht der Fall ist. Was wir darin stehen haben bedeutet soviel wie "Gehe zu Frame 2 und spiele die Animation ab".
Warum Frame 2? Ganz einfach: Weil auf Frame 1 der stop()-Befehl liegt und die Animation wieder stoppen würde.
Der zweite Block erklärt sich eigentlich genauso einfach, nur das hier auf das Herausfahren des Mauszeigers gewartet wird, und dann ab Frame 16 weitergemacht wird.

So! Damit wäre das Tutorial auch schon vorbei. Mit Strg+Return könnt ihr eure Animation testen. Selbstverständlich kann man so auch ganz andere Effekte herbeizaubern, wenn man kreativ genug ist.

>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!