Schaltfläche-Star 1

SchaltflächeStar

Schaltfläche-Star 2

Beispiel Star

Erstellen eines grünen Rechtecks: Hintergrund auf Größe 200x50 Pixel minimieren, Rechteck passgenau aufziehen, Farbe #003300 (Rechteck und Hintergrund!!). Markieren und Konvertieren in eine Schaltfläche mit „Einfügen“ „In Symbol konvertieren“ (Schaltfläche wählen). Dabei die Schaltfläche in „Schaltfläche“ benennen.

1.1.

Die Schaltfläche doppelt anklicken: Man sieht folgende Darstellung:2.2.

Den Zustande „Auf“ aktivieren: Feld anklicken mit der rechten Maustaste Schlüsselbild einfügen:

3.3.

Schaltfläche-Star 3

Beispiel Star

4.4. Bei „Auf“ ein Textfeld aufziehen. Beschriften mit „Schüler“, Schriftfarbe weiß.Textfeld auf der Schaltfläche zentrieren und anschließend bei „Darüber“ und „Drücken“ ebenfalls mit rechter Maustaste „Schlüsselbild“ einfügen.

5.5. Drehenden Stern erstellen: Bei Szene 1 mit „Einfügen“ „Neues Symbol“ Grafik erstellen und beschriften in „Stern“.

6.6.

Auf Ebene 1 mit Ellipsenwerkzeug einen Kreis aufziehen und Rahmen entfernen.Die Eigenschaft „Radial“ wählen und die Farbe gleich dem Hintergrund ändern. Damit der Kreis wie eine Kugel wirkt, im Farbverlauf die „Farbseiten tauschen“:

Vier Ebenen erstellen

7.7.

Schaltfläche-Star 4

Der Kreis sollte nun wie folgt aussehen:8.8.

9.9. Den Kreis auf Ebene2 kopieren und mit Hilfe des Werkzeuges „Frei transformieren“ so bearbeiten das er wie folgt aussieht:

10.10. Die Ellipse mittig auf dem Kreis platzieren.

Beispiel Star

Schaltfläche-Star 5

Beispiel Star

11.11. Auf der Ebene3 den Kreis erneut kopieren, diesmal vertikal transformieren:

und wieder exakt mittig auf dem Kreis platzieren um das folgende Ergebnis zu erzielen:

Schaltfläche-Star 6

Beispiel Star

Auf Ebene4 einen größeren Kreis aufziehen (Rahmen entfernen, radial und gleich der Hintergrundfarbe).In die Mitte des Kreises einen massiven Kreis gleicher Farbe aufziehen, der ein wenig größer als der Ausgangskreis auf Ebene4 ist.

Das Ergebnis sollte nun so aussehen:

12.12.

Schaltfläche-Star 7

Der fertige Stern sollte nun so aussehen:13.13.

Tipp: Ebenen ausblenden und sperren bei Bedarf!

Beispiel Star

Schaltfläche-Star 8

Beispiel Star

Nun einen neuen Movieclip („mc_drehenderStern“) erzeugen und die Grafik „Stern“ aus der Bibliothek(F11) auf den Movieclip ziehen.

14.14.

Bei Frame 20 ein Schlüsselbild und einen Bewegungstween erstellen. In den Eigenschaften „Drehen“ auf „UZS“ stellen. Bei Frame 15 ein weiteres Schlüsselbild einfügen und „Drehen“ auf „Automatisch“ stellen; den Stern sehr stark verkleinern. Bei Frame 20 die Einstellung des Bewegungstween wieder auf „UZS“ stellen und den Stern so klein machen, das man ihn kaum noch sieht.

15.15.

Schaltfläche-Star 9

Beispiel Star

16.16. Der Stern sollte sich jetzt drehen:

Bei Position 1:

Bei Position 15: Bei Position 20:

Schaltfläche-Star 10

Screenshot des drehenden Sterns:

Schaltfläche-Star 11

Beispiel Star

17.17. Wenn die Maus über den Button fährt, soll sich nun die Animation verändern.

Man klickt das Schlüsselbild unter „Darüber“ an und fügen mit „Einfügen“ „Neues Symbol“ einen Movie Clip „mc_MovingStar“ hinzu.

In das erstellte Schlüsselbild wird aus der Bibliothek der Movieclip „mc_Star“ gezogen und mittig auf dem Kreuz platziert. Bei Frame 20 mit rechter Maustaste „Schlüsselbild einfügen“ und einen Bewegungstween erstellen.

18.18.

Nun zurück zur Schaltfläche gehen, auf „Darüber“ klicken, den Stern verkleinern und in die linke obere Ecke der Schaltfläche verschieben.

19.19.

Schaltfläche-Star 12

Beispiel Star

Jetzt kann der Stern bei Frame 20 an die gewünschte Stelle verschoben werden. In diesem Beispiel also an den rechten Rand des Buttons.

20.20. Den Stern Doppelklick anklicken, um in den Movieclip „mc_MovingStar“ zu gelangen.

21.21.

Mit Strg + Enter kann der Button nun getestet werden. 22.22.

Star.swfStar.swf

Doppelklick

In der linken oberen Ecke sollte sich der Stern drehen. Wenn man mit der Maus über den Button fährt, läuft der Stern los zu anderen Seite.

Schaltfläche-Star 13

Beispiel Star

Probe1.swfProbe1.swf

Der Button kann auf diese Weise beliebig erweitert werden. Man kann z.B. einen zweiten Stern einfügen („mc_MovingBack“), der gleichzeitig mit dem Movieclip „mc_MovingStar“ am unteren Rand von rechts nach links läuft:

23.23.

Doppelklick