How å lage en Flash Meny i 20 Minutes
3
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Tenk deg at du har lovet kunden vil han ha den menyen idé du fortalte ham om senere i dag, når du møter. Du åpner opp Flash og begynner på en røff, men godt eksempel, som du kan kode eller utvide senere. I løpet av denne tut vil vi fokusere på å gjøre nettopp en slik meny; så passelig som mulig, uten å bruke noen klasser, bare komponent parametere.
Designing Meny
Opprett en ny Actionscript 3 Flash-fil og angi dimensjonene til 960 x 70 piksler. Menyen vil gå bra på en 960.gs HTML mal for kundens bedriftens nettsted. Sett framerate til 25 fps. For å holde ting fort, vil vi ikke bruke et dokument klasse her; vi får bare holde oss til Flash IDE.
Trinn 1: Klargjør Knapper
Vi har fem hovedknappene med undermenyer, som i ordningen nedenfor:
Lag et rektangel med dimensjonene 192 x 40px. Jeg kom opp med bredden ved å dele 960 med 5 knapper. Farge det med en lineær gradient med følgende farger:
Trinn 2: Hoved Button
Trykk "F8" for å slå rektangel til et filmklipp, og gi den navnet "knapp" .
Trinn 3: Button Frames
Dobbeltklikk på knappen du nettopp opprettet, og legge til to rammer. Disse vil være løpet Hotell og ned For andre ramme ("over" state of the menu) endre fargene på gradienten som på bildet: Gjør det samme for tredje rammen (den "ned" state of the menyen) med følgende farger: Gi nytt navn det første laget til å "tilbake" og oppover det gjøre tre flere lag som heter "label", "bar" og "tiltak" henholdsvis Lås handlinger lag, deretter på etiketten lag skaper en ny dynamikk tekstfeltet som heter "label_txt". Dette vil være etiketten på knappen. Teksten på knappen vil være forskjellig i henhold til innstillingen av MovieClip på scenen. For dette vil vi bruke komponent parametere, så i stedet for å kopiere på knappen fem ganger, kan vi gjenbruke komponent og trenger bare å endre en variabel Gå tilbake på hovedscenen og i bibliotek høyreklikk på knappen MovieClip og velg "Component definisjon ..." Legg til følgende komponent parametre: Disse Deretter kan nås parametere i handlingene til filmklipp som variabler. Vi vil bruke den "textvar" streng å nevne menyen, den "hidebar" boolsk å skjule separator og "undermenyen" streng som navn på kobling av den relaterte undermenyen sin filmklipp. Nå, gå tilbake til "knappen" filmklipp og i handlinger lag, trykk "F9" åpne Handlinger vinduet, skriv deretter inn følgende kode: La meg forklare koden: Vi setter "useHandCursor" eiendom til sann og "trackAsMenu" til sann. Den første gjør markøren blir til en hånd når over knappen, og den andre forteller filmklipp å oppføre seg som en meny. Dette sikrer at etterfølgende hendelse over barna ikke vil påvirke de viktigste filmklipp. Vi stopper tidslinjen, slik at vi faktisk kan ha knappen funksjonalitet, og sett "mouseEnabled" til false for "label_txt" tekstfeltet. Hvis vi ikke gjør dette, vil tekstfeltet får ROLL_OVER hendelser og menyen vil plutselig utrulling. I utgangspunktet er dette slår av interaktivitet med musen for tekstfeltet. Deretter sjekker vi om "textvar" variable er satt, og hvis så, vi tilordne den til tekstfeltet er tekst Vi gjør det samme sjekken med "hidebar" eiendom. Hvis vi velger sant, vil vi skjule bar filmklipp. Sist, gjør vi løpet Vi er klar til å utføre en test. Slette knappen fra scenen og legge den fra biblioteket igjen på (0,0) px. For "textvar" parametertype Home Bilde: Legg de andre knappene, med en avstand på 192px mellom dem, følgende "textvar" verdier og sette "hidebar = true" for den siste knappen: Vi kan teste filmen for å se det arbeidet fram til nå: Great! Bildetekstene vises og knappene reagerer på muse Vi begynner å lage undermenyen. Denne undermenyen blir duplisert for hver undermeny mulig. Opprett en 550 x 30 rektangel som på bildet, trykk "F8" og gi den navnet "sbmenu1". Husk å sjekke Export for Actionscript og gi den et navn kobling (klasse) av "sbmenu1" Igjen, som i første MovieClip, opprette tre flere lag og navngi dem "sirkel", "knapper" og "tiltak". Flytt rektangel til 30px på x-aksen. Vi vil bruke den 30px å konstruere avrunding av undermenyen Lag en 60px sirkel (holde "Shift" vil gjøre en perfekt sirkel, eller du kan bruke sirkelverktøyet og alt-klikk på scenen for å få en dialog som ber for nøyaktig størrelse) og plassere det på (-30, -30) px. Tegn en vertikal linje gjennom (0,0) px å krysse midten av sirkelen, velg den høyre halvdelen av sirkelen og slette den, som på bildet under. Slett linjen, deretter med halv sirkel valgt nytt trykk "F8" og slå den inn i et grafisk symbol. Vær nøye med å velge riktig midten Registrering punktet, som vi ønsker å animere rotasjonen av sirkelen fra sitt sentrum Roter sirkel grafisk 90 ° over knappene, men før det, bruke Free Transform verktøyet for å dra rotasjonsmidtpunktet til midten av sirkelen, som på bildet, og sette sin posisjon til 30 på x-aksen: Lås de andre lagene, og velg "tilbake" lag. Flytt den første rammen samtidig med den siste sirkelen rammen, og forlenge tidslinjen med en annen nøkkelbilde ("F6"), som på bildet. Velg den første rammen og endre størrelsen på rektangelet 5PX, høyreklikk mellom nøkkelbilder og velg "Create Shape Tween": Hvis du flytter spillehodet, vil du se undermeny animere, men sirkelen er fortsatt synlig. Lag en 30x30px rektangel på maske laget på (0,0) px, høyreklikk maske laget og velg Mask: I "handlinger" lag, skape en tom ramme på samme ramme som animasjon blir ferdig, trykk "F9" for å åpne Handlinger panelet, og skrive en "stop ();" kommando, slik at menyen animasjonen vil ikke gjenta. Du bør ha en fin undermeny animasjon Lag en 130x30px svart rektangel og trykk "F8" for å konvertere den til et nytt symbol. Kall det menuubtn Flytt rektangel på andre ramme ( Over Som før, gå inn på "sub_btn" MovieClip og lage to flere lag: en "label" lag og et «handlinger» lag. . I etiketten lag, skape et dynamisk tekstfelt, satt justering til sentrum, farge til hvit (denne teksten vil være på svart) og name it "label_txt" I handlinger lag, lim inn følgende Actionscript: Høyreklikk subbutton MovieClip og velg "Component Definition" og legge til "textvar" parameter: Nå som vi har laget den egendefinerte knappen, la oss skape flere undermenyknapper og navngi dem på riktig måte : Ting er bra nå, men undermenyen ikke vises, sier du. Det er fordi vi trenger å kode utseendet på undermenyen i løpet Bytt ut de to siste hendelsen lyttere med denne koden: Dette vil legge til "ned" og "opp" lyttere bare når knappen ikke har en undermeny I "over () "-funksjonen, legge til denne delen av koden: La meg forklare koden: Vi sjekker om undermenyen parameteret er satt; hvis så så vi får en referanse til en klasse navn med "getDefinitionByName". Denne funksjonen tilordner variabelen "cn" en klasse type. Dette er måten på å bruke en klasse fra en streng navn. Hvis du prøver å bruke et strengvariabel med den "nye" søkeord, vil det ikke fungere. Etter at vi instantiate undermeny, setter vi den til 40px på y-aksen for å være under knappen og legge den til knappen display listen. Til slutt, vi sjekke igjen hvis sb finnes og vi setter den synlig. Dette er fordi oppretting skjer bare én gang, men hvis musa kommer inn på en annen knapp det ut () funksjonen vil bli kalt, og vi vil skjule "sb" MovieClip. Neste gang den kommer inn i knappen, MovieClip finnes allerede, så det hvis Vi er klare! Bare skriv "sbmenu1", navnet på kobling av den andre knappen, som undermeny For å vise deg kraften til utvidelsesmuligheter, duplisere "sbmenu1" MovieClip og endre navnet "sbmenu2". Vi vil legge dette til kontakt-knappen Jeg har endret på knappene til noe annet, og sette avrundingen sirkel på rett sted ved å endre tweens. Nå er alt vi trenger å gjøre er å sette undermenyen parameter for kontakten knappen, og vi vil ha en fin meny! Vi har en fin skisse å vise til vår klient. Han vil gjerne bruke den til å representere sin arkitektur selskapet og vil muligens gi meg en rabatt på mitt nye hjem :) Vi har nådd slutten av opplæringen. Hvis du likte det, kan du kommentere! Jeg prøvde å gjøre det så intuitivt som mulig. Takk for at du bor inntil slutten!
statene på knappen. Vi vil bruke et filmklipp og legge handlingene til det i stedet for en knapp, slik at vi kan gjøre undermenyknapper klikkbare. Hvis du skulle bruke en knapp, vil et klikk på en undermeny knapp utløse et klikk på hovedmenyknappen
Trinn 4:. Sett Over stats Colors
Trinn 5: Tekst Etikett
Trinn 6:. Button Separator
< p> Med den linjen verktøyet, lage to tilstøtende linjer med følgende farger og slå dem sammen til én filmklipp som heter "bar". Plasser denne MovieClip nøyaktig på 190px på x-aksen (bruk Properties panel). Dette vil være den knappen separator, som vil legge en romlig atskillelse mellom menyknappene. Vi snu dette til en MovieClip å kunne skjule det senere, for den siste knappen
Trinn 7:. Component Definisjon av
Trinn 8: Komponent Parametere
Trinn 9: Tidslinje Action
this.useHandCursor = true; this.trackAsMenu = true; this.stop (); if (this.textvar) {label_txt.text = this.textvar;} if (this.hidebar) {bar.visible = false;} label_txt.mouseEnabled = false; Var sb = false; this.addEventListener (MouseEvent.ROLL_OVER, over), this.addEventListener (MouseEvent.ROLL_OUT, ut); this.addEventListener (MouseEvent.MOUSE_DOWN, ned); this.addEventListener (MouseEvent.MOUSE_UP, opp); funksjon over (e: MouseEvent) {gotoAndStop (2);} funksjon ut (e: MouseEvent) {gotoAndPlay (1);} funksjon ned (e: MouseEvent) {gotoAndStop (3);} fungere up (e: MouseEvent) {gotoAndStop (2);}
eiendom. Ganske enkel. Vi gjør sjekken fordi vi kan forlate parameter tomt og i dette tilfellet får vi en feil.
, ut
, ned Hotell og < em> opp
funksjoner og legge til hendelser til filmklipp, snu den til en knapp. Det er viktig å bruke "ROLL_OVER" og "ROLL_OUT" hendelser i stedet for de "MOUSE_OVER" hendelser. Jeg har prøvd dette med "MOUSE_OVER" og det var et rot, fordi "MOUSE_OVER" ble utløst hver gang musa beveget seg, og dermed skape en flimrende effekt.
Trinn 10: Mer Knapper
Trinn 11:. Gjør Undermeny
Trinn 12:. Inne i Undermeny
Trinn 13:. Avrunding Circle
Trinn 14:. Circle Tween
< p> Opprett en ny ramme med "F6" etter fire rammer, og roter sirkelen en kvart mot urviseren. Deretter høyreklikker på tidslinjen mellom rammer og velg "Create Motion Tween"
Trinn 15:. Undermeny Tween
Trinn 16: Mask Layer
Trinn 17:. Undermeny Knapper
. Denne gangen velger vi Button som type. Vi er faktisk å gjøre det samme som vi gjorde i begynnelsen: å skape en knapp med tre stater, deretter pakke det i en master moveiclip med en etikett tekstfelt inne, som vi vil styre med en egendefinert parameter
Trinn 18: New Frames
) og duplisere rammen. Du kan lage forskjellige farger for roll og ned, men jeg er i en hast nå :). Når du kommer tilbake til undermenyen velger du knappen og trykk "F8" igjen for å gjøre den om til et filmklipp. Kall det sub_btn
. Du vil merke knappen er en gjennomsiktig blå; det betyr at den ikke har den "Up" tilstand, det er en gjennomsiktig knapp
Trinn 19:. Button Etikett
stop (); this.label_txt.mouseEnabled = false; this.label_txt.text = this.textvar;
Trinn 20: Custom Parametere
Trinn 21: Undermeny Knapper
Trinn 22: Gjør det Arbeid
funksjon av hovedknappen. Erklære en ny variabel "sb" som vil holde vår undermeny etter linjen "label_txt.mouseEnabled = false;"
Var sb = false;
if (! this.submenu) {this.addEventListener (MouseEvent.MOUSE_DOWN, ned); this.addEventListener (MouseEvent.MOUSE_UP, opp);.}
if (! this.submenu == '' & & sb) {var cn = getDefinitionByName (this.submenu); sb = new cn (); sb.y = 40; sb.x = (this.offset)? this.offset: 0; this.addChild (sb);} if (sb) {sb.visible = true; }
tilstanden er hoppet over, og vi bare vise det. Dette optimalisering gjør vår meny raskere, kutte minneforbruket
Trinn 23:. Prøv det ut
parameter og teste menyen. Du bør ha en god meny. Herfra på, kan du sette opp klikk handlers for knappene, for å gjøre dem gjøre hva du vil
Trinn 24:. Gjør Second Undermeny
Trinn 25:. Ferdig