12.3 Drag & Drop 

Drag & Drop steht für Ziehen und Loslassen und hat in der Computer-Fachsprache mit den optischen Betriebssystemen Einzug gehalten. In Flash können Sie Drag & Drop sehr einfach und schnell mit Hilfe eines MovieClips implementieren. Das MovieClip-Objekt besitzt zwei Methoden, die Ihnen weiterhelfen:

• startDrag(MovieClip) beginnt den Drag & Drop-Vorgang für den MovieClip, der als erster Parameter angegeben ist. Die Methode gibt es noch in zwei anderen Varianten mit mehr Parametern:

startDrag(MovieClip, Zentrum) – hier gibt der Parameter Zentrum an, wo die Maus bei Drag & Drop einrastet: beim Wert true am Mittelpunkt des MovieClips, bei false an der Position, wo der MovieClip angeklickt wurde.

startDrag(MovieClip, Zentrum, x1, y1, x2, y2) – hier definieren vier Koordinaten ein Rechteck. Die Bewegung des MovieClips ist auf dieses Rechteck beschränkt.

• stopDrag() beendet Drag & Drop für alle aktuell gezogenen MovieClips und lässt sie an der Stelle, wo sie sich befinden, einrasten.

Um vernünftiges Drag & Drop zu realisieren, benötigen Sie ein Ereignis für das Starten von Drag & Drop (startDrag()) und ein Ereignis für das Einrasten des MovieClips (stopDrag()).

Wie das geht, zeigen wir Ihnen anhand des Chamäleon-Beispiels aus dem letzten Abschnitt. Wir erweitern es so, dass der Nutzer die Palette mit den Schaltflächen beliebig durch die Gegend ziehen darf.

Schritt für Schritt: Drag & Drop der Palette

Wenn Sie das Beispiel aus dem letzten Abschnitt nicht in der Praxis nachvollzogen haben, können Sie die Datei chamaeleon_wechselspiele_AS2.fla als Ausgangspunkt verwenden.

Klicken Sie auf die Palette. Innerhalb dieses MovieClips finden Sie eine graue Leiste. Sie ist ein eigener MovieClip und heißt Anfasser. Im Aktionen-Bedienfeld können Sie nun für diesen MovieClip den Code eingeben.

Abbildung 12.7 Im Aktionen-Bedienfeld geben Sie den Code für den Anfasser-MovieClip ein.

Um Drag & Drop zu starten, verwenden Sie das Ereignis press:

on (press) {

press ist hier dem Anfasser, also dem grauen Balken am oberen Rand der Palette, zugewiesen. Wenn der Nutzer auf diesen Balken klickt, soll Drag & Drop starten.

Verwenden Sie startDrag(), um mit Drag & Drop zu beginnen:

   startDrag(_root.palette_mc, false, 3, 3, 357, 213);
}

Als Parameter kommt zuerst der betroffene MovieClip, nämlich die Palette, zum Einsatz. Sie wird hier absolut adressiert; relativ würde die Adresse _parent.palette_mc heißen, da sie dem Anfasser-MovieClip übergeordnet ist.

Der zweite Parameter gibt an, dass beim Ziehen die Palette an der Position des Mauszeigers einrastet. Die vier Koordinaten in den folgenden Parametern verhindern, dass die Palette über den Rahmen des Flash-Films gezogen werden kann.

Zum Anhalten von Drag & Drop verwenden Sie die Methode stopDrag(), wenn der Nutzer die Maustaste über dem Anfasser-MovieClip loslässt:

on (release, releaseOutside) {
   stopDrag();
}

Als zweites Ereignis neben release kommt releaseOutside zum Einsatz. Das ist praktisch und hilfreich, falls der Nutzer sehr schnelle Mausbewegungen macht und die Maustaste aus Versehen außerhalb des MovieClips loslässt. Wäre in diesem Fall nur release aktiviert, würde Drag & Drop nicht stoppen.

Die Datei mit Drag & Drop trägt den Namen chamaeleon_dragdrop_AS2.fla bzw. chamaeleon_dragdrop_AS1.fla. Solche beweglichen Navigationselemente sind nicht nur eine nette, verspielte Idee, sondern sie können die Grundlage für interessante Produktkonfigurationen und spannende Anwendungen darstellen.

Abbildung 12.8 Der Nutzer klickt auf den Anfasser, zieht und lässt los, um die Palette an der neuen Position einzurasten.

Ihr Kommentar