| Einfache
Buttons: Unser Ziel ist ein Button mit 3D-Effekt
- ein großes und ein kleines Oval werden durch
gegenläufige Farbverläufe zu unserem Button.
Im Normalzustand ist der Button grau, bei darüber liegender
Maus wird das innere Grün und bei Klick werden
beide Bereiche grün. Man erstellt ein leeres Symbol
(alle Objekte de-selektieren mit EDIT - DESELECT
ALL oder Apfel-/Control-Shift-A, dann INSERT
- CREATE SYMBOL oder F8) und gibt ihm das
BEHAVIOR BUTTON. Darauf öffnet sich der
Symbol-Editier-Modus mit dem leeren Button. |
| |
|
In
der Zeitleiste finden sich jetzt exakt vier Frames,
jedes davon nicht mit einer Nummer, sondern einem
Titel bezeichnet:
UP:
der Normalzustand des Buttons, wenn sich die Maus
nicht darüber befindet
OVER:
der “MouseOver”-Zustand, wenn sich die Maus gerade
über dem “sensitiven Bereich” des Buttons befindet
DOWN:
der “MouseDown”-Zustand, wenn die Maus im “sensitiven
Bereich” des Buttons gedrückt wurde
HIT:
der “sensitive Bereich” des Buttons - der Button reagiert
nur, wenn sich die Maus innerhalb dieses Bereichs
befindet.
|
| |
| Es
ist auch möglich, einen unsichtbaren Button zu
verwenden, z.B. um ein “MouseOver” innerhalb eines Bitmap-Bildes
zu ermöglichen - einfach den unsichtbaren Button (er
hat nur einen gefüllten HIT-Status, die anderen
Status-Keyframes sind leer) auf die gewünschte
Stelle im Bitmap legen! |
| |
|
Um
einen einfachen Pseudo-3D-Button zu erstellen, benötigen
wir Shapes mit Farbverläufen. Wir erstellen z.B. ein
Oval (PENCIL) und wählen dann den Farbeimer
(BUCKET) aus. Anstelle einer Farbe wählen
wir das Palettensymbol ganz unten in der Farbauswahl.
Dort klicken wir auf GRADIENT, auf NEW
und dann auf RADIAL (statt LINEAR),
um einen neuen “runden” Verlauf zu erzeugen. Durch
Klick auf jeweils einen der beiden Farbauswahlpfeile
können wir für jeweils innen und außen eine Farbe
einsetzen, z.B. helles Grau außen und Schwarz innen,
für den zweiten Verlauf (später, für den zweiten
Teil des Buttons) umgekehrt.
Nicht
vergessen: Änderungen mit CHANGE bestätigen!
|
| |
| Mit
diesem Verlauf füllen wir (möglichst von der Mitte
des Ovals aus) den Button. Jetzt empfiehlt es sich,
diese Layer zu sperren und eine neue Layer zu erstellen
(INSERT - LAYER über Menü oder über
PopUp neben dem Layer-Namen), da wir den eben erstellten
Button sonst aus Versehen verändern könnten, denn: |
| |
| Wenn
zwei Shapes übereinander gelegt werden, beide dann deaktiviert
werden und dann das obere wieder entfernt wird, verliert
das untere Shape die Fläche, die gerade noch vom
oberen Shape belegt wurde - ausprobieren! Darum immer
entweder Symbole erstellen oder mit mehreren Ebenen
arbeiten! |
| |
| Nachdem
wir derzeit in einem Symbol arbeiten, müssen wir
nicht unbedingt Symbole darin verwenden, sondern können
auch mit Shapes arbeiten. Auf der freien Stage ist das
eher weniger empfehlenswert. |
| |
| In
der neuen Layer ziehen wir ein zweites, etwas kleineres
Oval auf. Dieses wird seltsamerweise sofort unsichtbar,
wenn es genau “über” dem ersten Oval erstellt wurde
- es verschwindet hinter der obersten Layer, die ja
im Flash auch die oberste Bühnen-Ebene darstellt.
Wir ziehen also die neue Layer nach oben (Layernamen
ziehen), bis sie in der Zeitleiste über der ersten
steht. Dann erstellen wir wieder für das zweite Oval
einen Verlauf. Diesmal wählen wir in der Verlaufs-Palette
den vorhin erstellten Verlauf aus und drücken dann erst
NEW - dadurch wird der alte Verlauf kopiert. |
| |
| In
diesem Verlauf vertauschen wir nur die Seiten der beiden
Farbauswahlpfeile und bestätigen wieder mit CHANGE.
Diesen Verlauf ordnen wir dem neuen Oval zu. Damit der
fertige Button sich auch wie ein Button benimmt, müssen
wir dieses fertige Keyframe in die drei anderen Button-Zustände
(= die anderen 3 leeren Frames) übertragen - wir
drücken einfach in jedem Keyframe der Reihe nach
F6 (INSERT - KEYFRAME), dabei wird der
Zustand des letzten Keyframes übertragen - vorerst
jedoch übertragen wir den UP-Zustand nur auf das
OVER-KEYFRAME. Dort sollten wir dem kleineren
Oval einen neuen Verlauf geben, diesmal mit etwas Farbe.
Wir editieren wieder den Original-Verlauf, drücken
auf NEW und ändern jetzt z.B. das Hellgrau
auf Grün - CHANGE nicht vergessen! |
| |
| Mit
diesem Verlauf füllen wir jetzt das kleinere Oval. Zur
Beachtung: Bis auf die Farben bleiben die Verlaufseigenschaften
gleich - der Mittelpunkt, die Größe und die
Form des Verlaufs werden vom vorherigen Verlauf in diesem
Oval übernommen! |
| |
| Jetzt
wird auch klar, warum wir den Button bisher nur ins
zweite Keyframe kopiert haben: Hätten wir den rein
grauen Button stur weiterkopiert, müßten wir das kleinere
Oval im DOWN-Zustand wieder grün färben,
damit das innere des Buttons zwischen OVER und
DOWN gleich bleibt - es soll sich hier ja nur
noch das äußere Oval ändern. Jetzt also
kopieren wir (wieder mit F6 im dritten Keyframe) den
grau-grünen Button in das Keyframe DOWN. |
| |
| Hier
können wir uns wieder einen neuen Verlauf erzeugen,
nehmen wir diesmal den gleichen grünen Verlauf
wie für das innere Oval und füllen das äußere Oval
damit - die Verlaufseigenschaften bleiben automatisch
wieder gleich! |
| |
|
Jetzt
haben wir also folgende Situation:
UP:
grau in grau
OVER: grün in grau
DOWN: grün in grün |
Den
DOWN-Zustand kopieren wir in den HIT-Zustand - dem
ist es egal, welche Farben oder wieviele Layers verwendet
werden, es zählt nur die Anwesenheit einer Form.
|
| |
| Hier
löschen wir jetzt das größere Oval -
da der Button nur reagieren soll, wenn sich die Maus
innerhalb des inneren Ovals befindet. Um den Editier-Modus
für den Button zu beenden, klicken wir EDIT - EDIT
MOVIE oder Apfel-/Control-E oder den kleinen
Button unter den Layernamen. Den fertigen Button ziehen
wir aus der Library (WINDOW - LIBRARY oder Apfel-/Control-L)
auf die Bühne. Im Menü CONTROL - ENABLE BUTTONS
oder (Apfel-/Control-ALT-B) aktivieren wir alle
Buttons. Jetzt können wir unseren neuen Button
testen. |
| |
| Nicht
vergessen: Man kann einem Zustand eines Buttons auch
ein Movie Clip (eine fertige Animation) zuordnen - einfach
wie jedes andere Symbol in ein Keyframe ziehen, und
schon kann man seinen Button animieren! |
