Vår søknad vil bruke en beholder for å holde alle elementene sammen. Så skal vi lage en ny MovieClip i document. Erklære eiendommen:
private Var _container: MovieClip;

Inne konstruktøren, på slutten:
_container = new MovieClip (); addChild (_container);

Legg til følgende import uttalelser:
import flash.events.Event, import flash.net.URLRequest, import flash.net.URLLoader;

Erklærer følgende egenskaper:
offentlig Var loader: URLLoader; offentlig Var data: XML, offentlige Var poster: XMLList;

Så gjennomføre følgende metoder:
privat funksjon dataload (): void {loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (ny URLRequest ("data.xml"));} private funksjon dataLoaded (hendelse: Hendelse): void {trace (". data Loaded");}

Til slutt legger denne metoden kallet til konstruktøren:
dataload ();

Så langt har vi:
pakke {import flash.display.MovieClip; import flash.events.Event; import flash.net.URLRequest; import flash.net.URLLoader; public class document strekker MovieClip {private Var _pad: MovieClip; private Var _container: MovieClip; offentlig Var loader: URLLoader; offentlig funksjon document () {_pad = new Pad (); addChild (_pad); _pad.x = stage.stageWidth /2 - _pad.width /2; _pad.y = stage.stageHeight /2 - _pad.height /2; _container = new MovieClip (); addChild (_container); dataload (); } Private funksjon dataload (): void {loader = new URLLoader (); loader.addEventListener (Event.COMPLETE, dataLoaded); loader.load (ny URLRequest ("data.xml")); } Private funksjon dataLoaded (hendelse: Hendelse): void {trace (ny XML (event.target.data.toString ())); }}}

Test programmet og du skal se, i konsollen, alle XML-data. La oss gå videre

Legg til følgende import uttalelser.
Import flash.text.TextFormat, import flash.text.TextField; import flash .text.TextFieldAutoSize, import flash.text.Font;

Legg disse nye variabler:
offentlig Var data: XML, offentlige Var poster: XMLList; private Var _item: Element; private Var _itemTextField: Textfield, private Var _defaultFormat : tekstformat = new tekstformat (); privat Var _arialRounded: Font = new ArialRounded (); privat Var _textFieldXPosition: uint = 10; privat Var _textFieldYPosition: uint = 13; privat Var _textFieldWidth: uint = 240; privat Var _textFieldHeight: uint = 25; private Var _itemPosition: uint = 49;

Oppdater dataLoaded metode:
privat funksjon dataLoaded (hendelse: Hendelse): void {//Denne eiendommen har lastet xml data data = new XML (event.target.data ); //Element eiendommen innehar alle gjentakende element elementer elementer = data.item; //Dette gjentar enn hvert element for (var i = 0, jeg < items.length (); i ++) {//husker mcItem? Vi er forekomster som MovieClip _item = ny vare (); //Setter Over lag MovieClip alfa til 0 _item.item_btn_over.alpha = 0; //Oppretter Element tekstfeltet _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 = elementer [i] .toString (); //Legger tekstfeltet til elementets visningsliste _item.addChild (_itemTextField); //Stillinger hvert element vertikalt basert på iterasjon verdi _item.y = i * _itemPosition; _item.buttonMode = true; _item.mouseChildren = false; //Legger til elementet i beholderen visningslisten _container.addChild (_item); }}

Nå har vi opprettet 200 + knapper og sette dem på skjermen. Hvis du kjører programmet vil du legge merke til at denne listen begynner på posisjon (0, 0) og fyller ned hele scenen. Det er ikke det vi ønsker så la oss håndtere det i neste trinn

La oss lage en form for å maskere listen, slik at vi bare ser den synlige Området, som i bildet fra før:

I slutten vi vil sentrere maske og beholderen. Så, legge til en annen import uttalelse:
import flash.display.Shape;

Egenskaper:
private Var _mask: Shape; private Var _maskWidth: uint = 288; privat Var _maskHeight: uint = 290; private Var _paddingTop : uint = 120;

Og ... I dataLoaded metoden på slutten, legg til følgende kode:
_mask = new Shape (); _ mask.graphics.beginFill (0xff0000); _ mask.graphics.drawRect ( 0, 0, _maskWidth, _maskHeight); _ mask.graphics.endFill (); //sentrum masken horisontalt på stage_mask.x = stage.stageWidth /2 - _container.width /2; //stillinger masken vertikalt på 120px fra den top_mask.y = _paddingTop; addChild (_mask); //tildeler masken til container_container.mask = _mask; //sentre beholderen horisontalt på stage_container.x = stage.stageWidth /2 - _container.width /2; //posisjonerer beholderen vertikalt på et visst value_container.y = _paddingTop;

Bare en liten forbedring ... Akkurat nå vår container har mye hull fordi det er en margin mellom hvert element. Så la oss gi den en bakgrunn for å unngå uønskede resultater når du lytter til arrangementer

Eiendom:
private Var _background. Shape;

Fortsatt i dataLoaded metoden, under den eksisterende koden:
_background = new Shape (); _ background.graphics.beginFill (0xFFFFFF); _ background.graphics.drawRect (0, 0, _container.width, _container.height); _ background.graphics.endFill (); _ container.addChildAt (_background, 0);

Som du sikkert vet, lyttere for hendelser. Her vil vi bruke en for mouse arrangementet og en annen for mouseout hendelsen

Legg til dette på slutten av dataLoaded metode.
_container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); _ container.addEventListener (MouseEvent.MOUSE_OUT, movingOut);

La oss nå gjennomføre movingOver og movingOut metoder:
privat funksjon movingOver (event: MouseEvent): void {_container.removeEventListener (MouseEvent.MOUSE_OVER, movingOver); } private funksjon movingOut (event: MouseEvent): void {_container.addEventListener (MouseEvent.MOUSE_OVER, movingOver); }

Nå kan vi lytte til arrangementer, mer spesifikt MOUSE_OVER og MOUSE_OUT. Hendelser er like meldinger som varsler ethvert objekt venter på den samme hendelsen. "Budskapet" sender bare at hendelsen har funnet sted. I dette tilfellet _container objektet vil bli lyttet til mouse og mouseout hendelser. Når de finner sted den _container har evnen til å reagere deretter.

Så første vi tildele arrangementet lyttere til _container objektet og deretter senere, hvis _container er svevde over mouse lytteren blir fjernet. Tvert imot, når musen er ute av _container protestere musen over lytteren er tildelt igjen til _container

Arrangementet flyt er en kraftig mekanisme som gjør at programmerer for å håndtere flere objekter med bare én hendelse lytteren. Så, som du sikkert forestille deg, _container.addEventListener vil "lytte" for hendelser som involverer beholderen, elementene og bakgrunnen form - det vil si, container og alt inni den. Du kan kontrollere dette ved å legge inn følgende kode i movingOver Hotell og movingOut
metoder:
trace (event.target);

Dette vil spore objekt som sendes hendelsen.