Flash-games zijn heel erg het brood en de boter van de indie pop-nerd-cultuur. Als je de sneetjes brood het menu en de game zelf overweegt, wat blijft dan over? De boter - juist die substantie die het brood doet smaken, dat is veel lekkerder. En wat betreft een Flash-spel, wat er tussen menu's en games zit, zijn de overgangen!
Eindresultaat voorbeeld
Dit is een voorbeeldpatroon van het overgangseffect waar we naartoe zullen werken:
Stap 1: instellen
Normaal moeten we een nieuw Flash-bestand maken (ActionScript 3.0). Stel de breedte in op 400 px, de hoogte op 200 px en de framesnelheid op 30 fps. De achtergrondkleur kan als standaard worden overgelaten. Sla het bestand op; het kan worden genoemd wat je wilt. Ik heb de mijne genoemd Transitions.fla.
Vervolgens moeten we een documentklasse maken. Ga naar de eigenschappen van je Flash-bestand en stel zijn klasse in Transitions. Maak vervolgens de documentklasse:
pakket import flash.display. *; import flash.events. *; public class Transitions breidt MovieClip uit static public var val: Number = new Number (); static public var transitionAttached: Boolean = new Boolean (); openbare functie Overgangen () val = 0; transitionAttached = false;
De code heeft zojuist twee variabelen geïntroduceerd. De eerste zal worden gebruikt om het patroon van het effect te selecteren, en de tweede zal worden gebruikt om te controleren of er meerdere instanties van het effect op het podium zijn.
Stap 2: De Square Sprite maken
Onze volgende stap is om de sprite te maken die wordt gebruikt als elk vierkant voor de overgang. Maak een nieuwe klasse en sla deze op als Square.as:
pakket import flash.display. *; import flash.events. *; public class Square breidt Sprite uit public var squareShape: Shape = new Shape (); openbare functie Vierkant ()
Wij gebruiken de vierkant variabel om onze vorm binnen de Sprite te tekenen. Teken een rechthoek 40px bij 40px (die de volledige grootte heeft) en stel de schaal in 0.1, een tiende van zijn grootte - dit zal ons later helpen bij het effect:
Maak nog een nieuwe klasse voor het effect zelf. Als we klaar zijn, is het toevoegen van het effect aan de stage heel eenvoudig:
pakket import flash.display. *; import flash.events. *; import flash.utils. *; public class FadeEffect breidt Sprite uit public var currentFadeOut: int = 00; public var currentSquares: int = 01; public var pauseTime: int = 01; public var tempNum: int = 00; public var fading: String = "in"; public var fadeinTimer: Timer = new Timer (100); public var fadeoutTimer: Timer = new Timer (100); public var fadeArray: Array = [// top [[01,01,01,01,01,01,01,01,01,01], [02,02,02,02,02,02,02,02, 02,02], [03,03,03,03,03,03,03,03,03,03], [04,04,04,04,04,04,04,04,04,04], [ 05,05,05,05,05,05,05,05,05,05]], // onder [[05,05,05,05,05,05,05,05,05,05], [04 , 04,04,04,04,04,04,04,04,04], [03,03,03,03,03,03,03,03,03,03], [02,02,02,02 , 02,02,02,02,02,02], [01,01,01,01,01,01,01,01,01,01]]]; public var squaresArray: Array = new Array (); publieke functie FadeEffect ()
U denkt waarschijnlijk "dat is een heleboel variabelen, waar worden ze allemaal voor gebruikt?":
currentFadeOut - gebruikt als een cheque voor tempNum om te zien hoeveel vierkanten moeten worden geschaald
currentSquares - de huidige waarde die aangeeft welke vierkanten moeten worden bijgevoegd en / of geschaald
pauzetijd - een eenvoudig geheel getal om een korte pauze tussen overgangen te geven en zichzelf te verwijderen
tempNum - gebruikt om te controleren welke nummers in de array moeten worden geschaald
vervagen - een string om te controleren of de overgang in- of uitfaden
fadeinTimer - een timer die wordt aangeroepen om het vervagen van de huidige waarde van currentSquares te starten
fadeoutTimer - een andere timer die wordt aangeroepen om het vervagen van de huidige waarde van currentSquares te starten
fadeArray - de 3D-array die alle overgangspatronen bevat
squaresArray - een array voor de Square sprites
Ons effect begint met het starten van een gebeurtenislistener fadeInTimer en het starten. We moeten ook een gebeurtenislistener toevoegen om continu alle sprites in de juiste grootte te schalen. Gebruik de volgende code in de constructor:
De volgende stap is om die twee gebeurtenislisteners te maken. We zullen beginnen met de gemakkelijkere van de twee, de enterFrame functie:
openbare functie enterFrame (e: Event) voor elke (var s1 in squaresArray) tempNum + = 1; if (fading == "in") if (s1.scaleX<=1) s1.scaleX+=0.05; s1.scaleY+=0.05; else if(fading=="out") if(tempNum<=currentFadeOut) if(s1.scaleX>= 0,1) s1.scaleX- = 0,05; s1.scaleY- = 0,05; else if (s1.visible == true) s1.visible = false; tempNum = 00;
Het is misschien niet helemaal logisch nu, maar dit moet helpen om wat licht te werpen.
s1 is de instantienaam die aan de vierkanten wordt gegeven wanneer we ze in een latere functie maken.
Ze worden toegevoegd aan een array met de naam squaresArray om het aantal ervan bij te houden en we voeren dezelfde bewerking uit voor elk object in de array.
Vervolgens nemen we toe tempNum (gebruikt in de fading out if-statement) die wordt gebruikt om de sqaures te schalen in de volgorde waarin ze aan de array zijn toegevoegd. Dit betekent dat het niet patroonafhankelijk is en met elk patroon werkt.
Daarna…
We controleren of vervagen is waar of niet.
Als dit waar is, worden alle vierkanten geschaald totdat ze hun volledige grootte hebben bereikt (ze beginnen meteen te schalen nadat currentSquares is verhoogd).
Zodra het begint te vervagen worden dingen een beetje lastiger; we verkleinen alleen de vierkanten die lager zijn dan de huidige waarde van currentFadeOut (dit zijn degenen die moeten worden geschaald, alle anderen moeten op volledige schaal blijven totdat de waarde toeneemt).
Als ze eenmaal zijn verkleind naar een tiende van de grootte, maken we die vierkanten onzichtbaar (ze worden verwijderd met het hele effect).
Het is tijd om de gebeurtenislistener voor de timer toe te voegen:
Op het eerste gezicht lijkt het minder ingewikkeld, maar je zou moeten opmerken dat we een functie bij de fadeArray als de parameter. Welk patroon wordt geselecteerd uit de array hangt af van wat u instelt val gelijk aan in de klasse Overgangen; nu zou het het eerste patroon moeten gebruiken omdat val is ingesteld op 0.
De volgende stap is het maken van de fadeSquaresIn functie die wordt aangeroepen vanuit de vorige timer:
Het eerste dat we bereiken is het herhalen van het geselecteerde patroon. We beginnen bij rij 1, kolom 1 en fietsen door elke kolom totdat het einde van de rij is bereikt. Daarna gaan we naar de volgende rij en herhalen we het proces.
Het volgende dat u moet doen, is het huidige item in de array vergelijken met de waarde van currentSquares:
if (int (s [col] [row]) == currentSquares)
Als ze gelijkwaardig zijn, voegen we een vierkant toe, positioneren het dienovereenkomstig en drukken het op de squaresArray zodat het geschaald kan worden:
We zijn bijna klaar met deze functie, we hoeven alleen maar een controle uit te voeren wanneer er hetzelfde aantal vierkanten is als er items in het patroon zijn. We doen dit door de volgende if-statement buiten beide for-loops toe te voegen:
if (squaresArray.length == (s [0] .length * s.length)) fadeinTimer.stop (); addEventListener (Event.ENTER_FRAME, pauseTween);
Spreekt voor zich - we stopten de timer en noemden een gebeurtenislistener voor de pauze tussen vervagen en vervagen. Die functie wordt gebruikt om de vervaging te initiëren en kan ook worden gebruikt om verandering in je spel te veroorzaken:
We zullen niet veel tijd aan deze functie besteden vanwege zijn eenvoud. Hier verhogen we de waarde van pauzetijd, en als het eenmaal gelijk is aan 60 (wat betekent dat er twee seconden voorbij zijn gegaan), stellen we de waarde in op currentSquares terug naar 1, instellen vervagen naar "uit" zodat de vierkanten achterwaarts kunnen schalen, verwijder de luisteraar voor pauseBetween () zelf en voeg een gebeurtenislistener toe voor deze nieuwe functie:
We fietsen er doorheen, maar deze keer dat we een equivalent item vinden, verhogen we de waarde van currentFadeOut zodat het volgende item in de squaresArray kan beginnen te vervagen.
Bijna klaar nu; alles wat er nog over is, is om de timer te stoppen en het effect te verwijderen. Voeg deze if-statement toe buiten de twee for-loops:
if (currentFadeOut == (s [0] .length * s.length)) fadeoutTimer.stop (); pauseTime = 01; addEventListener (Event.ENTER_FRAME, delayedRemove);
Hiermee wordt gecontroleerd of alle items zijn begonnen met vervagen. Als dat zo is, stopt het de timer, ingesteld pauzetijd terug naar 1 en voegt een gebeurtenislistener voor de functie toe delayedRemove ():
public function delayedRemove (e: Event) pauseTime + = 1; if (pauseTime == 30) Transitions.transitionAttached = false; removeEventListener (Event.ENTER_FRAME, delayedRemove); stage.removeChild (deze);
Zoals eerder verhogen we de waarde van pauzetijd, en als het eenmaal gelijk is aan 30 (1 seconde), stellen we de boolean in op vals zodat het effect nog een keer kan worden toegevoegd. We verwijderen deze gebeurtenislistener en we verwijderen dit effect van het toneel.
Stap 4: Het effect toevoegen
Nu komt het makkelijke gedeelte. Voeg de volgende code toe aan de constructor van de documentklasse om het effect toe te voegen:
if (transitionAttached == false) transitionAttached = true; var f1: Sprite = new FadeEffect; stage.addChild (f1);
Stap 5: Meer patronen maken
Voel je vrij om je eigen patronen te maken! Het is buitengewoon eenvoudig, maak gewoon een nieuwe 2D-array in de 3D-array. Hier is de array die ik heb gemaakt (vervang gewoon je 3D-array). Het bevat 8 verschillende overgangen:
U kunt de waarde van wijzigen Transitions.val om een ander patroon te kiezen - bijvoorbeeld, als val is 3, de overgang komt van rechts.
Conclusie
Bedankt dat je de tijd hebt genomen om deze tutorial te lezen. Als u vragen heeft, kunt u hieronder een reactie achterlaten. En als je een uitdaging wilt, probeer dan het effect met één patroon te laten vervagen en uit te faden met een tegengesteld patroon.
Share
Accentsconagua
