Introduktion til ActionScript, fortsat

Introduktion til ActionScript, fortsat Kaspar Rosengreen Nielsen kaspar@interactivespaces.net i n t e r a c t i v e s p a c e s. n e t Kaspar Nielsen, kaspar@interactivespaces.net 1

Dagens program Opsamling på sidste forelæsning og øvelserne. Fortsat introduktion til ActionScript: Eksempler på vigtige funktioner og klasser i Flash Objektorienteret programmering og klasser i ActionScript Vi slutter af med et større eksempel på et spil, der bl.a. bruger klasser. 2

Opsamling Sidste gang introducerede jeg ActionScript. Nogle af de ting vi kom ind på var: Sproget som minder meget om Java Vigtige variabler på MovieClip instancer 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 Et godt tip: Placer ActionScript kode i sit eget lag kaldet Actions for at give mere overblik. 3

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 XML 4

Kollisionsdetektion Det kan ofte være relevant at vide, om to klip kolliderer eller et klip berører et bestemt punkt. Dette kan afgøres vha. funktionerne hittestobject og hittestpoint. 5

Eksempel: hittestobject Funktionen hittestobject bruges til at afgøre om et filmklip kolliderer med et andet filmklip. Vi har f.eks. indsat et klip kaldet box1_mc. Nu vil vi gerne afgøre, om det kolliderer med et andet klip på scenen. box1_mc.hittestobject(box2_mc); Dette kald vil enten returnere true eller false og vil ofte blive anvendt i en if-sætning: if (box1_mc.hittestobject(box2_mc)) { // Do something else { // Do something else 6

Eksempel: hittestobject med mus Vi kan nu trække to firkanter kaldet box1_mc og box2_mc rundt med musen og få besked, når firkanterne kolliderer. Nedenfor vises funktionen til MOUSE_MOVE event handleren: box1_mc.addeventlistener(mouseevent.mouse_move, mousemovehandler); box2_mc.addeventlistener(mouseevent.mouse_move, mousemovehandler); function mousemovehandler(event:mouseevent) { if (box1_mc.hittestobject(box2_mc)) { trace("box collision!"); 7

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(_xmouse, _ymouse, true); Funktionen returner ligesom sidst true eller false. 8

Eksempel: hittestpoint med mus Vi kan nu sætte en enterframe handler op, som på hver event undersøger om musen kolliderer med firkanten: box1_mc.addeventlistener(event.enter_frame, enterframehandler); function enterframehandler(event:event) { if(box1_mc.hittestpoint(stage.mousex, stage.mousey, true)) { trace("mouse collision at "+stage.mousex +","+stage.mousey); 9

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 pictldr:loader = new Loader(); // Sti til billede var picturlreq:urlrequest = new URLRequest( billede.jpg ); // Indlæs billede pictldr.load(picturlreq); // Tilføj billede til filmklip this.addchild(pictldr); 10

Eksempel: Loader klassen fortsat Normalt vil billedet blive vist i sin faktiske størrelse. Vi kan dog tilpasse billedets størrelse til filmklippets på følgende måde: pictldr = new Loader(); var picturlreq:urlrequest = new URLRequest( 01.jpg ); pictldr.contentloaderinfo.addeventlistener(event.complete, function(event:event) { // Sæt billede til at være 550x400 pixels pictldr.width = 550; pictldr.height = 400; ); pictldr.load(picturlreq); this.addchild(pictldr); 11

Eksempel: Timer klassen Klassen Timer kan bruges til at starte et stopur, der giver beskeder et antal gange med et bestemt tidsrum. F.eks. hvis venstre museknap skal holdes nede over en firkant et bestemt stykke tid, før firkanten kan trækkes. function mousedownhandler(event:mouseevent) { // Opret Timer object med 1000 ms og 1 gentagelse var timer:timer = new Timer(1000, 1); // Tilføj event listener til timer timer.addeventlistener("timer", function(event2:timerevent):void { event.target.startdrag(false); ); // Start timer timer.start(); 12

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. <Images> <Image> <Url>http://www.mysite.com/mypicture.jpg</Url> <Title>Picture Title</Title> </Image> <Image> <Url>http://www.mysite.com/mypicture2.jpg</Url> <Title>Picture Title #2</Title> </Image> </Images> 13

Eksempel: Læse data fra en XML-fil Måden man læser xml-filer på baserer sig igen på events. I nedenstående indlæser vi en liste af billeder fra filen Images.xml og udskriver dem i Output-vinduet. var xmlurl:urlrequest = new URLRequest("Images.xml"); 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].title); ); loader.load(xmlurl); 14

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. Pattedyr Menneske Hest En klasse indeholder variabler og metoder. En klasse kan implementere et interface, som er en beskrivelse af de metoder, en klasse skal indeholde. 15

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å. 16

Klasser i Java En person kan modelleres vha. følgende Java kode: public class Person { private String name = ; public Person(String name) { this.name = name; public String getname() { return name; For at lave en instans skrives følgende: Person person = new Person( Kaspar ); System.out.println(person.getName()); 17

Klasser i Flash Flash understøtter mange af de samme ting, Java gør. Nedenfor er et eksempel på en klasse i Flash. Skal skrives i en fil, der hedder Person.as. package { class Person { private var name:string = ; public function Person(name:String) { this.name = name; public function getname():string { return name; For at lave en instans skrives følgende: var person:person = new Person( Kaspar ); trace(person.getname()); 18

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 { Efter package erklæringen kan der følge en eller flere import statements. import flash.display.movieclip; import flash.events.event; Modsat på scenen er vi nødt til at importere alle klasser, vi gerne vil bruge i klassen. 19

Klasser i Flash: variabler Variabler erklæres på samme måde som vist i forrige forelæsning. Det er dog nu 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 20

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 Person(name:String) { this.name = name; Der kan sættes public og private foran funktioner også. public function getname():string { return name; private function getname():string { return name; 21

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 filmklip i biblioteket og egne klasser. 22

Klasser i Flash: MovieClip 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. 23

Eksempel: Udvidelse af MovieClip En simpel udvidelse kunne være en firkant, der roterer på en enterframe event. Lav firkant til et MovieClip symbol (F8) og udvid AS 3.0 klassen Box. Opret en ActionScript fil under File > New og gem den som Box.as. Implementer klassen Box i filen Box.as: package { import flash.display.movieclip; import flash.event.event; public class Box extends MovieClip { public function Box() { this.addeventlistener(event.enter_frame, function (event:event) { this.rotation += 5; Gem filen og kører filmen. 24

Eksempel: Pong-lignende spil Nu vil vi kigge på et større eksempel, der bruger nogle af de ting, vi har lært i dag. Vha. de teknikker jeg har vist de sidste forelæsninger, er det muligt at lave et interaktivt spil. Jeg vil bruge resten af forelæsningen på at implementere et større eksempel på et Pong-lignende spil. 25

Eksempel: Trin 1 - Grafik Først importerer vi en baggrund, vi gerne vil bruge. Tegn et bat og føj det til biblioteket som et MovieClip og sæt det til at pege på klassen Bat. Tegn en bold og føj den til biblioteket som et MovieClip og sæt den til at pege på klassen Ball. Tegn fire vægge så vi kan teste om bolden rammer væggene. 26

Eksempel: Trin 2 Ball-klassen Opret en ActionScript fil og gem den som Ball.as. Implementer klassen så den udvider MovieClip. package { import flash.display.movieclip; public class Ball extends MovieClip { Lav en metode så bolden bevæger sig ned over scenen på hver ENTER_FRAME event. Erklær i constructoren: public function Ball(bat:Bat, walls:walls, score_txt:textfield){ this.bat = bat; this.walls = walls; this.score_txt = score_txt; this.addeventlistener(event.enter_frame, function enterframehandler(event:event) { this.y += 5; ); 27

Eksempel: Trin 2 Ball-klassen Metoden skal nu udvides så den tjekker om battet eller den øverste eller nederste væg rammes. Vi er nødt til at indføre en variabel ydirection, der holder styr på hvilken retning bolden skal bevæge sig i. private var ydirection = 5; private function enterframehandler(event:event):void { if (this.hittestobject(walls.topwall_mc)) { ydirection = 5; else if (this.hittestobject(walls.bottomwall_mc) { ydirection = -5; else if (this.hittestobject(bat)) { ydirection = -5; this.y += ydirection; 28

Eksempel: Trin 3 - Scoretavle Lav en tekststreng på scenen og konverter den til et symbol (F8). Kald den score_txt. Ball klassen skal nu udvides med en score variabel og et score_txt felt. private var score:number = 0; private var score_txt:textfield = null; Når bolden rammer battet tæller vi scoren op og opdaterer tekstfeltet: if (this.hittestobject(bat)) { ydirection = -5; score++; score_txt.text = +score; Tilsvarende kan vi tælle ned når battet ikke rammer bolden. 29

Eksempel: Trin 4 Bat-klassen Opret en ActionScript fil og gem den som Bat.as. Implementer klassen så den udvider MovieClip. package { import flash.display.movieclip; public class Bat extends MovieClip { Vi skal lave en metode som lytter på højre og venstre piletast. Det lærte vi til sidste forelæsning. Venstre piletast Højre piletast 30

Eksempel: Trin 4 Bat-klassen Nu skriver vi en metode, der lytter på keyboard-events. Når højre og venstre piletast trykkes ned flyttes battet: public function Bat() { stage.addeventlistener(keyboardevent.key_down, keydownhandler); private function keydownhandler(event:keyboardevent) { if (event.keycode == 37) { // left this.x -= 5; else if (event.keycode == 39) { // right this.x += 5; Nu har vi et kørende spil! 31

Opsamling I dag har vi set mere af, hvad ActionScript kan. Vi gik igennem følgende funktioner og klasser: hittestobject og hittestpoint Loader XML Timer Vi så på, hvordan Flash understøttede klasser og kunne udvide MovieClip klassen. Til sidst gik vi igennem et eksempel, der illustrerede, hvordan vi kan bruge det hele i sammenhæng. Er der nogle spørgsmål til dagens emne? 32

Ugens opgave Slideshow! I skal i denne opgave fortsætte jeres slideshow implementation fra sidste gang. Denne opgave skal I bruge til at blive fortrolige med at indlæse data fra en xml-fil samt indlæse billederne vha. Loader klassen. Opgave 1 Indlæs billeder til slideshowet fra en ekstern xml-fil på følgende format. Opgave 2 Lav en ekstern MovieClip klasse kaldet "Image", der kan indlæse et billede i et MovieClip placeret på scenen. Brug Loader klassen til at opnå dette. Opgave 3 Lav en timer der skifter billede i MovieClip'et på scenen med et bestemt tidsinterval. 33

Næste gang De næste gang vil Niels Olof tage over og undervise jer i HTML og PHP. HTML er det sprog, man bruger til at skrive hjemmesider i. PHP kan generere HTML-sider dynamisk og kan bl.a. bruges til at koble op til en databaser med mere. Sidst i kurset er det planen, at I skal kombinere Flash med PHP. 34