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

Slides:



Advertisements
Verwante presentaties
Sudoku puzzels: hoe los je ze op en hoe maak je ze?
Advertisements

KINN 2010 •OOP •O Object •O Georiënteerd •P Programmeren.
Meten met de aardspreidingsweerstandsmeter
Veilig Internet Geef antwoord op de vragen en ontdek of jij veilig gebruik maakt van het internet!
Thinkquest2 versie 2013 info: vanaf februari 2013.
Basis van het Flag Football
Hoog Leer noten lezen! Deel 1 Laag A - B - C - D - E - F - G
Base: bewerkingen 2 soorten - Oplopend- Aflopend.
De implementatie van de UIML standaard in UIML.NET Ingo Berben Eindwerk voorgedragen tot het behalen van de graad van bachelor in de informatica/ICT/kennistechnologie.
Hoofdstuk 6: Controle structuren
Stijn Van Wonterghem1 ALICE Een inleiding. Alice - Een Inleiding2 Wat is ALICE? Een moderne programmeeromgeving –Visuele voorstelling, opgebouwd uit drie-
Idee Generatie Wit Papier, Warcraft 3, Thrall, Hoofdpijn, denken, rare les, Karel aan het ijsberen, Schrijven, Opdracht, Schaken, Stappen, Oplichten, Vooruit.
1 Datastructuren Een informele inleiding tot Skiplists Onderwerp 13.
Object georiënteerd programmeren in Alice
Lagoonia.
Interpreteren van data
KINN 2010 OOP O Object O Georiënteerd P Programmeren.
Game concept Samenvatting hoofdstuk 20 & 21. De waarde van esthetiek Het kan spelers aan trekken die het spel anders niet hadden gespeeld Het kan jouw.
PHP & MYSQL LES 02 PHP & FORMULIEREN. PHP & MYSQL 01 PHP BASICS 02 PHP & FORMULIEREN 03 PHP & DATABASES 04 CMS: BEST PRACTICE.
Starten met PHP Dynamischer bouwen.
Handleiding ClassDojo
Over erkenning geven en Luisteren,Samenvatten,Doorvragen
Les 2: Interactie in je space door middel van klikbare objecten en actionscript. Wat is actionscript en programmeren?
Welkom bij Immersive space, de flashles Tijdens deze lessen, leren wij je werken met het programma adobe flash.
OFC28 mediawijsheid les 7 leren door te maken
Besproken actionscript Doel: Interactie in je space door middel van klikbare objecten en actionscript.
Les 4 De Muis (deel 1) Programmeren met Visual Basic Karl Moens.
Samenvatting Havo 5.
Trogdor The burninator Ruben Middel Raymond Siudak.
Les 5 De Muis (deel 2) Drag & Drop
Vervolg C Hogeschool van Utrecht / Institute for Computer, Communication and Media Technology 1 Onderwerpen voor vandaag top-down decompositie Opdrachten:
“Ontwikkelen van educatieve spellen voor een speciale doelgroep”
MINECRAFT PLAATJES TUTORIAL #4 EEN GRIEZELIG VOORBEELD.
Vervolg C Hogeschool van Utrecht / Institute for Computer, Communication and Media Technology 1 Onderwerpen voor vandaag Een embedded systeem: ARM bord.
Prototyping Week 7 // Tweenlite & API. TweenMax Snel mooie en effectieve animatie.
?.
Java Objectgeoriënteerd Programmeren in Java met BlueJ
Docentinstructie: Het is aan te bevelen de eerste dia’s klassikaal te tonen en met uitleg te bespreken. Als na zes dia’s een korte demo van Celsius/Fahrenheit.
Let’s go! ›Beginnerspresentatie ›Starten met prospero ›Verschil CMS en web navigator ›Nieuwe content > nieuwe folder aanmaken ›Bestanden uploaden ›Linkobject.
 C++ heeft een inheritance mechanisme  Manier om functionaliteit te ‘erfen’ van een parrent class ◦ Polymorphisme ◦ Zoals we het ook in C# kennen.
Slc kwartaal 3. programma Hoe is het gegaan Verwachtingen Tips and tricks Opdrachten slc.
Variabelen. Wat zijn variabelen? In een programmeertaal zijn er “dingen” nodig die ervoor zorgen dat het programma informatie voor korte of langere tijd.
Codetuts Academy Les 6 Module 2a Php Fundamentals 1.
Codetuts Academy Les 2 Module 2a Php Fundamentals 1.
Loops en errors Array's Random try catch for loop while loop do while loop.
Don Blaauw Beginsele n illustratie en animatie in Flash.
Na de praktijk, de theorie.. Zoals een gehaktmolen 1.Je stopt er iets in. 2.Je hoeft niet te weten wat er binnenin gebeurt. 3.Het resultaat verschijnt.
Inhoud Breuken (optellen, aftrekken, vermenigvuldigen en delen).
GUI & classes Een Gui in een class steken en het object gebruiken.
IF() ELSE() LES 4: VOORWAARDEN. BOOL Een variabele die slechts 2 mogelijke waarden kan hebben: true(waar) of false(niet waar) duid je aan met bool bool.
De definitie van een object. Een object is een verzameling van eigenschappen en bewerkingen. Veel voorkomende objecten zijn: D (display) Gui (user interface)
Bespreking testpracticum.  Javaconventies! ◦ KlasseNamen beginnen met Hoofdletter ◦ objectNamen/methodeNamen met kleine letter  Aanspreken GUI ◦ Zie.
Javascript. Voortgang op: Account gegevens Invullen op: Bevestiging ontvangen ( ) via website?
Milo van der Zee
Javascript.
Onderzoek in Apps.
Gameprogrammeren: Methoden
Gameprogrammeren: Properties
Wij zijn FLEX Finn Megan Anouk Nina
GAME MAKER ONLINE Les 2 / Breakout Michel Fiege.
GAME MAKER ONLINE Les 1 / Sokoban Michel Fiege.
GAME MAKER ONLINE Les 6 / Super Mario Michel Fiege.
GAME MAKER ONLINE Les 5 / Snake Michel Fiege.
SQL Les February 2019.
Eens / oneens IK DENK NA VOORDAT IK BEGIN
Software Development fundamentals
Leren programmeren met Scratch
Presentatie verpakking
Software Development fundamentals
Python – For loop + strings
Transcript van de presentatie:

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.