Create en Responsive Bilde Scroller i Actionscript 3.0
Del
Del
en
Del
Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Denne opplæringen vil demonstrere hvordan du oppretter en horisontalt rullende bildeviser. Det vil dekke xml parsing, lasting og endre størrelsen på eksterne bilder, og skape intuitive og responsive rulling!

Quick Introduksjon

Jeg er m en fast tro på læring ved koding og fiksing og triksing. Så i denne opplæringen, jeg sier hva du skal gjøre, og så viser tilsvarende kode; vennligst grave inn i koden, endre ting og tinker - Jeg tror det er en av de beste måtene å lære! Jeg forventer at du har en grunnleggende forståelse av Action allerede, og jeg vil ikke forklare det grunnleggende. Jeg håper beskrivelsene vil være nyttig, men hvis jeg ikke forklare noe som du ikke er helt etter, spør gjerne om det i kommentarfeltet

Trinn 1:. Sett opp XML
< p> Vi ønsker noder av bilder som er inkludert i vår xml. Hver node vil representere et bilde med attributter. Vi kan legge til noe vi liker her, jeg vil holde til tre attributter til hvert bilde node. The 'src' av bildet (brukes til å laste det inn), tittelen og url vi vil knytte til fra scroller. Jeg skal gå videre og pakk dem alle innen en bilder node (i tilfelle jeg ønsker å inkludere noe annet i xml senere, for eksempel tilpasningsmuligheter - hint).

Hvert bilde node vil trenge et kildebilde, en tittel og en url. Kilden (src) vil være bildet som blir lastet inn i scroller, vil tittelen være det vi kaller det, og url vil være den url som vi laster fra scroller når brukere klikker på bildet (det kan være et større bilde eller til en nettside). Jeg har fått noen bilder fra Envato eiendelen biblioteket og endret for dem som skal brukes som miniatyrbildene også. Jeg krympet miniatyrbildene for å passe inn i en 140px ved 105px område, dette er ikke nødvendig, men vil bidra til å optimalisere opplevelsen siden vi ikke vil bli lasting i store bilder. Du vil se snart at enhver størrelse vil fungere fordi vi vil kode det å endre størrelsen på et bilde som laster å passe inn i scroller området
<! Bilder > < image src = "images /tn /scottwills_underwater4.jpg "title =" Jelly 4 "url =" images /scottwills_underwater4.jpg "/> < image src =" images /tn /scottwills_cat.jpg "title =" Cat "url =" images /scottwills_cat.jpg "/> < image src = "images /tn /scottwills_modern_sculpture.jpg" title = "Statue" url = "images /scottwills_modern_sculpture.jpg" /> < image src = "images /tn /madness_arch3.jpg" title = "Arch 3 "url =" images /madness_arch3.jpg "/> < image src =" images /tn /scottwills_penguin.jpg "title =" Penguin "url =" images /scottwills_penguin.jpg "/> < image src =" images /tn /scottwills_horse.jpg "title =" Jelly "url =" images /scottwills_horse.jpg "/> < image src =" images /tn /scottwills_modernsculpture2.jpg "title =" Statue 2 "url =" images /scottwills_modernsculpture2.jpg "/> < image src =" images /tn /madness_arch1.jpg "title =" Arch en "url =" images /madness_arch1.jpg "/> < image src =" images /tn /madness_arch2 .jpg "title =" Arch 2 "url =" images /madness_arch2.jpg "/> < /bilder >
Trinn 2: Sette opp Flash

OK, nå som vi har vår xml fil ferdig, la oss komme i gang i Flash. Åpne Flash og opprette en ny fil (Actionscript 3.0). Juster scenen størrelse til noe rundt 600 bred og 150 høy, satt bakgrunnen til hvilken som helst farge du liker (jeg valgte en mørk farge for å hjelpe bildene skiller seg ut litt mer - # 000033 hvis du vil følge med) og gå opp rammen satsen til 30 bilder per sekund for å gi oss jevnere animasjon. Så la oss gå videre og opprette et nytt lag kaller det "Action". På det første bildet i tidslinjen klikk til handlinger panel og vi er klare til å fortsette

Trinn 3: Load XML

Vi trenger å laste inn informasjon fra xml filen (opprettet i trinn 1) inn i vårt Flash-fil. Det er en ganske enkel steg, men en stiftelse som kan våren til mange andre kreative programmer. På bare noen få linjer med kode initial vi en URLLoader, et XML-objekt for å holde våre data og en streng til å angi banen til xml. Deretter legger vi den xml gjennom URLLoader objektet. Det gjøres, vi trenger en hendelse lytteren til å fyre av når filen er fullastet, ville vi ikke ønsker å begynne å rote med XML-data før den er ferdig lastet. Som spesifisert i docs, passerer hele arrangementet lastet innhold som et tilfelle måldata eiendom, slik at vi får tilgang til selve xml som e.target.data og tilordne den til vår xml objekt.

La oss gå videre og dobbeltsjekke at vi har satt at alle opp riktig og spore bilde noder av vår xml til utgangen panel
//belastning xmlvar xmlLoader. URLLoader = new URLLoader (); Var xmlData: XML = new XML (); Var XMLPATH: String = "image-scroller.xml"; xmlLoader.load (ny URLRequest (XMLPATH)); trace ("loading xml fra:" + XMLPATH); xmlLoader.addEventListener (Event.COMPLETE, LoadXML); funksjon LoadXML (e: Hendelses): void {trace ("xml lasting komplett"); xmlData = new XML (e.target.data); trace (xmlData.image); //vi får se hvert bilde xml element oppført i output panel med denne xmlList} /* utgang vindu ///////////////lasting xml fra: image-scroller.xmlxml lasting komplett < image src = "images /tn /scottwills_underwater4.jpg" title = "Jelly 4" url = "images /scottwills_underwater4.jpg" /> < image src = "images /tn /scottwills_cat.jpg" title = "Cat" url = "images /scottwills_cat.jpg" /> < image src = "images /tn /scottwills_modern_sculpture.jpg" title = "Statue" url = "images /scottwills_modern_sculpture.jpg" /> < image src = "images /tn /madness_arch3.jpg "title =" Arch 3 "url =" images /madness_arch3.jpg "/> < image src =" images /tn /scottwills_penguin.jpg "title =" Penguin "url =" images /scottwills_penguin. jpg "/> < image src =" images /tn /scottwills_horse.jpg "title =" Jelly "url =" images /scottwills_horse.jpg "/> < image src =" images /tn /scottwills_modernsculpture2.jpg " title = "Statue 2" url = "images /scottwills_modernsculpture2.jpg" /> < image src = "images /tn /madness_arch1.jpg" title = "Arch en" url = "images /madness_arch1.jpg" /> < image src = "images /tn /madness_arch2.jpg" title = "Arch 2" url = "images /madness_arch2.jpg" /> * /
Trinn 4: Analyser XML

Legge i XML er stor, men vi har også til å lese den og la vår kode vet hva de skal gjøre med dataene. Så i stedet for bare å spore ut xmlList sender vi det til en annen funksjon som vil ta vare på å skape vår scroller. Den buildScroller funksjonen vil godta en XMLList, så vi får sløyfe gjennom det, å skape filmklipp objekter for hvert bilde i scroller og tildele dem egenskaper i henhold til den xml node attributter tittel, url og src. Senere vil vi bygge ut denne funksjonen til å omfatte mye mer slik at det faktisk vil gjøre det som er oppkalt etter og bygge scroller!

For nå la oss bare spore denne informasjonen for å sørge for at alt fungerer etter planen. Vi kan også pakke inn innholdet buildScroller funksjon med spor uttalelser slik at vi alltid vet hvor vi er
//belastning xmlvar xmlLoader. URLLoader = new URLLoader (); Var xmlData: XML = new XML (); Var XMLPATH: String = "image-scroller.xml"; xmlLoader.load (ny URLRequest (XMLPATH)); trace ("loading xml fra:" + XMLPATH); xmlLoader.addEventListener (Event.COMPLETE, LoadXML), funksjon LoadXML (e: Hendelses): void {trace ("xml lasting komplett"); xmlData = new XML (e.target.data); buildScroller (xmlData.image); //i stedet for å spore xmlList, sender vi det til vår buildScroller funksjon} //bygge scroller fra xmlfunction buildScroller (imageList: XMLList): void {trace ("bygge Scroller"); for (var element: uint = 0; element < imageList.length (); element ++) {var thisone: MovieClip = new MovieClip (); thisOne.itemNum = element; thisOne.title = imageList [punkt] .attribute ("title"); thisOne.link = imageList [punkt] .attribute ("URL"); thisOne.src = imageList [punkt] .attribute ("src"); trace (thisOne.itemNum, thisOne.title, thisOne.link, thisOne.src); } Trace ("avslutning av build scroller");} /* utgang ///////lasting xml fra: image-scroller.xmlxml lasting completebuild Scroller0 Jelly 4 bilder /scottwills_underwater4.jpg bilder /tn /scottwills_underwater4.jpg1 Cat bilder /scottwills_cat.jpg images /tn /scottwills_cat.jpg2 Statue images /scottwills_modern_sculpture.jpg images /tn /scottwills_modern_sculpture.jpg3 Arch 3 bilder /madness_arch3.jpg images /tn /madness_arch3.jpg4 Penguin images /scottwills_penguin.jpg images /tn /scottwills_penguin. jpg5 Jelly images /scottwills_horse.jpg bilder /tn /scottwills_horse.jpg6 Statue 2 bilder /scottwills_modernsculpture2.jpg bilder /tn /scottwills_modernsculpture2.jpg7 Arch 1 bilder /madness_arch1.jpg bilder /tn /madness_arch1.jpg8 Arch 2 bilder /madness_arch2.jpg bilder /tn/madness_arch2.jpgtermination av build scroller * /
Trinn 5: Bygg Scroller MovieClip å inneholde Hvert bilde

Nå som byggingen scroller funksjonen er opprettet og at det skaper objekter for hver node i xml, la oss legge dem til scenen!

Vi begynner med å lage en scroller MovieClip. Dette vil være den beholder for alle objektene vi ønsker å rulle, så hvert bilde node vil ha en MovieClip innenfor denne scroller objektet. La oss gå videre og legge den til scenen, og deretter sette y-verdien til 30. Vi vil ikke se ennå noe på scenen når vi tester, men vi er i ferd med å legge til elementer i den scroller for hvert bilde i xmlList.
Var scroller: MovieClip = new MovieClip (); this.addChild (scroller); scroller.y = 30;
Trinn 6: Legge til elementer til Scroller

Vi har allerede filmklippene som er opprettet med egenskaper, men vi trenger å skape noe vi kan se, så la oss lage en boks område å faktisk se disse scroller elementer. Lag en Blackbox sprite og gi den en form med grafikk api. Jeg har bestemt meg for at jeg vil at min standard scroller elementet skal være 140x105px så jeg skal lage blackbox for å passe på at området, og jeg skal gi det en 1px ramme på alle sider. Flytte den opp og til venstre en piksel, og gi den 142x107 dimensjoner.

Vi legger blackbox sprite til thisone MovieClip og også oppdatere x verdien av varen. Siden hver vil være 140 bred, vil jeg legge til noen padding (20) og legge dem ut horisontalt. Jeg vil oppdatere sporings uttalelse til utgang hva som skjer her
Var scroller:. MovieClip = new MovieClip (); this.addChild (scroller); scroller.y = 30; //bygge scroller fra xmlfunction buildScroller (imageList : XMLList): void {trace ("bygge Scroller"); for (var element: uint = 0; element < imageList.length (); element ++) {var thisone: MovieClip = new MovieClip (); //disposisjon Var Blackbox: Sprite = new Sprite (); blackBox.graphics.beginFill (0xFFFFFF); blackBox.graphics.drawRect (-1, -1, 142, 107); thisOne.addChild (Blackbox); thisOne.x = (140 + 20) * element; thisOne.itemNum = element; thisOne.title = imageList [punkt] .attribute ("title"); thisOne.link = imageList [punkt] .attribute ("URL"); thisOne.src = imageList [punkt] .attribute ("src"); trace (thisOne.itemNum, thisOne.title, "lagt til scroller"); //legge element scroller.addChild (thisone); } Trace ("avslutning av build scroller");} /* utgang ///////lasting xml fra: image-scroller.xmlxml lasting completebuild Scroller0 Jelly 4 lagt til scroller1 Cat lagt til scroller2 Statue lagt til scroller3 Arch 3 lagt å scroller4 Penguin lagt til scroller5 Jelly lagt til scroller6 Statue 2 lagt til scroller7 Arch en lagt til scroller8 Arch 2 lagt til scrollertermination av build scroller * /

Trinn 7: Legge Klikk List å Elementer

Alright, dette er ikke mye, men fordi det bare ser ut som en haug med bokser som ikke gjør noe. La oss legge til en lytter til disse boksene skjønt, slik at vi kan fortelle at de er hver unike elementer i scroller. Tenker på det endelige resultatet, vil vi legge til en klikk lytteren fordi vi vil at brukerne kunne klikke elementet i scroller og gå til koblingen vi satt i xml. La oss gjøre klippet buttonMode sant, slik at det oppfattes som noe som er klikk-stand. Deretter legger en hendelse List for MouseEvent.CLICK. For nå skal vi bare ha det lytte etter denne klikkhendelsen og fyre av en funksjon for å spore url vi sikter på.

Gjennom produksjonen kan vi se at hver boks har egenskaper som sendes til den fra xml .
//bygge scroller fra xmlfunction buildScroller (imageList: XMLList): void {trace ("bygge Scroller"); for (var element: uint = 0; element < imageList.length (); element ++) {var thisone: MovieClip = new MovieClip (); //disposisjon Var Blackbox: Sprite = new Sprite (); blackBox.graphics.beginFill (0xFFFFFF); blackBox.graphics.drawRect (-1, -1, 142, 107); thisOne.addChild (Blackbox); thisOne.x = (140 + 20) * element; thisOne.itemNum = element; thisOne.title = imageList [punkt] .attribute ("title"); thisOne.link = imageList [punkt] .attribute ("URL"); thisOne.src = imageList [punkt] .attribute ("src"); //oppretter lyttere til dette lånet thisOne.buttonMode = true; thisOne.addEventListener (MouseEvent.CLICK, clickScrollerItem); //legge element scroller.addChild (thisone); } Trace ("avslutning av build scroller");} funksjon clickScrollerItem (e: MouseEvent): void {trace ("klikket element" + e.currentTarget.itemNum + "- besøk url:" + e.currentTarget.link);} /* utgang //////lasting xml fra: image-scroller.xmlxml lasting completebuild Scrollertermination av build scrollerclicked punkt 2 - besøk url: images /scottwills_modern_sculpture.jpgclicked element 0 - besøk url: images /scottwills_underwater4.jpgclicked punkt 1 - besøk url: images /scottwills_cat.jpgclicked punkt 3 - besøk url: images /madness_arch3.jpgclicked punkt 1 - besøk url: images /scottwills_cat.jpg * /

Trinn 8: Legge til flere lyttere til Scroller Elementer
< p> La oss fullbyrde hendelses lyttere! Vi ønsker å lytte til hver av disse elementene for å vite når en bruker klikker, mus over og mus ut
//bygge scroller fra xmlfunction buildScroller (imageList: XMLList):. Void {trace ("bygge Scroller"); for (var element: uint = 0; element < imageList.length (); element ++) {var thisone: MovieClip = new MovieClip (); //disposisjon Var Blackbox: Sprite = new Sprite (); blackBox.graphics.beginFill (0xFFFFFF); blackBox.graphics.drawRect (-1, -1, 142, 107); thisOne.addChild (Blackbox); thisOne.x = (140 + 20) * element; thisOne.itemNum = element; thisOne.title = imageList [punkt] .attribute ("title"); thisOne.link = imageList [punkt] .attribute ("URL"); thisOne.src = imageList [punkt] .attribute ("src"); //oppretter lyttere for tommel thisOne.buttonMode = true; thisOne.addEventListener (MouseEvent.CLICK, clickScrollerItem); thisOne.addEventListener (MouseEvent.MOUSE_OVER, overScrollerItem); thisOne.addEventListener (MouseEvent.MOUSE_OUT, outScrollerItem); //legge element scroller.addChild (thisone); } Trace ("avslutning av build scroller");} funksjon clickScrollerItem (e: MouseEvent): void {trace ("klikket element" + e.currentTarget.itemNum + "- besøk url:" + e.currentTarget.link);} funksjon overScrollerItem (e: MouseEvent): void {trace ("over" + e.currentTarget.title);} funksjon outScrollerItem (e: MouseEvent): void {trace ("ut" + e.currentTarget.title);} /* utgang //////////////lasting xml fra: image-scroller.xmlxml lasting completebuild Scrollertermination av build scrollerover Jelly 4av Jelly 4over Catout Catover Statueout Statueover Arch 3av Arch 3over Arch 3clicked punkt 3 - besøk url: images /madness_arch3.jpgout Arch 3over Statueclicked punkt 2 - besøk url: images /scottwills_modern_sculpture.jpgout Statue * /

Trinn 9: Lasting og legger til de Images

Nå er den delen jeg er sikker på at du har vært å få engstelig om, la oss få bildene lastet inn scroller elementer slik at vi kan se hva de er! Vi vil gjøre dette i buildScroller funksjonen. Rett etter blackbox er opprettet og eiendommene er tildelt for gjeldende element la oss også opprette en sprite å inneholde selve bildet.

Vi vil bruke en loader objekt og en URLRequest objekt til å håndtere lasting av bildet , som er nylig standardisert med Actionscript 3. Vi vil passere src av bildet til urlrequest objekt, deretter laste urlrequest med vår loader objekt og til slutt vil vi legge lasteren til thisThumb sprite og legger til at i sin tur til thisone MovieClip. Puh

Det er ganske selvforklarende - og i løpet av et par linjer med kode har vi lastet src bilder fra våre xml inn Flash
funksjon buildScroller.! (ImageList: XMLList): void {trace ( "bygge Scroller"); for (var element: uint = 0; element < imageList.length (); element ++) {var thisone: MovieClip = new MovieClip (); //disposisjon Var Blackbox: Sprite = new Sprite (); blackBox.graphics.beginFill (0xFFFFFF); blackBox.graphics.drawRect (-1, -1, 142, 107); thisOne.addChild (Blackbox); thisOne.x = (140 + 20) * element; thisOne.itemNum = element; thisOne.title = imageList [punkt] .attribute ("title"); thisOne.link = imageList [punkt] .attribute ("URL"); thisOne.src = imageList [punkt] .attribute ("src"); //bilde container Var thisThumb: Sprite = new Sprite (); //legge image Var ldr: Loader = new Loader (); Var urlReq: URLRequest = new URLRequest (thisOne.src); trace ("loading thumbnail" + element + "inn Scroller:" + thisOne.src); ldr.load (urlReq); thisThumb.addChild (LDR); thisOne.addChild (thisThumb); //oppretter lyttere for tommel thisOne.buttonMode = true; thisOne.addEventListener (MouseEvent.MOUSE_OVER, overScrollerItem); thisOne.addEventListener (MouseEvent.MOUSE_OUT, outScrollerItem); thisOne.addEventListener (MouseEvent.CLICK, clickScrollerItem); //legge element scroller.addChild (thisone); } Trace ("avslutning av build scroller");}

Trinn 10: Legge hendelsen lyttere til bilde Loading Process

Når vi laste inn bilder, må vi lage noen hendelsen lyttere til å fortelle oss når lastingen er fullført. Beste praksis avtale med eventuelle feil (i tilfelle det er en skrivefeil i banen til bildet, eller vi ikke har tilgang eller noe). Så like før vi laste bildene la oss legge til en hendelse lytteren for lasterens contentLoaderInfo gjenstand for en komplett arrangement og også en I /O-feil. Da må vi skape hendelseshåndterer funksjoner.

For completeHandler la oss bare spore tittelen på bildet for nå, vil vi måtte gå opp i hierarkiet av hendelsen målets foreldrenes foreldres tittel for å finne den, . på grunn av måten vi nestet vår sprite innenfor våre scroller element objekter (den thisone Sprite)
spore ("loading thumbnail" + element + "inn Scroller:" + url); //tildele hendelsen lyttere for Loaderldr.contentLoaderInfo.addEventListener (Event.COMPLETE, completeHandler); ldr.contentLoaderInfo.addEventListener (IOErrorEvent.IO_ERROR, Errorhandler); ldr.load (urlReq); ... funksjon completeHandler (e: Hendelses): void {trace ("thumbnail komplett" + e. target.loader.parent.parent.title);} funksjon Errorhandler (e: IOErrorEvent): void {trace ("thumbnail error =" + e);}
Trinn 11: tweening de Images

I 'm bruker Tweener for denne opplæringen, men det finnes ulike tweening motorer. Hvis du ikke er kjent med det

Tweener (caurina.transitions.Tweener) er en klasse som brukes til å lage tweens og andre overganger via Actionscript-kode for prosjekter bygget på Flash-plattformen ... I lekmann vilkår, Tweener hjelper deg å flytte ting rundt på skjermen ved hjelp av bare kode, i stedet for tidslinjen.

Så først gå laste den ned fra Google Code repository (sørg for å få den AS3 versjon) pakk den og sette den caurina mappen inn samme katalog som FLA fil, deretter importere koden inn i prosjektet ved å plassere dette i første linje med kode.
import caurina.transitions *;

Så la oss ta bildene falmer i når de er lastet, i stedet for bare spratt ut som de er. Først vil vi sette den første alpha verdien av scroller elementet til 0, så det kan falme i riktig. Deretter hopper tilbake til vårt komplette arrangement lytteren handler funksjon og tilsett Tweener kode
thisOne.alpha = 0; ... funksjon completeHandler. (E: Hendelses): void {//trace ("thumbnail komplett" + e.target .loader.parent.parent.title); Tweener.addTween (e.target.loader.parent.parent, {alfa: 1, tid: 0,5});}

Trinn 12: Endring av størrelsen på de Images

Nå, siden jeg endret størrelse alle mine bilder og laget thumbnails på forhånd, er ikke dette trinnet som
viktig, men er fortsatt flott å inkludere slik at i tilfelle dimensjonene endre eller jeg legger et annet bilde senere vil den scroller kunne håndtere det og endre størrelsen. Resize funksjonen vil skalere et bilde til å passe i et område som jeg har forklart før på bloggen min. I utgangspunktet skjønt, i completeHandler vi vil endre størrelsen på bildet slik at det passer et område, selv om bildet er riktig størrelse, vil resizeMe funksjon fortsatt sentrere bildet for oss
funksjon completeHandler (e: Hendelses):. Void {//trace ("thumbnail komplett" + e.target.loader.parent.parent.name); //bildestørrelse inn scroller resizeMe (e.target.loader.parent, 140, 105, true, true, false); Tweener.addTween (e.target.loader.parent.parent, {alfa: 1, tid: 0,5});} //Å endre størrelsen funksjon //parametere //kreves: mc = den MovieClip å endre størrelsen //kreves: maxW = enten størrelsen på boksen for å endre størrelsen på, eller bare den maksimale ønsket bredde //valgfritt: maxH = hvis ønskelig resize området er ikke en firkant, maksimum ønsket høyde. Standard er å matche til maxW (så hvis du ønsker å endre størrelsen til 200x200, bare sende 200 en gang, eller resizeMe (bilde, 200);) //valgfritt: constrainProportions = boolean å avgjøre om du ønsker å begrense proporsjoner eller skew bilde. Standard sant .//valgfritt: centerHor = sentrerer Displayobject i maxW området. Standard sant .//valgfritt: centerVert = sentrerer Displayobject i maxH området. Standard true.function resizeMe (mc: Displayobject, maxW: Antall, maxH: Antall = 0, constrainProportions: Boolean = sant, centerHor: Boolean = sant, centerVert: Boolean = true): void {maxH = maxH == 0? maxW: maxH; mc.width = maxW; mc.height = maxH; if (constrainProportions) {mc.scaleX < mc.scaleY? mc.scaleY = mc.scaleX: mc.scaleX = mc.scaleY; } If (centerHor) {mc.x = (maxW - mc.width) /2; } If (centerVert) {mc.y = (maxH - mc.height) /2; }}

Trinn 13: Legge Movement

Vi starter opp med å bare legge det grunnleggende. Vi vil at brukerne skal kunne intuitivt kontrollere dette scroller, så vi kommer til å bruke musen posisjon som retning i utgangspunktet. Hvis musen er plassert i venstre halvdel av scenen vi ønsker å flytte scroller til høyre, så brukeren beveger seg i den retningen de ønsker scroller å avsløre seg selv. Jeg foretrekker dette til direkte sammenheng med å flytte scroller samme måte musen går, men det er en diskusjon for en annen dag.

For å gjennomføre dette er ganske enkel, vi bare legge til en hendelse lytteren på slutten av buildScroller funksjon, for hver gang vi går inn i rammen for å plassere scroller. Så i behandleren funksjonen vil vi lage en if /else setningen og sette ny fart variabel avhengig av museposisjonen. Hvis musen x posisjon er på den venstre halvdelen av scenen, vi vil at scroller å flytte én vei, og hvis det er på høyre halvdel av scenen vi vil at den skal flytte den andre retningen. Da kan vi anvende denne hastigheten til x posisjon scroller beholderen. Dette er nå begynner å ligne noe nyttig fordi det nå er interaktiv og responsive!

I hovedsak alt vi gjør er å flytte scroller container klippet til en retning av den andre, men vi gjør det hver ramme, slik at det animeres posisjon over tid. Husk dette scroller klippet inneholder alle elementene vi har opprettet, så det er som å sette ting inn i en boks og flytting av boksen. Elementene trenger ikke å bli flyttet, bare beholderen! Vi flytter det enten 5 piksler til venstre eller 5 piksler til venstre hver enkelt ramme (dette 5 kan være alt, valgte jeg bare 5 fordi det så ut til høyre). Dette overlater mye å være ønsket, men det er det første skrittet. Vi har vår scroller flytting og har gitt sluttbrukeren makt til å kontrollere denne bevegelsen!

Legg merke til at vi bruker scene egenskaper for å finne scenen størrelse, selv om vi satt scenen størrelse tidligere og vet nøyaktig hva størrelse det er. Dette er fordi det vil bidra til koden til å være selvinneholdende og bærbar. Hvis vi skulle bruke de faktiske verdiene ville vi må huske å oppdatere dem hvis vi noen gang endret scroller størrelse eller ønsket å bruke dette i et annet program. Vi vil opprette flere variabler snart som vil tillate oss å tilpasse rulle samspillet
scroller.addEventListener (Event.ENTER_FRAME, moveScrollerThumbs); trace ("avslutning av build scroller"); ... Var hastighet. Antall; funksjons moveScrollerThumbs (e: Hendelses): void {if (mouseX < stage.stageWidth /2) {//venstre halvdel av scenen hastighet = 5; } Else {//høyre halvdel av scenen fart = -5; } Scroller.x + = hastighet;}

Trinn 14: Bedre Movement - Muse Grenser

Du kan se over at vi fortsatt har en vei å gå med våre bevegelseskontrollene på scroller. Det er grenser for å legge til muse stillinger som forårsaker rulling (vi vil at det skal bare rulle når du er på scenen og over scroller), begrensninger vi ønsker å bruke til scroller (slik at det spiller t bla av siden), og vi ønsker å gjøre scroller hastighet dynamisk.

La oss starte først ved å legge til en erklæring for å sjekke om vi er over den scroller. For å gjøre dette vil vi sjekke mousey posisjon, scroller.y og scroller.height egenskaper. La oss også legge litt mer til mouseX uttalelser, la oss sørge for at det er litt mer presis og bare inneholde x-verdier fra 0 til midten av scenen (stage.stageWidth /2) og fra sentrum til kanten.
funksjons moveScrollerThumbs (e: Hendelses): void {if (mousey > scroller.y & & mousey < scroller.y + scroller.height) {//vertikalt over scroller if (mouseX < stage.stageWidth /2 & & mouseX > 0) {//venstre halvdel av scenen eksplisitt fart = 5; } Else if (mouseX > stage.stageWidth /2 & & mouseX < stage.stageWidth) {//høyre halvdel av scenen eksplisitt fart = -5; } Scroller.x + = hastighet; }}

Trinn 15: Bedre Movement - Scroller Grenser

Nå vil vi ønsker å bruke grenser til scroller seg selv, slik at den ikke ruller av siden og la oss med en blank scene og en bruker som ikke vet eller husker hvilken vei bildene gikk.

Vi trenger å se den scroller x posisjon, og hvis det går for langt uansett stille den til vår grense. Husk at scroller x posisjon er funnet på sin venstre kant, så når det er på en 0 x posisjon den er i flukt med den venstre kanten av scenen. Så først av hvis x posisjonen til scroller er større enn 0. hastigheten er beregnet og brukt, ønsker vi å sette det tilbake til vår grense, 0. Dette vil holde scroller fra å bevege seg for langt inn i scenen. Vi kan også legge til noen padding til scenen, og siden vi har polstring mellom hver scroller element på 20, la oss gjøre det konsekvent. Snarere enn å bruke 0 her, la oss gjøre det samme 20 verdi.

Vi vil at scroller å slutte å bevege seg igjen når det er siste elementet er fullt på scenen. Det venstre grensen kan bli funnet ved å finne bredden på scroller og scenen bredde. Hvis scroller flyttes så langt til venstre at det er x posisjon er mindre enn sin egen bredde (negativ), men faktor tilbake i scenebredde (pluss stageWidth) må vi holde det der. For å legge til utfyllingen i denne enden vi trekker 20.
funksjons moveScrollerThumbs (e: Hendelses): void {if (mousey > scroller.y & & mousey < scroller.y + scroller.height) {//vertikalt over scroller if (mouseX < stage.stageWidth /2 & & mouseX > 0) {//igjen av scenen eksplisitt fart = 5; } Else if (mouseX > stage.stageWidth /2 & & mouseX < stage.stageWidth) {//høyre for scenen eksplisitt fart = -5; } Scroller.x + = hastighet; //scroller grenser if (scroller.x < -scroller.width + stage.stageWidth - 20) {//hvis scroller for langt til venstre scroller.x = -scroller.width + stage.stageWidth - 20; } Else if (scroller.x > 20) {//hvis scroller til høyre scroller.x = 20; }}}

Trinn 16: Dynamic Movement

For å gjøre bevegelsen mer flytende og dynamisk vi bare trenger å oppdatere to linjer med kode. Du gjettet det, de to linjene som skiller hastigheten må justeres for å bestemme hastigheten av avstanden mouseX er fra midten av scenen i stedet for en flat verdi på 5. Vi finne avstanden musen er horisontalt fra senteraksen av scenen (stage.stageWidth /2), og vi ønsker at scroller å flytte til høyre hvis vi er på venstre side, og vice versa. I begge tilfeller finner vi negativ differanse mellom de to. Da bør vi skalerer det ned ved å dele det med, la oss prøve 8, fordi hvis vi ikke gjør det, er den scroller altfor fort (gå videre, prøv det)
funksjons moveScrollerThumbs (e: Hendelses):. Void {if (mousey > scroller.y & & mousey < scroller.y + scroller.height) {//vertikalt over scroller if (mouseX < stage.stageWidth /2 & & mouseX > 0) {//venstre for scenen eksplisitt fart = - (mouseX - stage.stageWidth /2) /8; } Else if (mouseX > stage.stageWidth /2 & & mouseX < stage.stageWidth) {//høyre for scenen eksplisitt fart = - (mouseX - stage.stageWidth /2) /8; } Scroller.x + = hastighet; //scroller grenser if (scroller.x < -scroller.width + stage.stageWidth - 20) {//hvis rullet for langt til venstre scroller.x = -scroller.width + stage.stageWidth - 20; } Else if (scroller.x > 20) {//hvis valgt en langt høyre scroller.x = 20; }}}

Trinn 17: User Friendly Movement

Nå teste dette og tenke på sluttbrukeren. Du skal se på dette bildet scroller og kanskje ønsker å se litt nærmere eller fokusere på et bilde som fanger din interesse. Du ønsker dette scroller å slutte å bevege seg, (hvis jeg flytter til midten av scenen det fortsatt driver til den ene siden av den andre), og jeg fokuserer mer på å bekjempe den scroller enn jeg gjør på bildet jeg ønsker å se på.

Dette er et eksempel på en ikke-transparent brukerkontroll. Vi vil at brukeren skal kunne intuitivt bruke denne scroller til det punktet at de ikke engang tenke på det. Hvis brukeren har til å tenke på det, eller enda verre, kjempe din app for å få det til å gjøre noe, mister du og de vil se andre steder for innholdet. Så la oss unngå kampen og gi scroller et dødt område i sentrum av scenen. Så de kan hvile seg vel ved å flytte til sentrum av scroller å inspisere noe eller stoppe reisesyke. Det er en veldig enkel ting å gjøre, og har en stor payoff, noe som gjør den scroller enklere å bruke. Snarere enn å bruke sentrum av scenen for alle våre beregninger vil vi gi det litt padding
funksjons moveScrollerThumbs (e: Hendelses): void {if (mousey > scroller.y & & mousey < scroller.. y + scroller.height) {//vertikalt over scroller if (mouseX < stage.stageWidth /2-40 & & mouseX > 0) {//igjen av scenen eksplisitt fart = - (mouseX - (stage.stageWidth /2 - 40)) /8; } Else if (mouseX > stage.stageWidth /2 + 40 & & mouseX < stage.stageWidth) {//høyre for scenen eksplisitt fart = - (mouseX - (stage.stageWidth /2 + 40)) /8; } Else {hastighet = 0; //hvis i sentrum området, fjerner hastigheten til 0, slik at vi ikke har noen rulle over effekten fra den siste rammen. } Scroller.x + = hastighet; //scroller grenser if (scroller.x < -scroller.width + stage.stageWidth - 20) {//hvis rullet for langt til venstre scroller.x = -scroller.width + stage.stageWidth - 20; } Else if (scroller.x > 20) {//hvis valgt en langt høyre scroller.x = 20; }}}

Trinn 18: Abstrahere Movement Mer

La oss abstrakt dette ut litt. Vi har flere steder der vi legger til padding til verdier eller målinger.