Rask Tips Etterligne stablene i Mac OS X Bruke AS3

Stack-funksjonen har vært en del av Mac OS siden Leopard, og det er en fin måte å håndtere visningselementer på. I denne Quick Tip vil vi etterligne denne funksjonen ved hjelp av ActionScript 3-klasser.


Endelig resultatforhåndsvisning

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


Trinn 1: Kort oversikt

Vi vil gjøre bruk av den fantastiske klassen som er opprettet av PixelFumes og tilpasset grafikk for å lage en Stacks-meny i Flash. Du kan laste ned kilden til klassen fra utviklerens nettsted.


Trinn 2: Konfigurer din Flash-fil

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


Trinn 3: Grensesnitt

Dette er grensesnittet vi skal bruke; Bakgrunnen er et bilde tatt fra skrivebordet mitt og de kule logoer er en del av Tuts + -nettverket.

Konverter logoer til MovieClip og merk av Eksporter for ActionScript boksen. Den grå firkanten er en sceneknapp kalt stackButton.


Trinn 4: ActionScript

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

 pakke import flash.display.Sprite; importere flash.events.Event; importer flash.events.MouseEvent; importere com.pixelfumes.stacks.Stack; // Husk å importere egendefinert klasse import fl.transitions.easing.Elastic; offentlig siste klasse Main utvider Sprite private var stack: Stack = new Stack (); // Oppretter en ny Stack container / * De neste variablene er filmklippene navnene, du kan legge til noen filmklipp på stablene * / private var nt: NT = nytt NT (); // Nettuts + logo private var på: AT = ny AT (); // Activetuts + logo privat var mt: MT = ny MT (); // Mobiletuts + logo offentlig sluttfunksjon Main (): void / * Sett stabelegenskapene * / stack.setRadius (240); stack.setAngle (35); stack.setStartAngle (0); stack.setOpenEasing (Elastic.easeOut); stack.setOpenTime (1); stack.setCloseEasing (Elastic.easeOut); stack.setCloseTime (0,5); / * Legg elementene i stakkbeholderen * / stack.addItem (nt); stack.addItem (at); stack.addItem (mt); / * Plasser og legg stablene til scenen * / addChild (stable); stack.x = stackButton.x; stack.y = stackButton.y; / * Lytter til klikk på stakknappen * / stackButton.addEventListener (MouseEvent.MOUSE_DOWN, stackClick);  privat siste funksjonstastClick (e: Event): void if (stack.getStackOpen () == false) // hvis stakken er lukket, åpne den stack.openStack ();  else // stack er åpen, så lukk den stack.closeStack (); 

Trinn 5: Dokumentklasse

Legg klassenavnet til Klasse felt i publisere delen av Eiendommer panel.


Konklusjon

Du har opprettet en nyttig Stabler-meny for dine applikasjoner eller nettsider. Du kan tilpasse prosjektet for å dekke dine behov eller bruke denne teknikken til å bygge dine tilpassede Stabler.

Jeg håper du likte denne Quick Tip, takk for å lese!