Rask tips Lag en minimalistisk SandClock ved hjelp av ActionScript 3

Les gjennom de enkle trinnene i denne Quick Tip for å lage en minimalistisk SandClock med ActionScript.


Endelig resultatforhåndsvisning

La oss se på det endelige resultatet vi vil jobbe for:


Trinn 1: Kort oversikt

Ved å bruke Arrays og en premade square MovieClip vil vi lage en SandClock som vil bli animert av en Timer.


Trinn 2: Konfigurer din Flash-fil

Start Flash og opprett et nytt Flash-dokument, sett scenestørrelsen til 400x250px og bildesatsen til 24fps.


Trinn 3: Grensesnitt

Dette er grensesnittet vi skal bruke, kvadratene i bildet er faktisk en enkelt blå firkantet MovieClip eksportert for bruk med ActionScript, med et koblingsnavn på Torget. En enkel knapp som heter start knapp vil bli brukt til å bygge og starte klokken.


Trinn 4: ActionScript

Opprett en ny ActionScript-klasse (Cmd + N), lagre filen som Main.as og skriv følgende linjer. Les gjennom kommentarene i koden for å forstå klassens oppførsel fullt ut.

 pakke import flash.display.Sprite; importere flash.utils.Timer; importer flash.events.TimerEvent; importer flash.events.MouseEvent; offentlig klasse Hoved utvider Sprite private var clockArray: Array = [15,13,11,9,7,3,1]; // Lagrer antall kvadrater per linje privat var topp: Array = []; // vil holde torgene på den øverste delen av Sandclock Private Var-beholderen: Sprite = New Sprite (); // lagrer alle movieclips private var containerCopy: Sprite = new Sprite (); // vil duplisere den øverste delen for å lage den nederste private var-timeren: Timer = Ny Timer (1000); // en timer utført hver sekund privat var counter: int = 0; // vil telle sekunder, brukes til å stoppe tidtakerens offentlige funksjon Main (): void startButton.addEventListener (MouseEvent.MOUSE_UP, buildClock); // en lytter i startknappen privatfunksjon buildClock (e: MouseEvent): void startButton.removeEventListener (MouseEvent.MOUSE_UP, buildClock); // deaktiverer knappen startButton.enabled = false; var klokkeLengde: int = klokkeArray.length; / * denne doble for å bla gjennom klokkeslettlengden OG verdien av hvert arrayelement lager 7 linjer (lengde) av kvadrater med 15, 13, 11 (elementverdi) og så videre * / for (var i: int = 0; Jeg < clockLength; i++)  for (var j:int = 0; j < clockArray[i]; j++)  var s:Square = new Square(); var sc:Square = new Square(); s.x = 70.5 + (s.width * j) + (1 * j) + (i * (s.width + 1)); s.y = 84.5 + (s.height + 1) * i; sc.x = s.x; sc.y = s.y; if (i >= 5) s.x = 70.5 + (s.width * j) + (1 * j) + (i * ((s.width) + 1)) + (s.width * 2-4); sc.x = s.x;  container.addChild (s); containerCopy.addChild (sc); // lager en kopi for den nederste delen top.push (s); sc.alpha = 0,2; // gjør bunndelen halv gjennomsiktig addChild (container); containerCopy.x = 225; // posisjoner og roterer bunndelbeholderenCopy.y = 247; containerCopy.rotation = 180; addChild (containerCopy);  timer.addEventListener (TimerEvent.TIMER, startClock); // start timeren timer.start ();  / * Denne funksjonen utføres hvert sekund, det endrer alfa av det tilsvarende firkantet for å gjøre sand effekten. når tiden er ferdig stopper timeren og kaller en funksjon * / privat funksjon startClock (e: TimerEvent): void container.getChildAt (teller) .alpha = 0.2; containerCopy.getChildAt (teller) .alpha = 1; teller ++; // 60 sekunder hvis (counter> = 59) timer.stop (); timer.removeEventListener (TimerEvent.TIMER, startClock); timeComplete ();  privat funksjonstid Komplett (): void // gjør noe her

Du kan justere Timer og disk verdi for å gjøre sandklokkens varighet større eller kortere.


Trinn 5: Dokumentklasse

Husk å legge til klassenavnet til Klasse felt i publisere delen av Eiendommer panel.


Konklusjon

Hvorfor ikke bruke denne SandClock til å gi din applikasjon eller spill en fin touch?

Jeg håper du likte denne opplæringen, takk for å lese!