AVIVA-BERLIN.de im April 2024 - Beitrag vom 09.08.2002


Flash MX - Tutorial: Ziehbare Movieclips, Teil 2
Gerlinde Behrendt

Tutorial:
Wie haben wir die Dress-up Doll gemacht? Lernen Sie, die Kleidungsstücke mit der Maus zu ziehen...

Wir wollen nun unsere "Kleidungsstücke" bewegen, die wir im ersten Teil in Movieclips umgewandelt haben. Sie sollen sich aber nicht völlig selbständig machen, sondern mit der Maus angeklickt und über die Figur gezogen werden. An dieser Stelle sollen die Klamotten dann liegenbleiben und sich nicht etwa an die Maus dranhängen :-).

Für interaktive Anwendungen benötigen wir in Flash Actionscripts. Die Möglichkeiten, Objekte mit Scripts zu steuern, sind in Flash ständig erweitert worden. Musste man noch in Flash 4 erstmal eine Schaltfläche für einen ziehbaren Movieclip erstellen, kann jetzt der MC direkt mit einem Maus-Ereignis verknüpft werden. Bevor wir loslegen, müssen wir noch den richtigen Editor für unsere Programmieraufgabe öffnen, so geht´s in Flash MX:

Unter der Bühne von Flash befindet sich eine graue Leiste mit der Aufschrift "Aktionen", wenn man das kleine weisse Dreieck links anklickt öffnet sich das Arbeitsfenster für die Scripts (oder F9 drücken). Flash bietet an, die Scripts mit der Maus zusammenzuklicken, empfehlenwerter ist in unserem Fall der Expertenmodus: Das gestrichelte Quadrat rechts oben anklicken und "Expertenmodus" auswählen, um direkt in das Editorfenster zu schreiben. (Siehe große Abb. oben rechts)

Für die Funktionalität der Actionscripts ist entscheidend, wo der Programmierbefehl anknüpft: Bildscripts sind in der Zeitleiste angesiedelt haben vor allem die Aufgabe der Filmsteuerung. Für Mausinteraktionen muss das Objekt selbst mit dem Script angesprochen werden. Zuerst bekommt es einen Instanznamen (im "Eigenschaften" - Bereich unter dem "Aktionen" - Fenster, in unsrem Fall heißt es "dress"). Selbst wenn man den Namen im Script nicht benutzt muss er vergeben werden, weil sonst das Script nicht funktioniert. Und: Die Namenseingabe sicherheitshalber mit der Enter-Taste bestätigen, Flash "vergisst" sonst den Namen..... Dann ist es wichtig, dass das richtige Kleidungsstück auf der Bühne ausgewählt ist, jetzt erst beginnt der Eintrag :

Erklärung: "onClipEvent" heißt, dass das Objekt auf ein Ereignis reagiert, in diesem Fall ist das ein Drücken der Maustaste (mouseDown). Der Ausdruck "this" bezieht sich auf das aktuelle Objekt, kann also für andere Kleidungsstücke weiterverwendet werden. Mit "startDrag" heftet sich der MC an den Mauszeiger und setzt sich in Bewegung, mit "stopDrag" löst er sich von der Maus und bleibt auf der Stelle liegen. Das ist erstmal die Basis für unsere beweglichen Kleidungsstücke.

Wenn wir nun den Film einmal testen (Steuerung > Film testen), sehen wir, dass hiermit noch keine vollständige Kontrolle über den Ziehvorgang möglich ist: Die gesamte Ebene bewegt sich. Das Objekt sollte aber nur reagieren, wenn es direkt mit dem Mauszeiger berührt wird. Deswegen machen wir mit Flash eine Kollisionserkennung, einen "hitTest":

Wir haben in den "mouseDown"-Eventhandler eine "if-Schleife" eingebaut, die die x und y Koordinaten der Maus überprüft, bevor die "startDrag"-Anweisung ausgeführt wird. Mit "true" beziehen wir uns auf die tatsächliche Form des Objekts, mit "false" auf den Bezugsrahmen. Weiter musste noch sichergestellt werden, dass sich die Objekte nicht aus der Bühne herausziehen lassen. Innerhalb der Klammern nach der "startDrag" Funktion müssen daher noch die Koordinaten der Bühne eingegeben werden (für "links", "rechts", "oben" und "unten"). Der Parameter "true" oder "false" legt fest, ob die Maus am Mittelpunkt des Objekts einrasten soll oder nicht. In unserem Fall sieht es besser aus, wenn sie dort anfängt zu ziehen, wo der User den Curser aufsetzt, deswegen "false". Bei "mouseUp" ändert sich nichts.

Das Script bezieht sich allgemein auf das aktuelle Objekt ("this") und kann nun (mit kopieren > einfügen) in alle anderen Kleidungs-Objekte eingesetzt werden.