Button aus Glas

~ Alle Anleitungen ~

Laden Sie fertige Projektdatei: t1032.zip

Erstellen grafischer Repräsentation des Buttons

  1. Starten Sie Flash Designer und fangen mit neuem Projekt an.
  2. Aus der Werkzeugleiste wählen Sie das "Ellipsewerkzeug" und zeichnen einen Kreis, indem Sie die STRG-Taste halten.
  3. Die Größe des Kreises kann jederzeit geändert werden, indem Sie ihn mit dem Auswahlwerkzeug markieren und "Objekt" > "Größe" wählen. In diesem Beispiel wurde die Größe von 65x65 Pixel eingetragen.
  4. Wählen Sie "Objekt" > "Linienstärke" > "4px", damit die Stärke des Kreisumrisses auf 4px eingestellt wird.
  5. Füllen Sie den Kreis mit einem Farbverlauf aus, indem Sie "Objekt" > "Farbverlauf" wählen.
  6. Ein neues Fenster wird geöffnet, in dem alle Eigenschaften des Farbverlaufs bestimmt werden.
  7. Aus der Dropdownliste wählen Sie "Vertikal" aus.
  8. Klicken Sie aus das "Farbe oben"-Viereck, damit ein Farbenauswahl-Fenster geöffnet wird. Sie können beliebige Farbe entweder auf dem Farbenkreis zeigen, oder einen hexadezimalen Farbwert (rot-grün-blau) in das "#" Eingabefeld (Untenrechts) eintragen. In diesem Beispiel wurde die Farbe mit einem Farbwert #1F436D bestimmt. In das Eingabefeld wird der Wert ohne "#" Zeichen eingetragen. Bestätigen Sie ihre wahl mit OK-Button.
  9. Klicken Sie auf das "Farbe oben" Viereck und bestimmen die Farbe am unteren Rand des Farbverlaufs. Hier: #4B8FED. Klicken Sie OK.
  10. Bestätigen Sie die Bearbeitung des Farbverlaufs mit dem OK-Button.
  11. Zeichnen Sie eine kleinere Ellipse, mit der ein Effekt des "Reflexes" erstellt wird.
  12. Wählen Sie "Objekt" > "Farbverlauf" und stellen die Richtung des Farbverlaufs auf "Vertikal"
  13. Farbe am oberen Rand stellen Sie auf #FFFFFF (wieß) ein.
  14. Der untere Rand des Farbverlaufs sollte transparent werden. Im Farbenauswahlfenster markieren Sie das "Transparent" Ankreuzfeld.
  15. Bestätigen Sie die Bearbeitung des Farbverlaufs mit dem OK-Button.
  16. Platzieren Sie den "Glasreflex" im oberen Teil des größeren Kreises.
  17. Den Schatten des Buttons erzeugen Sie, indem Sie den Kreis verdoppeln, um ein paar Pixel verschieben, und eine einheitliche Farbfüllung anwenden.
  18. Markieren Sie den Kreis mit dem Auswahlwerkzeug und wählen "Bearbeiten" > "Verdoppeln". Im neu geöffneten Fenster tragen Sie "5px" in das "Wert X" und "Wert Y" Eingabefelder.
  19. Stellen Sie die Füllfarbe und Farbe des Umrisses auf #39528E ein.
  20. Zuletzt wählen Sie "Bearbeiten" > "In den Hintergrund", damit der Schatten unter andere Elemente gebracht wird.
Drücken Sie F9-Taste um die Animationsvorschau zu sehen.

Verdoppeln des Buttons

  1. Erzeugen Sie zusätzlichen Button durch Verdopplung
  2. Drücken Sie Strg+A, damit alle Elemente im Projekt markiert werden.
  3. Wählen Sie "Bearbeiten" > "Verdoppeln". Den X Wert stellen Sie auf 100 und Y auf 0 ein. Klicken Sie OK.
  4. Ändern Sie die Farben des Farbverlaufs im großen Button. Stellen Sie auch andere Schattenfarbe ein.
Drücken Sie F9-Taste um den zweiten Button zu sehen.

Definieren von Aktionen

  1. Markieren Sie den ersten Button und wählen "Aktion" > "Bei Mausklick". Im neu geöffneten Fenster markieren Sie "Abspielen". Wenn Sie diesen Punkt auslassen, werden nächste Aktionen nicht funktionieren.
  2. Wählen Sie "Aktion" > "Bei Mausberührung Farbe". Heben Sie Markierung des "Transparent" Ankreuzfelds auf und wählen eine Farbe aus, z.B. #B5D6FF.
  3. Markieren Sie den zweiten Button und wählen "Objekt" > "Aktionen" > "Bei Mausklick". Markieren Sie das "Stop" Ankreuzfeld.
  4. Wählen Sie "Aktion" > "Bei Mausberührung Farbe". Heben Sie Markierung des "Transparent" Ankreuzfelds auf und wählen eine Farbe aus, z.B. #FFB3A0.
Starten Sie die Animationsvorschau, indem Sie F9-Taste drücken.

Letzte Hand

  1. Zeichnen Sie ein Dreieck mit dem "Linie oder Form" Werkzeug und platzieren es in der Mitte des ersten Buttons.
  2. Mit dem "Ellipsewerkzeug" erzeugen Sie einen roten Kreis, der an der Mitte des zweiten Buttons angebracht werden soll.
  3. Tragen Sie den Text ein, indem Sie das "Textwerkzeug" anwenden.
  4. Wählen Sie "Frame" > "Neu", damit ein neuer Frame erzeugt wird.
  5. In der "Frames" Palette markieren Sie "Frame 2". Aus der "Hintergrund" Dropdownliste wählen Sie "Frame 1", damit erster Frame zum Hintergrund des zweiten Frames wird.
  6. Zeichnen Sie ein kleines Rechteck direkt nach dem Text.
  7. In der "Frames" Palette wird Dauer des Frames bestimmt. Für jeden Frame stellen Sie die Dauer auf 0.1s ein.
Spielen Sie Animationsvorschau ab - F9.

Alligator Flashdesigner herunterladen

Möchten Sie diese Anleitung kommentieren?

Tragen Sie Ihren Kommentar unten ein (maximal 255 Zeichen): *


E-Mail-Adresse:

* Füllen Sie bitte unbedingt die mit * gekennzeichneten Formularfelder.