Share
Eerste indrukken zijn erg belangrijk op een Flash-spelportaal; als je spel de speler de eerste paar seconden niet grijpt, zijn er genoeg andere games om uit te kiezen. Omdat het menu het eerste interfacepunt is, kan alles wat u kunt doen om het saai te maken, helpen. In deze zelfstudie maken we een menu met wisselverdiepingen, soepele roll-overeffecten en twee verschillende overgangsontwerpen.
Dit zijn de twee ontwerpen waar we naartoe zullen werken:
Bij het eerste ontwerp zullen de volgende schermen vanuit verschillende richtingen naar binnen komen, afhankelijk van op welke optie wordt geklikt.
Het tweede ontwerp verplaatst alle schermen van onder naar boven: een meer flexibele keuze als u meer dan vier opties hebt.
Er zijn twee belangrijke dingen die dit menu "actief" maken. De eerste is de roll-over effecten op de knoppen: ongeacht hoeveel ze hebben geschaald bij het uitrollen, ze verkleinen van die specifieke grootte (in tegenstelling tot een tween gemaakt op de tijdlijn). De tweede is dat de code van de tweede stijl is ontworpen om flexibel te zijn en gemakkelijk uit te breiden voor uw eigen behoeften.
Het eerste dat we moeten maken is een nieuw Flash-bestand (ActionScript 3.0). Stel de breedte in op 600px, de hoogte op 300px 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 menuBounce.fla.
In het volgende gedeelte maken we de acht MovieClips die in het menu worden gebruikt. Ter referentie: hier is een lijst met alle kleuren die in de zelfstudie worden gebruikt:
Accentsconagua
0xFFFFFF)0xe8a317)0xfbb917)0x1569c7)0x1389ff)0x347235)0x3e8f1b)0x990000)0xc10202)0x222222)Om te beginnen maken we de 'ruggen' (de filmfragmenten die zullen worden gebruikt voor de daadwerkelijke schermen), 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 dit moment Snapping> Snap to Grid.
Nu kunnen we beginnen met tekenen! Selecteer het gereedschap Rechthoek en teken een lichtgouden rechthoek van 600 x 300 pixels. Selecteer vervolgens deze vulling, klik met de rechtermuisknop en kies Converteren naar symbool. Noem de MovieClip goldBack, stel het type in op MovieClip en de registratie op linksboven.
Klik vervolgens met de rechtermuisknop op de MovieClip en selecteer Drie keer dupliceren om er nog drie exemplaren van te maken. Kleur ze opnieuw in met lichtblauw, lichtgroen en lichtrood. Geef ze dan een naam blueback, banknoot en Redback, respectievelijk.
Om de achterkant af te maken, moeten we een soort tekst toevoegen in elke MovieClip: op goldBack schrijf "PLAY", op blueBack schrijf "INSTRUCTIONS", op greenBack schrijf "OPTIONS", en op redBack schrijf "CREDITS". Nadat u de tekst hebt geschreven, raad ik u aan deze uit elkaar te halen totdat deze een vulling wordt (dit neemt de noodzaak weg om lettertypen in te sluiten en de overgang er gladder te doen uitzien). Je rug moet er ongeveer zo uitzien:
Laten we nu beginnen met de aanklikbare vierkanten! Selecteer het gereedschap Rechthoek en teken een vierkant vierkant van 100x100px. Selecteer de vulling, klik met de rechtermuisknop en convert to Symbol. Noem de MovieClip goldSquare, stel het type in op MovieClip en de registratie op linksboven. Dit is het moment om tekst op het plein te schrijven, behalve deze keer in plaats van de tekst uit elkaar te halen, laat het voor nu. Voeg een keyframe in en verander de vulkleur in goud. Splits nu de tekst op beide frames uit elkaar totdat ze vullingen worden.
Klik nu met de rechtermuisknop op de MovieClip en kies drievoudig Symbool dupliceren. Herhaal vervolgens hetzelfde proces van voor de andere drie kleuren, waarbij de MovieClips worden genoemd BlueSquare, Greensquare en rood vierkant, respectievelijk. Uw vierkanten moeten er ongeveer zo uitzien:
Begin met het verwijderen van alles van het podium. Ga vervolgens naar Invoegen> Nieuw symbool. Noem maar op menuBounceMC, zet het type op MovieClip, de registratie naar linksboven en exporteer het als MenuBounceMC.
Sleep nu alle ruggen uit de bibliotheek erin en positioneer ze op de volgende manier:
Als u het ontwerp met één richting gaat gebruiken, plaatst u alle vier de ruggen op een van die posities. Ik gebruikte (0, 300).
Sleep nu alle vierkanten uit de bibliotheek naar de MovieClip en positioneer ze op de volgende manier:
Het laatste wat we moeten doen voordat we beginnen met coderen, is het toewijzen van de instantienamen. Stel de instantienamen voor de vierkanten in als square0, square1, square2, square3, vanaf links. Stel vervolgens de instantienamen voor de ruggen in overeenkomstig het overeenkomstige met het vierkant van dezelfde kleur. Zo goldBack zou de instantienaam krijgen back0 omdat het goldSquare heeft de naam van het exemplaar square0.
Nu we klaar zijn met het maken en positioneren van de MovieClips, kunnen we beginnen met het instellen van de twee klassen die we zullen gebruiken.
Ga eerst naar de eigenschappen van je Flash-bestand en stel zijn klasse in op MenuBounce; maak vervolgens een nieuw ActionScript 3.0-bestand en sla het op als MenuBounce.as.
Kopieer nu de volgende code erin; Ik zal het uitleggen na:
pakket import flash.display.MovieClip; import flash.events.Event; public class MenuBounce breidt MovieClip uit public var menuBounceMC: MenuBounceMC = new MenuBounceMC (); openbare functie MenuBounce () addChild (menuBounceMC);
Dit is een standaard documentklasse waaraan we een beetje extra code hebben toegevoegd die een instantie van MenuBounceMC maakt en aan het werkgebied toevoegt.
Maak nu een nieuw ActionScript 3.0-bestand en sla het op als MenuBounceMC.as. Kopieer nu de volgende code erin, zodat we deze kunnen instellen.
pakket import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; openbare klasse MenuBounceMC breidt MovieClip uit public var activeSquare: MovieClip; public var activeBack: MovieClip; public var squaresArray: Array = new Array (); public var backsArray: Array = new Array (); public var speed: Number = 20; openbare functie MenuBounceMC ()
Elke variabele heeft een specifiek doel:
activeSquare: Welk vierkant wordt omgeroldactiveBack: Welke achterkant is geselecteerd om te verplaatsensquaresArray: Een array met alle vierkante MovieClipsbacksArray: Een array met alle back MovieClipssnelheid: Hoeveel pixels de ruggen door elk frame worden verplaatstAl deze variabelen zijn ingesteld, met uitzondering van topSquare (die is ingesteld in andere functies) en de arrays. We moeten dus alle MovieClips op de array duwen. Voeg de volgende regels in de constructor toe:
squaresArray = [square0, square1, square2, square3]; backsArray = [back0, back1, back2, back3];
Deze methode kan echter een beetje vervelend zijn als je een groot aantal MovieClips in het menu gaat gebruiken - zeg 50. Een alternatief zou zijn om de MovieClips volledig door code te maken en ze te pushen wanneer je ze aan het menu toevoegt. Maar voor ons doel om slechts acht MovieClips te gebruiken, werkt het prima.
De laatste reeks dingen die we moeten toevoegen om de installatie te voltooien, zijn onze gebeurtenislisteners, die alle overgangen en roll-over effecten activeren. Voeg deze regels toe onder de Duwen() lijnen.
addEventListener (MouseEvent.MOUSE_OVER, bounceOver); addEventListener (MouseEvent.MOUSE_OUT, bounceOut); addEventListener (MouseEvent.CLICK, bounceClick); addEventListener (Event.ENTER_FRAME, bounceUpdate);
Laten we beginnen met het creëren van de drie gemakkelijkere functies:
public function bounceOver (event: MouseEvent): void public function bounceOut (event: MouseEvent): void public function bounceClick (event: MouseEvent): void
Binnen in de bounceOver () functie start door een if-statement toe te voegen om ervoor te zorgen dat er geen back op dat moment "actief" is - dat wil zeggen, dat er wordt overgeschakeld naar, overgezet of bovenop zit:
if (activeBack == null)
De rest van alle code in de bounceOver () functie zal in die if-statement worden geschreven. Nu komen we erachter of het object is omgerold (de event.target) is een vierkant, door te controleren of het in de squaresArray []:
if (squaresArray.indexOf (event.target)! = -1)
Ervan uitgaande dat het is, doen we echt vlees van de functie:
activeSquare = event.target als MovieClip; activeSquare.gotoAndStop (2); setChildIndex (activeSquare, numChildren - 1);
Eerst stellen we de variabele in activeSquare om naar het betreffende vierkant te wijzen. Daarna pauzeren we de animatie van dit vierkant in het tweede frame, dat de "rollover" -afbeelding toont. Ten slotte verplaatsen we de sprite om bovenop al het andere te staan, met behulp van setChildIndex ().
We gaan nu naar de bounceOut () functie. Deze keer controleren we eerst of het object waaruit de muis wordt uitgerold, de actieve is plein:
if (event.target == activeSquare)
Voeg in het if-blok de volgende code toe; het onderbreekt de animatie van het vierkant opnieuw in het eerste frame en stelt vervolgens activeSquare terug in op nul zodat we over een andere kunnen rollen:
activeSquare.gotoAndStop (1); activeSquare = null;
Ga dan naar de bounceClick () functie. Deze functie wordt gebruikt om alle overgangen te starten. Begin door te controleren of er al een actieve back-up is:
if (activeBack == null)
Dit voorkomt dat de gebruiker tijdens een overgang op een ander vierkant klikt. Als er een actieve back is, moet een klik dit ongedaan maken, zodat we op een ander vierkant kunnen klikken:
if (activeBack == null) else activeBack = null;
Ervan uitgaande dat er geen actieve back-up is, voegt u opnieuw een if-blok toe om te controleren of het object waarop werd geklikt een vierkant was:
if (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) else activeBack = null;
Als de gebruiker op een vierkant heeft geklikt, moeten we het overeenkomstige terug instellen als het "actieve" terug. Sinds de index van elk item in backsArray [] komt overeen met de index van elk item in squaresArray, dit is eenvoudig:
if (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] als MovieClip; else activeBack = null;
Nu moeten we alleen de momenteel actieve back verplaatsen, zodat deze bovenop al het andere staat:
if (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] als MovieClip; setChildIndex (activeBack, numChildren - 1); else activeBack = null;
Dit is de laatste functie die we gaan maken. Laten we beginnen met het toevoegen van het schalingseffect voor wanneer een vierkant wordt omgewoeld of omgekeerd:
public function bounceUpdate (event: Event): void for each (var square in squaresArray) if (square == activeSquare) if (square.scaleX <= 1.5) square.scaleX +=0.05; square.scaleY +=0.05; else if(square.scaleX >= 1) square.scaleX - = 0,05; square.scaleY - = 0,05;
Hier hebben we een for-each lus gemaakt om door elk vierkant in de array te bladeren en te controleren of dit het momenteel actieve vierkant is. Als dat zo is, schalen we het op tot het groter is dan of gelijk is aan 1,5 keer de normale grootte; als dat niet het geval is, schalen we het terug totdat het weer op de normale grootte is. (Technisch gezien kan deze code het mogelijk maken dat deze heel iets kleiner is dan de normale grootte, maar dit is in de praktijk niet merkbaar.)
Dit is waar sommigen van jullie je eigen weg gaan; als u Ontwerp 1 maakt, ga dan naar Stap 7a en als u Ontwerp 2 aanmaakt ga naar Stap 7b.
Gefeliciteerd, je hebt gekozen voor ontwerp 1! Dit ontwerp is eenvoudig en gemakkelijk te volgen - ervan uitgaande dat je precies vier vierkanten en ruggen hebt. Nog meer, en het wordt een puinhoop om te behouden.
We gaan een lange reeks van geneste if-else-statements gebruiken - erg rommelig, dat weet ik. Maar laat me je de redenering achter dit vertellen! Elke rug heeft een andere startpositie en overgangsrichting. In een notendop, je kunt geen enkele for-lus gebruiken om alle MovieClips te verplaatsen, tenzij je een if-statement hebt om te controleren welke rug beweegt, een andere om de bewegingsas in te stellen (x of y), en een derde om in te stellen de snelheid (positief of negatief). Oké, we zouden al deze informatie kunnen opslaan in eigenschappen van de vierkanten of iets dergelijks, maar ik denk dat dit een benadering is waarbij "Keep It Simple, Stupid" van toepassing is.
if (activeBack == back0) if (back0.x < 0) back0.x += speed; else if(back0.x > -600) back0.x - = snelheid; if (activeBack == back1) if (back1.y < 0) back1.y += speed; else if(back1.y > -300) back1.y - = snelheid; if (activeBack == back2) if (back2.y> 0) back2.y - = snelheid; else if (back2.y < 300) back2.y += speed; if(activeBack == back3) if(back3.x > 0) back3.x - = snelheid; else if (back3.x < 600) back3.x += speed;
De code is gemakkelijk te begrijpen; het kijkt naar elke achterkant en beweegt het op het podium of van het podium, in de juiste richting, afhankelijk van of het actief is of niet.
Gefeliciteerd, je hebt Design 2 gekozen! Dit ontwerp is veel flexibeler en maakt het een stuk eenvoudiger om meer back-ups toe te voegen en minder code te gebruiken. Voor dit ontwerp zullen we een andere for-each-lus gebruiken om elke in de back-up te onderzoeken backsArray:
voor elke (var back in backsArray) if (back == activeBack) if (back.y> 0) back.y - = speed; else if (back.y < 300) back.y += speed;
Dit zou vrij eenvoudig te begrijpen moeten zijn. Het fietst door de ruggen en controleert elk om te zien of het actief is. Als dit het geval is, verplaatst de code deze naar boven naar het werkgebied en stopt het met verplaatsen zodra het volledig is ingeschakeld (dus zodra het is aangekomen) y = 0 of hoger). Als de achterkant niet actief is, verplaatst de code deze terug naar de uitgangspositie.
Hier is een uitdaging: gezien 16 vierkanten (en 16 ruggen), kun je het zo maken dat Vierkanten 1, 5, 9 en 13 de corresponderende ruggen van links naar links maken, Vierkanten 2, 6, 10 en 14 maken ze overgaand vanaf de top, enzovoort? U moet de twee benaderingen combineren en de positie van het actieve vakje / terug in de array controleren.
Bedankt dat je de tijd hebt genomen om deze zelfstudie door te lezen. Ik hoop dat je het voltooide product leuk vond en iets leerde over het maken van actieve, flexibele menu's!
