, opbygge et aktivt flash spil menu: lysbilleder,,,,, 1,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, holder op med at bruge statisk menuer.de fleste aktører umiddelbart baserer deres første indtryk af en flash spil på menuen, som de ser, når man lader den.stå ud fra mængden med en aktiv menu.det var første lektion, udstationeret i december 2011, men er siden blevet ajourført med ekstra foranstaltninger, der forklarer, hvordan til at gøre kodeksen mere fleksible.,,,, endelige resultat forpremiere, indledning: statiske og aktive, ordet "støj" betyder i bund og grund uden ændringer.de fleste af menuer, vi ser i web - spil er ikke ændrer sig, trykker du bare spille, og det begynder.det er overdreven og vise menukortet lidt kreativitet og innovation. for at gøre en menu "aktive" skal vi fortsat for forandring.så i denne forelæsning, det er præcis, hvad vi vil opnå: en menu, som løbende ændringer.,, 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å 650px dens højde for 350px, 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, menuslides. fia,., i næste afsnit vil vi skabe de ni movieclips anvendes på menuen.som reference, her er en liste over alle de farver, der anvendes i hele den tutor:,, hvid -,&#ffffff, guld -,&#e8a317, lys guld -,&#fbb917, blå -,ءc7, blå -,խff, grøn -,񔱣, lysegrøn -e8f1b, rød -,󱬰, lys rød -,&#c10202, matte grå -,𶐎, trin 2: at glide movieclips, til at starte med, vil vi skabe lysbilleder, der anvendes i overgange, men før vi begynder, lad os begynde på nogle meget nyttige flash karakteristika., højre klik på scenen og udvælge, nettet > show - nettet.ved misligholdelse, vil det skabe en 10px af 10px net over scenen.næste, right-click scenen igen og denne gang vælger, bed > snap til nettet,.,. nu kan vi begynde at!vælg rektangel, værktøj og tegne et lys guld rektangel, 650px bred og 350px høj (du kan alt klikker på scenen for at gøre det lettere.nu skifter farve til guld og drage de grupper af tre pladser, som hver 20x20px, form, i form af en l - i hvert hjørne:,, udvælge hele scenen, right-click og vælge, konverteres til symbol.navn movieclip, goldslide, og sikre, at den type er, movieclip, og registreringen er øverst til venstre. for at spare tid og gøre tingene meget lettere, right-click, goldslide, movieclip i biblioteket og udvælge, dobbelt symbol, tre gange for at gøre yderligere tre kopier.ændre farverne i den nye movieclips til blå, grøn og rød, så omdøbe den movieclips, blueslide,, greenslide, og redslide,., før vi går videre, vi bør tilføje en tekst til hvert objektglas.på goldslide skrive, spille på blueslide skrive, instruktioner, om greenslide skrive, muligheder, og på redslide skrive, kreditter,., nu hvor vi har angivet i sted vi kan bryde det bortset fra lige klikke på og udvælgelse, bryde sammen, to gange; det vil bryde den tekst til en fylde som overgang mere gnidningsfrit.og som bonus vil der ikke være behov for at indføre en skrifttype, hvis du bruger bare det på menuen., knapper, nu hvor vi har trukket den 4. vi kan koncentrere os om det, sidebutton, movieclip, der anvendes til at flytte dem, hverken til venstre eller højre. først henlede et rektangel 30x60px med kun et slagtilfælde (nr. fyld), derefter drage diagonale linjer 45 grader fra øverst til højre og det nederste højre hjørne, indtil de kom sammen midt på den modsatte side.nu anvende en matte grå fylde trekanten:,, slette de linjer, så right-click trekanten og udvælge, konverteres til symbol.navn, sidebutton,, der er til den slags, og sørg for, at registreringen er i øverste venstre hjørne. nu boks 3 keyframes i tidslinjen ved lige klikke tidslinjen og udvælgelse, indsæt keyframe,.i den ramme, udvælge fylde af trekanten, gå hen til vinduerne regning og vælge farve.ændring af alpha - 50%.på over ramme gentager den samme proces, men denne gang er det alfa 75%. nu kan vi begynde på fire nummererede cirkel, knapper, springe direkte til en bestemt til at begynde at udarbejde en hvidbog. 30px cirkel med ingen slagtilfælde.konvertere det til et symbol, hedder det, circleone, og dens type, og dets registrering til centrum.indsæt tre keyframes som vi gjorde før, og så går de op ramme. trækning af en sort 25px cirkel med ingen slagtilfælde og placerer det midt gennem koordinater eller ved hjælp af tilpasse menu.næste deseiect det sorte kreds, så reselect og slette det.skal du nu har en hvid ring tilbage.tag nu den tekst, værktøj og sætter en hvid "1" i midten af ringen.så bryd det her nummer fra hinanden, indtil det er fyldt.,, gå til den ramme og tegne et sort "1".center, og bryde det, indtil det bliver en fylde.nu deseiect og reselect den fylde, så slette det.vælg alt på billedet og kopiere den, så går den ned fælde, udvælge og alt på den og slå slette.pasta i, hvad vi har kopieret.,, nu skabe yderligere tre cirkel movieclips efter den samme proces, for ændringsforslag 2, 3 og 4,.,, trin 3: placering af den movieclips, okay, vi er næsten halvvejs færdig.først trække alle de glider ind på scenen og placerer dem med følgende koordinater:,, goldslide: (0, 0), blueslide: (650 0), greenslide: (13 0), redslide: (1950 - 0), træk og slip to kopier af sidebutton.den første kopi skal være placeret på (10145), før vi kan holdning til den anden kopi, må vi først og fremmest knips den!vælg den anden kopi og presse ctrl-t. ændre venstre - højre, 100%, og de up-down på 100%.nu den anden kopi til (640145). endelig trække og smid de fire cirkel movieclips og holdning, som så:,, circleone: (30, 320), circletwo: (70, 320), circlethree: (110, 320), circlefour: (150, 320), scenen nu ser sådan ud:,, blå, grøn og rød objektglassene skjult bare ude til højre på scenen.nu vælge alt på scenen og omdanne et symbol.navn, menuslidesmc,, der er den type, der skal movieclip og registrering i øverste venstre hjørne, og eksport til actionscript som, menuslidesmc,., før vi afslutter vi skal give hver af de movieclips indenfor, menuslidesmc, en instans navn.vælg hvert objektglas i den rækkefølge, de er fra venstre og navnene på dem, slide1,, slide2,, slide3, og slide4 hhv.navn cirklen knapper, en, to, tre, og fire, og endelig navn siden knapper, venstre og højre,.,, trin 4: oprettelse af klasserne, nu hvor alle vores movieclips har skabt, kan vi begynde at oprette to klasser, vi vil anvende. først gå til din flash filens egenskaber og satte sin klasse, menuslides,, og skabe en ny actionscript 3,0 fil og redde det, menuslides.,., nu kopi af følgende kode til det, og jeg vil forklare det efter:, pakke (import flash.display.movieclip; import flash.events.event; import flash.events.mouseevent; offentlige klasse menuslides udvider movieclip {offentlige var menuslidesmc: menuslidesmc = nye menuslidesmc(); offentlig funktion menuslides() {addchild (menuslidesmc)}}}, ret grundlæggende - det er et dokument, klasse, som vi indførte den movieclips og begivenheder, som vi vil bruge.så har vi skabt et eksempel på, menuslidesmc, og tilføjede, at scenen. nu skabe en ny actionscript 3,0 fil for, menuslidesmc, f.eks.gem det, som menuslidesmc.as og kopi af følgende kode til det:, pakke (import flash.display.movieclip; import flash.events.event; import flash.events.mouseevent; offentlige klasse menuslidesmc udvider movieclip {offentlige var hastighed: antal = nye number(); offentlige var activeslide: antal = nye number(); offentlig funktion menuslidesmc() (hastighed = 10 activeslide = 1; addeventlistener (mouseevent.click, slidesclick); addeventlistener (event.enter_frame, slidesmove)}}}, ligesom sidste gang, vi indførte det, vi har brug for, men vi har skabt to antal variabler.den første variabel hastighed, er, hvor mange pixels lysbillederne er flyttet fra hvert billede.(bemærk: er dette antal til jævnt opdeles i din scene er bredde skal give en gnidningsløs overgang).den anden variabel, activeslide, fortæller os, som i øjeblikket er fastsat til at glide på skærmen. vi har også tilføjet to tilfælde lyttere for funktioner, vi vil skabe, og en af dem er et klik med musen, og den anden er i begyndelsen af hvert billede.,, løntrin 5: etablering af tilfælde kontaktperson funktioner, til at begynde med, vil vi få klik med musen funktion af vejen.start med at skabe en offentlig funktion, der hedder, slidesclick(): offentlige funktion slidesclick (ref.: mouseevent) {}: tomrum, vi vil skabe, hvis udtalelser vedrørende, begivenhed. målet. navn.dybest set, at denne ejendom, butikker, navnet på den genstand, der var omfattet af klik med musen.vi kan bruge dette til at kontrollere og trykke på knappen, hvis (event.target.name = = "venstre") (hvis (activeslide > 1) (activeslide - = 1}} andre, hvis (event.target.name = = "ret") (hvis (activeslide < 4) (activeslide + = 1}} hvis (event.target.name = = ", en") (activeslide = 1} andre, hvis (event.target.name = = "to") (activeslide = 2} hvis (event.target.name = = "tre") (activeslide = 3} andre, hvis (event.target.name = = "fire") (activeslide = 4). den kode over går i, slidesclick(), funktion.det første sæt, hvis udtalelser er til venstre og højre side knapper; de kan øge eller mindske værdien af, activeslide, men aldrig tillade den værdi, der skal være mindre end 1 eller mere end 4 (eftersom vi kun har fire glider).den anden række, hvis udtalelser er for cirklen knapper; i stedet for forøgelse af eller decrementing værdien af, activeslide, de satte den til de udvalgte værdi., så lad os begynde med det, enter_frame, kontakt funktion: offentlig funktion slidesmove (ref.: begivenhed): tomrum {}, tilføje, slidesmove(), funktion under din, slidesclick(), funktion, og vi vil begynde at tilføje en kode til det.First, we'll use a ,switch, to check which slide should be on the screen, based on the value of ,activeSlide,:, switch (activeSlide){ case 1: break; case 2: break; case 3: break; case 4: break; },Now in each case we will create an if/else block that will check that slide's current x-position, and move ,all, of the slides either left, right, or not at all, depending on where the desired slide currently sits.,The first case looks like this:, if(slide1.x<0){ \tslide1.x+=speed; \tslide2.x+=speed; \tslide3.x+=speed; \tslide4.x+=speed; }else if(slide1.x>0){ \tslide1.x-=speed; \tslide2.x-=speed; \tslide3.x-=speed; \tslide4.x-=speed; },Now all we have to do is repeat the same process for the other cases! After you are done your swtich should look like this:, switch (activeSlide){ \tcase 1: \t\tif(slide1.x<0){ \t\t\tslide1.x+=speed; \t\t\tslide2.x+=speed; \t\t\tslide3.x+=speed; \t\t\tslide4.x+=speed; \t\t}else if(slide1.x>0){ \t\t\tslide1.x-=speed; \t\t\tslide2.x-=speed; \t\t\tslide3.x-=speed; \t\t\tslide4.x-=speed; \t\t} \tbreak; \tcase 2: \t\tif(slide2.x<0){ \t\t\tslide1.x+=speed; \t\t\tslide2.x+=speed; \t\t\tslide3.x+=speed; \t\t\tslide4.x+=speed; \t\t}else if(slide2.x>0){ \t\t\tslide1.x-=speed; \t\t\tslide2.x-=speed; \t\t\tslide3.x-=speed; \t\t\tslide4.x-=speed; \t\t} \tbreak; \tcase 3: \t\tif(slide3.x<0){ \t\t\tslide1.x+=speed; \t\t\tslide2.x+=speed; \t\t\tslide3.x+=speed; \t\t\tslide4.x+=speed; \t\t}else if(slide3.x>0){ \t\t\tslide1.x-=speed; \t\t\tslide2.x-=speed; slide3. x - = hastighed; slide4. x - = hastighed;} pause, sag 4: hvis (slide4. x < 0) (slide1. x + = hastighed; slide2. x + = hastighed; slide3. x + = hastighed; slide4. x + = hastighed;} andre, hvis (slide4. x > 0) (slide1. x - = hastighed; slide2. x - = hastighed; slide3. x - = hastighed; slide4. x - = hastighed;} pause.}, og sådan er det!så er vi færdige med koden og menuen bør arbejde meget lige nu, - - men hvad, hvis vi ønsker at tilføje mere glider eller tage lidt væk?trin 6: forøgelse af objektglas, til et system, der for øjeblikket er vores kode ikke er meget fleksibel på grund af alle de hårde kodet, hvis udtalelser.så lad os gøre noget dristigt: slette alle de koder i slidesmove() funktion, fordi vi ikke længere har brug for det, og også det, hvis udtalelser for den cirkel, knapper, som vi skal til at optimere det. nu erklærer en ny variabel (under, hastighed, og activeslides,): offentlige var slidesarray: array = nye array(); den første variabel, slidesarray, vil være et system, der indeholder alle vores lysbilleder, som vil give os mulighed for at få adgang til dem, som refererer til et punkt på dagsordenen i det system, så vi kan bruge, slidesarray [2], i stedet for, slide3,), én ting at bemærke. er det det første punkt i et system i et indeks, 0,, så vi bliver nødt til at foretage nogle ændringer til vores eksempel navne. vælges hvert objektglas i den rækkefølge, de er fra venstre og navn.søm, slide0,, slide1,, slide2, og slide3, hhv.og hjælper os med at skære ned på antallet af linjer kode, vi bruger, udvælger hver cirkel knap i den rækkefølge, de er fra venstre og navnene på dem, circle0,, circle1,, circle2, og circle3, hhv. hvis du vil tilføje mere objektglas og knapper, nu er det tid til at gør det.bare holdning den ekstra objektglas på enden af rækken af dias, så giv dem instans navne efter samme ordre.så gør det samme for den cirkel knapper. nu har vi f.eks. navne korrekt skal vi tilføje glider til nettet.gør det ved at tilføje følgende kode til din konstruktøren:, slidesarray = [slide0, slide1, slide2, slide3, slide4, slide5], nu glider i nettet og kan konsulteres af deres indeks i nettet.for eksempel, slidesarray [0], svarer til, slide0, fordi det er det første punkt på listen. dernæst i den "rigtige" andre, hvis udtalelse ændrer tilstand: hvis (activeslide < slidesarray. length-1) (værdien af, slidesarray.length, er lig med antal elementer i det system, så denne nye tilstand, vil give os mulighed for at trykke på knappen og flytte dem over, så længe det aktive rutsche er ikke det sidste skub.,, trin 7: håndtering cirkel tastetryk, når nu en cirkel - knappen er trykket, er vi nødt til at finde ud af, hvilken en det er (og som den glide henviser til). skaber et system til at holde alle cirklen knapper.først defineres, under - system: offentlige var slidesarray: array = nye array(); offentlige var circlesarray: array = nye array(); så tilføje cirklen knapper til array i konstruktøren:, circlesarray = [circle0, circle1, circle2, circle3, circle4, circle5], gå nu det, slidesclick(), funktion, under hele, hvis anden blok.vi skal undersøge, om de knap tændte er i cirklen knapper system: hvis (circlesarray. indexof (ref. target).= - 1) {}, linjen er indexof() opgave at kontrollere, om en genstand i system; hvis ikke, den kommer tilbage, - 1.- vi tjekker for at se, om det er ikke lig med - 1, som vil undersøge, om det er i nettet. hvis det er, så er det, indexof(), funktion vil vende tilbage indekset for knap i kredsen knapper array - - så hvis, circle3, var faldet, circlesarray. indexof (ref. mål), vil være lig med 3.det betyder, at vi bare kan fastsætte, activeslide, til 3, og vi er færdige.hvis (circlesarray. indexof (ref. target).= - 1) (activeslide = circlesarray. indexof (ref. target);}, trin 8: flytning af objektglas, den eneste ting at gøre, er at flytte alle prøverne.indledningsvis samme loop, som vi havde i den, slidesmove(), funktion: for (var - jeg: int = 0. jeg < slidesarray.length; jeg + +) {}, hvis anden erklæring bør indsættes nu; det vil anvende den variabel, activeslide at udvælge en - opstillingen og se, hvor den x-position er, ligesom før. hvis (slidesarray [activeslide]. x < 0) {} andre, hvis (slidesarray [activeslide]. x > 0) {}, eftersom activeslide, er et nummer, slidesarray [activeslide], henviser til en bestemt så, så, slidesarray [activeslide]. x er lig med at glide os x-position. i det første tilfælde vil vi tilføje en til, loop - at rykke alle filmen magasiner til højre, og i det andet tilfælde vil vi tilføje en til, loop - at rykke alle filmen magasiner til venstre, højre: f.eller (var - j: int = 0 j < slidesarray.length; j + +) (slidesarray [j]. x + = hastighed), venstre: for (var k: int = 0; k < slidesarray.length; k + +) (slidesarray [k]. x - = hastighed;), hvis du tester det nu, vil de bemærke, at vores optimeret kode har ført til en meget zippier grænseflade.trin 9:,, tager det længere, hvis du ville tage endnu længere, du kunne bruge en til, loop - stilling, hårspænder og kredse, snarere end for at slæbe - og smide dem i flash ide.For example, to position the slides, we'd first position ,slide0, in the constructor:, \t\t\tslidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; \t\t\tslidesArray[0].x = 0; \t\t\tslidesArray[0].y = 0;,Then, we'd loop through all the other slides, starting at ,slide1,:, \t\t\tslidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; \t\t\tslidesArray[0].x = 0; \t\t\tslidesArray[0].y = 0; \t\t\tfor (var i:int = 1; i < slidesArray.length; i++) { \t\t\t \t\t\t},We can give all the slides an y-position of 0:, \t\t\tslidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; \t\t\tslidesArray[0].x = 0; \t\t\tslidesArray[0].y = 0; \t\t\tfor (var i:int = 1; i < slidesArray.length; i++) { \t\t\t\tslidesArray[i].y = 0; \t\t\t},...and then we can set each - er x-position til 620px til højre for det skub, før det:, slidesarray = [slide0, slide1, slide2, slide3, slide4, slide5] slidesarray [0]. x = 0, slidesarray [0]. y = 0 for (var - jeg: int = 1; jeg < slidesarray.length; jeg + +) (slidesarray [i]. x = slidesarray [1]. x + 620 og slidesarray [i]. y = 0), hvis dine lysbilleder er ikke 620px bredt, du kan afsløre deres bredde automatisk., \t\t\tslidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; \t\t\tslidesArray[0].x = 0; \t\t\tslidesArray[0].y = 0; \t\t\tfor (var i:int = 1; i < slidesArray.length; i++) { \t\t\t\tslidesArray[i].x = slidesArray[i-1].x + slidesArray[i-1].width; \t\t\t\tslidesArray[i].y = 0; \t\t\t},You can do the same thing with the circle buttons, but I'll leave that up to you to experiment with.,The great thing about this is, you can add as many slides as you want to the menu; all you have to do is add them to the array, and they'll be dealt with by this code.,(You can remove slides from the array, too, but they won't be affected by any of the code, so you'll probably need to reposition them in the Flash IDE.),Conclusion,Thank you for taking the time to read gennem forelæsning, håber jeg, at det var nyttigt, og at du har lært noget om aktiv kamp menuer.