Share
Wel, we naderen het einde van 2009, en zoals altijd zijn deze laatste dagen in december een tijd van reflectie, herinneringen en nostalgie. Bij Activetuts + proberen we vooruit te denken, te bewegen met de tijd en technologie te omarmen. Zeggen dat, het is ook belangrijk dat we een beroep op allemaal onze lezers, dus voor degenen onder u die de sprong nog niet gemaakt hebben, laten we het jaar afsluiten met een beetje ActionScript 2.0!
In deze zelfstudie maakt u een eenvoudig AS2-slangenspel.
Start Flash en klik op Maak een nieuw: Flash-bestand (Actionscript 2.0). Je kunt de grootte van het podium instellen op wat je maar wilt - ik heb de mijne ingesteld op 500 x 350. Ik raad je aan om de framerate in te stellen op 30 fps.
U kunt nu beslissen om deze stap te volgen en zelf de gewenste filmclips te tekenen, of u kunt doorgaan en de door u gemaakte filmclips gebruiken. Als je degene die ik heb gemaakt wilt gebruiken, kun je ze vinden in het bronbestand. Voeg ze gewoon toe aan de bibliotheek en sleep ze naar het werkgebied. Als je je eigen gaat tekenen: je hoeft niet letterlijk hetzelfde te tekenen als ik, maar zorg er wel voor dat je bij de maten blijft.
Het eerste dat we zullen creëren is de put voor de slang om rond te zwerven. Maak een rechthoek van 400 x 250 en converteer deze naar een filmclip. Zorg ervoor dat je aandacht besteedt aan het registratiepunt; maak het linksboven.
Zorg ervoor dat je de slangenkuil de instantienaam geeft slangenkuil en lijn het iets uit boven het midden van het werkvlak (zodat we later tekst eronder kunnen toevoegen zonder de esthetiek in de war te schoppen).
Teken een vierkant (misschien met afgeronde hoeken) zonder rand (afmeting 25 x 25) en kopieer het zodat je 2 precies hetzelfde hebt. Converteer een ervan naar een filmclip. Nogmaals, let op de linkse registratie.
Zorg ervoor dat u deze de instantienaam geeft bodypart0 en controleer dubbel of het formaat 25 x 25 is.
Ga de "hoofd" filmclip in. Eenmaal erin voegt u deze regel code toe aan het eerste en enige frame:
hou op();
Teken nu een klein gezichtje op het hoofd van de slang, zodat je het los kunt zien van andere lichaamsdelen.
Voeg een tweede frame aan de "hoofd" filmclip toe en teken op dit frame een verdrietig of dood gezicht.
Weet je nog het dubbele vierkant dat je in stap 3 hebt gemaakt? We gaan het nu omzetten in een filmclip. Schenk opnieuw aandacht aan het registratiepunt.
Zorg ervoor dat u deze de instantienaam geeft lichaamsdeel.
Creëer een dynamisch tekstveld onder de rechterhoek van de slangenkuil. Zorg ervoor dat u de variabele instelt op partituur. Zorg er ook voor dat het veld breed genoeg is voor meerdere tekens en is uitgelijnd aan de rechterkant. De rest van de instellingen kan worden ingesteld op basis van uw eigen stijl - ik heb Tahoma 24 Bold gebruikt.
Omdat het een dynamisch tekstveld is, moeten we het lettertype insluiten. Klik op de knop Insluiten in het eigenschappenvenster (waar u zojuist de variabele en de tekststijl hebt gedefinieerd).
Je ziet de onderstaande pop-up verschijnen. Zorg ervoor dat je selecteert Cijfers [0 ... 9].
Teken een blauwe cirkel zonder rand, afmeting 25 x 25 en wis vervolgens het midden met behulp van het wissergereedschap. Selecteer nu de cirkel die overblijft en converteer deze naar een filmclip. Als alternatief kunt u een stuk voedsel voor uzelf ontwerpen, op voorwaarde dat het 25 x 25 blijft.
Geef het eten een verrassende instantienaam van voedsel. Controleer nogmaals of het formaat 25 x 25 is.
Links onder de slangenkuil leek het een goede plek om wat aanwijzingen te geven. Typ gewoon de statische tekst "Gebruik de pijltjestoetsen om te verplaatsen" hier. Ik weet het, de pijltoetsen werken nog niet, maar daar komen we binnenkort bij. ik beloof!
Teken voor nu een wit vierkant (ergens buiten het podium) en voeg de tekst toe "You killed!" ernaar toe. Dit is de pop-up die we weergeven nadat iemand een spel heeft verloren.
Converteer het naar een filmclip en geef het de instantienaam pop-up ook. Voor uitlijningsdoeleinden heb ik het registratiepunt ingesteld op het midden.
Dubbelklik op de pop-up die u zojuist hebt gemaakt om deze in te voeren. Eenmaal daarbinnen, maakt u een dynamisch tekstveld (variabele = partituur) en een knop die de tekst leest Speel opnieuw.
De knop moet de instantienaam krijgen againbutton.
Binnen de knop kunt u een iets donkerdere "Over" en zelfs donkerdere "Omlaag" -status creëren.
Gefeliciteerd, je hebt alle visuele objecten gemaakt die nodig zijn voor het slangenspel. Nu over naar de code!
Voordat ik een stuk code naar je toe gooi, zal ik je vertellen wat je ermee moet doen. Alle code in deze tutorial gaat op het eerste en enige frame van je film. U hoeft het niet aan knoppen of iets te bevestigen. Bekijk dit stuk ActionScript nu eens.
Opmerking van de uitgever: Sorry voor deze mensen, de code syntax highlighter wil dit specifieke stuk ActionScript niet weergeven in FireFox. Bekijk hier de code.
In een notendop, dit stukje code doet het volgende. Ten eerste wordt het originele lichaamsdeel onzichtbaar gemaakt - we zullen binnenkort duplicaten gebruiken. Sommige standaardwaarden worden (opnieuw) ingesteld, alle duplicaten die in de vorige game zijn achtergelaten, worden verwijderd. In de do while () lus krijgt het voedsel en lichaamsdeel 0 (de kop) een x- en y-coördinaat. Als dit overeenkomt (zodat ze op exact dezelfde plek staan), krijgen ze een nieuwe coördinaat, totdat we niet langer een overeenkomst hebben. Vervolgens worden de arrays ingesteld waarin we de X- en Y-coördinaten van het lichaam zullen bevatten.
In dit stukje code maken we een keyListener-object, dat we koppelen aan Key, dat het toetsenbord vertegenwoordigt. Telkens wanneer een toets wordt ingedrukt, wordt de functie onKeyDown geactiveerd. Van de functie getCode (), zullen we afleiden welke toets werd ingedrukt en vervolgens de richting volgens dit definiëren. We slaan dit op in de richting variabele voor later gebruik. Onthoud: alle code van deze tutorial gaat op het eerste en enige frame van je film.
keyListener = new Object (); keyListener.onKeyDown = function () keycode = Key.getCode () if (keycode == 37) direction = 'left' else if (keycode == 38) direction = 'up' else if (keycode == 39) direction = 'right' else if (keycode == 40) direction = 'down'; Key.addListener (KeyListener);
De functie hier beneden is een grote. Het wordt op elk frame uitgevoerd, maar doet slechts echt elke 5 frames. Het controleert of de slang niet buiten de doos beweegt en verplaatst dan alle lichaamsdelen naar hun nieuwe positie. Vervolgens wordt gecontroleerd of het eten daar ook is en eet het vervolgens met de functie eat () die we later zullen bespreken. Vervolgens wordt gecontroleerd of de slang tegen een muur inslaat en tenslotte wordt gecontroleerd of de slang zichzelf in de staart bijt. Al deze functies worden binnenkort toegevoegd (insideSnake (), dead (), enzovoort). Onthoud: alle code van deze tutorial gaat op het eerste en enige frame van je film.
Accentsconagua
this.onEnterFrame = function () if (game) if (framecount / 5 == Math.ceil (framecount / 5)) if (! (bodypart0._y <= snakepit._y && direction == 'up') && !(bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2 && direction == 'down') &&! (bodypart0._x + bodypart0._width> = snakepit._x + snakepit._width - 2 && direction == 'right') &&! ( bodypart0._x <= snakepit._x && direction == 'left')) bodypartsy[0] = bodypart0._y; bodypartsx[0] = bodypart0._x; for (i=bodypartsy.length-1;i > 0; i--) eval ('bodypart' + i) ._ y = bodypartsy [(i-1)] eval ('bodypart' + i) ._x = bodypartsx [(i-1)] bodypartsy [i] = eval ( 'bodypart' + i) ._ y bodypartsx [i] = eval ('bodypart' + i) ._ x if (food._x == bodypart0._x && food._y == bodypart0._y) eat () if (richting) if (direction == 'up') if (bodypart0._y <= snakepit._y) dead() else bodypart0._y-= bodypart0._width else if (direction == 'down') if (bodypart0._y+bodypart0._height >= snakepit._y + snakepit._height-2) dead () else bodypart0._y + = bodypart0._width else if (direction == 'right') if (bodypart0._x + bodypart0._width> = snakepit ._x + snakepit._width - 2) dead () else bodypart0._x + = bodypart0._width else if (direction == 'left') if (bodypart0._x <= snakepit._x) dead() else bodypart0._x-= bodypart0._width if (game) if (insideSnake(bodypart0._x,bodypart0._y,true)) dead() framecount++ Deze is leuk en gemakkelijk. Het voert de acties uit die moeten worden ondernomen wanneer de slang sterft: de score moet worden gedefinieerd in de pop-up, de pop-up die wordt weergegeven, het dode vlak van de slang wordt weergegeven en de spelvariabele op false (als het spel is geëindigd).
function dead () popup.score = 'score:' + (bodypartsx.length-1) popup.swapDepths (this.getNextHighestDepth ()) popup._visible = true bodypart0.gotoAndStop (2) game = false;
De onderstaande functie wordt geactiveerd in de functie onEnterFrame die we eerder hebben besproken, wanneer het voedsel wordt opgehaald. Het dupliceert eerst een deel van het lichaam van de slang en plaatst het dan op de plaats van het laatste lichaamsdeel (zodat het in de lijn op het volgende frame zal aansluiten). De coördinaten worden toegevoegd aan de coördinaat die arrays bevat en het voedsel wordt opnieuw gepositioneerd (ergens niet in de slang!). Ook is de score bijgewerkt.
function eat () duplicateMovieClip (bodypart, 'bodypart' + bodypartsy.length, this.getNextHighestDepth ()) bodypart0.swapDepths (this.getNextHighestDepth ()) eval ('bodypart' + bodypartsy.length) ._ y = eval ('bodypart '+ (bodypartsy.length-1)) ._ y eval (' bodypart '+ bodypartsx.length) ._x = eval (' bodypart '+ (bodypartsy.length-1)) ._ x bodypartsy.push (eval (' bodypart ') + bodypartsy.length) ._ y) bodypartsx.push (eval ('bodypart' + bodypartsx.length) ._ x) do food._x = snakepit._x + Math.floor (((snakepit._width-food._width) / food._width) * Math.random ()) * food._width food._y = snakepit._y + Math.floor (((snakepit._height-food._height) /food._height) * Math.random ()) * food._height while (insideSnake (food._x, food._y)); score = bodypartsx.length-1 Deze functie controleert alleen of de ingevoerde coördinaten overeenkomen met een van de coördinaten van de lichaamsdelen van de slang. Als skiphead op true is ingesteld, mag het overeenkomen met de coördinaten van het hoofd (bij het controleren of het hoofd bijt, kan dit handig zijn).
