Anfängertutorial für dynamische Buttons

(Anfänger-)Tutorial für das erstellen von dynamischen Buttons in Flash MX

1. Zuerst musst du natürlich Flash MX öffnen ;)
2.
Drücke "Strg+F8", um den Dialog "Neues Dokument" zu öffnen.
3. Gib nun dem Movieclip die Beschriftung "button_actions" (es geht natürlich auch was anderes ;))
4.
Jetzt wählst du die Farben für die Buttons.
5. Klicke nun auf "R" (Rechteckwerkzeug) und ziehe das Rechteck in der Größe eines Buttons (ca. 120x20, ist aber egal)!
5.1. Zentiere den Button, indem du "Strg+K" drückst, den Button "An Bühne" aktivierst und dann den Button horizontal und vertikal zentrierst.
6.
Erstelle jetzt eine neue Ebene.
7.
Wähle das erste Bild in der neuen Ebene aus, klicke dann "F9" (Aktionen) und doppelklicke dann auf "stop" unter Aktionen/Filmsteuerung.
8.
Erstelle nun leere Schüsselbilder in den 2 Ebenen (siehe Screenshout!). Leere Schüsselbilder werden mit "F7" erstellt!
9. Kopiere jetzt das erste Schüsselbild in der Ebene "button" (Klick auf das Schüsselbild, dann Rechtsklick und dann im Menü "Bilder kopieren" wählen). Anschließend das kopierte Bild in jedes leere Schüsselbild (unausgefüllter Punkt) einfügen.
10.Deine Zeitleiste dieses Clips müsste bisher so aussehen:


11.
Jetzt klickst du in die Füllung des Buttons (Ebene "buttons" Bild "8" !!) und stellst einen Alpha-Wert von ca. 50% ein.
12.Diese Bild kopierst du und fügst es bei Bild 9 auch ein.
13.Nun klickst du in die Füllung des Buttons (Ebene "buttons" Bild "23" !!) und wählst eine Farbe z.B. rot.
14.
Klick nun wieder auf Bild "2", halte die Taste "Shift" gedrückt und klicke dann auf Bild "8". Anschließend klickst wählst du das Form-Tweening aus.
15.Das wiederholst du bei Bild "9" bis "15" und bei Bild "16" bis "23".
16.
Jetzt klickst du in der Ebene "actions" auf Bild "2" und gibst dem Bild den Namen "rollover".
17.Das Bild "9" nennst du "rollout" und das Bild "16" "press". Außerdem stellst du bei Bild "8", "15" und "23" die Aktionen "stop" ein
18.
Siehts bei dir auch so aus?
19.
Zurück zur Szene 1.
20.
Drücke "F11" und ziehe den Movieclip "button_actions" in das "Hauptbild".
21.
Gibt dem Clip den Instanznamen "button".
22.
Drücke jetzt wieder "Strg+F8" und gibt den Inhalt des Screenshouts ein.
23.
Klicke auf das Schüsselbild unter "Aktiv" und drücke "F5".
24.Drücke "T" und gebe deinen Text ein (Schriftgröße: ca.14; Farbe: beliebig). Unter "Ausrichten" zentrierst du den Schriftzug wie oben beschrieben!
25.
Füge nun eine Ebene ein, klick in dieser Ebene das vierte Schlüsselbild an, drücke "F7" und füge den Button aus dem vorhin erstellten Movieclip ein (der müsste sich normalerweise noch in eurem Speicher befinden!)
26.Kehre nun zur "Szene 1" zurück, zentiere den Movieclip ("button") und füge den neuen "Home"-Button (über "F11") ein. Auch diesen Button zentierst du.
27.Klicke auf den Button und gibt ihm (über "F9") folgende Funktionen:

on(rollOver) {
tellTarget("/button") {
gotoAndPlay("rollover");
}
}
on(rollOut) {
tellTarget("/button") {
gotoAndPlay("rollout");
}
}
on(press) {
tellTarget("/button") {
gotoAndPlay("press");
}
}

28.FERTIG! :)

Vorschau: td/183/button.swf

Frage bitte an mich ;)... Viel Erfolg!
MfG Daniel

Kommentare