Button mit animierter Änderung der Hintergrundfarbe
~ Alle Anleitungen ~
Laden Sie fertige Projektdatei: t1076.zip (1 KB)
- Starten Sie ein neues Projekt im Flash Designer. Zunächst bestimmen Sie die größe der Arbeitsfläche, z.B. 500x500px.
- Mit dem "Viereckwerkzeug" zeichnen Sie ein Viereck. Mit einem Doppelklick erreichen Sie ein Fenster, in dem die Linienstärke und Linienfarbe des Umrisses eingestellt wird. Tragen Sie z. B. 3px.
- Klicken Sie mit der rechten Maustaste auf das Viereck und wählen "Farbverlauf ...".
Wählen Sie einen vertikalen Farbverlauf und stellen die Randfarben ein:
Farbe oben: #DBDBDB
Farbe unten: #999999
- In der "Frames“-Palette stellen Sie die Dauer des Frames auf "Stop".
- Wandeln Sie das Viereck in ein Sprite Objekt um, indem Sie "Bearbeiten" > "In Spreit umwandeln" wählen.
- Mit einem Doppelklick auf das Objekt übergehen Sie zum Spritebearbeitungsmodus, in dem der Inhalt des Sprites modifiziert werden kann. Stellen sie Framedauer auf "Stop" ein. Erzeugen Sie zwei neuen Frames dessen Dauer auf "Stop" und auf "0.01s" eingestellt wird.
- Kopieren Sie den Inhalt des ersten Frames in "Frame 2".
- In der "Frames"-Palette markieren Sie "Frame 2". Klicken Sie mit der rechten Maustaste auf das Viereck und wählen "Farbverlauf ...".
Farbe oben: #FF0400
Farbe unten: #A30000
- Kopieren Sie das Viereck mit dem neuen Farbverlauf in "Frame 3"
- Gehen Sie zurück zum "Frame 1" und tragen Sie einen Text, z.B. "BUTTON", mit Hilfe des "Textwerkzeugs".
Der Text sollte in der Mitte des Frames ausgerichtet werden. Wählen Sie "Bearbeiten" > "Ausrichten" > "Mittig auf Seite".
Farbe des Textes stellen Sie auf #000000 (schwarz) ein, indem Sie mit der rechten Maustaste auf den Text klicken
und "Schriftfarbe" wählen.
- In "Frame 2" tragen Sie zwei Kopien des Textes.
Schriftfarbe der unteren Kopie lassen Sie unverändert und der oberen Kopie ändern Sie auf #FFFFFF (weiß)
- Wiederholen Sie vorigen Punkt im "Frame 3".
- Gehen Sie zum "Frame 2" und markieren das rote Viereck.
Aus der Programmmenü wählen Sie "Intro > "Intro Animation".
Ein neues Fenster wird geöffnet. Markieren Sie "Animation einschalten" Ankreuzfeld.
Aus der Dropdownliste wählen Sie "Zeigen" aus.
Die Dauer stellen Sie auf 0.5s ein und schalten die "Blenden" Option ein.
Gleiche Einstellungen sollten an den weißen Text angewendet werden.
- Gehen Sie zum "Frame 3" und markieren das rote Viereck.
Aus der Programmmenü wählen Sie "Outro" > "Outro Animation".
Ein neues Fenster wird geöffnet. Markieren Sie "Animation einschalten" Ankreuzfeld.
Aus der Dropdownliste wählen Sie "Löschen" aus.
Die Dauer stellen Sie auf 0.5s ein und schalten die "Blenden" Option ein.
Gleiche Einstellungen sollten an den weißen Text angewendet werden.
- Gehen Sie zum "Frame 1" und klicken auf das graue Viereck mit der rechten Maustaste.
Aus der Kontextmenü wählen Sie "Bei Mausberührung ...".
Im neu geöffneten Fenster markieren Sie "Gehe zum Frame" und wählen "Frame 2" zum Zielframe.
- Im "Frame 2" klicken auf das graue Viereck mit der rechten Maustaste.
Aus der Kontextmenü wählen Sie "Bei Ende Mausberührung ...".
Im neu geöffneten Fenster markieren Sie "Gehe zum Frame" und wählen "Frame 3" zum Zielframe.
- Fertig! Drücken Sie F9-Taste um die Vorschau abzuspielen.
