Online Flash Game Tutorial

Adobe Flash er en kraftig stykke programvare, og har blitt kilden til utallige spill på nettsteder over hele internett. Programmet er ganske komplisert verktøy, og det er en rekke opplæringsprogrammer på internett for å hjelpe deg på veien. Den har en enorm fleksibilitet, og kan brukes til å designe nesten alle spill, men det tar mye av praksis for å få dyktigere. Start med å bygge en enkel rulling skytespill, og du vil lære mye om hvordan Flash fungerer.

Bruksanvisning

1 Last Flash på maskinen din. Hvis du ikke allerede har en kopi, kan du laste ned en 30-dagers gratis prøveversjon fra Adobe. Se Ressurser for en link til prøveversjonen.

2 Lag en ny "Flash fil (Actionscript 2.0)" fra Fil-menyen. Programmet vil gi deg en blank "Stage" området, samt en Properties panel. Lag filmen i den fasen, og redigere elementer ved hjelp av egenskapsvinduet.

3 Endre bakgrunnsfarge av spillet ved hjelp av "Bakgrunn" picker på pallen i egenskapsvinduet.

4 Importere grafikk til filen. Klikk "Fil" høydepunkt "Import" og velg "Importer til scenen." Bruk dialogboksen for å velge grafikk for hovedpersonen eller romskip. Grafikken vil vises på skjermen. Bruk PNG-format når det er mulig, som de har transparent bakgrunn mens .jpeg filer ikke og vises som fargede bokser på skjermen.

5 Velg skipet, og klikk på "Endre" og deretter velge "Konverter til symbol." Gi skipet navnet "Ship", og registrere den i midten av skjermen. Forbinder det med "klasse" av "Ship" og velg "Export for Action."

6 Sett bildefrekvens på showet til 30 bilder per sekund.

7 Lagre FLA filen til en ny mappe hvor du vil holde spillet ditt. Sett navnet på spillet ditt som filnavn.

8 Lag en ny "Action File" eller .as fil. Velg "File" og deretter "New" og "Action Fil" fra menyen Type. En ny, blank Actionscript-fil vil vises på skjermen. Skriv inn følgende kode slik den vises:

klasse Ship strekker MovieClip

{

}

9 Lagre Actionscript-fil som "Ship.as" fra Fil-menyen. Lagre den inni spillmappen.

10 Legg til følgende kode til din "Ship.as" fil, mellom første parentes.

Var hastighet;

Dette skaper en variabel kalt hastighet, som du kan bruke i programmering.

11 Sett følgende kode i bunnen av den Ship.as filen, under den siste braketten.

fungere onLoad ()

{

velocity = 10;

}

funksjon onEnterFrame ()

{

if( Key.isDown(Key.RIGHT) )

{

_x = _x + hastighet;

}

}

Den første blokken med kode endrer hastigheten variabelen til nummer 10, og den andre blokken med kode vil fortelle skipet å bevege seg over 10 piksler hver gang filmen beveger seg fremover en ramme hvis en tast.

12 Endre den siste blokken av koden på filen til å lyde som følger:

funksjon onEnterFrame ()

{

if( Key.isDown(Key.RIGHT) )

{

_x = _x + hastighet;

}

if (Key.isDown (Key.LEFT))

{

_x = _x - hastighet;

}

if (Key.isDown (Key.UP))

{

_y = _y - hastighet;

}

if (Key.isDown (Key.DOWN))

{

_y = _y + hastighet;

}

}

Dette forteller datamaskinen til å gjøre noe hvis en bestemt betingelse er oppfylt. I dette tilfellet vil du flytte skipet 10 piksler hver gang en knapp trykkes i en bestemt retning.

1. 3 Publisere spillet ved hjelp av "fil" og "Publiser" for å lage en SWF-fil du kan se og lese. Skipet skal bevege seg hver gang du trykker på en tast.

14 Opprett en ny klasse, og kaller det "Missile.as" på samme måte som du opprettet skipet klassen tidligere. Legg til følgende kode i Action fil.

klasse Missile strekker MovieClip

{

var speed;

}

fungere onLoad ()

{

speed = 20;

}

funksjon onEnterFrame ()

{

_x += speed;

}

15 "Sett inn" en "ny symbol" fra de aktuelle menyene. Gi symbolet navnet "Missile" og velg "eksport for ActionsScript" og klikk på OK. En tomt vindu vil vises som gir deg plass til å designe en rakett.

16 Bruk Line og Tegn verktøy for å designe et lite prosjektil til skipet ditt til brann. Bruk Properties panelet til å angi bredden av en liten linje 6-piksler, lengden til 8-piksler. Sett også X til -4 og Y-verdien til 0. Lagre prosjektet.

17 Legg en ShootLimiter variabel, slik at du bare har en rakett på skjermen på en gang. Sett i følgende kode til din "Ship.as":

Var hastighet;

Var shootLimiter;

fungere onLoad ()

{

velocity = 10;

shootLimiter = 0;

}

og legge til følgende i onEnterFrame kommandoen:

funksjon onEnterFrame ()

{

_x += speed;

if (_x> 600)

{

this.removeMovieClip ();

}

}

18 Åpne Ship.as igjen og lim inn følgende kode nederst:

if (Key.isDown (Key.SPACE) && shootLimiter 8>)

{

shootLimiter = 0;

Var rakett = _root.attachMovie ( "Missile", "Missile" + _root.getNextHighestDepth (), _root.getNextHighestDepth ());

missile._x = _x + 50;

missile._y = _y + 2;

}

Dette forteller programmet for å legge til en Missile til skipet film hvis du trykker på mellomromstasten nede. Det vil også posisjonere missilet slik at det ser ut som det kommer fra front og senter av skipet. Det wil også utføre en rask sjekk for å se om missilet har allerede blitt avfyrt.

19 Sett inn et nytt objekt kalt "EnemyShip", og velg et bilde du har opprettet for fiendens skip tegn. Når det er opprettet og uthevet i blått, trykker du på slettetasten. Bildet er nå i spillet, men du vil ikke ha det på skjermen når du starter.

20 Opprett EnemyShip.as fil, som du gjorde med de to andre Actionscript-filer. Legg til følgende kode:

klasse EnemyShip strekker MovieClip

{

var speed;

}

fungere onLoad ()

{

_x = 700;

_y = Math.random () * 300;

hastighet = Math.random () * 5 + 5;

}

funksjon onEnterFrame ()

{

_x -= speed;

if (_x & lt; -100)

{

this.removeMovieClip ();

}

}

Denne koden vil fortelle programmet til å opprette EnemyShip, og gi den en tilfeldig fart. Spillet vil også fjerne fiendens skip hvis hastigheten synker til et visst nivå.

21 Gå tilbake til Ship.as filen og erstatte eller legge til noen blokker av kode. De to første vil erstatte eksisterende kode, er den tredje nye:

klasse Ship strekker MovieClip

{

var velocity;

Var shootLimiter;

Var enemyTimer;

fungere onLoad ()

{

velocity = 10;

shootLimiter = 0;

enemyTimer = 0;

}

enemyTimer + = 1;

if (enemyTimer> 60)

{

enemyTimer = 0;

_root.attachMovie ( "EnemyShip", "EnemyShip" + _ root.getNextHighestDepth (), _root.getNextHighestDepth ());

}

Denne koden legger til en ny variabel, den enemyTimer, noe som vil skape et fiendtlig skip på skjermen. Fienden vil vises på skjermen i et tilfeldig sted.

22 Publiser og teste ut spillet.

Hint

  • Du kan publisere ferdige produkter på en rekke videospill nettsteder, for eksempel Kongregate eller Newgrounds (se Ressurser)