Introduktion til Flash, fortsat Kaspar Rosengreen Nielsen kaspar@interactivespaces.net Dagens program Opsamling på sidste forelæsning. Vi vil beskæftige os med følgende emner i dagens forelæsning: Komponenter Eksempler på vigtige funktioner og klasser Objektorienteret programmering og klasser
Opsamling Sidste gang kiggede vi på Flash og ActionScript. Nogle af de ting vi kom ind på var: Tegning og animering i Flash Sproget som minder meget om Java Vigtige variabler på MovieClip instanser i ActionScript: x, y, rotation, alpha, visible etc. Vigtige funktioner i ActionScript: stop, play, gotoandplay, gotoandstop. Hvordan man lytter efter mus- og keyboardinput i ActionScript. Komponenter i Flash
Komponenter i Flash Flash har en samling af standard UI komponenter, man kan bruge i sin Flash film fremfor at lave dem selv. Knapper og tekstfelter er nemme at lave selv, men en liste med scroll er straks sværere. Listen over UI komponenter findes under Window > Components. Her findes komponenter man kender fra andre miljøer: tekstfelter, lister, checkbox, slider etc. Kaspar Rosengreen Nielsen - kaspar@interactivespaces.net Komponenter forts. UI komponenterne kan trækkes direkte ind på scenen og manipuleres ligesom andre klip i biblioteket. De kan gives et navn, så de kan tilgås via ActionScript. Højde, bredde, x og y kan indstilles via Property Inspector. Her er der også en ekstra fane kaldet Parameters, der indeholder indstillinger for komponenten. F.eks. om det skal være muligt at markere flere elementer i en liste ad gangen. Kaspar Rosengreen Nielsen - kaspar@interactivespaces.net
Komponenter forts. Når en komponent er blevet givet et navn, kan den manipuleres vha. ActionScript, som I kender det. Den kan flyttes og roteres, og der kan tilføjes en event listener til den. Kaspar Rosengreen Nielsen - kaspar@interactivespaces.net List En af de komponenter der kan tilføjes er en liste. Vi har f.eks. oprettet listen og kaldt den listcomponent. Vi kan nu manipulere den vha. ActionScript. listcomponent.x = 100; listcomponent.height = 45; Vi kan tilføje indgange til listen gennem Property Inspector eller via ActionScript. listcomponent.additem({label: Test, data:32); Kaspar Rosengreen Nielsen - kaspar@interactivespaces.net
List forts. Hvis vi læser nogle data ind i en liste (f.eks. fra en xml-fil) kan listen angives som en DataProvider. import fl.data.dataprovider; var listitems:array = new Array(); listitems[0] = {label: Test, data:32); listcomponent.dataprovider = new DataProvider(listItems); Kaspar Rosengreen Nielsen - kaspar@interactivespaces.net List forts. Hvis vi gerne vil modtage besked, når der vælges en ny indgang i listen registrerer vi en event listener: listcomponent.addeventlistener(event.change, listchangedeventhandler); I funktionen kan vi nu hente data værdien fra den valgte indgang i listen. function listchangedeventhandler(event:event) { trace( Indgangen med data: +event.target.selecteditem.data+ er valgt. ); Kaspar Rosengreen Nielsen - kaspar@interactivespaces.net
Vigtige funktioner og klasser Vigtige funktioner og klasser i Flash Dagen vil starte med en række eksempler på funktioner og klasser, det er rart at kende i Flash. Funktioner: hittestobject hittestpoint Klasser Loader Timer Sound XML
Kollisionsdetektion Det kan ofte være relevant at vide, om to klip kolliderer eller et klip berører et bestemt punkt. Tænk f.eks. i et spil som Pong. Dette kan afgøres med funktionerne hittestobject og hittestpoint. Eksempel: hittestobject Funktionen hittestobject bruges til at afgøre om et filmklip kolliderer med et andet filmklip. Et oplagt eksempel er et Pong spil Vi har f.eks. indsat et klip kaldet ball_mc. Nu vil vi gerne afgøre, om det kolliderer med et bat på scenen. ball_mc.hittestobject(bat1_mc); Dette kald vil enten returnere true eller false og vil ofte blive anvendt i en if-sætning: if (ball_mc.hittestobject(bat1_mc)) { // Gør noget
Eksempel: hittestpoint Funktionen hittestpoint kan bruges til at afgøre om et symbol kolliderer med et punkt. F.eks. musens position. Vi har f.eks. oprettet et klip kaldet box1_mc på scenen. Nu vil vi gerne afgøre, om det kolliderer med musen. box1_mc.hittestpoint(stage.mousex, stage.mousey, true); Funktionen returner ligesom sidst true eller false. Eksempel: hittestpoint med mus Vi kan nu sætte en MOUSE_MOVE handler op, som på hver event undersøger om musen kolliderer med firkanten: box1_mc.addeventlistener(mouseevent.mouse_move, mousemovehandler); function mousemovehandler(event:mouseevent) { if(box1_mc.hittestpoint(stage.mousex, stage.mousey, true)) { trace("mouse collision at "+stage.mousex +","+stage.mousey);
Eksempel: Loader klassen Loader klassen bruges til at indlæse eksterne filer såsom billeder og andre Flash-fil (swf-filer) ind i et filmklip på scenen. Vi har f.eks. oprettet et klip kaldet box1_mc på scenen. Nu vil vi gerne hente et billede ind i det. // Opret nyt Loader object var loader:loader = new Loader(); // Indlæs billede loader.load(new URLRequest( billede.jpg )); // Tilføj billede til filmklip box1_mc.addchild(loader); Eksempel: Loader klassen fortsat Normalt vil billedet blive vist i sin faktiske størrelse. Vi kan dog tilpasse billedets størrelse til scenens størrelse på følgende måde: loader = new Loader(); loader.contentloaderinfo.addeventlistener(event.complete, function(event:event) { loader.width = stage.stagewidth; loader.height = stage.stageheight; addchild(loader); ); loader.load(new URLRequest( billede.jpg ));
Eksempel: Loader klassen fortsat Det er vigtigt at fjerne loaderen fra klippet igen, da Flash filmen potentielt kan bruge rigtigt meget hukommelse. box1_mc.removechild(loader); loader.unload(); Lyd kan også startes vha. ActionScript. var sound:sound = new Sound(new URLRequest("Musik/01.mp3")); sound.play(); Musik/01.mp3 er en mp3-fil, der befinder sig i folderen Musik i forhold til der, hvor Flash-filen er gemt. Man kan også starte på en bestemt position (1000 ms) og loope et antal gange (3): var snd:sound = new Sound(new URLRequest( Musik/02.mp3")); snd.play(1000, 3); Lyden kan også pauses. var snd:sound = new Sound(new URLRequest( Musik/03.mp3")); var channel:soundchannel = snd.play(); var pauseposition:int = channel.position; channel.stop(); channel = snd.play(pauseposition); Kaspar Rosengreen Nielsen - kaspar@interactivespaces.net Sound klassen
Sound klassen Man kan også lytte på, hvornår lyden er klar til afspilning sound.addeventlistener(event.complete, soundloaded); function soundloaded(e:event) { sound.play(); Eller hvornår lyden er færdig med at spille. Kaspar Rosengreen Nielsen - kaspar@interactivespaces.net Eksempel: Timer klassen Klassen Timer kan bruges til at starte et stopur, der giver beskeder et antal gange med et bestemt tidsrum. F.eks. flytte et filmklip henover scenen. // Opret Timer object med 500 ms og 1 gentagelse var timer:timer = new Timer(500, 1); // Tilføj event listener til timer timer.addeventlistener(timerevent.timer, function(event:timerevent):void { box1_mc.x += 5; ); // Start timer timer.start();
XML-filer XML står for Extended Markup Language. XML-filer er en struktureret måde at gemme data på. Flash kan læse data fra en xml-fil. Giver den fordel at indhold separeres fra Flash-filen. F.eks. en xml-fil med billeder, der skal vises i et slideshow. <?xml version="1.0" encoding="utf-8"?> <slideshow> <image> <url>http://www.mysite.com/mypicture.jpg</url> <comment>picture Title</comment> </image> <image> <url>http://www.mysite.com/mypicture2.jpg</url> <comment>picture Title #2</comment> </image> </slideshow> Eksempel: Læse data fra en XML-fil Måden man læser xml-filer på baserer sig igen på events. Det er muligt at læse fra en lokal fil eller en url. I nedenstående indlæser vi en liste af billeder fra filen slideshow.xml og udskriver dem i Output-vinduet. var loader:urlloader = new URLLoader(); loader.addeventlistener(event.complete, function (event:event) { var xml:xml = new XML(loader.data); for (var j:number = 0; j<xml.image.length(); j++) { trace( Url: +xml.image[j].url); trace( Title: +xml.image[j].comment); ); loader.load(new URLRequest("slideshow.xml"));
Objektorienteret programmering Objektorienteret programmering I kender objektorienteret programmering fra Java. Her arbejder I med klasser, som I kan lave instanser af kaldet objekter. En klasse kan være en underklasse af en anden klasse. F.eks. Pattedyr > Menneske. Klassen kan herefter udvide eller overskrive metoder i overklassen. En klasse indeholder variabler og metoder. En klasse kan implementere et interface, som er en beskrivelse af de metoder, en klasse skal indeholde.
Objektorienteret programmering, forts Klasser er en god måde at strukturere sin kode på, da den gør koden mere struktureret og understøtter genbrug. Java og Flash minder meget om hinanden i måden, de har implementeret klasser på. Klasser i Java En person kan modelleres vha. følgende Java kode: public class Teacher { private String name = ; public Teacher(String name) { this.name = name; public String printname() { System.out.println(name); For at lave en instans skrives følgende: Teacher teacher = new Teacher( Kaspar ); teacher.printname();
Flash understøtter mange af de samme ting, Java gør. Nedenfor er et eksempel på en klasse i Flash. Skal gemmes i en fil, der hedder Teacher.as. package { public class Teacher { private var name:string = ; Klasser i Flash public function Teacher(name:String) { this.name = name; public function tracename():string { trace( Teacher s name is: + name); For at lave en instans skrives følgende: var teacher:teacher = new Teacher( Kaspar ); teacher.tracename(); Klasser i Flash Alle klasser starter med en package erklæring. Dette gør det muligt at organisere klasser i forskellige pakker (f.eks. flash.utils der samler forskellige værktøjs klasser). package { Klassefilen skal ligge i en folder der svarer til pakkens navn. Efter package erklæringen kan der følge en eller flere import statements. import flash.display.movieclip; import flash.events.event;
Klasser i Flash: variabler Variabler erklæres på samme måde som vist i forrige forelæsning. Det er dog nu bl.a. muligt at sætte private og public foran: public var name:string = ; // Kan tilgåes person.name private var name:string = ; // Kan kun ses i klassen Klasser i Flash: variabler Man kan også definere getters og setters for feltvariabler i klassen. F.eks. en persons alder: På den måde kan værdien valideres inden den skrives i klassens variabel. private var _age:number; public function get age():number { return _age; public function set age(val:number):boolean { if(_age < 0) return false; _age = val; return true;
Klasser i Flash: funktioner Det er muligt at definere funktioner på samme måde som ellers i Flash. Der er som i Java også en constructor metode, der kaldes, når der laves en ny instans af klassen. public function Teacher(name:String) { this.name = name; Der kan sættes public og private foran funktioner også. public function tracename():string { trace(name); private function tracename():string { trace(name); Polymorfisme Polymorfisme angiver at forskellige klasser skal implementere de samme metodenavne. Dette sker ved, at de opfylder et bestemt interface. F.eks. kan vi definere Person som et interface. package { public interface Person { function tracename():void;
Polymorfisme Forskellige personer kan nu implementere dette interface på forskellige måder. F.eks. studerende og undervisere. package { public class Teacher implements Person { private var name:string = ; public function tracename():void { trace(name); package { public class Student implements Person { private var name:string = ; public function tracename():void { trace(name); Polymorfisme Nu kan man f.eks. lave en liste af deltagere i et kursus, hvor der både kan optræde undervisere og studerende. var participants:array = new Array(); participants.push(new Teacher( Kaspar )); participants.push(new Student( Hans )); for (var i:number = 0; i < participants.length; i++) { participants[i].tracename();
Type Casting Det er relevant at kende nøgleordene is og as. is bruges til at bestemme typen af et object. F.eks. if (participants[i] is Student)... if (participants[i] is Teacher)... as bruges til at caste et objekt til et andet. F.eks. fra Person til Student. var student:student = participants[i] as Student; Klasser i Flash: MovieClip Udover at kunne definere egne klasser, giver Flash også mulighed for at udvide MovieClip-klassen og andre klasser. Dvs. man kan lave en binding mellem et symboler i biblioteket og egne klasser. Det er da muligt at indsætte klip dynamisk.
Indsæt symboler fra biblioteket forts. Man kan godt vælge at lade Flash generere klassen. Der kan nu laves en ny instans af klassen Box i en frame: var box1_mc:box = new Box(); addchild(box1_mc); Der kan nu sættes egenskaber for boksen som før: box1_mc.x = 100; box1_mc.y = 100; Og tilføjes event listeners: function enterframehandler(event:event) { event.target.rotation = event.target.rotation+5; box1_mc.addeventlistener(event.enter_frame, enterframehandler); Kaspar Rosengreen Nielsen - kaspar@interactivespaces.net Klasser i Flash: MovieClip Hvis vi gerne vil implementere en generel opførsel for et klip skal vi udvide MovieClip klassen. For at udvide MovieClip skriver vi: package { import flash.display.movieclip; public class Box extends MovieClip {... Klassen skal være public og importere flash.display.movieclip. Filen skal gemmes i et filnavn, der svarer til klassens. For ovenstående vil det være Box.as.
Udvidelse af MovieClip En simpel udvidelse kunne være en bolden fra Pong, der flytter sig ned over skærmen på enterframe events. Lav cirkel til et MovieClip symbol (F8) og udvid AS 3.0 klassen Ball. Opret en ActionScript fil under File > New og gem den som Ball.as. Implementer klassen Ball i filen Ball.as: package { import flash.display.movieclip; import flash.event.event; public class Ball extends MovieClip { public function Ball() { addeventlistener(event.enter_frame, function (event:event) { this.y += 5; ); Hack et keyboard
Hack et keyboard Hack-et-keyboard Marianne viser hvordan man gør til DatLab på fredag 13-15.
Opsummering I dag har vi set på: En række vigtige funktioner og klasser i ActionScript til kollisionstjek, læse xml-filer, afspille lyd og eksekvere timere. På komponenter. Objektorienteret programmering i ActionScript. Ugens opgaver Opgave E Blandt nedenstående opgaver kan I vælge at aflevere opgave E.1 eller E.2 afhængigt af hvilken opgave, der har størst relevans for jeres projekt. Opgave E.1 Lav et slideshow af billeder, der kan styres vha. frem- og tilbageknapper og tastaturet. Afspil baggrundsmusik vha. Sound klassen. Gør det eventuelt muligt at vælge billederne fra en listekomponent. Opgave E.2 Lav en lydafspiller der kan afspille en liste af musiknumre. Lav knapper til afspille, stoppe, gå til forrige/næste nummer etc. og gør det muligt at styre afspilleren med tastaturet. Afspil lydene vha. Sound klassen. Gør det eventuelt muligt at vælge musiknumrene fra en listekomponent.