Interactieve animatie met Adobe Flash Week 6 // Drag & Drop

Leerdoelen …

Agenda Uitleg Drag & Drop GrenzenDroptarget Meerdere MovieClip’s sleepbaar maken Weekopdracht

Drag & Drop Maak MovieClip’s sleepbaar met ActionScript

Drag & drop Met behulp van ActionScript kan je een MovieClip koppelen aan je muiscursor. Hierdoor versleep je de MovieClip. Je sleept de clip net zo lang totdat je deze expliciet weer neerzet met ActionScript.

Overzicht functies clip.startDrag(center, bounds) Start het slepen van de clip. clip.stopDrag() Stopt het slepen van de clip.

clip.startDrag(center, bounds); Aan de functie “startDrag” kan je twee argumenten meegeven. Het eerste argument is een Boolean waarde (true/false) welke er voor zorgt dat de clip onder de muis cursor gecentreerd blijft. Het tweede argument is een Rectangle welke de grenzen aangeeft waarbinnen de clip gesleept kan worden.

Voorbeeld drag: // haal bal clip op uit de Library var clip:MovieClip = new BalClip(); // voeg toe aan display list addChild(clip); // koppel de clip aan de muiscursor clip.startDrag(true); Zie: voorbeeld_1_startdrag.fla We roepen de functie startDrag() aan in de MovieClip hem te slepen. We roepen de functie startDrag() aan in de MovieClip hem te slepen. In de Library staat een MovieClip met als Class: BalClip In de Library staat een MovieClip met als Class: BalClip We geven een TRUE mee als eerste argument, zodat de clip centreert onder de muiscursor. We geven een TRUE mee als eerste argument, zodat de clip centreert onder de muiscursor.

Lesopdracht 1 - Omschrijving We gaan oefenen met Drag & Drop in combinatie met Mouse Events. Alleen door de drag functionaliteit te combineren met Events wordt het echt interactief. Alleen door de drag functionaliteit te combineren met Events wordt het echt interactief. Als je de muisknop indrukt op een MovieClip begin je met slepen, laat je los, stop je weer met slepen. Zie: lesopdacht_1_drag.fla

Lesopdracht 1 - Stappenplan Maak een MovieClip aan in de Library, exporteer deze voor ActionScript, door een Class naam aan te geven en voeg de MovieClip met ActionScript toe aan de DisplayList. Koppel een Event Listener aan de MovieClip om af te vangen of de gebruiker zijn muisknop indrukt (MouseEvent.MOUSE_DOWN). In de listener begin je met slepen van de MovieClip. Koppel een tweede Event Listener om af te vangen of de gebruiker zijn muisknop loslaat(MouseEvent.MOUSE_UP). In de listener stop je met slepen van de MovieClip. Zie: lesopdacht_1_drag.fla

Trek een grens Grenzen aangeven waarbinnen een MovieClip gesleept kan worden.

Grenzen aangeven Je kan aan “startDrag” de grenzen meegeven waarbinnen de MovieClip gesleept kan worden. Dit doe je via het tweede argument van “startDrag”. Het tweede argument is een Rectangle welke de grenzen aangeeft waarbinnen de clip gesleept kan worden.

Voorbeeld grenzen: // haal bal clip op uit de Library var clip:MovieClip = new BalClip(); // voeg toe aan display list addChild(clip); // grenzen waarbinnen de clip sleepbaar is var grenzen:Rectangle = new Rectangle(0,0,200,300); // koppel de clip aan de muiscursor clip.startDrag(true, grenzen); Zie: voorbeeld_2_grenzen.fla We geven de grenzen mee aan startDrag als tweede argument. We geven de grenzen mee aan startDrag als tweede argument. We maken een variabele aan met een Rectangle die de grenzen aangeeft. We maken een variabele aan met een Rectangle die de grenzen aangeeft.

Hebben we iets geraakt? Kijken of de gesleepte MovieClip boven op een andere MovieClip los gelaten is.

clip.dropTarget Je na het slepen uitlezen of de gebruiker de MovieClip heeft losgelaten op een andere clip. Dit doe je door te testen of “clip.dropTarget” bestaat. Let op dat je altijd “clip.dropTarget.parent” moet aanroepen om de werkelijke MovieClip te krijgen en niet een element (Shape, TextField) welke in de MovieClip staat.

Voorbeeld droptarget: // luister of de muis weer wordt losgelaten drag_clip.addEventListener(MouseEvent.MOUSE_UP, dropIt); // listener function dropIt(ev:MouseEvent) { // is de clip ergen op los gelaten? if (drag_clip.dropTarget) { // geef de drop target een nieuwe random positie drag_clip.dropTarget.parent.x = Math.random() * 800; } // stop met slepen drag_clip.stopDrag(); } Zie: voorbeeld_3_droptarget.fla We koppelen een event listener om te kijken of de muis wordt losgelaten. We koppelen een event listener om te kijken of de muis wordt losgelaten. Kijken of de dropTarget eigenschap in de MovieClip bestaat. Kijken of de dropTarget eigenschap in de MovieClip bestaat. Let op dat we de parent van de dropTarget gebruiken! Let op dat we de parent van de dropTarget gebruiken!

Lesopdracht 2 - Omschrijving We gaan oefenen met dropTarget. Na het slepen doen we een check of de gebruiker de MovieClip bovenop een andere MovieClip heeft losgelaten. Na het slepen doen we een check of de gebruiker de MovieClip bovenop een andere MovieClip heeft losgelaten. Zie: lesopdacht_2_droptarget.fla

Lesopdracht 2 - Stappenplan Maak twee MovieClip’s aan in de Library, een om te kunnen slepen en een als doel waarop de andere clip gesleept moet worden. Exporteer deze voor ActionScript, door een Class naam aan te geven en voeg de MovieClip’s met ActionScript toe aan de DisplayList. Maak EventListener’s die er voor zorgen dat de MovieClip sleepbaar wordt. Als de gebruiker stopt met slepen, doe je een check of de andere MovieClip is losgelaten op de andere MovieClip. Als dit het geval is verplaats je beide MovieClip's naar een random positie. Zie: lesopdacht_2_droptarget.fla

Event listener hergebruiken Slim meerdere objecten slepen

Hergebruik EventListener Stel dat we 10 MovieClip's hebben die we versleepbaar willen maken. Tot nu toe zou je dan 10 EventListener’s voor MOUSE_DOWN en 10 EventListener’s voor MOUSE_UP moeten schrijven. Dit is veel werk en maakt je code onoverzichtelijk. Je kan een EventListener hergebruiken, zodat het niet uitmaakt hoeveel MovieClip’s je sleepbaar wilt maken.

Event.target Elke EventListener functie heeft één argument waar het verstuurde Event binnen komt. Elk verstuurd Event heeft een “target”. Dit is het Object wat het Event verstuurd heeft. Dit is in ons geval de MovieClip waar de gebruiker zijn muisknop heeft ingedrukt. Door het target uit te lezen, kunnen we de zelfde functie hergebruiken als EventListener voor meerdere MovieClip’s.

Voorbeeld hergebruik: Zie: voorbeeld_4_eventtarget.fla // luister of de mis wordt ingedrukt drag_clip.addEventListener(MouseEvent.MOUSE_DOWN, dragIt); // listener function dragIt(ev:MouseEvent) { // haal de clip uit het event var clip:MovieClip = ev.target as MovieClip; // begin met slepen clip.startDrag(); } We koppelen een EventListener aan de MovieClip. We koppelen een EventListener aan de MovieClip. Hier komt het verstuurde Event binnen. Hier komt het verstuurde Event binnen. We lezen het “target” uit het event en bewaren deze in een variabele. De target is hier de MovieClip die het Event verstuurde. We lezen het “target” uit het event en bewaren deze in een variabele. De target is hier de MovieClip die het Event verstuurde. Je moet Flash vertellen dat het om een MovieClip gaat Je moet Flash vertellen dat het om een MovieClip gaat

Lesopdracht 3 - Omschrijving We gaan oefenen met het hergebruik van Events. We plaatsen 10 MovieClip’s en maken deze allemaal sleepbaar. Je maakt maar gebruik van twee EventListener's. Zie: lesopdacht_3_eventtarget.fla

Lesopdracht 3 - Stappenplan Maak een MovieClip aan in de Library, exporteer deze voor ActionScript, door een Class naam aan te geven en voeg de MovieClip met ActionScript minimaal 10 keer toe aan de DisplayList. Maak twee EventListener’s die er voor zorgen dat de MovieClip’s sleepbaar worden. Maak gebruik van de target in het Event zodat de EventListener herbruikbaar wordt. Zie: lesopdacht_3_eventtarget.fla

Weekopdracht Een eenvoudige Drag & Drop game

Een Drag & Drop game Je bent gevraagd om een simpele Drag & Drop game te maken. Het gaat alleen nog maar om de “gameplay” en er hoeven nog geen levels, score enzovoorts in te zitten. Het spel concept mag je zelf verzinnen, maar het moet voldoen aan de volgende eisen: Je maakt gebruik van dropTarget. Je hergebruikt EventListener's met Event.target. Er zijn minimaal 5 sleepbare MovieClip’s. Er is minimaal 1 MovieClip welke dient als doel.

Inleveren Je levert het volgende in: Een eenvoudige Drag & Drop game. Op je webspace zet je zowel de FLA als SWF bestanden. Zorg er voor dat je FLA bestand goed gestructureerd en netjes is, maak goed gebruik van lagen op de Timeline en mappen in de Library.