fly fly sweet Butterfly

Thema:
fly fly sweet Butterfly
Description: Einen Schmetterling per Achtionscript über den Bildschirm flattern lassen und bei Berührung mit der Maus ihn zur Richtungsänderung veranlassen
Keywords:
Flash, Actionscript, Interaction
Author:
Matthias Walter
Date:
20.12.2001
Doc-ID:
 
URL:
http://www.flashworker.de/tutorial/55/001.html
Version:
1.0
Änderungen:
 
Anforderungen:
Flash 5
Vorkenntnisse:
Flash Grundkenntnisse
Actionscript Grundkenntnisse
Download:
PC: "butterfly.zip",
MAC: ""

Einleitung
  Was bringt dieses Tutorial?

Vorbereitungen
  Von den Rohdaten zum flattern
  Interaktion vorbereiten

Dynamik mit Actionscript
 Der Knackpunkt
  weiterführende Informationen



Was bringt dieses Tutorial?

Spaß und Unterhaltung.
Sinn dieses Tutorials soll es sein, ein zufällige Bewegung eines Movie Clips (MC) zu erzeugen, welches zusätzlich von der Interaktion mit Maus abhängig ist.

Klingt einfach. Ist es auch, zumindest wenn man verstanden hat um was es geht.

Das Beispiel findet ihr hier.

Vorausgesetzt werden Grundkenntnisse in Flash und in der Actionscriptprogrammierung.
Das Beispiel soll als Grundlage für alle Leute dienen, die sich mit der zufälligen Bewegung von Objekten vertraut machen wollen und nebenbei erfahren wollen, wie diese in Abhängigkeit mit der Maus gebracht werden können.

Um die Ideen hinter dem Beispiel möglichst allen Lesern verständlich zu erklären, wird des öfteren auf "hoch wissenschaftliche" Begriffe verzichtet.




Vorbereitungen

Von den Rohdaten zum flattern

Zu allererst sollten wir uns einen Schmetterling erstellen, der dann wunderschön durch unseren Flashfilm
flattert.

Hierzu suchen wir uns eine geeignete Grafik eines Schmetterlings, wandeln diese in Vektorgrafiken
(aufgrund der geringeren Größe) und zerlegen den Schmetterling in 3 Teile.
Die zwei Flügel sowie den Körper.

Schmetterling zerlegt

Nachdem wir dies getan haben, binden wir alle drei Teile zusammen in einen MC "Schmetterling_Einzeln"
ein.

Bewegung des Schmetterlings

Dort erzeugen wir das Flattern des Schmetterlings.
Hierzu plaziert ihr die Einzelteile auf der Bühne. Die Flügel bekommen jeweils eine Bewegungstween
von Bild 1 zu Bild 2 und von Bild 2 zu Bild 4.
Im Bild 2 sind die Flügel durch skalieren "hochgeklappt" oder zusammengeschlagen.
Von Bild 4 zu Bild 6 passiert nichts. Dies erzeugt eine Pause beim flattern und lässt dies
reeller wirken.

Auf der Ebene control kommt in das 1.Bild die Aktion play() und im letzten Bild die Aktion
gotoAndPlay(1). Hierdurch wird eine kontinuierliche Bewegung erzeugt.

Interaktion mit der Maus vorbereiten

Im nächsten Schritt stecken wir den soeben erstellten MC "Schmetterling_Einzeln" in einen
weiteren MC namens "mc_schmetterling".
Eine Ebene darüber legen wir eine leere Schaltfläche die nur im Feld "Aktiv" mit der Grundfläche des
Schmetterlings gefüllt ist.

leerer Button

Das ganze sollte danach im MC "mc_schmetterling" so aussehen:

mc_schmetterling

Hierdurch wird erreicht, das der darunterliegende MC unseres Schmetterlings sichtbar bleibt, aber
mit einer Mausaktion gekoppelt werden kann.

Nun zu den Aktionen.

Aktionen auf mc_schmetterling

In das erste Bild legen wir folgende Aktionen:

function willi()
{ this.xspeed=random(20)-10; this.yspeed=random(20)-10; } function winkel()
{ return Math.atan2(this.yspeed,this.xspeed)*180/Math.PI; }

Wir erzeugen also eine Funktion namens willi (so heißt unser Schmetterling *g*).
Sollte diese Funktion aufgerufen werden, steuert diese mit Hilfe xspeed und yspeed
die Geschwindigkeit mit welcher sich unser Schmetterling fortbewegt.
this bezieht sich dabei auf den MC in dem die Funktion aufgerufen und mit Hilfe von
random erzeugen wir Zufallszahlen, sodass unser "Willi" immer unterschiedlich schnell bewegt.

Weiterhin erzeugen wir eine weitere Funktion namens winkel. Diese gibt als Wert die
Berechnung eines zufälligen Winkels aus den vorher zufällig bestimmten Geschwindigkeiten
zurück. Sollte dies zu mathematisch sein, versucht eine andere Winkelfunktion zu nehmen.
Mit dem zurückgegebenen Wert der Funktion winkel wird der Winkel festgelegt, mit dem
unser Schmetterling sich vom Flash-Film-Rand wieder entfernt. Dazu aber später mehr.

Auf den leeren Button legen wir folgende Aktion:

on (rollOver) 
{ changed=1; }

Das bewirkt, dass der Variablen changed beim überfahren des MC mit der Maus der Wert 1 zugewiesen
wird. Dies ist besonders wichtig, um festzustellen ob der Schmetterling berührt wurde oder nicht.


Wie alles zusammen geführt wird, erfahrt ihr auf der nächsten Seite.





Weiter