, bygge en dynamisk flash spil menu: harmonika,,,,, 1,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,,, når en bruger første åbner en flash spil, deres første indtryk er baseret på den menu, som de ser.desværre er mange videospil menuer er kedeligt, ikke statisk.det er forfærdelige nyheder!mange aktører vil bare lukke kampen, før det, og gå videre til en anden.lad det ikke ske for dig.,,, endelige resultat forpremiere, se på menuen, bygger vi:, naturligvis i en hel kamp, de forskellige menuer skærme vil indeholde forskellige knapper, tekst, og submenu poster!,, indledning: hvad er en dynamisk menu?før vi lærer, hvad en dynamisk menu er, at vi skal først finde ud af, hvad en statisk menu.en statisk menu, kan beskrives med definitioner af de to ord, det er sammensat af: "støj", dvs. uden ændringer, og "menu", der betyder en liste over tilgængelige muligheder og valg.derfor en statisk menu har en grænseflade til valg eller valg, som mangler i forandring. omvendt "dynamiske": løbende for ændringer inden for et system eller en proces.så i den simpleste form en dynamisk menu løbende opdateringer grænsefladen i valg eller valg,.,, trin 1: oprettelse af den første ting, vi er nødt til at skabe en ny flash - fil (actionscript 3, 0), dets bredde og højde 650px 350px og satte billeder pr. sekund til 60.i stedet for at lade det baggrund farve hvid; senere i ministeriet vil vi skabe en baggrund. nu, hvor vi har den grundlæggende flash - fil, der kan vi redde det, du kan navngive dig hvad du vil have.jeg opkaldte min menuaccordion. fla i næste afsnit vil vi skabe de otte movieclips, der kræves til menuen. her er en liste over alle de farver, og deres hexidecimal koder, der skal anvendes i den tutor:,, hvid -,&#ffffff, guld -,&#e8a317, lys guld -,&#fbb917, blå -,ءc7, blå -,խff, grøn -,񔱣, lysegrønne -,e8f1b, rød -,󱬰, lys rød -,&#c10202, matte grå -,𶐎, trin 2: at skabe movieclips, først er vi nødt til at skabe en stor baggrund farve, fire "bar" movieclips (disse er dem, der vil blive slået til) og fire baggrund movieclips (disse glider ud efter en bar er faldet).det første right-click scenen og vælge, nettet, så vælg, vis net - uden at det vil skabe en 10px af 10px square gitter rundt på scenen.for at gøre livet lettere right-click igen og vælge, bed > snap til nettet.nu er vi klar til at begynde at tegne!vælg den rektangel, værktøj og trække en matte grå baggrund for hele scenen.navn på lag, baggrund, og lås den.næste, skabe et nyt lag og navn, menu.din tidslinje og trin skal se noget lignende det nu:,,,, så vil vi skabe en bar movieclip; for at gøre tingene nemmere, vi vil bare gentage det til fire movieclips og ændre farven på hver., udvælge rektangel værktøj igen, og drage en 30px af 350px rektangel med ingen slagtilfælde.højreklik de udfylde og udvælge, konverteres til symbol.navn, goldbar,, sørg for at den type er, movieclip og registrering er i den øverste venstre hjørne.dobbeltklik på den movieclip på scenen for at redigere det. lige på den første keyframe i tidslinjen og gå til aktioner, type i en enkelt, stop(); - for at forhindre, at movieclip fra cykling gennem billeder.næste, right-click anden ramme og udvælge, indsæt keyframe,.det er op til dig, hvad du gerne ville skrive i hver enkelt udfylde; kun ting at huske, er, at hvis du skriver om en 90 graders vinkel teksten kan være usynlig, hvis de har anført, at dynamiske.jeg brød ud over den tekst, indtil det blev til en tanke, og jeg har en pil, der pegede modsatte retninger på hvert billede:, nu, hvor vi har en bar afsluttet, kan vi right-click den i biblioteket og udvælge, dobbelt symbol.tre eksemplarer af det og dem bluebar, greenbar og redbar hhv.så klipper deres fylde farver og ændre teksten.voila!vi har fire bar movieclips. nu kan vi begynde på baggrund movieclips, som vi vil skabe, og to på samme måde.vælg rektangel værktøj igen og gøre et rektangel med, 560x350px,.konvertere det til et symbol, hedder det, goldbackground, og sikre, at den type er en movieclip og registrering i den øverste venstre hjørne.så bare gentage det tre gange og navn på de nye movieclips, bluebackground,, greenbackground, og redbackground hhv. din kvadratisk eller rektangulær form bør se meget enkelt, som dette, er der kun én mere movieclip at skabe, det lover jeg.gå til den, stik menuen og vælge nye symbol; navn, menuaccordionmc,, der er den type, der skal movieclip og registrering i den øverste venstre hjørne, fordi vores sidste movieclips havde også dette).næste kryds, der siger, at eksport til actionscript: klasse navn bør være, menuaccordionmc med kapital i begyndelsen.,, trin 3: placering af den movieclips i det foregående afsnit har vi skabt alle de movieclips, der kræves, og nu er vi nødt til at placere dem!, slette movieclips på scenen, hvis de er der stadig.åbn din, menuaccordionmc fra biblioteket, og skabe yderligere syv lag i sin tidsplan.nu hedder dem i følgende rækkefølge fra top til bund:,, goldbar, bluebar, greenbar, redbar, goldbackground, bluebackground, greenbackground, redbackground, træk og smid hver movieclip fra biblioteket til den tilsvarende lag.den letteste måde at holdning, og de vil alle blive til at lukke alle de lag, ud over den med movieclip du er i position. begynd med, goldbar, og dets x - og y - koordinater til 0,0).den næste, bluebar med koordinater (30), så den, greenbar med (60,0), og endelig, redbar med (90), tid til baggrunde:, goldbackground, er koordinater er (- 530,0), bluebackground, er koordinater er (- 500,0),, greenbackground, er koordinater er (- 470,0) og, redbackground, er koordinater er (- 440,0). din movieclip skal se sådan ud nu, og den (0,0) koordinerer bør være i den øverste venstre hjørne af goldbar movieclip, hvor de hvide og er i det billede, trin 4: identifikation af: den movieclips, før vi kan begynde, kodning, der er en ting, vi skal gøre: de otte indre movieclips, f.eks. navne,., åbne den, menuaccordionmc, for sidste gang, så vælg hver movieclip ogdenne instans navn, den samme som den movieclip navn.så goldbar er instans navn ville være goldbar, greenbackground er instans navn ville være greenbackground osv.efter det er gjort, kan vi begynde kodning, som er let at forstå.,, løntrin 5: oprettelse af klasserne, gå til dit flash filens egenskaber og navn dokumentet klasse, menuaccordion,.nu skaber en ny actionscript 3,0 fil og stille følgende kode i det og redde dossier, menuaccordion:, pakke (import flash.display.movieclip; import flash.events.event; offentlige klasse menuaccordion udvider movieclip {offentlige var menuaccordionmc: menuaccordionmc = nye menuaccordionmc(); offentlig funktion menuaccordion() {addchild (menuaccordionmc)}}}, her, vi først hvad har vi brug for import (i dette tilfælde kun movieclip og omstændigheder klasser).næste gang vi tilføje variabel for vores menuaccordionmc, så på konstruktøren tillægger vi den movieclip det stadium (0,0). det er den kode, vi behøver til dokumentet klasse, lad os skabe en ny actionscript 3,0 fil for movieclip og redde det, menuaccordionmc.,. at fastsætte det menuaccordionmc klasse, input følgende kode - jeg vil forklare de variabler og omstændigheder lyttere kort:, pakke (import flash.display.movieclip; import flash.events.event; import flash.events.mouseevent; offentlige klasse menuaccordionmc udvider movieclip {offentlige var activecolor: string = nye string(); offentlige var hastighed: antal = nye number(); offentlig funktion menuaccordionmc() {activecolor = "ingen" hastighed = 10 addeventlistener (mouseevent.click, accordionclick); addeventlistener (event.enter_frame, accordionmove)}}}, første ting at bemærke, er, at vi har indført de mouseevent: det er meget vigtigt, for uden det vores klik med musen, vil ikke have nogen virkning.med hensyn til de to nye variabler, activecolor, er blot en enkelt snor til at fortælle os, hvilken farve er nu taget i brug, og hastighed, er, hvor mange pixels profilen skift hvert billede. den første begivenhed til at lytte til en, mouseevent.click, og ringer til den funktion, accordionclick, når vores menu er faldet overalt.den anden begivenhed til at lytte, tilføjer den funktion, accordionmove, og vil blive kaldt hver frame. nu vil vi skabe to funktioner i tilfælde lyttere.de følgende kode, lige efter den sidste krølle klar til entreprenøren. offentlige funktion accordionclick (ref.: mouseevent): ugyldig (} offentlig funktion accordionmove (ref.: begivenhed): tomrum {}, de to klasser er nu sat op, så det er på tide at begynde at få koden i disse funktioner.trin 6:,, accordionclick funktion, denne funktion er forholdsvis let, og det har kun en, hvis anden erklæring, i det.først skrev følgende i funktion: hvis (ref. mål. currentframe = = 1) {} andre {}, mange mennesker er ubekendt med, begivenhed. mål, så vil jeg kort forklare det.i en nøddeskal, det har koden til målet for den begivenhed, hvis den bluebar er trykket, event.target, er lig med bluebar,. betyder det, at hvis erklæring kontrol for at se, om de bar er currentframe er lig med 1, og hvis det udfører denne kode; hvis ikke, det vil udføre den kode i den anden curly parentes.vi kan fortsætte, og ændre den, hvis anden erklæring til følgende: hvis (ref. mål. currentframe = = 1) {begivenhed. mål. gotoandstop (2); activecolor = event.target.name;} andre {begivenhed. mål. gotoandstop (1); activecolor = "ingen"), de nye linjer er meget grundlæggende: målet er, currentframe, er ændret til den anden eller den første ramme og activecolor variabel er fastsat til målets navn, eller er det fastsat, at "ingen".det er den kode, der er nødvendige for accordionclick funktion.,, trin 7: accordionmove funktion, okay, det er hvor magien sker.det er slutspillet og en lang strækning til ende, men hvis du følger den sidste instrukser korrekt, vil du have en harmonika menu.første ting, vi er nødt til at tilføje, at den funktion, er et, skift angår, som i sidste ende vil omfatte alle de erklæringer, der kræves for, hvis dette velfungerende:, skift (activecolor) {"ingen": brud; sag "goldbar": brud; sag "bluebar": pause. "greenbar": brud; sag "redbar": pause.}, dette skifte tilfælde svarer til de variable activecolor, der er fastsat i accordionclick funktion.Now let's start with the easiest part of this case statement,case: none,:, if(this.goldBackground.x>=-530){ \tthis.goldBackground.x-=speed; } if(this.blueBackground.x>=-500){ \tthis.blueBackground.x-=speed; } if(this.greenBackground.x>=-470){ \tthis.greenBackground.x-=speed; } if(this.redBackground.x>=-440){ \tthis.redBackground.x-=speed; } if(this.blueBar.x>30){ \tthis.blueBar.x-=speed; } if(this.greenBar.x>60){ \tthis.greenBar.x-=speed; } if(this.redBar.x>90){ \tthis.redBar.x-=speed; }, ,Thank you for taking the time to read this article, I hoped you enjoyed it!,