Share
In deze tutorial leert u hoe u een scrollijst maakt die wordt geactiveerd door bewegingen van de muis op en neer, met verschillende snelheden op basis van de positie van de cursor. Ik zal ook de voorbereiding van lijstgegevens met PHP behandelen, XML-gegevens laden en een korte uitleg van het algoritme dat ik bedacht heb. Genieten!
Onlangs, toen ik een smartphone aan het testen was, zag ik een van deze coole, handige lijst-scroller-tweeneffecten. Dus begon ik te denken hoe ik zo'n effect in Flash kon bereiken, deed ik wat onderzoek op het web en vond eerlijk gezegd niet precies wat ik zocht. Dus hier is het resultaat van mijn kleine opdracht.
Na enig onderzoek vond ik een aardig algoritme. Het relateert simpelweg de muisbeweging met het percentage van het zichtbare gebied (later wordt dit geïdentificeerd als zijnde het masker) dat feitelijk puntig is. Daarna wordt de container in dezelfde verhouding verplaatst.
Laten we bijvoorbeeld zeggen dat de muis zich dicht bij de onderkant van de blauwe accolade bevindt. In dit scenario zou de container 20% naar de bovenkant bewegen.
Zoals je kunt zien werkt dit prima. Wanneer de muisaanwijzer de boven- of onderkant van het zichtbare gebied bereikt, hebben we de zekerheid dat we het begin of het einde van de lijst hebben bereikt. Deze techniek is vrij eenvoudig, omdat we ons geen zorgen hoeven te maken dat de lijst bijvoorbeeld het begin bereikt en zich blijft voortbewegen.
Maar ... Wat als we honderden lijstitems hebben? Nu hebben we een probleem. Als ons zichtbare gebied (masker) bijvoorbeeld 500 pixels hoog is en we hebben een lijst met 100 items (alle inhoudsgebieden), elk met een hoogte van 20 pixels, beweegt de muis 1/5 van het zichtbare gebied (masker) zou resulteren in de overgang van 20 items (400px / 20px) met de snelheid van het licht. Dus ik vermoed dat deze aanpak niet erg goed zou zijn.
Dus ik kwam met deze oplossing:
In principe heb ik twee zones gedefinieerd - onder en boven het midden. Elke zone heeft een bijbehorende waarde. Deze waarde wordt berekend op basis van de afstand tussen de muisaanwijzer en het midden. Dus als we deze waarde daadwerkelijk koppelen aan een variabele, kunnen we de snelheid aanpassen op basis van de positie van de muis. Het minteken is alleen voor het bepalen van de richting van de beweging.
Dat gezegd hebbende, laten we wat echte inhoud krijgen.
We zullen een extern XML-bestand gebruiken om de applicatie te voeden, omdat:
We hebben dus een grote lijst met items nodig ... Hoe zit het met de lijst met landen over de hele wereld?
(Deze stap is een soort extra onderwerp, omdat ik een andere taal ga gebruiken om me te helpen met de voorbereiding van het XML-bestand. Dus als dit niet van belang is, maak je geen zorgen, dit staat in de downloadbestanden)
Ik heb net gegoogd [wereld lijst landen] en in het eerste resultaat kreeg ik deze lijst:
(bron: http://www.listofcountriesoftheworld.com)
Kopieer alles naar een tekstbestand en sla het op. Ik noemde het countries.txt.
Het onderstaande script is geschreven in PHP. U hebt een webserver nodig om het uit te voeren. Ik gebruik wampserver, een mooie bundel die PHP, MySQL en Apache met een paar klikken installeert.
Om dit script te gebruiken, moet u de webserver initialiseren en het script uitvoeren in een submap van uw \ www \ map. Nog een laatste opmerking: het script en de landen.txt moeten zich in dezelfde map bevinden.
'. "\ N"); fwrite ($ fp, ''. "\ N"); foreach ($ lines as $ line) $ line = rtrim ($ line, "\ r \ n"); $ pattern = '/ \ d + \ s * /'; $ replacement = "; $ line = preg_replace ($ pattern, $ replacement, $ line); $ str =" \ t ". ' '); fclose ($ fp); ?>- '. $ regel. '
'. "\ N"; fwrite ($ fp, $ str); fwrite ($ fp, '
De uitvoer van dit script wordt opgeslagen in een bestand met de naam data.xml. Als je deze stap niet begrijpt, maak je geen zorgen, want je kunt het hier downloaden.
Als u de demo bekijkt, zult u merken dat onze applicatie een interface, knoppen enzovoort heeft. Laten we beginnen alle afbeeldingen samen te voegen.
Open uw Adobe Flash en maak een nieuw ActionScript 3-bestand met de volgende instellingen:
Sla het bestand op. Ik heb mijn scroll.fla genoemd.
Bestand> Importeren> Importeren naar werkgebied en selecteer de background.jpg-afbeelding (alle afbeeldingen zijn opgenomen in assets.zip, binnen de brondownload).
Nu:
Venster> uitlijnen
Hiermee wordt het uitlijnpaneel geopend. Centreer de afbeelding op het podium en klik op de knoppen in de onderstaande afbeelding.
En geef je laag nu de naam Achtergrond (vergeet niet om het te sluiten):
Maak een nieuwe laag en importeer de afbeelding pad.png. Het importproces is precies hetzelfde als de vorige stap. Druk op F8 om het naar een MovieClip te converteren en geef het de naam mcPad. Klik vervolgens op het selectievakje Exporteren voor ActionScript en typ in het invoervak Klasse de naam Pad.
In principe definiëren we de Pad MovieClip als een subklasse van de MovieClip-klasse zelf. Daarom kunnen we het rechtstreeks uit onze code gebruiken en behandelen als een normale MovieClip omdat het erft van de MovieClip-klasse. Best cool he?
Verwijder dit exemplaar nu uit het werkgebied, maar niet uit de bibliotheek (omdat zoals ik al zei we het uit de code zullen gebruiken).
Importeer het afbeeldingsitem Background.jpg, druk op F8 om het naar een MovieClip te converteren. Geef het de naam mcItem. Exporteer nogmaals voor ActionScript en noem het klasseitem.
Nu zal het proces enigszins anders zijn:
Sluit ten slotte de Overlaag, ga terug naar de hoofdtijdlijn en verwijder de mcItem-filmclipinstantie van de stage.
Voor deze toepassing gebruik ik het lettertype Arial Rounded MT Bold Negrito (het is een gratis lettertype, ik heb de mijne hier gedownload). Omdat het geen systeemlettertype is, moeten we het ook importeren:
In de hoofdtijdlijn hebben we alleen de achtergrondlaag nodig, dus je kunt de resterende lagen verwijderen.
Dat is het voor de Flash Authoring-tool. Laten we beginnen met coderen.
Maak een nieuw ActionScript-bestand en sla het op als DocumentClass.as. Voeg vervolgens deze code toe:
pakket import flash.display.MovieClip; public class DocumentClass breidt MovieClip uit private var _pad: MovieClip; public function DocumentClass () _pad = nieuwe Pad (); addChild (_pad); _pad.x = stage.stageWidth / 2 - _pad.width / 2; _pad.y = stage.stageHeight / 2 - _pad.height / 2;
(Als u niet zeker weet wat we hier doen, bekijk dan deze korte introductie tot documentklassen.)
Herinner de mdPad Filmclip? Bedenk dat we het voor ActionScript hebben geëxporteerd. Dus wanneer we deze MovieClip willen instantiëren, hoeven we alleen maar te typen
nieuwe Pad ();
Deze code maakt in principe een exemplaar van de mcPad MovieClip en voegt het toe aan het werkgebied met de methode addChild (). Dus nu, de _pad staat op onze DisplayList!
Daarna heb ik het gecentreerd op het podium (verticaal en horizontaal).
Test de applicatie en u zou de achtergrondlay-out van de flash-speler moeten zien.
Onze applicatie gebruikt een container om alle items bij elkaar te houden. Dus gaan we een nieuwe MovieClip maken in de DocumentClass. Verklaar de woning:
private var_container: MovieClip;
In de constructor, aan het einde:
_container = new MovieClip (); addChild (_container);
Voeg de volgende importinstructies toe:
import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader;
Verklaar de volgende eigenschappen:
openbare var-lader: URLLoader; openbare var-gegevens: XML; openbare var-items: XMLList;
Implementeer vervolgens de volgende methoden:
Accentsconagua
persoonlijke functie dataLoad (): void loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (nieuwe URLRequest ("data.xml")); persoonlijke functie dataLoaded (event: Event): void trace ("Data Loaded."); Voeg ten slotte deze methode aan de constructor toe:
gegevensbelastingsbeheerder ();
Tot nu toe hebben we:
pakket import flash.display.MovieClip; import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; public class DocumentClass breidt MovieClip uit private var _pad: MovieClip; private var_container: MovieClip; openbare var-lader: URLLoader; public function DocumentClass () _pad = nieuwe Pad (); addChild (_pad); _pad.x = stage.stageWidth / 2 - _pad.width / 2; _pad.y = stage.stageHeight / 2 - _pad.height / 2; _container = new MovieClip (); addChild (_container); gegevensbelastingsbeheerder (); persoonlijke functie dataLoad (): void loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (nieuwe URLRequest ("data.xml")); persoonlijke functie dataLoaded (event: Event): void trace (nieuwe XML (event.target.data.toString ())); Test de toepassing en u zou in de console alle xml-gegevens moeten zien. Laten we verder gaan.
Voeg de volgende importinstructies toe:
import flash.text.TextFormat; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.Font;
Voeg deze nieuwe variabelen toe:
openbare var-gegevens: XML; openbare var-items: XMLList; private var _item: Item; private var _itemTextField: TextField; private var _defaultFormat: TextFormat = new TextFormat (); private var _arialRounded: Font = new ArialRounded (); private var _textFieldXPosition: uint = 10; private var _textFieldYPosition: uint = 13; private var _textFieldWidth: uint = 240; private var _textFieldHeight: uint = 25; private var _itemPosition: uint = 49;
Update de dataLoaded-methode:
persoonlijke functie dataLoaded (event: Event): void // deze eigenschap bevat de geladen xml data data = nieuwe XML (event.target.data); // de eigenschap items bevat alle items voor herhalende items = data.item; // dit itereert over elk item voor (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);
Nu hebben we de 200+ knoppen gemaakt en deze op het scherm geplaatst. Als u de toepassing uitvoert, ziet u dat deze lijst begint op positie (0, 0) en de hele fase vult. Dat is niet wat we willen, dus laten we dat in de volgende stap aan.
Laten we een vorm maken om de lijst te maskeren, zodat we alleen het zichtbare gebied zien, zoals in de afbeelding van vóór:
Aan het einde zullen we het masker en de container centreren. Voeg dus nog een importinstructie toe:
import flash.display.Shape;
eigenschappen:
privé var _mask: Shape; private var _maskWidth: uint = 288; privé var _maskHeight: uint = 290; privé var _paddingTop: uint = 120;
En ... Voeg de volgende code toe in de dataLoaded-methode:
_mask = nieuwe vorm (); _mask.graphics.beginFill (0xFF0000); _mask.graphics.drawRect (0, 0, _maskWidth, _maskHeight); _mask.graphics.endFill (); // centreer het masker horizontaal op het podium _mask.x = stage.stageWidth / 2 - _container.width / 2; // positioneert het masker verticaal op 120 px vanaf de bovenkant _mask.y = _paddingTop; addChild (_mask); // wijst het masker toe aan de container _container.mask = _mask; // centreert de container horizontaal op het podium _container.x = stage.stageWidth / 2 - _container.width / 2; // positioneert de container verticaal op een bepaalde waarde _container.y = _paddingTop;
Gewoon een kleine verbetering ... Op dit moment heeft onze container veel gaten omdat er een marge is tussen elk item. Dus laten we het een achtergrond geven om ongewenste resultaten te voorkomen bij het luisteren naar evenementen.
Eigendom:
private var _background: Shape;
Nog steeds in de dataLoaded-methode, onder de bestaande code:
_background = nieuwe vorm (); _background.graphics.beginFill (0xFFFFFF); _background.graphics.drawRect (0, 0, _container.width, _container.height); _background.graphics.endFill (); _container.addChildAt (_background, 0);
Zoals u waarschijnlijk weet, luisteren luisteraars naar evenementen. Hier zullen we er een gebruiken voor de MouseOver-gebeurtenis en een andere voor de MouseOut-gebeurtenis.
Voeg dit toe aan het einde van de dataLoaded-methode:
_container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); _container.addEventListener (MouseEvent.MOUSE_OUT, movingOut);
Laten we nu de methoden movingOver en movingOut implementeren:
private function movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); private function movingOut (event: MouseEvent): void _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Nu kunnen we luisteren naar evenementen, meer specifiek MOUSE_OVER en MOUSE_OUT. Gebeurtenissen zijn vergelijkbaar met berichten die een object melden dat op dezelfde gebeurtenis wacht. Het "bericht" verzendt net dat de gebeurtenis heeft plaatsgevonden. In dit geval de _houder object luistert naar MouseOver- en MouseOut-gebeurtenissen. Wanneer ze plaatsvinden, de _houder heeft de mogelijkheid om dienovereenkomstig te reageren.
Dus, eerst wijzen we de gebeurtenislisteners toe aan de _houder object en vervolgens, later, als de _houder wordt over de MouseOver-luisteraar gehangen. Integendeel, als de muis uit de _houder object de muis over luisteraar wordt opnieuw toegewezen aan de _houder.
De gebeurtenisstroom is een krachtig mechanisme waarmee de programmeur verschillende objecten kan afhandelen met slechts één gebeurtenislistener. Dus, zoals je je waarschijnlijk kunt voorstellen, _container.addEventListener zal "luisteren" naar gebeurtenissen met betrekking tot de container, de items en de achtergrondvorm - dat wil zeggen, de container en alles erin. U kunt dit bevestigen door de volgende code toe te voegen movingOver en verhuizen methoden:
trace (event.target);
Hiermee wordt het object dat de gebeurtenis heeft verzonden, getraceerd.
Bij het luisteren naar dit evenement kunnen we een gedrag definiëren dat elk frame zal plaatsvinden, in ons geval 63 keer per seconde. Daarom is de OnEnterFrame-gebeurtenis erg handig voor animaties op basis van de fps. We hebben dit nodig om onze schuif te verplaatsen, dus de movingOver en verhuizen methoden moeten er als volgt uitzien:
private function movingOver (event: MouseEvent): void _container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); addEventListener (Event.ENTER_FRAME, enterFrame); private function movingOut (event: MouseEvent): void removeEventListener (Event.ENTER_FRAME, enterFrame); _container.addEventListener (MouseEvent.MOUSE_OVER, movingOver);
Voeg deze eigenschappen toe:
private var _maxSpeed: uint = 15; privé var _snelheid: Number;
Voeg de volgende methode toe aan het einde van de code (onder de verhuizen methode). Dit wordt elk frame uitgevoerd, dankzij de gebeurtenislistener EnterFrame die we eerder hebben gemaakt. Ik zal uitleggen wat deze code hieronder doet.
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; if (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
En hier is de logica van de scroller:
_snelheid = (_mask.height / 2 - _mask.mouseY) / (_mask.height / 2) * _maxSpeed;
Deze coderegel krijgt de snelheid door de helft van de hoogte van de etappe te delen door de Y-positie van de muis.
Laten we zeggen dat de helft van de fase 200 px is en de muiscursor op positie 300 px staat. Door de formule toe te passen krijgen we:
(200 - 300) / 200 * 15 (_maximale snelheid eigenschap) = -7,5 wat negatief is, dus de lijst zal ons een neerwaartse beweging geven. Dat is precies wat we zoeken. Als de muiscursor boven het midden zou staan, zouden we een positieve waarde hebben en zou de lijst omhoog gaan.
Volgende, met deze verklaring:
_container.y + = _speed;
We kennen de werkelijke snelheid, elk frame (63 keer per seconde) toe aan de _container.y positie. Vervolgens controleren we met de if-instructies of de y-positie van de container is waar deze hoort te zijn. Onthoud deze foto:
Ik ga de TweenMax-bibliotheek van greensock gebruiken (je kunt deze hier downloaden) om naar elke knop in en uit te schakelen (wanneer de muis over het object beweegt of het item verlaat).
Voeg deze import statement toe:
importeer gs. *;
Werk het movingOver en verhuizen methoden:
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);
Laten we deze code in detail analyseren. De event.target verwijst naar het object dat de gebeurtenis verzendt, in dit geval MouseOver of MouseOut. Dit object zou een kunnen zijn _item, de _achtergrond of de _houder maar we zijn alleen geïnteresseerd in Item objecten dus we specificeren:
if (event.target is Item)
Vervolgens, als dat het geval is, animeren we het Item-object dat de gebeurtenis heeft verzonden door te typen Item (event.target) .item_btn_over. De item_btn_over is de instantienaam van de mcItemOver MovieClip die we hebben gemaakt in stap 7. .2 is de tijd van de animatie en in de laatste parameter specificeren we welke eigenschap we willen animeren (alpha).
Op dit moment werkt onze applicatie prima. We hebben echter een aantal code herhaald en ook een zeer gecentraliseerde toepassing. Merk op dat de dataLoaded methode doet bijna alles.
Actionscript biedt uitstekende ondersteuning voor Object Oriented Programming. We zouden dat kunnen gebruiken om het laden van gegevens los te koppelen van applicatielogica, enz.
Er is een mooi ontwerppatroon genaamd Model View Controller dat heel goed werkt met gebruikersinterfaces. Dit patroon scheidt de toepassing in feite in drie verschillende lagen. Het model behandelt de bedrijfslogica, gegevensverwerking. De controller houdt zich bezig met menselijke interactie met de applicatie. En tot slot behandelt de View de visuele interface van de applicatie.
In dit geval is onze applicatie te klein om dit patroon te implementeren. Laten we dus alleen het model en een andere weergave / controller aanpassen aan onze applicatie. Laten we eerst eens enkele herhaalde code behandelen.
Maak een nieuw ActionScript-bestand en typ de volgende code:
pakket com.tutsplus.active.util import flash.display. *; public class Align public static function centerInStage (stage: Stage, mc: DisplayObject): void mc.x = stage.stageWidth / 2 - mc.width / 2; mc.y = stage.stageHeight / 2 - mc.height / 2; public static function centerHorizontallyInStage (stage: Stage, mc: DisplayObject): void mc.x = stage.stageWidth / 2 - mc.width / 2; public static function centerVerticallyInStage (stage: Stage, mc: DisplayObject): void mc.y = stage.stageHeight / 2 - mc.height / 2;
We moeten deze taak verschillende keren uitvoeren. Dus besloot ik om een klasse te maken die elk weergaveobject op het podium uitlijnt wanneer we het noemen. Om dit te laten werken, moet je een mapstructuur maken zoals deze:
\ Com \ tutsplus \ actief \ util \
in uw productiemap of binnen uw klassenpad. Vervolgens ziet u in de gereformeerde DocumentClass hoe u deze klasse kunt gebruiken.
Het model beheert het gedrag en de gegevens van het toepassingsdomein, reageert op verzoeken om informatie over de staat (meestal vanuit de weergave) en reageert op instructies om de status te wijzigen (meestal van de controller)
bron: MSDN.
Het laden van de data en het opslaan ervan in datastructuren zijn mooie bewerkingen voor het samenstellen van ons Model. Maak een nieuw ActionScript-bestand en noem het ScrollModel.as:
pakket import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; import flash.events.EventDispatcher; class ScrollModel breidt EventDispatcher uit public var loader: URLLoader; openbare var-gegevens: XML; openbare var-items: XMLList; public static const MODEL_UPDATE: String = "modelChange"; public function ScrollModel () loader = nieuwe URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); openbare functie laden (req: URLRequest): void loader.load (req); persoonlijke functie dataLoaded (event: Event): void data = new XML (event.target.data); items = data.item; dispatchEvent (nieuwe gebeurtenis (ScrollModel.MODEL_UPDATE));
Met deze update, onze dataLoaded methode heeft nu slechts 3 regels code!
Het is bijna dezelfde code die we in de DocumentClass hebben gebruikt om de gegevens te laden, met slechts één verschil:
dispatchEvent (nieuwe gebeurtenis (ScrollModel.MODEL_UPDATE));
Na het toewijzen van onze 200 + items aan de eigenschap XMLList verzendt deze regel code één gebeurtenis naar degene die luistert. In de praktijk moeten we weten wanneer dit gebeurt om deze gegevens in een andere klas te gebruiken.
Maak een nieuw Actionscript-bestand en noem het ScrollBox.as:
pakket import flash.display.Sprite; import flash.display.Stage; import flash.events.Event; import flash.events.MouseEvent; import flash.display.Shape; import flash.text.TextFormat; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.Font; importeer gs. *; import com.tutsplus.active.util.Align; public class ScrollBox breidt Sprite uit private var _container: Sprite; private var _item: Item; private var _itemTextField: TextField; private var _defaultFormat: TextFormat = new TextFormat (); private var _arialRounded: Font = new ArialRounded (); private var _textFieldXPosition: uint = 10; private var _textFieldYPosition: uint = 13; private var _textFieldWidth: uint = 240; private var _textFieldHeight: uint = 25; private var _itemPosition: uint = 49; privé var _mask: Shape; private var _maskWidth: uint = 288; privé var _maskHeight: uint = 290; privé var _paddingTop: uint = 120; private var _background: Shape; private var _maxSpeed: uint = 15; privé var _snelheid: Number; private var _items: XMLList; privé var _stage: Stage; public var scrollModel: ScrollModel; public function ScrollBox (stage: Stage, m: ScrollModel) this.scrollModel = m; this._stage = fase; scrollModel.addEventListener (ScrollModel.MODEL_UPDATE, createRollingScroller); private function 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; if (_container.y <= _mask.height - _container.height + _paddingTop) removeEventListener(Event.ENTER_FRAME, enterFrame); _container.y = _mask.height - _container.height + _paddingTop;
Let op de Align-klassenmethoden die we gebruiken:
Align.centerHorizontallyInStage (_stage, _mask); Align.centerHorizontallyInStage (_stage, _container);
Nu moeten we gewoon de methode gebruiken Align.centerHorizontallyInStage () om elk weergaveobject horizontaal uit te lijnen.
De createRollingScroller methode start pas als we klaar zijn met het opslaan van alle gegevens in de items: XMLList eigendom.
Wijzig de DocumentClass:
pakket import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; import flash.events. *; import com.tutsplus.active.util.Align; public class DocumentClass breidt MovieClip uit private var _pad: MovieClip; public var scrollModel: ScrollModel; public var scrollBox: ScrollBox; openbare functie DocumentClass () config (); scrollModel = nieuw ScrollModel (); scrollModel.load (nieuwe URLRequest ("data.xml")); scrollBox = nieuwe ScrollBox (stage, scrollModel); private function config (): void _pad = new Pad (); addChild (_pad); Align.centerInStage (stage, _pad); Wederom, let op hoe gemakkelijk het is om weergaveobjecten op het podium te centreren met de Align.centerInStage () methode:
Align.centerInStage (stage, _pad);
Dat is het voor nu jongens! Ik heb een aantal interessante onderwerpen in Actionscript 3 besproken en ik hoop dat je dit nuttig vindt. Waarom deze applicatie niet naar een hoger niveau tillen, recfactoren, functionaliteiten toevoegen, enz?
Bedankt voor het volgen. Wees voorzichtig!
