öffentlich
Redaktion Druckversion

Flash: Actionscript 3.0

Schnelleinstieg in die ActionScript 3.0-Programmierung

Events: Drag und Drop


Flash-Film "Maus" (Im PDF bitte diesen Direktlink aufrufen!)

Das Anfassen und Ziehen von Objekten mit der Maus wird häufig gebraucht und vermittelt schon gleich ein interaktives Erlebnis für den Betrachter. Sie lernen nun, wie Sie Objekte im Film ziehbar machen können, diese innerhalb der Zeitleiste verschachteln - und mit Aktionen ansprechen.

Szenario:
Die zuvor erstellte Schaltfläche ist ein Teil eines Menüs mit mehreren Schaltflächen. Das Menü soll insgesamt auf der Bühne durch den Anwender bewegbar sein. Dazu müssen Sie zunächst alle Elemente, die zum Menü gehören, in einen einzigen MovieClip legen, der als Container dient.

Die Methode "Ziehen" ist nicht direkt auf Schaltflächen-Objekte anwendbar.

Menü als MovieClip

Aufgabe:

Speichern Sie Ihre Datei mit der Schaltfläche nun noch einmal unter einem neuen Namen ab. Löschen Sie die Instanz der Schaltfläche von der Bühne. Löschen Sie jedoch nicht den ActionScript-Code. Legen Sie einen neuen MovieClip "Symbol" per Shortcut F8 oder über das Menü >Einfügen > Neues Symbol... an und nennen Sie es "Menü".

Duplizieren Sie die Schaltfläche per Rechtsklick mit der Maus/Duplizieren fünfmal. Wir brauchen die Schaltflächen für spätere weitere Aktionen:

- Position
- Größe
- Rotation
- Alpha
- reset

Beschriften Sie die neuen Schaltflächen entsprechend, indem Sie den Text im Symbolbearbeitungsmodus abändern (Doppelklick auf das Symbol).

Schaltfläche duplizieren

Neue Buttons in Bibliothek

Aufgabe:

Im Symbolbearbeitungsmodus vom Movieclip "Menü" ziehen Sie nun alle Schaltflächen aus der Bibliothek und positionieren diese über einer Hintergrundebene, die Sie als Hintergrund für Ihr Menü frei gestalten können.

Vergeben Sie für die erste Schaltfläche noch einmal den Instanznamen link_btn, diesmal innerhalb der Zeitleiste des MCs "Menü" - und nicht auf der Hauptzeitleiste. Die anderen Schaltflächen dienen bei dieser Übung noch als Statisten und brauchen daher noch keine Instanznamen. Wechseln Sie in die Hauptzeitleiste und ziehen Sie den Movieclip "Menü", der Ihre Schaltflächen enthält, auf die Bühne.

Menü mit Schaltflächen

Registrierungspunkt: Achten Sie darauf, dass dieser sich in der linken oberen Ecke des Menüs befindet. An diesem Fadenkreuz richtet sich später das ActionScript beim Positionieren von Objekten aus.

Sie können im Symbolbearbeitungsmodus von "Menü" alle Elemente markieren und insgesamt verschieben und entsprechend an dem Registrierungspunkt neu ausrichten.

Oder Sie nutzen das Info-Fenster und geben als X-(links) und Y-(oben)Wert für den Registrierungspunkt 0 an.

Registrierungspunkt in MC "Menü" festlegen

Testen Sie den Film. Was passiert?

Der Compiler gibt noch eine Fehlermeldung aus.

Fehlermeldung

Flash findet also die Instanz "link_btn" nicht. Wieso nicht?

Der Code liegt in der Hauptzeitleiste in Bild 1. Das Ziel der Aktion liegt jedoch nun innerhalb eines Movieclip-Symbols. Sie müssen den Pfad zu Ihrem Zielobjekt daher Flash mitteilen, denn das Programm findet verschachtelte Elemente nicht automatisch!

Aufgabe:

Markieren Sie das Menü auf der Bühne und nennen Sie es "menu_mc".

Instanzname auf Hauptzeitleiste

Aufgabe:

Öffnen Sie das Aktionenfenster und ergänzen Sie die Pfadangabe per Punktsyntax zu:

menu_mc.link_btn.addEventListener(MouseEvent.CLICK, meinLink);

Sie geben damit den konkreten Pfad zu der Schaltfläche innerhalb des Menüs an, getrennt durch den Punkt ohne Leerzeichen. Weitere Änderungen im Code brauchen Sie nicht vorzunehmen. Die Funktion bleibt, wie sie ist.

Testen Sie den Film im Browser - wenn die erste Schaltfläche richtig reagiert, haben Sie alles richtig gemacht!

Falls es irgendwo hapert: Schauen Sie noch einmal, ob alle Instanznamen korrekt eingetragen sind.

Drag...

Nun soll das komplette Menü "draggable" - also ziehbar - gemacht werden.

Was brauchen wir?

  • Ein Zielobjekt: Das Menü mit Namen "menu_mc".

  • Wir brauchen einen EventListener für das Maus-Ereignis "Ziehen" und die Funktion selbst, die ausgeführt wird, wenn das Ereignis "Ziehen" eintritt.

Aufgabe:

Fügen Sie also im Code auf der Hauptzeitleiste einen weiteren EventListener hinzu, diesmal für das Menü selbst.

menu_mc.addEventListener(MouseEvent.MOUSE_DOWN, objZiehbar);

Schreiben Sie ihn ruhig gleich unter die Zeile, in der bereits der erste steht. Sie können die Zeile auch kopieren und die entsprechenden Codeabschnitte abändern.

Anstatt MouseEvent.CLICK wird nun das MouseEvent.MOUSE_DOWN benötigt.

MOUSE_DOWN bedeutet "Maus gedrückt haltend". Eine neue Funktion muss ebenfalls definiert werden und ich nenne Sie hier objZiehbar.

Nun zur konkreten Funktion. Die Methode "startDrag" ist für MovieClip Objekte verfügbar. Schauen Sie in der ActionScript Bibliothek unter dem Paket flash.display/MovieClip/Methoden einmal nach. Dort finden Sie die Methode "startDrag" für Movieclips. Sie müssen dann nur noch angeben, welches Objekt denn gezogen werden soll.

startDrag(); Methode

Die ganze Funktion lautet:

function objZiehbar(e:MouseEvent):void {
e.currentTarget.startDrag();
}

Testen Sie den Film. Sie können das Menü nun bereits per Maus ziehen.

currentTarget

Das "e" ist, wie schon erwähnt, die Abkürzung für das Schlüsselwort event bzw. evt.

Der Befehl currentTarget hinter dem Punkt bedeutet soviel wie das aktuelle Ziel des Ereignisses und ist eine Eigenschaft des Ereignis-Objektes. Der Befehl bezieht sich daher - in unserem Fall - auf die Instanz "menu_mc" selbst.

Anstatt
e.currentTarget.startDrag();

könnten Sie auch schreiben
menu_mc.startDrag();

Vorteil von event.currentTarget vs. Instanznamen:

Beispiel:

Wenn Sie anstatt des Namens der Instanz das aktuelle Ereignisziel wählen, können Sie eine Funktion für mehrere Instanzen einsetzen - ohne Umschreiben.

Sie könnten also vielen Movieclips-Instanzen in Ihrem Film den gleichen EventListener mit der gleichen Funktion zuweisen - brauchen jedoch nur eine einzige Funktion mit einer Zeile Anweisung, da Sie darin keinen expliziten Instanznamen verwenden, sondern die flexible allgemeingültige Aussage, die sich auf das jeweils gerade aktuelle Ziel bezieht!

...and Drop

Fehlt noch die stopDrag();-Methode, die das Objekt mit Maus-Loslassen fallen lässt.

Ein weiterer EventListener für unser Menu wird also benötigt:

menu_mc.addEventListener(MouseEvent.MOUSE_UP, objDrop);

Gefolgt von der Funktion:

function objDrop(e:MouseEvent):void {
e.currentTarget.stopDrag();
}

Testen Sie den Film! Sie können das Menü nun im Film ziehen und loslassen.

Begrenzung

Die Interaktion soll sich nun jedoch in einem vorgegeben Rahmen bewegen. Die Koordinaten werden in der Funktion angegeben, die zwei Argumente beinhaltet.

e.currentTarget.startDrag(false, new Rectangle (10,10, 115, 280));

"false" bedeutet, dass der Ziehpunkt der Punkt ist, an dem Sie die Maus ansetzen, während "true" bedeutet, dass automatisch am Registrierungspunkt des Objekts angesetzt würde.

new Rectangle definiert den Begrenzungsrahmen als Rechteck. Hier kommt der schon erwähnte Registrierungspunkt des Menüs zum Tragen! Beginnend mit dem x-Wert, also der linken Begrenzung, gefolgt vom y-Wert, also der oberen Begrenzung, gefolgt von der rechten Begrenzung, gefolgt von der unteren Begrenzung:
Links, oben, Breite, Höhe.

Schalten Sie gegebenenfalls unter Menü > Ansicht > Lineale die Lineale ein, um eine bessere Übersicht über das Koordinatensystem der Bühne zu bekommen.

Variieren Sie den Ziehbereich und testen Sie Ihren Film. Damit sich das Menü nicht wie von Geisterhand bewegt, wenn Sie die Maus über das Rechteck hinweg ziehen und bewegen, können Sie den Code noch mit einem EventListener für das Maus-Ereignis MOUSE_OUT ergänzen.

menu_mc.addEventListener(MouseEvent.MOUSE_OUT, objDrop);

Aufgabe:

Wenn Sie die Maus schnell über die Bühne ziehen, verliert mit diesem Event das Menü jedoch den Mausfokus und damit dropt das Menu. Wie müssten Sie den EventListener ändern, damit das nicht passiert? Für welches Objekt müssten Sie das MOUSE_OUT Ereignis abfangen?

Auch hier können Sie Einzelheiten in der Flash-Hilfe nachlesen. Setzen Sie den Cursor vor den Befehl "startDrag" im Aktioneneditor und klicken Sie auf das kleine Hilfe-Icon. Schon springen Sie zu der entsprechenden Stelle im ActionScript 3-Referenzbuch.

Hilfe zu Aktionen

Mauszeiger

Movieclips erhalten bei Rollover nicht automatisch den Mauszeiger mit der Hand - wie es bei Schaltflächen der Fall ist. Sie können dies jedoch mit diesem Befehl erzwingen:

menu_mc.buttonMode=true;

"buttonMode" ist eine Eigenschaft von Movieclips.

Es geht auch umgekehrt. Sie können auf Buttons mit dem Befehl:
schaltflaeche_btn.useHandCursor=false;
die Anzeige des Handcursors unterdrücken.

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Inhalt

Über die Autorin:

arbeitet seit 1999 als Web- und Flash-Designerin. Das Spezialgebiet der zertifizierten Animatorin sind die Konzeption und Entwicklung interaktiver Designs. Dazu gehört ein tiefes Verständnis dafür, was "unter der Haube" passiert. Schließlich macht die Programmierung ca. 50 Prozent ihrer Arbeit aus. Faszinierend findet Sonja Vieten dabei gerade die Verbindung von Design und interaktiver Programmierung.

Newsletter abonnieren