Was heisst Drag & Drop?
Drag & Drop, also Ziehen und Loslassen eines Elementes mit dem Mauszeiger, lässt sich mit ActionScript relativ einfach bewerkstelligen. Drag & Drop ist die Basis für viele Spielanwendungen: Puzzles, Quizs, Geschicklichkeitsspiele, etc. Hier zeigt sich die Stärke von Flash gegenüber JavaScript: In ActionScript genügen bereits einige Zeilen Code, um ein Objekt beweglich zu machen, mit JavaScript lassen sich ähnliche Effekte nur mit enormen Aufwand und Wissen erzielen.
Um zeigen, was Drag & Drop heisst, können Sie auf den diesen Link klicken, um ein Quiz zu spielen, in dem es um die erfolgreichsten Werbeslogans der letzten 60 Jahre geht: Spiel "Werbeslogans"
Erste, einfache (und unbrauchbare) Versuche
startDrag
Mit startDrag() wird der Vorgang des Ziehens gestartet. Dies wollen wir im ersten Beispiel ausprobieren. Erstellen Sie eine neue Flash-Datei, zeichnen Sie darin ein einfaches Symbol, zum Beispiel in Form eines Rechtecks. Ziehen Sie das Symbol auf die Bühne, und legen Sie darauf die folgende Aktion (Beispiel 1):
onClipEvent(enterFrame){
startDrag(this, false);
}
Nach dem Veröffentlichen des Filmes merken wir schnell, dass das Resultat noch kein Hit ist: Sobald wir den Mauszeiger auf den Flash-Film bewegen, fängt sich das Rechteck zwar tatsächlich an zu bewegen, aber die Bewegung verläuft überhaupt nicht nach Wunsch: der Abstand zwischen Mauszeiger und Rechteck ist viel zu gross und das Rechteck gerät schnell mal ausserhalb der Bühne.
Also nächster Versuch. Ergänzen Sie den Code um das Argument true (Beispiel 1a):
onClipEvent(enterFrame){
startDrag(this, true);
}
Nun haftet sich der Nullpunkt des Symbols magnetisch an den Mauszeiger, sobald sich dieser im Flash-Film befindet. Schon etwas besser, aber brauchen kann man das Teil noch immer nicht wirklich.
Eine Schaltfläche kommt ins Spiel
Brauchbares Drag & Drop lässt sich erst mittels einer Schaltfläche erzielen. Erstens kann man mit einer Schaltfläche einen "Anfasser" realisieren, und zweitens kann man den Beginn des Ziehens, das "Einrasten" mit dem Ereignis press genau steuern.
Erweitern Sie den Flash-Film: Erstellen Sie eine kleine Schaltfläche. Fügen Sie die Schaltfläche zum Rechteck. Wichtig: Die Schaltfläche ist Teil des Elementes, das sie Ziehen möchten. Statt den Code auf den Movie zu legen, arbeiten wir nun mit der Schaltfläche:
on (press){
startDrag(this,false);
}
Wir haben hier wieder mit dem Argument false gearbeitet. Jetzt ist dies nämlich zweckmässig: Der Movie rastet beim Drücken der Maustaste an der Position des Zeigers ein.
Loslassen
Ist das Rechteck einmal eingerastet, "klebt" es am Zeiger wie eine Fliege am Honigpapier. Im nächsten Schritt wollen wir mit der Aktion stopDrag() das Ding wieder fallenlassen (drop) können. Erweitern Sie den Code:
on (press){
startDrag(this,false);
}
on (release){
stopDrag();
}