, opbygge et aktivt flash spil menu: hop,,,,, 1,,,,,,,,, 4,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, at det første indtryk er meget vigtigt i en flash spil portal. hvis din kamp ikke tag spiller i de første få sekunder, de har masser af andre spil til at vælge fra.som menuen er det første punkt, grænseflader, alt hvad du kan gøre for at gøre det mindre kedelig vil hjælpe.i denne forelæsning vil vi skabe en menu, som omfatter udveksling af dybde, glat roll - over - virkninger, og to forskellige overgang design,.,,,, endelige resultat forpremiere for disse to modeller, vi arbejder hen imod:,, den første udformning, vil få den næste skærme skifter fra forskellige retninger, afhængigt af, hvilken mulighed der er sammen.,, det andet design overgange alle skærme i fra bunden: en mere fleksibel valg, hvis du har mere end fire muligheder.,, indledning: hvad gør det "aktive"?der er to væsentlige ting, der gør den menu "aktiv".den første er roll - over - virkninger på knapperne: uanset hvor meget de har forseglet, når du kører ud, de fordele for den pågældende størrelse (i modsætning til en mellem skabt på tidslinjen.den anden er, at kodeksen i den anden stil er designet til at være fleksible og let at udvide deres egne behov, trin 1: oprettelse af den første ting, vi er nødt til at skabe en ny flash - fil (actionscript 3, 0).en bredde på 600px dens højde for 300px, og de billeder pr. sekund til 30.baggrund farve kan stå som hvide. nu redde den fil, du kan kalde den, hvad du vil, men jeg opkaldte min, menubounce. fia. i næste afsnit vil vi skabe de otte movieclips anvendes på menuen.som reference, her er en liste over alle de farver, der anvendes i hele den tutor:,, hvide –&#ffffff (, 0xffffff,), guld –&#e8a317 (, 0xe8a317,), lys guld –&#fbb917 (, 0xfbb917,), blå –ءc7 (, 0x1569c7,), lyseblå –խff (0x1389ff,), grøn –񔱣 (, 0x347235,), lysegrøn –e8f1b (, 0x3e8f1b,), rød –󱬰 (, 0x990000,), lys rød –&#c10202 (, 0xc10202,), matte grå –𶐎 (, 0x222222,), trin 2: at skabe den movieclips, til at begynde med, vil vi skabe "hinanden" (film, clips, der vil træde i stedet for den faktiske skærme), men før vi begynder, lad os begynde på nogle meget nyttige flash træk., højre klik på scenen og udvælge net > vise net.ved misligholdelse, vil det skabe en 10px af 10px net over scenen.næste, right-click scenen igen og denne gang vælger - > snap til nettet. nu kan vi begynde at tegne!vælg rektangel, værktøj og drage en 600x300px lys guld rektangel.så vælg det fylde, right-click og vælge konvertere til symbol.navn movieclip, goldback,, der er den type, der skal movieclip og registrering til venstre. næste right-click den movieclip og udvælge to tre gange for at gøre yderligere tre kopier af den.nu recolor dem med blå, grønne og røde lys, lys.- navn, blueback, greenback, og redback, hhv. til sidst på ryggen, vi bør tilføje en slags tekst inden for hver movieclip: på goldback skrive "spille", blueback skrive "vejledning", greenback skrive "muligheder", og på redback skrive "lån".når du har skrevet teksten, vil jeg anbefale, at det indtil det bliver en fylde (det fjerner behovet for at integrere skrifttyper og gør overgangen ser glattere).ryggen skal ligner den nedenfor:,,, lad os begynde på clickable pladser!vælg rektangel, værktøj og drage en 100x100px lys guld square.vælg den fylde, right-click og konvertere til symbol.navn movieclip, goldsquare,, der er den type, der skal movieclip og registrering til venstre.nu er det tid til at skrive en tekst om square, denne gang i stedet for at bryde den tekst, bortset fra det.indsæt en keyframe og ændre fylde farve til guld.nu bryder ud over teksten på begge billeder, indtil de bliver fylder. nu right-click den movieclip og vælge to symbol, tre gange.så gentager de samme proces inden for de tre andre farver, hvoraf det fremgår, hvilke movieclips, bluesquare,, greensquare, og redsquare, hhv.jeres pladser skal ligner den nedenfor:,,, trin 3: placering af den movieclips, begynde med at slette det hele ned fra scenen.så gå til at indsætte > nye symbol.navn, menubouncemc,, der er den type, der skal movieclip, registrering til den øverste venstre og eksportere det, menubouncemc,., træk alle ryggen fra biblioteket i det og placerer dem på følgende måde:,, goldback: (- 600,0), blueback: (0 - 300), greenback (3), redback: (600, 0),, hvis du skal bruge en retning, design og holdning i alle fire ryggen på en af disse stillinger.jeg brugte (0, 300). nu trække alle pladser fra biblioteket i movieclip og stillingtagen på dem på følgende måde:,, goldsquare: (120150), bluesquare: (240150), greensquare: (360150), redsquare: (480, 150), den sidste ting, vi skal før vi begynder kodning er tildele instans navne.sæt den instans, navne på de pladser, som square0,, square1,, square2,, square3, fra venstre.sæt den instans, navne på ryggen i henhold til den pågældende med kvadratet af samme farve.så, goldback, ville få den instans navn, back0, fordi de, goldsquare, har f.eks. navn, square0,.,, trin 4: oprettelse af klasserne, nu hvor vi er færdig med at skabe og bringe movieclips kan vi begynde at oprette to klasser, som vi vil bruge, gå til dit. flash filens egenskaber og dets klasse til menubounce, og skabe en ny actionscript 3,0 fil og redde det, menubounce.,., nu kopi af følgende kode til det, og jeg vil forklare det efter:, pakke (import flash.display.movieclip; import flash.events.event; offentlige klasse menubounce udvider movieclip {offentlige var menubouncemc: menubouncemc = nye menubouncemc(); offentlig funktion menubounce() {addchild (menubouncemc)}}}, er dette en grundlæggende document klasse, som vi har tilføjet en ekstra lille kode, der skaber et tilfælde af menubouncemc og tilføjer, at den fase. nu skabe en ny actionscript 3,0 fil og redde det, menubouncemc.,.nu modtaget følgende kode ind i det, så vi kan sætte det op, pakke (import flash.display.movieclip; import flash.display.sprite; import flash.events.event; import flash.events.mouseevent; offentlige klasse menubouncemc udvider movieclip {offentlige var activesquare: movieclip; offentlige var activeback: movieclip; offentlige var squaresarray: array = nye array(); offentlige var backsarray: array = nye array(); offentlige var hastighed: antal = 20; offentlig funktion menubouncemc() {}}}, hver variabel har et specifikt formål:,, activesquare, som er ved at blive kørt over. pladsen, activeback, der igen er blevet udvalgt til at bevæge sig, og squaresarray: et system, der indeholder alle de square movieclips backsarray,,,: et system, der indeholder allei det movieclips, speed, hvor mange det ryggen er flyttet fra hver tidsramme, alle disse variabler har fastsat, med undtagelse af, topsquare, der er fastsat i andre funktioner og systemer.så vi må skubbe alle de movieclips på nettet.der tilføjes følgende linjer inden for producenten:, squaresarray = [square0, square1, square2, square3] backsarray = [back0, back1, back2, back3], men denne metode kan blive lidt kedeligt, hvis du skal bruge et stort antal movieclips i menuen - 50.et alternativ ville være at skabe movieclips helt igennem kode og skubbe dem når du tilføjer dem til menuen.men for vores anvendelse af kun otte movieclips, det virker fint. den sidste række ting, vi er nødt til at tilføje, at færdiggøre den fælde er vores begivenhed lyttere, som udløser alle ændringer og rul virkninger.tilføje disse linjer under, push(), linjer. addeventlistener (mouseevent.mouse_over, bounceover); addeventlistener (mouseevent.mouse_out, bounceout); addeventlistener (mouseevent.click, bounceclick); addeventlistener (event.enter_frame, bounceupdate);,, løntrin 5: at skabe mouseevent vagter, lad os starte med oprettelsen af de tre funktioner: offentlig funktion bounceover lettere (ref.: mouseevent): ugyldig (} offentlig funktion bounceout (ref.: mouseevent): ugyldig (} offentlig funktion bounceclick (ref.: mouseevent): tomrum {}, i, bounceover(), funktion start ved at tilføje et hvis erklæring for at sikre, at ingen er i øjeblikket "aktive", det vil sige skifter i, de skifter ud, eller sidder på toppen, hvis (activeback = = null) {}den resterende del af kodeksen i den, bounceover(), funktion vil blive skrevet ind i, at hvis erklæring.nu skal vi finde ud af, om genstanden rullede rundt (, begivenhed. mål) er en square, ved at kontrollere, om det er i, squaresarray []: hvis (squaresarray. indexof (ref. target).= - 1) {}, hvis det er, vi gør rigtigt kød af funktion:, activesquare = event.target som movieclip; activesquare. gotoandstop (2); setchildindex (activesquare, numchildren - 1), fastsatte vi den variabel, activesquare at pege på torvet i tvivl.efter det, vi pause square er informationskampagne om den anden ramme, som viser sin "rollover" billede.endelig har vi flytte den sprite til oven i alt det andet, ved hjælp af setchildindex()., vi nu går ind i, bounceout(), funktion.denne gang starter vi med at kontrollere, om de formål, som mus rulles ud er i øjeblikket, square,: hvis (event.target = = activesquare) {}, i hvis blok tilføje følgende kode. det holder pladsen er informationskampagne om den første ramme igen, og så er activesquare tilbage til, nul, så vi kan rulle en:, activesquare. gotoandstop (1); activesquare = ugyldig;, så gå til den, bounceclick(), funktion.denne funktion vil blive brugt til at iværksætte alle overgangene.starte med at kontrollere, om der er allerede en aktiv igen: hvis (activeback = = null) {}, forhindrer dette ud fra en anden plads at i en overgangsperiode.hvis der er en aktiv tilbage, så klik bør gøre dette, så vi kan klik et firkantet: hvis (activeback = = null) {} andre (activeback = ugyldig;}, hvis der ikke er aktivt i dag tilbage endnu en gang tilføje, hvis blok, for at kontrollere, om de protesterer sammen var en square. hvis (activeback = = null) (hvis (squaresarray. indexof (ref. target).= - 1) {}} andre (activeback = ugyldig;}, hvis brugeren har klik et kvadrat, skal vi fastsætte de tilsvarende tilbage som "aktiv".da indekset for hvert punkt i, backsarray [], svarer til et indeks for hvert punkt i, squaresarray,, det er enkelt: hvis (activeback = = null) (hvis (squaresarray. indexof (ref. target).= - 1) (activeback = backsarray [squaresarray. indexof (ref. target)], som movieclip;) andet (activeback = ugyldig;}, nu er vi bare nødt til at flytte de nuværende aktive tilbage, så det er på toppen af alt andet: hvis (activeback = = null) (hvis (squaresarray. indexof (ref. target).= - 1) (activeback = backsarray [squaresarray. indexof (ref. target)], som movieclip; setchildindex (activeback, numchildren - 1) andet (activeback = ugyldig;}, trin 6: oprettelse af den sidste begivenhed kontaktperson, dette er den sidste opgave, vi skal skabe.lad os begynde med at skære virkning, når en square er rullet over eller: offentlige funktion bounceupdate (ref.: begivenhed): ugyldig (for hver (var - pladsen i squaresarray) (hvis (square = = activesquare) (hvis (square.scalex < = 1, 5) (square.scalex + = 0, 05; square.scaley + = 0, 05;) andet (hvis (square.scalex > = 1) (square.scalex - = 0, 05; square.scaley - = 0, 05;}}}}, her har vi skabt et for hver sløjfe til kredsløb gennem hver eneste i nettet og undersøge, om det er den nuværende aktive square.det omfang det, indtil det er større end eller lig med 1, 5 gange den normale størrelse; hvis det ikke er, vi omfang det ned, før det er tilbage på det normale størrelse.(teknisk, denne kodeks kunne tillade, at det bliver meget mindre end de normale størrelse, men det er usynlige i praksis.), er det nu, hvor nogle af dem vil tage deres forskellige måder; hvis de skaber design 1 gå til trin 7a, og hvis du skaber bestemt gå til trin 7b. skridt 7a: færdigbehandling design 1, tillykke, du har valgt, design - 1!denne udformning er enkelt og let at følge med, hvis du har nøjagtig fire pladser og ryg.mere, og det bliver noget rod at opretholde. vi skal bruge en lang række indlejrede, hvis andre erklæringer - meget rodet, det ved jeg.men lad mig fortælle dig den tankegang, der ligger bag det her!hver tilbage har et andet udgangspunkt og overgang retning.i en nøddeskal, du kan ikke bruge en eneste for loop at flytte alle movieclips, medmindre du har en, hvis udtalelse til kontrol, som igen bevæger sig, noget andet er at fastsætte akse bevægelighed (x og y), og for det tredje at fastsætte hastighed (positiv eller negativ).Okay, we could store all this information in properties of the squares or something like that, but I think this is one approach where "Keep It Simple, Stupid" applies., \t\t\tif(activeBack == back0){ \t\t\t\tif(back0.x < 0){ \t\t\t\t\tback0.x += speed; \t\t\t\t} \t\t\t}else{ \t\t\t\tif(back0.x > -600){ \t\t\t\t\tback0.x -= speed; \t\t\t\t} \t\t\t} \t\t\tif(activeBack == back1){ \t\t\t\tif(back1.y < 0){ \t\t\t\t\tback1.y += speed; \t\t\t\t} \t\t\t}else{ \t\t\t\tif(back1.y > -300){ \t\t\t\t\tback1.y -= speed; \t\t\t\t} \t\t\t} \t\t\tif(activeBack == back2){ \t\t\t\tif(back2.y > 0){ \t\t\t\t\tback2.y -= speed; \t\t\t\t} \t\t\t}else{ \t\t\t\tif(back2.y < 300){ \t\t\t\t\tback2.y += speed; \t\t\t\t} \t\t\t} \t\t\tif(activeBack == back3){ \t\t\t\tif(back3.x > 0){ \t\t\t\t\tback3.x -= speed; \t\t\t\t} \t\t\t}else{ \thvis (back3. x < 600) (back3. x + = hastighed), det er let at forstå, og det ser på hver enkelt tilbage og går ind på scenen eller ned fra scenen, i den rigtige retning, afhængigt af, om det ikke er aktive, skridt 7b: færdigbearbejdning design 2, tillykke, du har valgt, design, 2.denne udformning er langt mere flexibile og gør det meget lettere i form af at tilføje mere til at bruge mindre kode.for denne konstruktion vil vi bruge en anden for hver sløjfe til at undersøge hver enkelt tilbage i, backsarray: for hver (var tilbage i backsarray) (hvis (= = activeback) (hvis (tilbage. y > 0) (tilbage. - = hastighed) andet (hvis (tilbage. y < 300) {tilbage. y + = hastighed;}}}, nu skal det være ret let at forstå.det cyklusser gennem ryggen og kontrol hver for at se, om den er aktiv.hvis det er den kode, går op på scenen - - og ikke bevæger sig, når det er fuldstændig (dvs. når det er, y = 0, eller højere).hvis den er ikke aktiv, kode flytter den tilbage, indtil den når sit udgangspunkt.,, indgåelse, her er en udfordring: i betragtning af 16 pladser (og 16 backs«), kan du gøre det, så må 1, 5, 9 og 13, foretage de tilsvarende støtter overgangen fra venstre, pladser 2, 6, 10 og 14, gøre dem overgangen fra toppen, - - og så på?du bliver nødt til at kombinere de to tilgange, samt undersøge situationen af den aktive square /tilbage i sit system. tak for at tage sig tid til at læse denne forelæsning.jeg håber, du nød det færdige produkt og lærte noget om aktive, fleksible menuer.,