Torgny > FlashDevelop start

Arbeta med dokumentklass i Flash

Den här uppgiften är ett bra tillfälle att arbeta med programvaran FlashDevelop. I så fall kan du ladda ner den från flashdevelop.org och installera. Det går även bra att arbeta med Actionscripteditorn i Flash.

Start, setup

1. Skapa en mapp Flashgubbe för din applikation. Skapa två undermappar bin och src.
2. Öppna Flash och klicka på File/New för att skapa en ny Flashfilm med Actionscript 3. Spara filen i mappen src och döp den till Flashgubbe.fla.
3. Öppna File/Publish settings. På fliken formats lägger du till sökvägar så att dina körbara filer kommer att heta:
   
   
   • ../bin/Flashgubbe.swf
   • ../bin/Flashgubbe.html
     
     
4. Gå över till fliken Flash i Publish settings. KLicka på knappen Settings bredvid bredvid sinställningarna för Script. Nu visar sig en ruta med titel Advanced Actionscript settings. Ta bort krysset vid Stage -Automatically declare instances. Lämna därefter Publish Settings.
5. Klicka någonstans på scenen så att panelen Porperties visar egenskaper för dokumentet. Skriv in Main i rutan för Class.

Första klassen

När du skapar dina klasser kan du välja om du vill arbeta i Flash Pro eller Flashdevelop. Instrultionerna utgör från Flash pro.

1. Skapa en ny fil av typ Actionscript 3. Spara den i mappen src och döp den till Main.as.

Om du skapar filen i Flash kommer dess kod att se ut så här:

package { public class Main { public function Main() { } } }

För att koden skall fungera som dokumentklass måste klassen ärva flash.display.MovieClip. Gör så här:

1. Lägg till import flash.display.MovieClip direkt under raden package {.
2. Lägg till extends MovieClip direkt efter koden som deklarerar klass, dvs public class Main.
3. Spara nu dina filer. Provkör din Flashfil och kolla att du inte får några fel i Outputpanelen. Du kan prova att lägga in en trace-sats, t ex trace("Startar");, i functionen Main() för att kolla att den är korrekt kopplad till din Flashfil.

Lägg till symboler

1. Öppna Library-panelen i Flash och skapa en ny symbol av typen Movieclip.
2. Döp symbolen till mcGubbe.
3. Högerklicka på symbolen och välj Properties. I dialogrutan som visas klickar du för Export for Actiosnscript som finns under Advanced. KLicka OK.
4. Högerklicka på symbolen igen, men välj denna gång Create Class. Nu skapas ett Actiosnscriptdokument som innehåller följande kod:
   
   package { import flash.display.MovieClip; public class mcGubbe extends MovieClip { public function mcGubbe() { // constructor code } } }
5. Spara din nya Actionscriptfil i mappen src under namnet mcGubbe.as.
   
6. Skapa lager enligt illustrationen nedan.
   
   
   
   
7. Skapa keyframes enligt illustrationen
8. Lägg in koden stop(); på samtliga keyframes i lagret AS.
9. Klicka på keyframesen i lagret Layers i tur och ordning och namnge dem i panelen Properties. Ge dem namnen:
   
• framifran
• bakifran
• franvanster
• franhoger
10. Rita gubbar i lagret Gubbe. Lägg en bild i var och en av keyframe-ramarna så att de motsvarar labelnamnen.
    
    
    

KeyBoardEvents

Nu skall vi lägga till Actionscript där vi kopplar tangentbordets pilar till vårt movieclip mcGubbe.

1. Dra ut en instans av mcGubbe på scenen. Ge instansen namnet instansGubbe i panelen Properties. Gör den ca 70 pixlar hög.
   
   
   
   
2. Om du vill programmera mot ett objekt på scenen måste du deklarera det i din Actionscriptfil. Lägg därför in följande kod överst i din klass main. Början på klassen skall se ut så här:
   
   package { import flash.display.MovieClip; public class Main extends MovieClip { public var instansGubbe:MovieClip;
   
3. När vi jobbar med tangentbordet måste vi importera de paket i flash som hanterar Keyboard och KeyboardEvents. Passa även på att deklarera en strängvariabel riktning. Vi skall använda den alldeles strax.
   
   package { import flash.display.MovieClip; import flash.events.KeyboardEvent; import flash.ui.Keyboard; public class Main extends MovieClip { public var instansGubbe:MovieClip; var riktning:String;
   
   
4. Funktionen Main() kommer att köras när filmen initieras. Följande kod skapar en händelsehanterare som reagerar när någon tangent trycks ner. Placera koden i functionen Main().
   
   stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyBoardEvent); function onKeyBoardEvent(e:KeyboardEvent):void { switch (e.keyCode) { case Keyboard.LEFT: riktning = "vanster"; break; case Keyboard.RIGHT: riktning = "hoger"; break; default: } trace(riktning); }
   
5. Testa nu din film. När du trycker på höger och vänster piltangenter kommer du att få motsvarande text i outputpanelen.
6. Komplettera switchsatsen så att den även hanterar tangenteran UP och DOWN. De skall göra så att texterna "bak" respektive "fram" skall läggas in i variabeln riktning.
7. Nu är det dags att få gubben att ändra utseende vid knapptryckning. Börja med tabgenten RIGHT. Nedanstående kod förflyttar spelhuvudet i movieClippet instansGubbe till den frame som har label franhoger. Koden skall placeras i switchsatsen under case RIGHT.
   
   instansGubbe.gotoAndStop("franhoger");
   
8. Testa att det funkar, att en tryckning på högerpilen gör att bilden på gubben i högerprofil visas.
9. Fortsätt och lägg in motsvarande kod för de andra poserna i movieClipet instansGubbe. NÄr du är klar skall gubben fungera som den lilla Flashfilmen nedan.
   
   
   Markera rutan ovan och tryck sedan på piltangernterna för att testa.
   
   

Förbered gubbens rörelse med en Timer

Vi skall så småningom få gubben att röra sig. Vi behöver då någon sorts tidtagare med vars hjälp vi ändra gubbens placering över tid.

1. Skapa ett Timerobjekt i funktionen main. Koden nedan skapar ett sådant. Siffran 50 anger att timern är inställd på 200/1000 sekund, dvs 0,2 sekunder. Den siffran kan du naturligtvis ändra.
   
   var timer:Timer = new Timer(200); timer.start();
2. Du måste även importera en del paket:
   
   import flash.events.TimerEvent; import flash.utils.Timer;
3. Nu när du har din Timer skall du fånga upp händelsen TimerEvent, som alltså kommer att inträffa var 0,2 sekund, dvs 8 gånger /sekund. Placera koden direkt efter timer.start();. Till att börja med lägger vi endast in en trace-sats. Den kommer att ge åtta utskrifter per sekund i outputfönstret av innehållet i variabeln riktning.
   
   timer.addEventListener(TimerEvent.TIMER, onTimer); function onTimer(e:TimerEvent):void { trace(riktning); }

Få gubben att flytta sig

1. Öppna filen mcGubbe.as som du skapade när du gjorde symbolen mcGubbe.
2. Lägg in en funktion move() som flyttar gubben. Funktionen skall ta ett argument i form av en sträng som anger förflyttningsriktning. Lägg funktionen i mcGubbe.as som en egen funktion nedanför funktionen mcGubbe().
   
   function move(riktning:String):void { switch(riktning) { case "fram": y++; break; case "bak": y--; break; case "vanster": x--; break; case "hoger": x++; break; default: } }
   
3. Kalla sedan på denna nya funktion från Timerns händelsehanterare i Main-klassen med hjälp av följande kod:
   
   instansGubbe.move(riktning);
   
4. Om du testar filmen nu skall gubben röra sig åt olika håll när du trycker på piltangenterna
   
   Ett problem är att gubben försvinner utanför scenen när han kommer till kanten. Du måste lägga in kod som testar så att inte de nya x- eller y-värdena hamnar utanför spelplatsen. Vi börjar med att lägga in kod som hindrar gubben från att försvinna ut till höger.
   
   
5. Placera följande kod i rätt case i switchkonstruktionen i funktionen move().
   
   if (x > stage.stageWidth - width/2) x -= 5;
   (stage.stageWidth är bredden på scenen. width/2 är hlva bredden på gubben - utan att dra ifrån den kommer halva gubben att hamna utanför. Förflyttningen bakåt sker med 5 pixlar. Det ger intrycket av att han står och hackar vid kanten. Femman kan naturligtvis varieras. )
   
   
6. När du får högerkanten att fungera kan du lägga in restriktioner även åt de andra hållen. Koden nedan visar vänsterkanten. Försök själv klura ut hur begränsningarna i y-led skall formuleras.
   
   if (x < 0+width/2) x += 5;
   
7. Nu kan det förresten vara dags att ta bort alla trce-satser ur funktionen onTimer. Eftersom de generer outpu flera gånger i sekunden fyller de upp hela outputfönstret och gör det oanvändbart för andra meddelanden.

Använd spacetangenten för att starta och stoppa rörelsen

1. Lägg till denna kod för att använda spacetangenten till att starta och stoppa. Alltihop skall vara i classen Main.
   
   // Placera bland deklarationerna först i klassen Main public var walking:Boolean = false; // Placera på lämpligt ställe i funktionen onKeyBoardEvent case Keyboard.SPACE: trace("space"); walking = walking ? false : true; break; // Placera i funktionen onTimer if (walking == true){ instansGubbe.move(riktning); }

En fiende

Vi ska prova att lägga in en fiende. Fienden skall placeras ut slumpmässigt på skärmen. När gubben krockar med fienden skall fienden ersättas av en ny fiende på annat slumpat ställe och gubbe skall återgå till en utgångsposition. Klicka på Flashfilmen nedan och testa hur det skall se ut.

1. Skapa en symbol med namnet Fiende i ditt bibliotek. Skapa en Actionscriptfil med samma namn Fiende.as. Lägg in kod i filens konstruktor som sätter dess bredd och höjd. Skapa dessutom en funktion som placerar symbolen slumpmässigt när den aktiveras.
   
   package { import flash.display.MovieClip; public class Fiende extends MovieClip { public function Fiende() { width = height = 20; } function slumpPlacera() { x = this.width/2 + Math.random() * (stage.stageWidth - this.width/2) ; y = Math.random() * stage.stageHeight; } } }
   
2. Lägg in kod i Main som skapar lägger till en instans av Fiendesymbloen på scenen.
   
   // Placera bland deklarationerna i början av klassen Main var fiende:Fiende; // Placera någonstans (förslagsvis sist) i klassen Main public function skapaFiende():void { fiende = new Fiende(); this.addChild(fiende); fiende.slumpPlacera(); } // Placera I början av funktionen Main() skapaFiende();
   
   
   
3. Nästa steg är att hantera vad som händer när gubben kolliderar med fienden. Förbered genom att skapa en funktion goToStart() i filen mcGubbe. Denna funktion skall placera gubben i ett utgångsläge t ex x=y=100.
4. Koden för hanteringen av kollisionen placerar du i funktionen onTimer som ju aktiveras flera gånger per sekund.
   
   if (instansGubbe.hitTestObject(fiende) == true) { trace("Krock!"); instansGubbe.goToStart(); // Placerar om gubben på scenen. Funktionen finns i mcGubbe.as instansGubbe.gotoAndStop("framifran"); // Visar gubbens framåtvända ansikte removeChild(fiende); // Tar bort instansen av Fiende skapaFiende(); // Skapar en ny slumpplacerad fiende walking = walking ? false : true; // Gör så att gubben står still i utgångsläget }
   

Mer kontroll över farten

Du kan utöka din kontroll över gubbens hastighet genom att låta honom förflytta sig med flera pixlar åt gången. Modifiera koden i mcGubbe.as enligt detta förslag:

1. var speed:Number = 3; switch(riktning) { case "fram": y+=speed; if (y > stage.stageHeight-height/2) y -= 5; break; case "bak": y-=speed; if (y < 0+height/2) y += 5; break; // ...fortsätt på samma sätt i övriga case

Vidare...

Naturliga steg att gå vidare härifrån:

• Skapa en variabel som registerar hur många krockar som sker. Visa variabeln i ett textfält.
• Tidsbegränsa spelet så att flera spelare kan tävla om vem som krockar flest gånger på en viss tid.
• Lägg in animkationer och ljudeffekter vid krockar
• osv

Torgny