Creating en fire-State Button Med Flash Tidslinje og Actionscript 3.0
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Denne opplæringen skjedde etter ser på nettet for å få hjelp med det samme emnet. Mange mennesker synes å være det samme spørsmålet, men det var vanskelig å finne et pent pakket sett med instruksjoner til følge.
Så, som enhver anstendig netizen, brosteinbelagte jeg sammen denne artikkelen, få inspirasjon fra en par andre blogger og bruker erfaringer fra en del prøving og feiling på min egen. Og nå er jeg tilbyr det til deg, håper dette vil ende dine egne søk.
Denne opplæringen bruker Flash CS4 i kombinasjon med Actionscript 3.0, men du kan bruke disse prinsippene i Flash CS3. Det forutsetter at du allerede har en ganske god hånd på å lage animasjoner i tidslinjen og en god forståelse av hvordan du søker Action til tidslinjen.
Målet er å ha en navigasjonsknapp i form av en fane, gjemt ut til siden, for å tråkke bakover gjennom et bilde-presentasjon. Jeg vil at det skal skyve åpen, endre farge og vise etiketten. Når brukeren klikker på den, vil den navigere tilbake ett lysbilde. Hvis brukeren mus ut før du klikker på den, vil den gli tilbake til sin opprinnelige posisjon og farge
. Merk: Husk å lagre ofte for å unngå å starte fra scratch skulle noe gå galt Flash gir deg muligheten til å lage en knapp symbol, men det er begrenset til tre tilstander: Up, Over Hotell og Down Den innebygde knappen symbol dessverre ikke har en ut staten Her er det takeaway..: et symbol, som en grafisk symbol eller et filmklipp symbol, kan bli en knapp. Du trenger bare å bruke riktig Actionscript. I denne opplæringen, vil et filmklipp bli omgjort til en knapp med fire stater Det vil gjøre livet mye enklere hvis du allerede har en klar visuell idé om hvordan knappen vil oppføre seg i hver av de fire landene. Skisser den ut på papir eller bruke Illustrator eller Photoshop til prototype de visuelle elementene som igjen kan importeres til Flash. Dette er litt av arbeidet opp foran, men det er mye bedre enn å jobbe blind og måtte gå tilbake og fikse noe fordi begrepet ikke var tenkt gjennom logisk Opprett et nytt dokument og velg Flash-fil (Actionscript 3.0) I stedet for å lage en knapp symbol, vil vi lage en ny filmklipp symbol. Trykk Ctrl-F8 (Kommando-F8 på en Mac) eller velg Sett > New Symbol fra menyen. Vi kaller det "fire state knappen" I "fire knapp" filmklipp, legger et nytt lag, og kaller det "tiltak" . Lag et nytt lag, og kaller det "etiketter". Sett fire tomme nøkkelbilder på omtrent like intervaller akkurat nok slik at du kan være nok plass til å lese hver etikett. Her har jeg satt dem på 20 ramme intervaller. Gi label navnene på opp, over, ned Hotell og Legg til nøkkelbilder i handlinger lag som tilsvarer de fire statene i etiketter laget For hver tomt keyframe i handlinger lag, legger this.stop () Opprett en ny filmklipp symbol ved å trykke Ctrl-F8 (Kommando- F8 på en Mac) eller velg Sett > New Symbol fra menyen og kaller det "up animasjon" For knappen, tegne en grønn boks i ett lag, og legge en hvit pil i et lag over. Sørg for at den er registrert i venstre kryss. Ettersom dette er statisk, er det ikke behov for en rekke rammer for animasjon, men du har alltid fleksibiliteten bør du bestemmer deg for å animere det, for eksempel en boks som blekner opp til syne Lag et nytt lag, og kaller det "tiltak". Sørg for at det er på toppen. Velg blank keyframe og legge this.stop (); Det eneste som mangler fra modusknapp symbol redigering som du ikke har med filmklipp er en spesiell ramme reservert for treffet området. Dette ville definere grensene der mus hendelser inntreffer som klikk og svever. Lag et nytt lag, og kaller det "hit området". Tegn en figur på laget og satt sin alpha verdien til 0 i Properties panelet, noe som gjør den usynlig. Dette treffet området vil være så stor som på knappen når den er trukket helt ut. Merk: Hvis du har en animert sekvens, sørg for at treffet området rammer dekker hele lengden av animasjon Lag et nytt lag i fireknapp Trykk Ctrl-F8 (Kommando-F8 på en Mac) eller velg Sett > New Symbol fra menyen og velger filmklipp. Vi kaller det "over animasjon" Gå tilbake til "opp animasjon" filmklipp, klikk på den grønne knappen og kopiere den. Gå tilbake til "over animasjonen" filmklipp og legge et nytt lag som heter "-knappen morph". Høyreklikk for å lime inn den grønne knappen på plass i det tomme keyframe. Opprett en tom keyframe på ramme 20 og høyreklikk for å lime på plass igjen. Med denne formen, øke bredden og endre farge til oransje. Det bør være av samme størrelse som den populære området opprettet i trinn 10. Velg hele spekteret av rammer og høyreklikke for å skape en form tween For å legge til en knapp etikett, opprette et nytt lag som heter "tekst vises" og bruke den type verktøy for å lage en statisk tekst objekt, i dette tilfellet, FORRIGE i en tom keyframe. Høyreklikk for å sette en ramme på ramme 20. Velg en ramme i laget og høyreklikke for å skape en bevegelse mellom. Jeg vil at etiketten skal visne opp som starter i midten av animasjon, så jeg skal gå til bevegelse redaktør og lage keyframes i midten og på slutten, noe som gjør tre nøkkelbilder. Den første keyframe vil legge til en fargeeffekt med en alfa fra 0% og de to siste vil ha en alfa 100% Legg et nytt lag som heter "hit området". Du kan velge lengre oransje form fra slutten av formen tween, kopiere den og lime den på plass i en tom keyframe på "hit området" lag. Velg den og gi den en alfaverdi på 0% i Properties panelet. Sett inn en ramme på ramme 20 for å gjøre treffet området dekker hele animasjonen Legg et nytt lag på toppen, og kaller det "tiltak". Legg en blank keyframe på ramme 20 og legge en this.stop (); Gå tilbake til "fire knapp" filmklipp. Sett inn en tom keyframe i ramme 21 på button statene lag og dra en forekomst av i løpet av animasjon Opprett en ny grafisk symbol ved å trykke Ctrl-F8 (Kommando-F8 på en Mac) eller velg Insert > New Symbol fra menyen og kaller det "ned grafikken". Det er ingen eksplisitt animasjon nødvendig siden det bare vil bli vist umiddelbart når museknappen blir klikket For denne tilstanden, alt som kreves, eventuelt er å endre fargen på fullt utvidede knappen. Du kan kopiere og lime på plass den oransje boksen samt FORRIGE etiketten fra "over animasjonen" filmklipp i sine respektive lag. Endre oransje boksen til rødt. Bare en ramme er nødvendig, er det ikke behov for et treff område som knappen dekker hele området. Og siden det er et grafisk symbol, nei stop (); Gå tilbake til "fire knapp "filmklipp. Sett inn en tom keyframe i ramme 41 på "knappen stater" lag og dra en forekomst av "ned grafikken" symbol fra biblioteket. Forsikre deg om at koordinatene er satt til 0. Sett inn en ramme på ramme 60. Trykk Ctrl-F8 (Kommando-F8 på en Mac) eller velg Insert > New Symbol fra menyen og velger filmklipp. Vi kaller det "out animasjon" Den ut Staten vil i hovedsak være en omvendt versjon av de over staten. Gå tilbake til "over animasjonen" filmklipp og kopiere Shape Tween rammer, så komme tilbake til den "out animasjon", skape et lag som heter "-knappen morph" og lim rammene inn i det tomme keyframe. Deretter velger du alle rammer i dette laget, og velg Modify > Tidslinje > Omvendt Frames fra menyen Gå tilbake til "over animasjonen" filmklipp og kopier FORRIGE tekstobjektet, og deretter gå tilbake til "out animasjon" , opprette et nytt lag som heter "teksten forsvinner" og lim på plass. Sett en ramme på ramme 20 velg utvalg av rammer og skape en bevegelse mellom. Du vil gjøre det motsatte av bevegelse mellom opprettet i trinn 15 og lage keyframes i midten og på slutten i Motion Editor, men de første og midtre keyframes vil ha en alfa på 100%, mens den siste keyframe vil ha en alfa 0% For å gå tilbake utseendet på knappen til sin opprinnelige opp staten, legge et lag som heter "pil" og plassere en keyframe i ramme 20, forlater de første 19 frames blank. Kopier pil fra "up animasjon" og lim på plass tilbake i "out animasjon" i det siste keyframe Igjen må vi opprette et nytt lag som heter "hit area" og plassere en boks store nok til å dekke full størrelse av den utvidede knappen. Gi den en alpha fra 0 til å gjøre det usynlige Igjen, for å holde "out animasjon" fra looping, må vi legge et lag som heter " handlinger ", sette en blank keyframe i ramme 20 og legge en this.stop (); Gå tilbake til "fire knapp" filmklipp. Sett inn en tom keyframe i ramme 61 på "knappen stater" lag og dra en forekomst av "out animasjon" symbol fra biblioteket. Forsikre deg om at koordinatene er satt til 0. Sett inn en ramme på ramme 80. Nå kommer Action å gjøre alt arbeidet. For å oppdage mus hendelser som klikk og svever, må vi legge hendelsen lyttere. Klikk på den første keyframe av handlingene lag i "fire knapp" filmklipp hvor vi først har lagt en stop action og åpne Handlinger panelet. Vi vil legge til hendelsen lyttere som vist nedenfor for å oppdage en mus ROLL_OVER, en MOUSE_UP (når museknappen slippes) og en MOUSE_DOWN (når museknappen trykkes). Vi bruker ROLL_OVER begivenhet i stedet for MOUSE_OVER hendelsen på grunn av hvordan den behandler barnet elementer av filmklipp i sammenheng med den overordnede filmklipp som er mer egnet for dette oppsettet. Vi legger falske, 0, true til parametere som en god praksis å markere disse lytterne for søppelrydding for når de ikke lenger er nødvendig For hver hendelsen lytteren, vil en funksjon kalles. Hver funksjon i hovedsak avanserer tidslinjen til den aktuelle stat i de fire stats knappen filmklipp og spiller den delen ved å henvise til navnet etiketten. Du vil merke det er ingen hendelse lytteren skapt for en MOUSE_OUT hendelse. I stedet for å lage en frittstående hendelse lytteren, vil vi bare bruke ROLL_OVER hendelsen til å kalle opp en funksjon som igjen vil fjerne sitt eget arrangement lytteren og legge til en ny hendelse lytteren for en ROLL_OUT hendelse. I dette oppsettet, vil en ROLL_OUT hendelse fungere bedre enn en MOUSE_OUT hendelse. Det samme gjelder for det motsatte, der en ROLL_OUT hendelse fjerner sin egen lytteren og gjeninnsetter arrangementet lytteren for en ROLL_OVER hendelse. Ved veksling disse velt og rollouts, vi holder koden ren og fri for potensielle konflikter For å spille ned staten, lage en funksjon som tilsvarer MOUSE_DOWN hendelsen satt opp av arrangementet lytteren Til slutt må vi faktisk fortelle knappen hva de skal gjøre når det klikkes. Legg til en funksjon som svarer til den MOUSE_UP arrangementet. En MOUSE_UP arrangementet er i hovedsak det samme som siste del av et klikk hendelse (ned, så opp). For testformål, opprettet jeg en web-kobling i en URL variabel (i dette tilfellet, til Adobes hjemmeside ) så tilsatt navigateToURL () metoden til funksjonen slik at jeg kunne bekrefte at det fungerer. Men du kan erstatte denne metoden med en oppfordring til å navigere til en annen ramme etiketten, nummer eller scene ved hjelp av gotoAndPlay De fire state-knappen er nå klar til å brukes. Gå tilbake til hovedtidslinjen og drar de fire knapp filmklipp symbol på scenen på sitt eget lag. En erstatning bakgrunn er lagt på et lag for å bedre se effekten i sammenheng med andre elementer på scenen. Kontroller at filen er lagret, og trykk kontroll- Enter (Command-Enter på en Mac) for å teste filmen. Mye takket går til Alex på Sanctified Studios for å inspirere den opprinnelige idé å bruke et filmklipp som en knapp og til Dominic Gelineau av Zedia Flash-bloggen for å vise den beste måten å skape velt og rollouts i Actionscript 3.
<. br>
Begrensninger Button Symbol
. Det er også Hit
som definerer det interaktive området rundt knappen. Dette er greit for de fleste bruksområder for en enkel knapp. Faktisk er denne knappen symbol faktisk medlem av Simple
klasse. Men hva hvis du ønsker å endre utseendet på knappen eller animere det når brukeren mus over og deretter mus uten å måtte klikke? I så fall trenger du en fjerde tilstand som heter Ut
Trinn 1:. Dreiebok eller Skisser Button
Trinn 2:. Sett opp Document
. Sette opp scenen med riktig størrelse og bakgrunnsfarge
Trinn 3:. Opprette en tom filmklipp symbol
Trinn 4:. Legg en Handlinger Layer
Trinn 5: Legg etiketter for de fire statene
ut i Properties panelet. Disse vil være knappe statene
Trinn 6:.. Opprett Handling nøkkel
Trinn 7 : Legg Stop Handlinger
; i Actionscript Editor. Dette vil sørge for at filmklippet ikke spiller gjennom til andre knappe stater
Trinn 8:. The Up State
Trinn 9:. Up State Grafisk
Trinn 10:. Legg en Stop Handling
til Actionscript Editor. Det er ikke helt nødvendig i dette tilfellet siden det er bare et statisk bilde, men det er lurt å holde hver stat fra looping
Trinn 11:. Definer Hit området
Trinn 12:. instantiate opp staten filmklipp
filmklipp symbol kalt -knappen stater.
Dra en forekomst av opp animasjon
symbol fra Bibliotek-panelet og inn i < em> fireknapp
filmklipp symbol redigere område i -knappen States
lag. Sørg for sin X og Y-koordinatene er satt til 0. Sett inn en ramme på ramme 20.
Trinn 13: Over State
Trinn 14:. Shape Tween animasjon
Trinn 15:. Fade opp Label
Trinn 16:. Definer Hit området
Trinn 17:. Legg en stop action
handling i handlinger panel. Dette vil hindre animasjon fra looping
Trinn 18:. Instantiate Over State
filmklipp fra biblioteket. Forsikre deg om at koordinatene er satt til 0. Sett inn en ramme på ramme 40.
Trinn 19: The Down State
Trinn 20:. Down State Grafisk
handling er nødvendig
Trinn 21:. Instantiate Down State Grafisk
Trinn 22: The Out State
Trinn 23:. Snu Shape Tween
Trinn 24:. Fade Out Label
Trinn 25:. Legg pil
Trinn 26:. Definer Hit området
Trinn 27:. Legg en stop action
handling i prosedyrepanelet
Trinn 28:. instantiate Out State
Trinn 29: Legg tilstelninger Lyttere
this.addEventListener (MouseEvent.ROLL_OVER, onMouseRollover, falsk, 0, sant).; this.addEventListener (MouseEvent.MOUSE_UP, onMouseClick, falsk, 0, true); this.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDownButton, falsk, 0, true);
Trinn 30: Skifte Funksjoner
funksjon onMouseRollover (e: MouseEvent):. Void {e.target.gotoAndPlay ("over"); this.removeEventListener (MouseEvent.ROLL_OVER, onMouseRollover); this.addEventListener (MouseEvent.ROLL_OUT, onMouseRollout, falsk, 0, true); } funksjon onMouseRollout (e: MouseEvent): void {e.target.gotoAndPlay ("ut"); this.removeEventListener (MouseEvent.ROLL_OUT, onMouseRollout); this.addEventListener (MouseEvent.ROLL_OVER, onMouseRollover, falsk, 0, true); }
Trinn 31: onMouseDownButton Funksjon
fungere onMouseDownButton (e: MouseEvent):. void { e.target.gotoAndPlay ("ned");}
Trinn 32: onMouseClick Funksjon
eller noen annen metode du foretrekker
Var linkToAdobe. URLRequest = new URLRequest ("http: //www.adobe.com");function onMouseClick (e: MouseEvent): void {e.target.gotoAndPlay ("opp"); navigateToURL (linkToAdobe); //Du kan erstatte dette med noen annen metode eller funksjon}
Trinn 33: instantiate Button
Trinn 34. Test Movie
Takk