Share
Stop met het gebruik van statische menu's! De meeste spelers baseren hun eerste indruk van een Flash-game onmiddellijk op het menu dat ze zien wanneer ze het laden. Onderscheid je van de massa met een actief menu!
Deze zelfstudie is voor het eerst gepubliceerd in december 2011, maar is sindsdien bijgewerkt met extra stappen die uitleggen hoe u de code flexibeler kunt maken!
Het woord 'statisch' betekent in essentie dat er geen verandering is. Het merendeel van de menu's die we tijdens webgames zien, ontbreekt in verandering, je drukt eenvoudig op Play en het spel begint. Zo'n menu is te veel gebruikt en vertoont weinig creativiteit of innovatie.
Om een menu "actief" te maken, moeten we voortdurend verandering veroorzaken. Dus in deze tutorial is dat precies wat we gaan bereiken: een menu dat voortdurend verandert.
Het eerste dat we moeten maken is een nieuw Flash-bestand (ActionScript 3.0). Stel de breedte in op 650px, de hoogte op 350px en de frames per seconde op 30. De achtergrondkleur kan als wit worden overgelaten.
Sla nu het bestand op; je kunt het noemen wat je wilt, maar ik heb de mijne genoemd menuSlides.fla.
In de volgende sectie maken we de negen MovieClips die in het menu worden gebruikt. Ter referentie: hier is een lijst met alle kleuren die in de zelfstudie worden gebruikt:
Om te beginnen zullen we de dia's maken die worden gebruikt in de overgangen, maar voordat we beginnen, laten we enkele zeer nuttige Flash-functies inschakelen.
Klik met de rechtermuisknop op het werkgebied en selecteer Raster> Raster weergeven. Standaard maakt het een 10px bij 10px raster over het podium. Klik vervolgens met de rechtermuisknop opnieuw op het werkgebied en selecteer deze keer Snappen> magnetisch uitlijnen.
Nu kunnen we beginnen met tekenen! Selecteer het gereedschap Rechthoek en teken een rechthoek van Light Gold, 650 px breed en 350 px hoog (u kunt met Alt op het podium klikken om dit gemakkelijker te maken). Verander nu de kleur in goud en teken groepen van drie vierkanten, elk 20x20px, om in elke hoek de vorm van een L te vormen ,:
Selecteer de hele fase, klik met de rechtermuisknop en kies Converteren naar symbool. Noem de MovieClip goldSlide en zorg ervoor dat het type is Filmclip en de registratie is linksboven.
Om tijd te sparen en dingen een stuk eenvoudiger te maken, klikt u met de rechtermuisknop op goldSlide MovieClip in de bibliotheek en selecteer Duplicaat symbool drie keer om nog drie kopieën te maken. Wijzig de kleuren in de nieuwe MovieClips in blauw, groen en rood en hernoem de MovieClips vervolgens in blueSlide, Greenslide en redSlide.
Voordat we verder gaan, moeten we wat tekst toevoegen aan elke dia. Schrijf op goldSlide SPELEN, op blueSlide schrijven INSTRUCTIES, op greenSlide schrijf OPTIES en op redSlide schrijven CREDITS.
Nu we de tekst op zijn plaats hebben, kunnen we deze uit elkaar halen door er met de rechtermuisknop op te klikken en te selecteren Opsplitsen tweemaal; dit zal de tekst doorbreken tot een vulling die soepeler zal verlopen. Plus als bonus is het niet nodig om een lettertype in te voegen als je het alleen voor het menu gebruikt!
Nu we de 4 dia's hebben getekend, kunnen we ons concentreren op de sideButton MovieClip die wordt gebruikt om de dia's naar links of rechts te verplaatsen.
Teken eerst een rechthoek van 30x60 px met slechts een streek (geen vulling) en teken vervolgens diagonale lijnen op 45 graden van de rechterboven- en rechterbenedenhoek tot ze in het midden van de andere kant samenknippen. Breng nu een matgrijze vulling aan op de driehoek:
Verwijder vervolgens de regels, klik met de rechtermuisknop op de driehoek en selecteer Converteren naar symbool. Noem maar op sideButton, zet het type op Knop en zorg ervoor dat de registratie zich in de linkerbovenhoek bevindt.
Voeg nu 3 keyframes in de tijdlijn in door met de rechtermuisknop op de tijdlijn te klikken en te selecteren Insert Keyframe. Selecteer in het vak Omhoog de vulling van de driehoek, ga naar het tabblad Windows en selecteer Kleur. Verander de Alpha naar 50%. Herhaal op het bovenframe hetzelfde proces, maar stel deze keer de alpha in op 75%.
Nu kunnen we beginnen met de vier genummerde cirkelknoppen, om rechtstreeks naar een specifieke dia te springen.
Teken een witte cirkel van 30 px zonder te tekenen. Converteer het naar een symbool, noem het cirkel een, en stel het type in op Knop en het registratiepunt naar het centrum. Voeg drie keyframes in zoals we eerder deden en ga vervolgens naar het frame Omhoog.
Trek een zwarte cirkel van 25px zonder lijn en centreer deze naar het midden via de coördinaten of gebruik het menu Uitlijnen. Schakel de selectie van de zwarte cirkel uit, selecteer de selectie opnieuw en verwijder deze. Je zou nu een witte ring over moeten hebben. Pak nu de teksttool en plaats een witte "1" in het midden van de ring. Breek dit nummer vervolgens uit elkaar totdat het een vulling is.
Ga naar het frame Over en teken een zwarte "1". Centreer het en breek het uit elkaar totdat het een vulling wordt. Schakel de selectie uit en selecteer opnieuw de vulling en verwijder deze vervolgens. Selecteer alles op het frame en kopieer het, ga dan naar het frame Omlaag, selecteer alles erop en druk op Verwijderen. Plak in wat we hebben gekopieerd.
Maak nu drie extra cirkel MovieClips, volgens hetzelfde proces, voor de nummers 2, 3 en 4.
Oké, we zijn bijna halverwege klaar! Sleep eerst alle dia's naar het werkgebied en plaats ze met de volgende coördinaten:
Versleep nu twee exemplaren van de zijtoets. De eerste kopie moet worden gepositioneerd op (10,145); voordat we het tweede exemplaar kunnen plaatsen, moeten we het eerst omdraaien!
Selecteer de tweede kopie en druk op Ctrl-T. Wijzig links-rechts in -100% en laat de up-down op 100%. Verplaats nu het tweede exemplaar naar (640.145).
Sleep tot slot de vier cirkel MovieClips en plaats ze als volgt:
Je stage zou er nu als volgt uit moeten zien:
De blauwe, groene en rode dia's zijn net aan de rechterkant van het werkgebied verborgen. Selecteer nu alles op het podium en converteer het naar een symbool. Noem maar op menuSlidesMC, stel het type in op MovieClip en de registratie in de linkerbovenhoek en exporteer het voor ActionScript als MenuSlidesMC.
Voordat we klaar zijn, moeten we elk van de MovieClips erin plaatsen menuSlidesMC een instantienaam. Selecteer elke dia in de volgorde waarin ze links worden weergegeven en geef ze een naam slide1, slide2, slide3 en slide4 respectievelijk. Geef de cirkelknoppen een naam een, twee, drie en vier, en noem uiteindelijk de zijknoppen links en rechts.
Nu al onze MovieClips zijn gemaakt, kunnen we beginnen met het instellen van de twee klassen die we gaan gebruiken.
Ga eerst naar de eigenschappen van je Flash-bestand en stel zijn klasse in op menuSlides; maak vervolgens een nieuw ActionScript 3.0-bestand en sla het op als menuSlides.as.
Kopieer nu de volgende code erin; Ik zal het uitleggen na:
pakket import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class menuSlides breidt MovieClip uit public var menuSlidesMC: MenuSlidesMC = new MenuSlidesMC (); openbare functiemenuSlides () addChild (menuSlidesMC);
Vrij eenvoudig - het is een documentklasse, waarin we de MovieClips en Events die we zullen gebruiken hebben geïmporteerd. Vervolgens hebben we een instantie gemaakt van MenuSlidesMC, en toegevoegd aan het podium.
Maak nu een nieuw ActionScript 3.0-bestand voor de menuSlidesMC aanleg. Bewaar het als MenuSlidesMC.as en kopieer de volgende code erin:
pakket import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; openbare klasse MenuSlidesMC breidt MovieClip uit public var speed: Number = new Number (); public var activeSlide: Number = new Number (); openbare functie MenuSlidesMC () speed = 10; activeSlide = 1; addEventListener (MouseEvent.CLICK, slidesClick); addEventListener (Event.ENTER_FRAME, slidesMove);
Net als de vorige keer hebben we geïmporteerd wat we nodig hebben, maar we hebben twee nummervariabelen gemaakt. De eerste variabele, snelheid, is in feite hoeveel pixels de dia's door elk frame worden verplaatst. (Opmerking: dit nummer moet gelijkmatig verdeeld worden in de breedte van je level om een vloeiende overgang te krijgen). De tweede variabele, activeSlide, vertelt ons welke dia momenteel op het scherm staat.
We hebben ook twee gebeurtenislisteners toegevoegd voor functies die we gaan maken; een ervan wordt opgeroepen met de muis en de andere wordt aan het begin van elk frame opgeroepen.
Om te beginnen zullen we de muisklikfunctie uit de weg ruimen. Begin met het maken van een openbare functie met de naam slidesClick ():
dia's met openbare functiesKlik (gebeurtenis: MouseEvent): void
Vervolgens zullen we een aantal if-statements maken met betrekking tot de event.target.name. In feite slaat deze eigenschap de naam op van het object dat werd getarget door met de muis te klikken. We kunnen dit gebruiken om te controleren op welke knop wordt gedrukt:
if (event.target.name == "left") if (activeSlide> 1) activeSlide- = 1; else if (event.target.name == "right") if (activeSlide<4) activeSlide+=1; if(event.target.name == "one") activeSlide=1; else if(event.target.name == "two") activeSlide=2; if(event.target.name == "three") activeSlide=3; else if(event.target.name == "four") activeSlide=4;
De code hierboven gaat in de slidesClick () functie. De eerste set if-statements is voor de linker- en rechterknoppen; ze verhogen of verlagen de waarde van activeSlide, maar laat nooit toe dat de waarde kleiner wordt dan 1 of groter dan 4 (aangezien we slechts vier dia's hebben). De tweede set if-statements is voor de cirkelknoppen; in plaats van alleen de waarde van te verhogen of te verlagen activeSlide ze zetten het op de geselecteerde waarde.
Laten we nu beginnen met de ENTER_FRAME handler functie:
openbare functie slidesMove (event: Event): void
Voeg de toe slidesMove () functie onder uw slidesClick () functie en we zullen er wat code aan toevoegen. Eerst gebruiken we een schakelaar om te controleren welke dia op het scherm zou moeten staan, op basis van de waarde van activeSlide:
switch (activeSlide) case 1: break; geval 2: pauze; geval 3: pauze; geval 4: pauze;
Nu zullen we in elk geval een if / else-blok maken dat de huidige x-positie van die dia controleert en verplaatst allemaal van de dia's naar links, rechts of helemaal niet, afhankelijk van waar de gewenste dia zich op dat moment bevindt.
De eerste case ziet er als volgt uit:
if (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = snelheid; slide2.x- = snelheid; slide3.x- = snelheid; slide4.x- = snelheid;
Nu hoeven we alleen maar hetzelfde proces te herhalen voor de andere gevallen! Nadat je klaar bent moet je swtich er als volgt uitzien:
switch (activeSlide) case 1: if (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = snelheid; slide2.x- = snelheid; slide3.x- = snelheid; slide4.x- = snelheid; pauze; geval 2: if (slide2.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide2.x>0) slide1.x- = snelheid; slide2.x- = snelheid; slide3.x- = snelheid; slide4.x- = snelheid; pauze; case 3: if (slide3.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide3.x>0) slide1.x- = snelheid; slide2.x- = snelheid; slide3.x- = snelheid; slide4.x- = snelheid; pauze; case 4: if (slide4.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide4.x>0) slide1.x- = snelheid; slide2.x- = snelheid; slide3.x- = snelheid; slide4.x- = snelheid; pauze;
En dat is het! We zijn allemaal klaar met de code en het menu zou nu geweldig moeten werken.
... Maar wacht, wat als we meer dia's willen toevoegen of wegnemen?
Op dit moment is onze code niet erg flexibel vanwege al die hardcodes als statements. Laten we dus iets gewaagds doen: verwijder alle code in de functie slidesMove () omdat we deze niet langer nodig hebben en verwijder ook de if-statements voor de cirkelknoppen, want we gaan deze ook optimaliseren.
Maak nu een nieuwe variabele aan (eronder snelheid en activeSlides):
public var slidesArray: Array = new Array ();
De eerste variabele, slidesArray, wordt een array die al onze dia's bevat, waardoor we deze kunnen openen door naar een item in de array te verwijzen (zodat we deze kunnen gebruiken slidesArray [2] in plaats van slide3).
Een ding om op te merken is dat het eerste item in een array een index krijgt van 0, dus we zullen enkele wijzigingen in onze instantienamen moeten aanbrengen.
Selecteer elke dia in de volgorde waarin ze links worden weergegeven en geef ze een naam slide0, slide1, slide2 en slide3, respectievelijk. En om ons te helpen het aantal regels code dat we gebruiken te verminderen, selecteert u elke cirkelknop in de volgorde waarin ze links worden weergegeven en geeft u ze de naam circle0, circle1, circle2 en circle3, respectievelijk.
Als u meer dia's en knoppen gaat toevoegen, is dit het moment om dit te doen. Plaats gewoon de extra dia's aan het einde van de rij dia's en geef ze vervolgens de instantienamen volgens dezelfde volgorde. Doe hetzelfde voor de cirkelknoppen.
Nu we de instantienamen correct hebben, moeten we de dia's aan de array toevoegen. Doe dit door de volgende code aan uw constructor toe te voegen:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5];
Nu bevinden de dia's zich in de array en zijn ze toegankelijk via hun index in de array. Bijvoorbeeld, slidesArray [0] is gelijk aan slide0 omdat dat het eerste item in de lijst is.
Voeg vervolgens, binnen de "juiste" else-if-verklaring, de voorwaarde toe aan:
if (activeSlide < slidesArray.length-1)
De waarde van slidesArray.length is gelijk aan het aantal elementen in de array, dus deze nieuwe voorwaarde stelt ons nu in staat om op de knop te drukken en de dia's te verplaatsen zolang de actieve dia niet de laatste dia is.
Nu, wanneer op een cirkelknop wordt geklikt, moeten we uitzoeken welke het is (en naar welke dia het verwijst).
Maak een array om alle cirkelknoppen te houden. Definieer het eerst onder de dia-array:
public var slidesArray: Array = new Array (); public var circlesArray: Array = new Array ();
Voeg vervolgens de cirkelknoppen toe aan de array in de constructor:
circlesArray = [circle0, circle1, circle2, circle3, circle4, circle5];
Ga nu naar de slidesClick () functie, onder het hele if-else-blok. We gaan controleren of de aangeklikte knop in de reeks met cirkelknoppen staat:
if (circlesArray.indexOf (event.target)! = -1)
De functie indexOf () van de array controleert of een object zich in de array bevindt; als dat niet zo is, komt het terug -1. Dus we controleren of het is niet gelijk aan -1, die zal controleren om te zien of het is in de array.
Ervan uitgaande dat het is, dan is de index van() functie retourneert de index van de knop binnen de reeks van cirkelknoppen - dus, als circle3 is geklikt, circlesArray.indexOf (event.target) zal gelijk zijn aan 3. Dit betekent dat we gewoon kunnen instellen activeSlide tot 3, en we zijn klaar!
if (circlesArray.indexOf (event.target)! = -1) activeSlide = circlesArray.indexOf (event.target);
Het enige dat u hoeft te doen, is alle dia's verplaatsen. Begin met het toevoegen van dezelfde lus als voorheen, in de slidesMove () functie:
for (var i: int = 0; i < slidesArray.length; i++)
Een if-else-verklaring moet nu worden toegevoegd; dit gebruikt de variabele activeSlide om een dia uit de array te selecteren en te controleren waar de x-positie is, net als voorheen.
if (slidesArray [activeSlide] .x<0) else if(slidesArray[activeSlide].x>0)
Sinds activeSlide is een nummer, slidesArray [activeSlide] verwijst naar een specifieke dia, dus slidesArray [activeSlide] .x is gelijk aan de x-positie van die schuif.
In het eerste geval zullen we een toevoegen voor loop om alle filmclips naar rechts te verplaatsen, en in het tweede geval voegen we een voor loop om alle filmclips naar links te verplaatsen.
Rechts:
voor (var j: int = 0; j < slidesArray.length; j++) slidesArray[j].x+=speed;
Links:
voor (var k: int = 0; k < slidesArray.length; k++) slidesArray[k].x-=speed;
Als u dit nu test, zult u merken dat onze geoptimaliseerde code heeft geleid tot een veel snippere interface!
Als je dit nog verder wilt nemen, kun je een voor loop om de dia's en de cirkels te positioneren, in plaats van ze te moeten slepen en neerzetten in de Flash IDE. Als u de dia's bijvoorbeeld wilt plaatsen, plaatsen we eerst de positie slide0 in de constructor:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0;
Daarna zouden we alle andere dia's doorlopen, beginnend bij slide1:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; for (var i: int = 1; i < slidesArray.length; i++)
We kunnen alle dia's een y-positie van 0 geven:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; for (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].y = 0;
... en dan kunnen we de x-positie van elke dia instellen op 620 px rechts van de dia ervoor:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; for (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + 620; slidesArray[i].y = 0;
Als uw dia's niet 620 px breed zijn, kunt u zelfs hun breedte automatisch detecteren!
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; for (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + slidesArray[i-1].width; slidesArray[i].y = 0;
Je kunt hetzelfde doen met de cirkelknoppen, maar ik laat dat aan jou over om mee te experimenteren.
Het mooie hiervan is dat je zoveel dia's als je wilt aan het menu kunt toevoegen; het enige wat je hoeft te doen is ze aan de array toe te voegen, en ze zullen door deze code worden behandeld.
(U kunt ook dia's uit de array verwijderen, maar deze worden niet beïnvloed door een van de code, dus u moet ze waarschijnlijk opnieuw plaatsen in Flash IDE.)
Bedankt dat je de tijd hebt genomen om de tutorial door te lezen, ik hoop dat het nuttig was en dat je iets hebt geleerd over actieve spelmenu's.
Accentsconagua