Quick Tips: Mimic den Stacks Feature av Mac OS X Bruke AS3

Quick Tips: Mimic den Stacks Feature av Mac OS X Bruke AS3
Del
Del
2

Del
Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

The Stacks funksjonen har vært en del av Mac OS siden Leopard, og det er en fin måte å håndtere visningselementer. I denne hurtig Tips vil vi etterligne denne funksjonen ved hjelp av Actionscript 3 klasser.




Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot:




Trinn 1: Kort oversikt

Vi vil gjøre bruk av awesome klassen skapt av PixelFumes og tilpasset grafikk for å skape en Stacks menyen i Flash . Du kan laste ned kilde av klassen fra utviklerens side



Trinn 2:. Sett opp din Flash File

Launch Flash og opprette en ny Flash dokument, sette scenen størrelse til 508x243px og bildefrekvensen til 24fps



Trinn 3:. Interface

Dette er grensesnittet vi skal bruke; bakgrunnen er et bilde tatt fra min stasjonære og de kule logoer er en del av Tuts + nettverk.

Konverter logoene til MovieClip og markere Eksporter for Action
sjekkheftet. Den grå firkant er en scene knapp som heter stackButton



Trinn 4:. Action

Opprett en ny Action Class (Cmd + N), lagre filen som Main.as Hotell og skrive følgende linjer; kan du lese kommentarene i koden for å fullt ut forstå klassen atferd
pakke {import flash.display.Sprite.; import flash.events.Event; import flash.events.MouseEvent; import com.pixelfumes.stacks.Stack; //Husk å importere egendefinert klasse import fl.transitions.easing.Elastic; offentlig siste klasse Hoved strekker Sprite {private Var stack: stack = new Stack (); //Oppretter en ny Stack container /* De neste variablene er de movieclips navn, kan du legge noen MovieClip til stabler * /private Var nt: NT = new NT (); //Nettuts + logo privat Var på: AT = new AT (); //Activetuts + logo privat Var mt: MT = new MT (); //Mobiletuts + logo offentlig endelige funksjonen main (): void {/* Sett stabelen egenskaper * /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 til bunken container * /stack.addItem (nt); stack.addItem (at); stack.addItem (mt); /* Plasser og legge stabler på scenen * /addChild (stack); stack.x = stackButton.x; stack.y = stackButton.y; /* Lytter for klikk på stackbutton * /stackButton.addEventListener (MouseEvent.MOUSE_DOWN, stackClick); } Private endelige funksjon stackClick (e: Hendelses): void {if (stack.getStackOpen () == false) //hvis stabelen er lukket, åpner du den {stack.openStack (); } Else //stack er åpen, så nært det {stack.closeStack (); }}}}



Trinn 5: Dokument Class

Legg til klassenavnet til Class
feltet i Publiser
delen av Egenskaper
panel.



Konklusjon

Du har opprettet en nyttig Stacks meny for dine applikasjoner eller nettside. Du kan tilpasse prosjektet for å møte dine behov, eller bruke denne teknikken til å bygge egendefinerte Stacks.

Jeg håper du likte denne Quick Tips, takk for lesing!