Share
I denne opplæringen lærer du hvordan du lager en rulleliste aktivert av musen opp og ned bevegelser, med forskjellige hastigheter basert på markørens posisjon. Jeg vil også dekke forberede listedata med PHP, laste XML-data og en kort forklaring på algoritmen jeg kom opp med. Nyt!
Den andre dagen, da jeg prøvde en smart telefon, så jeg en av disse kule, fine listen scroller tweening effekter. Så begynte jeg å tenke på hvordan jeg kunne oppnå en slik effekt i Flash, gjorde litt forskning på nettet og oppriktig fant ikke akkurat det jeg lette etter. Så her er resultatet av min lille oppgave.
Etter noen undersøkelser fant jeg en fin algoritme. Det knytter bare musebevegelsen med prosentandelen av det synlige området (senere vil dette bli identifisert som masken) som faktisk peker. Deretter flyttes beholderen i samme forhold.
La oss for eksempel si at musen er nær bunnen av den blå krøllebraketten. I dette scenariet vil beholderen bevege seg 20% mot toppen.
Som du kan se fungerer dette ganske bra. Når musemarkøren når toppen eller bunnen av det synlige området, har vi sikkerhet om at vi har nådd begynnelsen eller slutten av listen. Denne teknikken er ganske enkel fordi vi ikke trenger å bekymre oss om at listen når for eksempel begynnelsen og fortsetter å bevege seg sammen.
Men ... Hva om vi har hundrevis av lister? Nå har vi et problem. Hvis vårt synlige område (maske) har, sier vi 500 piksler høyde, og vi har en liste over 100 elementer (alt innholdsområde), hver med en høyde på 20 piksler, beveger musen 1/5 av det synlige området (maske) vil resultere i overgangen på 20 elementer (400px / 20px) ved lysets hastighet. Så jeg antar at denne tilnærmingen ikke ville resultere veldig bra.
Så jeg kom opp med denne løsningen:
I utgangspunktet har jeg definert to soner - under og over sentrum. Hver sone har en verdi tilknyttet. Denne verdien beregnes basert på avstanden mellom musemarkøren og senteret. Så, hvis vi faktisk forbinder denne verdien med en variabel, kan vi endre hastigheten basert på museposisjonen. Minustegnet er bare for å bestemme bevegelsens retning.
Når det er sagt, la oss få noe ekte innhold.
Vi bruker en ekstern xml-fil for å mate programmet fordi:
Så, vi trenger en stor liste over ting ... Hva med listen over land rundt om i verden?
(Dette trinnet er et ekstra emne fordi jeg bruker et annet språk for å hjelpe meg med xml-filpreparasjonen. Så hvis dette ikke er av interesse, ikke bekymre deg, vil dette være i nedlastingsfilene)
Jeg har bare Googled [list country world] og i det første resultatet fikk jeg denne listen:
(kilde: http://www.listofcountriesoftheworld.com)
Kopier alt til noen tekstfil og lagre det. Jeg heter den countries.txt.
Skriptet nedenfor er skrevet i PHP. Du trenger en webserver for å kjøre den. Jeg bruker wampserver, et fint bunt som installerer PHP, MySQL og Apache med et par klikk.
For å kunne bruke dette skriptet må du initialisere webserveren og kjøre skriptet i en underkatalog av \ www \ katalogen. Et siste notat: Skriptet og landene.txt må være i samme mappe.
'. "\ N"); skriv ut ($ fp, ''. "\ N"); foreach ($ linjer som $ linje) $ line = rtrim ($ line, "\ r \ n"); $ pattern = '/ \ d + \ s * /'; $ erstatning = "; $ line = preg_replace ($ mønster, $ erstatning, $ linje); $ str =" \ t ". ' '); fclose ($ fp); ?>- '. $ linje. '
'. "\ N"; skriv ut ($ fp, $ str); fwrite ($ fp, '
Utgangen av dette skriptet blir lagret i en fil med navnet data.xml. Hvis du ikke forstår dette trinnet, ikke bekymre deg fordi du kan laste det ned herfra.
Hvis du ser på demoen, vil du legge merke til at applikasjonen vår har et grensesnitt, knapper og så videre. Så la oss begynne å sette hele grafikken sammen.
Åpne Adobe Flash og opprett en ny ActionScript 3-fil med følgende innstillinger:
Lagre filen. Jeg har kalt min scroll.fla.
Fil> Import> Importer til scenen og velg bakgrunnen.jpg-bildet (alle bildene er inkludert i assets.zip, i nedlasting av kilde).
Nå:
Vindu> justere
Dette åpner justeringspanelet. Senter bildet på scenen, klikk på knappene som vises i bildet nedenfor.
Og nå gi laget ditt navnet Bakgrunn (ikke glem å låse det):
Opprett et nytt lag og importer bildetpad.png. Importprosessen er nettopp den samme som forrige trinn. Trykk F8 for å konvertere den til en MovieClip og gi den navnet mcPad. Deretter klikker du på Eksporter for ActionScript, og skriver inn navnet Pad i feltet Klassetilfelle.
I utgangspunktet definerer vi pute MovieClip som en underklasse av selve MovieClip-klassen. Derfor kan vi bruke den direkte fra vår kode og behandle den som en vanlig MovieClip siden den arver fra MovieClip-klassen. Ganske kul hei?
Slett nå denne forekomsten fra scenen, men ikke fra biblioteket (fordi jeg sa at vi skal bruke det fra koden).
Importer bildeobjektet Bakgrunn.jpg, trykk F8 for å konvertere det til en MovieClip. Gi det navnet mcItem. Enda en gang eksportere for ActionScript og navnet på klasse-elementet.
Nå er prosessen litt annerledes:
Endelig låser du Over-laget, går tilbake til hovedlinjen, og slett mcItem-filmklippet fra scenen.
For denne applikasjonen bruker jeg Arial-avrundet MT Bold Negrito-skrift (det er en gratis skrift, jeg har lastet ned min herfra). Siden det ikke er en systemfont, må vi også importere den:
I hoved tidslinjen trenger vi bare bakgrunnslaget, slik at du kan slette de resterende lagene.
Det er det for Flash Authoring-verktøyet. La oss starte kodingen.
Opprett en ny ActionScript-fil, lagre den som DocumentClass.as. Deretter legger du til denne koden:
pakke import flash.display.MovieClip; offentlig klasse DocumentClass utvider MovieClip private var _pad: MovieClip; offentlig funksjon DocumentClass () _pad = ny Pad (); addChild (_pad); _pad.x = scene.stageWidth / 2 - _pad.width / 2; _pad.y = scene.stageHeight / 2 - _pad.height / 2;
(Hvis du ikke er sikker på hva vi gjør her, sjekk ut denne raske introduksjonen til dokumentklasser.)
Husk mdPad Filmklipp? Husk at vi har eksportert den til ActionScript. Så når vi ønsker å instantiere denne MovieClip, må vi bare skrive
Ny Pad ();
Denne koden oppretter i utgangspunktet en forekomst av mcPad MovieClip og legger den til scenen ved hjelp av addChild () -metoden. Så nå, den _pad er på vår displayliste!
Da har jeg sentrert det på scenen (vertikalt og horisontalt).
Test programmet, og du bør se bakgrunnsoppsettet på flash-spilleren.
Vår søknad vil bruke en beholder for å holde alle elementene sammen. Så, vi skal lage en ny MovieClip i DocumentClass. Erklære eiendommen:
privat var _container: MovieClip;
Inne i konstruktøren, på slutten:
_container = ny MovieClip (); addChild (_container);
Legg til følgende importerklæringer:
importere flash.events.Event; importere flash.net.URLRequest; importer flash.net.URLLoader;
Erklære følgende egenskaper:
offentlig var loader: URLLoader; offentlige var data: XML; offentlige varelementer: XMLList;
Deretter implementerer du følgende metoder:
Accentsconagua
private funksjon dataLad (): void loader = ny URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (ny URLRequest ("data.xml")); private funksjon dataLoaded (event: Event): void trace ("Data Loaded."); Til slutt legg til denne metoden samtale til konstruktøren:
dataload ();
Så langt har vi:
pakke import flash.display.MovieClip; importere flash.events.Event; importere flash.net.URLRequest; importer flash.net.URLLoader; offentlig klasse DocumentClass utvider MovieClip private var _pad: MovieClip; privat var _container: MovieClip; offentlig var loader: URLLoader; offentlig funksjon DocumentClass () _pad = ny Pad (); addChild (_pad); _pad.x = scene.stageWidth / 2 - _pad.width / 2; _pad.y = scene.stageHeight / 2 - _pad.height / 2; _container = ny MovieClip (); addChild (_container); dataload (); private funksjon dataLad (): void loader = ny URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (ny URLRequest ("data.xml")); privatfunksjonsdataLadet (hendelse: hendelse): void trace (new XML (event.target.data.toString ())); Test programmet, og du bør se alle XML-dataene i konsollen. La oss gå videre.
Legg til følgende importerklæringer:
importer flash.text.TextFormat; importer flash.text.TextField; importere flash.text.TextFieldAutoSize; importer flash.text.Font;
Legg til disse nye variablene:
offentlige var data: XML; offentlige varelementer: XMLList; privat var _item: element; private var _itemTextField: TextField; private var _defaultFormat: TextFormat = ny TextFormat (); private var _arialRounded: Font = new ArialRounded (); private var _textFieldXPosition: uint = 10; private var _textFieldYPosition: uint = 13; privat var _textFieldWidth: uint = 240; private var _textFieldHeight: uint = 25; privat var _itemPosisjon: uint = 49;
Oppdater dataLoaded-metoden:
private funksjon dataLadet (hendelse: hendelse): void // denne egenskapen inneholder den lastede xml data data = ny XML (event.target.data); // eiendomsegenskapen inneholder alle de gjentatte elementelementene items = data.item; // dette repeterer over hvert element for (var i = 0; i < items.length(); i++) // remember the mcItem? We are instantiating that MovieClip _item = new Item(); // sets the Over layer MovieClip's alpha to 0 _item.item_btn_over.alpha = 0; // creates the Item textfield _itemTextField = new TextField(); _itemTextField.x = _textFieldXPosition; _itemTextField.y = _textFieldYPosition; _itemTextField.selectable = false; _itemTextField.width = _textFieldWidth; _itemTextField.height = _textFieldHeight; _itemTextField.embedFonts = true; _defaultFormat.color = 0x111112; _defaultFormat.font = _arialRounded.fontName; _defaultFormat.size = 18; _itemTextField.defaultTextFormat = _defaultFormat; _itemTextField.text = items[i].toString(); // adds the textfield to the item's display list _item.addChild(_itemTextField); // positions each item vertically based on the iteration value _item.y = i * _itemPosition; _item.buttonMode = true; _item.mouseChildren = false; // adds the item to the container display list _container.addChild(_item);
Nå har vi opprettet 200 + knappene og satt dem på skjermen. Hvis du kjører programmet, vil du legge merke til at denne listen begynner på stillingen (0, 0) og fyller hele scenen. Det er ikke det vi vil, så la oss håndtere det i neste trinn.
La oss lage en form for å maskere listen slik at vi bare ser det synlige området, som i bildet fra før:
På slutten vil vi sentrere masken og beholderen. Så legg til en annen importerklæring:
importer flash.display.Shape;
Eiendommer:
privat var _mask: form; private var _maskWidth: uint = 288; privat var _maskHeight: uint = 290; privat var _paddingTop: uint = 120;
Og ... I dataLoaded-metoden på slutten, legg til følgende kode:
_mask = nytt form (); _mask.graphics.beginFill (0xff0000); _mask.graphics.drawRect (0, 0, _maskWidth, _maskHeight); _mask.graphics.endFill (); // senter masken horisontalt på scenen _mask.x = scene.stageWidth / 2 - _container.width / 2; // plasserer masken vertikalt ved 120px fra toppen _mask.y = _paddingTop; addChild (_mask); // tilordner masken til containeren _container.mask = _mask; // sentrer beholderen horisontalt på scenen _container.x = stage.stageWidth / 2 - _container.width / 2; // plasserer beholderen vertikalt til en viss verdi _container.y = _paddingTop;
Bare en liten forbedring ... Nå har våre containere mange hull fordi det er en margin mellom hvert element. Så la oss gi det en bakgrunn for å unngå uønskede resultater når du lytter etter hendelser.
Eiendom:
privat var _background: Shape;
Fortsatt i dataLoaded-metoden, under eksisterende kode:
_background = ny form (); _background.graphics.beginFill (0xFFFFFF); _background.graphics.drawRect (0, 0, _container.width, _container.height); _background.graphics.endFill (); _container.addChildAt (_background, 0);
Som du sikkert vet, hører lyttere etter hendelser. Her bruker vi en for MouseOver-hendelsen og en annen for MouseOut-arrangementet.
Legg til dette på slutten av dataLoaded-metoden:
_container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); _container.addEventListener (MouseEvent.MOUSE_OUT, movingOut);
La oss nå implementere movingOver og movingOut-metodene:
privat funksjon movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); privat funksjon movingOut (event: MouseEvent): void _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Nå kan vi lytte etter hendelser, nærmere bestemt MUS OVER og MOUSE_OUT. Hendelser er som meldinger som informerer om noe objekt som venter på den samme hendelsen. "Budskapet" sender bare ut at hendelsen har skjedd. I dette tilfellet _container Objektet vil lytte etter MouseOver og MouseOut-hendelser. Når de finner sted _container har evnen til å svare tilsvarende.
Så først tildeler vi arrangementslytterne til _container objekt og deretter senere, hvis _container er svevet over MouseOver-lytteren er fjernet. Tvert imot, når musen er ute av _container objekt musen over lytteren er tilordnet igjen til _container.
Hendelsesflyten er en kraftig mekanisme som gjør at programmereren kan håndtere flere objekter med bare én hendelseslytter. Så, som du sannsynligvis forestiller deg, _container.addEventListener vil "lytte" til hendelser som involverer containeren, elementene og bakgrunnsformen - det vil si beholderen og alt inni den. Du kan bekrefte dette ved å legge til følgende kode i movingOver og flytter ut metoder:
spor (event.target);
Dette vil spore objektet som sendte arrangementet.
Når vi lytter etter denne hendelsen, kan vi definere en oppførsel som vil finne sted hver ramme, i vårt tilfelle 63 ganger per sekund. Derfor er OnEnterFrame-arrangementet veldig nyttig for animasjoner basert på fps. Vi trenger dette for å flytte vår rulle, så movingOver og flytter ut metoder bør se slik ut:
privat funksjon movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); addEventListener (Event.ENTER_FRAME, enterFrame); privat funksjon movingOut (event: MouseEvent): void removeEventListener (Event.ENTER_FRAME, enterFrame); _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Legg til disse egenskapene:
privat var _maxSpeed: uint = 15; privat var _speed: nummer;
Legg til følgende metode på slutten av koden (under flytter ut metode). Dette vil bli kjørt hver ramme, takket være EnterFrame-hendelseslytteren vi opprettet tidligere. Jeg skal forklare hva denne koden gjør under.
funksjon enterFrame (event: Event): void _speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed; _container.y + = _speed; hvis (_container.y> = _paddingTop) removeEventListener (Event.ENTER_FRAME, enterFrame); _container.y = _paddingTop; hvis (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
Og her er logikken til scroller:
_speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed;
Denne linjen med kode får hastigheten ved å dele halvdelen av scenens høyde med musen Y-posisjon.
La oss si at halvparten av scenen er 200px og musepekeren er på posisjon 300px. Bruk av formelen vi får:
(200 - 300) / 200 * 15 (_maksimal hastighet eiendom) = -7.5 som er negativ, så listen vil gi oss en nedadgående bevegelse. Det er nettopp det vi leter etter. Hvis musepekeren var over senteret, ville vi ha en positiv verdi, og listen ville bevege seg opp.
Deretter med denne utsagnet:
_container.y + = _speed;
Vi tilordner den faktiske hastigheten, hver ramme (63 ganger per sekund) til _container.y stilling. Deretter sjekker vi med if-setningene om beholderens y-posisjon er der den skal være. Husk dette bildet:
Jeg skal bruke Greensocks TweenMax Library (du kan laste den ned herfra) for å animere hver knapp på og av (når musen svinger over eller forlater elementet).
Legg til denne importerklæringen:
importere gs. *;
Oppdater movingOver og flytter ut metoder:
privat funksjon movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); addEventListener (Event.ENTER_FRAME, enterFrame); hvis (event.target er Item) TweenMax.to (Item (event.target) .item_btn_over, .2, alfa: 1); privat funksjon movingOut (event: MouseEvent): void removeEventListener (Event.ENTER_FRAME, enterFrame); _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); hvis (event.target er Item) TweenMax.to (Item (event.target) .item_btn_over, .2, ala: 0);
La oss analysere denne koden i detalj. De event.target vil referere til objektet som vil sende hendelsen, i dette tilfellet MouseOver eller MouseOut. Dette objektet kan være en _punkt, de _bakgrunn eller _container men vi er bare interessert i Punkt objekter slik at vi spesifiserer:
hvis (event.target er element)
Så, hvis det er tilfelle, vil vi animere hva objektobjektet sendte hendelsen ved å skrive Element (event.target) .item_btn_over. De item_btn_over er instansnavnet til mcItemOver MovieClip som vi opprettet i trinn 7. .2 er animasjonens tid, og i den siste parameteren angir vi hvilken egenskap vi vil animere (alfa).
For øyeblikket fungerer vår søknad ganske bra. Vi har imidlertid noen kode gjentatt og en veldig sentralisert applikasjon også. Legg merke til at dataLoaded Metoden gjør nesten alt.
ActionScript har utmerket støtte for objektorientert programmering. Vi kunne bruke det til å fjerne data lasting fra applikasjonslogikk mv.
Det er et fint designmønster som heter Model View Controller som fungerer veldig bra med brukergrensesnitt. Dette mønsteret skiller i utgangspunktet applikasjonen i tre forskjellige lag. Modellen omhandler forretningslogikken, datahåndtering. Controller omhandler menneskelig interaksjon med søknaden. Og til slutt ser vi på det visuelle grensesnittet for søknaden.
I så fall er søknaden vår for liten til å implementere dette mønsteret. Så, la oss tilpasse bare modellen og en diverse View / Controller til vår søknad. Først, la oss bare håndtere noen gjentatt kode.
Opprett en ny ActionScript-fil og skriv inn følgende kode:
pakke com.tutsplus.active.util import flash.display. *; offentlig klasse Juster offentlig statisk funksjonssenterInStage (stadium: Stage, mc: DisplayObject): void mc.x = scene.stageWidth / 2 - mc.width / 2; mc.y = scene.stageHeight / 2 - mc.height / 2; statisk statisk funksjonssenterHorisontaltInStage (stadium: Stage, mc: DisplayObject): void mc.x = stage.stageWidth / 2 - mc.width / 2; offentlig statisk funksjonssenterVerticallyInStage (stadium: Stage, mc: DisplayObject): void mc.y = scene.stageHeight / 2 - mc.height / 2;
Vi må utføre denne oppgaven flere ganger. Så jeg bestemte meg for å lage en klasse som justerer et visningsobjekt til scenen når vi kaller det. For å gjøre dette arbeidet må du lage en katalogstruktur slik:
\ Com \ tutsplus \ aktiv \ util \
i produksjonskatalogen eller inne i klassebanen din. Deretter i den refactored DocumentClass vil du se hvordan du bruker denne klassen.
Modellen styrer oppførselen og dataene til applikasjonsdomenet, svarer på forespørsler om informasjon om sin tilstand (vanligvis fra visningen) og reagerer på instruksjoner for å endre tilstand (vanligvis fra kontrolleren)
kilde: MSDN.
Lasting av dataene og lagring av data i datastrukturer er fine operasjoner for komponering av vår modell. Opprett en ny ActionScript-fil og ring den til ScrollModel.as:
pakke import flash.events.Event; importere flash.net.URLRequest; importer flash.net.URLLoader; importer flash.events.EventDispatcher; klasse ScrollModel utvider EventDispatcher public var loader: URLLoader; offentlige var data: XML; offentlige varelementer: XMLList; offentlig statisk const MODEL_UPDATE: String = "modelChange"; offentlig funksjon ScrollModel () loader = ny URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); offentlig funksjonsbelastning (req: URLRequest): void loader.load (req); privatfunksjonsdataLadet (hendelse: hendelse): void data = new XML (event.target.data); elementer = data.item; dispatchEvent (ny hendelse (ScrollModel.MODEL_UPDATE));
Med denne oppdateringen, vår dataLoaded Metoden har bare 3 linjer med kode nå!
Det er nesten samme kode som vi brukte i DocumentClass for å laste dataene, med bare en forskjell:
dispatchEvent (ny hendelse (ScrollModel.MODEL_UPDATE));
Etter å tildele våre 200 + elementer til XMLList-eiendommen, sender denne koden en hendelse til den som lytter. I praksis må vi vite når dette skjer for å bruke disse dataene i en annen klasse.
Opprett en ny Actionscript-fil og navngi den ScrollBox.as:
pakke import flash.display.Sprite; importer flash.display.Stage; importere flash.events.Event; importer flash.events.MouseEvent; importer flash.display.Shape; importer flash.text.TextFormat; importer flash.text.TextField; importere flash.text.TextFieldAutoSize; importer flash.text.Font; importere gs. *; importer com.tutsplus.active.util.Align; offentlig klasse ScrollBox utvider Sprite private var _container: Sprite; privat var _item: element; private var _itemTextField: TextField; private var _defaultFormat: TextFormat = ny TextFormat (); private var _arialRounded: Font = new ArialRounded (); private var _textFieldXPosition: uint = 10; private var _textFieldYPosition: uint = 13; privat var _textFieldWidth: uint = 240; private var _textFieldHeight: uint = 25; privat var _itemPosisjon: uint = 49; privat var _mask: form; private var _maskWidth: uint = 288; privat var _maskHeight: uint = 290; privat var _paddingTop: uint = 120; privat var _background: Shape; privat var _maxSpeed: uint = 15; privat var _speed: nummer; private var _items: XMLList; privat var _stage: scenen; offentlig var scrollModel: ScrollModel; offentlig funksjon ScrollBox (scen: Stage, m: ScrollModel) this.scrollModel = m; this._stage = scene; scrollModel.addEventListener (ScrollModel.MODEL_UPDATE, createRollingScroller); privat funksjon createRollingScroller (event: Event = null): void _container = new Sprite (); _stage.addChild (_container); _items = scrollModel.items; for (var i = 0; i < _items.length(); i++) _item = new Item(); _item.item_btn_over.alpha = 0; _itemTextField = new TextField(); _itemTextField.x = _textFieldXPosition; _itemTextField.y = _textFieldYPosition; _itemTextField.selectable = false; _itemTextField.width = _textFieldWidth; _itemTextField.height = _textFieldHeight; _itemTextField.embedFonts = true; _defaultFormat.color = 0x111112; _defaultFormat.font = _arialRounded.fontName; _defaultFormat.size = 18; _itemTextField.defaultTextFormat = _defaultFormat; _itemTextField.text = _items[i].toString(); _item.addChild(_itemTextField); _item.y = i * _itemPosition; _item.buttonMode = true; _item.mouseChildren = false; _container.addChild(_item); _background = new Shape(); _background.graphics.beginFill(0xFFFFFF); _background.graphics.drawRect(0, 0, _container.width, _container.height); _background.graphics.endFill(); _container.addChildAt(_background, 0); _mask = new Shape(); _mask.graphics.beginFill(0xFF0000); _mask.graphics.drawRect(0, 0, _maskWidth, _maskHeight); _mask.graphics.endFill(); Align.centerHorizontallyInStage(_stage, _mask); _mask.y = _paddingTop; addChild(_mask); _container.mask = _mask; Align.centerHorizontallyInStage(_stage, _container); _container.y = _paddingTop; _container.addEventListener(MouseEvent.MOUSE_OVER, movingOver); _container.addEventListener(MouseEvent.MOUSE_OUT, movingOut); private function movingOver (event:MouseEvent):void _container.removeEventListener(MouseEvent.MOUSE_OVER, movingOver); addEventListener(Event.ENTER_FRAME, enterFrame); if (event.target is Item) TweenMax.to(Item(event.target).item_btn_over, .2, alpha:1); private function movingOut (event:MouseEvent):void removeEventListener(Event.ENTER_FRAME, enterFrame); _container.addEventListener(MouseEvent.MOUSE_OVER, movingOver); if (event.target is Item) TweenMax.to(Item(event.target).item_btn_over, .2, alpha:0); function enterFrame(event:Event):void _speed = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed; _container.y += _speed; if (_container.y >= _paddingTop) removeEventListener (Event.ENTER_FRAME, enterFrame); _container.y = _paddingTop; hvis (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
Legg merke til de justere klassemetoder som vi bruker:
Align.centerHorizontalallyInStage (_stage, _mask); Align.centerHorizontalallyInStage (_stage, _container);
Nå må vi bare bruke metoden Align.centerHorizontallyInStage () for å justere et visningsobjekt horisontalt.
De createRollingScroller Metoden vil bare starte når vi er ferdig med å lagre alle dataene i poster: XMLList eiendom.
Endre DocumentClass:
pakke import flash.display.MovieClip; importer flash.display.Sprite; importere flash.events.Event; importere flash.net.URLRequest; importer flash.net.URLLoader; importer flash.events. *; importer com.tutsplus.active.util.Align; offentlig klasse DocumentClass utvider MovieClip private var _pad: MovieClip; offentlig var scrollModel: ScrollModel; offentlig var scrollBox: ScrollBox; offentlig funksjon DocumentClass () config (); scrollModel = ny ScrollModel (); scrollModel.load (ny URLRequest ("data.xml")); scrollBox = ny ScrollBox (scene, scrollModel); privat funksjon config (): void _pad = new Pad (); addChild (_pad); Align.centerInStage (scene, _pad); Igjen, merk deg hvor lett det er å sentrere skjermobjekter på scenen med Align.centerInStage () metode:
Align.centerInStage (scene, _pad);
Det er det for nå folk! Jeg har dekket noen interessante Actionscript 3 emner, og jeg håper du finner dette nyttig. Hvorfor ikke forbedre dette programmet til et neste nivå, recfactoring, legge til funksjoner, etc.?
Takk for at du følger. Ha det fint!
