Create en Mac Dock stil Meny Med AS3
en
Del
10
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil jeg vise deg hvordan du kan lage en meny som Apples Dock bruker AS3 klasser. Vi vil skape en eneste AS fil som skal utføre all magi, utvide den til å legge til nye funksjoner.
publiseres Tutorial
Hver noen uker, vi besøker noen av våre lesernes favoritt innlegg fra hele stedets historie. Denne opplæringen ble første gang publisert i mars 2010.
Endelig resultat Forhåndsvisning
Først, la oss ta en titt på hva vi skal opprette. Hold musen over ikonene for å se hvordan de beveger seg og skala
Trinn 1:. Opprett en ny Action File
Begynn med å skape en ny Actionscript-fil og lagre den som "DockItem .som". Jeg sparer mine på c: /macmenu/org/effects/DockItem.as
Vær oppmerksom på at vårt dokument root (der FLA liv) vil være c:. /Macmenu; mappen /org /effekter vil danne pakken for DockItem klassen
Trinn 2:. Opprett en ny FLA
Opprett en ny Actionscript 3.0 flash-fil og åpne den, slik at vi har både DockItem.as og dette FLA fil åpnes. Lagre dette FLA i rotmappen (den DockItem.as er på c: /macmenu /org /effekter, så vår side rot er c: /macmenu) den /org /effekter er pakken av DockItem Object og vi redde. fla som c:. /macmenu/macmenu.fla
Trinn 3: Importer Icons
Nå importerer vi eller tegne noen ikoner til FLA. Jeg har importert noen ikoner jeg har her fra en Illustrator-fil, men du kan selvfølgelig tegne din egen og bruke en gradient til dem
Trinn 4:. Begynn Konvertering Ikoner å Symboler
< p> Velg et ikon, og klikk Endre > Konverter til Symbol
I boksen som åpnes, gi den et navn (jeg heter dette symbolet "Star") og ta hensyn til registreringspunktet.; den trenger å være nederst i midten. For klassen bruker samme navn (husk at du ikke kan bruke mellomrom) og for Base klassen, bruker org.effects.DockItem (den klassen som vi skal lage). Også, sørg for at Type er satt til Movie Clip
Deretter justere alle gjenstandene til bunnen. Velge alle, klikk Window > Juster, sørg knappen "Å iscenesette" ikke er valgt (ellers vil det rette på botton av scenen), klikk deretter øverste høyre knappen i dette panelet for å justere alle objektene.
Trinn 5: Konverter alle ikoner til Symboler
Vi kan ha så mange knapper som vi ønsker, så la oss konvertere alle våre ikoner symboler. Husk å gi dem et navn og en klasse, satt alle sine registreringspunktene til nederst i midten og sette Base klassen til org.effects.DockItem
Se nedenfor for hvordan vårt bibliotek og ikonene skal se ut.; Husk mellomrommet mellom dem, er det viktig for å skape en god effekt
Trinn 6:. Begynn Koding av DockItem Class
Hvis vi teste filmen nå vil kaste en feilmelding som sier at en Actionscript-fil må ha minst én ekstern og synlig definisjon; det er fordi alle våre menyelementene utvide DockItem klassen, som vi ennå ikke har skrevet. La oss skrive det nå ...
Begynne å lage pakken ved å utvide Sprite klasse (vi vil utvide Sprite siden vi ikke har en tidslinje animasjon.)
Pakke org.effects {import flash.display .Sprite; public class DockItem strekker Sprite {}}
På dette punktet har vi vår DockItem utvide Sprite klasse, så hvis du teste den nå det vil fungere, men du vil se noen effekter.
(Forvirret? ikke brukes til koding med klasser Sjekk ut denne Quick Tips om hvordan du bruker et dokument klasse for en introduksjon)
Trinn 7:?. Import Nødvendige Classes
Nå vil vi importere all nødvendig klasser. En egendefinert klasse blir brukt her, TweenLite klassen, som du kan laste ned fra GreenSock.com. Når du har lastet ned TweenLite, pakk den ut /macmenu /mappe (slik at du vil ha en mappe /macmenu /com /greensock /)
pakke org.effects {import flash.display.Sprite.; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenLite; //http://www.greensock.com/tweenlite import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class DockItem strekker Sprite {}}
Jeg har importert Sprite klassen fordi det er det vi bygger ut; hvis du har animasjoner på tidslinjen, forlenge MovieClip klasse. Vi vil bruke hendelses klassen når det tilpassede objektet er lagt til scenen, og vi vil bruke MouseEvent når du sjekker avstanden til hvert ikon fra musen
Trinn 8:. Erklærer Nødvendige Variabler
Under dette trinnet vil vi erklære de nødvendige variabler:
pakken org.effects {import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class DockItem strekker Sprite {private Var _initPosition: Number; offentlig Var maxXDistance: Number; offentlig Var maxYDistance: Number; offentlig Var maxScale: Number; }}
Merk at jeg brukte _initPosition Hvis det er alt OK, teste filmen ... (På dette punktet, hvis du ønsker å legge mappen org /effekter i classpathen du kan, så du trenger ikke å kopiere denne mappen til hvert prosjekt du oppretter og bruker DockItem eller DockButton.) Hvorfor ikke endre fargen på knappen når musen går over det? I denne delen vil jeg lære hvordan. For dette vil vi bruke TweenLite motoren igjen for å gi litt farge til objektet. Vi er imidlertid allerede bruker TweenLite i DockItem objekt og vi utvider dette objektet på DockButton. Vi ønsker å utvide DockButton å endre fargen, men vi kan ikke bruke TweenLite lenger i samme objekt siden den nye TweenLite objektet vil overskrive den andre (selv med eiendommen skrivings: false For å gjøre dette, la oss lage et annet Actionscript-fil, men nå lagre dette på samme mappe som FLA med Navnet "OverButton.as" (eksempel: c:. /macmenu/OverButton.as) Først lager vi pakken og importere den nødvendige klasser; siden vi lagret OverButton.as filen i samme mappe av FLA-filen pakken vil være øverste nivå, så det er ikke nødvendig å skrive "pakke org.effects": OK, så vi strekker DockButton denne gangen og vi har importert den Displayobject klassen fordi vi vil behandle ikonet som Displayobject. Vi har også importert MouseEvent som vi vil bruke til å sjekke når musen er over ikonet, og når det er ute. Vi har også TweenLite å lage noen tween effekter med fargen Hvorfor har vi skapt en privat Var _object som Displayobject? Vår selve ikonet er lagret i denne variabelen (det er det linje 13 gjør) og behandles som en Displayobject; vi vil bruke fargeeffekt på vår ikon, ikke i det hele objektet. Vi legger hendelses lyttere av musen for å sjekke når musen er over og når musen er ute. Siden vi har opprettet lyttere for musen over og mus ut, vil vi nå lage deres funksjoner: Merk at vi bruker TweenLite på _object nå, ikke på "dette" noe mer. Det er fordi OverButton utvider DockButton som forlenger DockItem hvor det allerede er et TweenLite som brukes. Også i DockButton har vi en falsk alpha 0 bakgrunn som ikke trenger å bli malt For nyansen eiendom TweenLite brukte jeg en fargekode 0x990099, som er et medium lilla.; hvis du bruker null som verdien nyansen vil bli fjernet mykt På dette punktet hvis du tester filmen, vil du ikke se noen fargeendring, fordi vi må endre base klasse på hvert objekt i biblioteket igjen. Åpne Bibliotek gang i FLA (Vindu > Library). Høyreklikk hvert objekt og endre sin base klasse til OverButton (ikke org.effects.OverButton, fordi klassen filen er ikke i /org /effekter mappe). OK, nå kan du teste det! I denne opplæringen har jeg forklart om å utvide stedene. Selve dock effekten er ren matematikk - det er beregninger avstand, innstillinger skala - men det er viktig at vi ser i koden som vi ikke kan bruke "x" eiendom som posisjonsreferanse, fordi "x" eiendom endres hver gang. Jeg håper nå dere alle har en bedre forståelse av "strekker" søkeord, og kan sette pris på hvordan beregningene er gjort her. Takk for lesing :)
som privat: det bare setter den første x-posisjonen til ikonet. Avstanden av musen vil alltid måles fra dette punktet, fordi selve x-posisjonen til elementet vil alltid være i endring.
Trinn 20: Endre farge på Mouse Over
i TweenLite det vil redusere ytelsen mye hvis vi bruker den direkte i samme objekt). Alt er ikke tapt; vi har et ikon inni hvert objekt av biblioteket, og vi kan bruke fargetone til det.
Trinn 21: Koding av OverButton Object
pakke {import org.effects.DockButton; import flash.display.DisplayObject; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class OverButton strekker DockButton {}}
Trinn 22:. OverButton Constructor
pakke {import org.effects.DockButton; import flash.display.DisplayObject; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class OverButton strekker DockButton {private Var _object: Displayobject; offentlig funksjon OverButton (): void {_object = this.getChildAt (0) som Displayobject; this.addEventListener (MouseEvent.MOUSE_OVER, mouse); this.addEventListener (MouseEvent.MOUSE_OUT, mouseout); TweenPlugin.activate ([TintPlugin]); }}}
Trinn 23: Coding musefunksjoner
pakke {import org.effects.DockButton; import flash.display.DisplayObject; import flash.events.MouseEvent; import com.greensock.TweenLite; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.TintPlugin; public class OverButton strekker DockButton {private Var _object: Displayobject; offentlig funksjon OverButton (): void {_object = this.getChildAt (0) som Displayobject; this.addEventListener (MouseEvent.MOUSE_OVER, mouse); this.addEventListener (MouseEvent.MOUSE_OUT, mouseout); TweenPlugin.activate ([TintPlugin]); } Private funksjon mouse (e: MouseEvent): void {nytt TweenLite (_object, 0,5, {tint: 0x990099}); } Private funksjon mouseout (e: MouseEvent): void {nytt TweenLite (_object, 0,5, {tint: null}); }}}
Trinn 24:. Endre Base Classes
Konklusjon