Share
În sfaturile Quick Tip pe Flash Professional din această săptămână vom analiza componentele Tile și TileList.
Deschideți un nou document Flash și setați următoarele proprietăți:
Deschideți fereastra componentelor accesând Meniu> Fereastră> Componente sau apăsând CTRL + F7.
Glisați două etichete, o listă și o componentă TileList în scenă.
În panoul Proprietăți dați primei etichete un nume de instanță a "populationLabel".
(Dacă panoul Proprietăți nu se afișează, accesați fereastra> Proprietăți sau apăsați CTRL + F3.)
Setați eticheta X la 31.00 și Y la 26.00.
În panoul Proprietăți, dați celui de-al doilea etichetă denumirea de instanță "flagsLabel". Setați eticheta X la 31.00 și Y la 238.
Apoi dați Lista numele de instanță "statesList" și setați lista X la 31.00 și Y la 62.00.
În cele din urmă, dați TileList numele instanței "statesTileList" și setați TileList X la 31.00 și Y la 269.00.
Creați un nou fișier ActionScript și denumiți-l Main.as. Vom declara componentele noastre în Main.as, așa că trebuie să dezactivați "instanțele instanței de declarare automată"; avantajul de a face acest lucru este că primiți cod de hinting pentru instanță.
Mergi la Meniu> Fișier> Publicați setările. Click pe Setări lângă Script [Actionscript 3].
Debifați "Declare automat instanțe de scenă".
În Main.as, deschideți declarația de pachet și importați clasele pe care le vom folosi adăugând următorul cod:
pachet import flash.display.MovieClip; import flash.display.Loader; import fl.data.DataProvider; import fl.controls.List; import fl.controls.TileList; import fl.controls.Label; importul flash.events.Event; import flash.text.TextFieldAutoSize; import fl.controls.ScrollBarDirection; import flash.net.URLRequest;
Vom adăuga definiția clasei, făcând ca aceasta să extindă filmul MovieClip și vom stabili funcția constructorului nostru.
Adăugați următoarele la Main.as:
clasa publică principală extinde MovieClip // componenta noastră de listă public states states: List; // componenta noastră TileList publică state statesTileList: TileList; // etichetele noastre public var populationLabel: Label; public var flagsLabel: Etichetă; // Furnizori de date pentru componentele listului var listDp: DataProvider; var tileListDp: DataProvider; // Necesar pentru a încărca o imagine mai mare a pavilionului selectat var picLoader: Loader; funcția publică Main () setupListDataProvider (); setupTileListDataProvider (); setupLabels (); setupList (); setupTileList (); setupLoader ();
Aici vom defini setupListDataProvider (), setupTileListDataProvider (), setupLabels (), setupTileList (), și setupLoader () funcții, așa cum sa menționat anterior în constructor.
În bibliotecă veți găsi clipuri video denumite MC "de stat"; acestea sunt folosite ca o pictogramă pentru componenta Listă. Trebuie să configurați legătura pentru clipurile video pentru a fi adăugate în listă. Faceți acest lucru făcând clic dreapta pe clipul video și selectând "Proprietăți". Aici folosim numele clipului video ca nume de clasă:
Clasa DataProvider ne oferă o modalitate ușoară de a configura datele care vor fi utilizate de componente.
Adăugați următoarele funcții la Main.as:
funcția privată setupListDataProvider (): void // Acest dataprovider va furniza lista noastră component listDp = new DataProvider (); // Aici iconsSource este un filmClip legat în bibliotecă // populația acționează ca o variabilă dinamică pe lista noastră listDp.addItem (iconSource: alabamaMC, etichetă: "Alabama", populație: "4661900"); listDp.addItem (iconSource: alaskaMC, eticheta: "Alaska", populație: "686293"); listDp.addItem (iconSource: arizonaMC, etichetă: "Arizona", populație: "6500180"); listDp.addItem (iconSource: arkansasMC, etichetă: "Arkansas", populație: "2855390"); listDp.addItem (iconSource: californiaMC, etichetă: "California", populație: "36756666"); listDp.addItem (iconSource: coloradoMC, etichetă: "Colorado", populație: "4939456"); listDp.addItem (iconSource: conneticutMC, etichetă: "Conneticut", populație: "3501252"); listDp.addItem (iconSource: delawareMC, etichetă: "Delaware", populație: "873092"); listDp.addItem (iconSource: floridaMC, etichetă: "Florida", populație: "18328340"); listDp.addItem (iconSource: georgiaMC, etichetă: "Georgia", populație: "9685744"); listDp.addItem (iconSource: hawaiiMC, etichetă: "Hawaii", populație: "1288198"); listDp.addItem (iconSource: idahoMC, etichetă: "Idaho", populație: "1523816"); listDp.addItem (iconSource: illinoisMC, etichetă: "Illinois", populație: "12901563"); listDp.addItem (iconSource: indianaMC, eticheta: "Indiana", populație: "6376792"); listDp.addItem (iconSource: iowaMC, etichetă: "Iowa", populație: "3002555"); private function setupTileListDataProvider (): void // Acest datProvider va furniza lista noastră de tile // Sursa este imaginea pe care doriți să o afișați // fullSize acționează ca o variabilă dinamică pentru tileList tileListDp = new DataProvider (); tileListDp.addItem (sursa: "steaguri / alabama.gif", Fullsize: "flagsLarge / alabama.jpg"); tileListDp.addItem (sursa: "steaguri / alaska.gif", Fullsize: "flagsLarge / alaska.jpg"); tileListDp.addItem (sursa: "steaguri / arizona.gif", Fullsize: "flagsLarge / arizona.jpg"); tileListDp.addItem (sursa: "steaguri / california.gif", Fullsize: "flagsLarge / california.jpg"); tileListDp.addItem (sursa: "steaguri / colorado.gif", Fullsize: "flagsLarge / colorado.jpg"); tileListDp.addItem (sursa: "steaguri / connecticut.gif", Fullsize: "flagsLarge / connecticut.jpg"); tileListDp.addItem (sursa: "steaguri / delaware.gif", Fullsize: "flagsLarge / delaware.jpg"); tileListDp.addItem (sursa: "steaguri / florida.gif", Fullsize: "flagsLarge / florida.jpg"); tileListDp.addItem (sursa: "steaguri / georgia.gif", Fullsize: "flagsLarge / georgia.jpg"); tileListDp.addItem (sursa: "steaguri / hawaii.gif", Fullsize: "flagsLarge / hawaii.jpg"); tileListDp.addItem (sursa: "steaguri / idaho.gif", Fullsize: "flagsLarge / idaho.jpg"); tileListDp.addItem (sursa: "steaguri / illinois.gif", Fullsize: "flagsLarge / illinois.jpg"); tileListDp.addItem (sursa: "steaguri / indiana.gif", Fullsize: "flagsLarge / indiana.jpg"); tileListDp.addItem (sursa: "steaguri / iowa.gif", Fullsize: "flagsLarge / iowa.jpg"); funcția privată setupLabels (): void populationLabel.text = "Alegeți un stat"; flagsLabel.text = "Faceți clic pe steag pentru o imagine mai mare"; // Necesită, astfel încât etichetele noastre să se autosizeze pentru a ține toate textul populationLabel.autoSize = populationLabel.autoSize = TextFieldAutoSize.LEFT; flagsLabel.autoSize = flagsLabel.autoSize = TextFieldAutoSize.LEFT; funcția privată setupList (): void // iconField stabilește ce va fi pictograma // Aici folosește iconSource pe care l-am definit în statul nostru dataproviderList.iconField = "iconSource"; statesList.width = 150; // setați vârful rândurilor statesList.rowHeight = 30; // stabilește câte rânduri se afișează în lista ListList.rowCount = 5; // Aici setăm Furnizorul de date al Listei la cel pe care l-am creat anterior stateList.dataProvider = listDp; statesList.addEventListener (Event.CHANGE, getPopulation); funcția privată setupTileList (): void // setați direcția barei de derulare pentru stările TileList stateTileList.direction = ScrollBarDirection.HORIZONTAL; statesTileList.rowHeight = 60; // Câte coloane TileList va avea stateTileList.columnCount = 1; // Câte rânduri să fie afișate în TileList statesTileList.rowCount = 1; statesTileList.width = 400; // Aici am setatDispozitivul de date TileList la cel pe care l-am creat stateTileList.dataProvider = tileListDp; statesTileList.addEventListener (Event.CHANGE, loadPic); funcția privată setupLoader (): void // Acesta este Loaderul pe care îl folosim pentru a încărca pozele mai mari ale steagurilor picLoader = Loader nou (); picLoader.x = 228; picLoader.y = 117; addChild (picLoader);
Aici vom codifica ascultarea evenimentelor atunci când se face clic pe un articol din una din liste.
Adăugați următoarele la Main.as
funcția privată getPopulation (e: Event): void // Aici vom obține populația prin apucarea etichetei (statului) și a populației // The selectedItem.label returnează elementul selectat curent din lista populationLabel.text = "Populația pentru "+ e.target.selectedItem.label +" este "+ e.target.selectedItem.population; funcția privată loadPic (e: Event): void // Aici vom încărca pictura fullSize obținând articolele selectate în prezent fullSize var picLoader.load (nou URLRequest (e.target.selectedItem.fullSize)); // Închideți clasa // Închideți pachetul
Utilizarea componentelor List și TileList este o modalitate foarte bună de a afișa liste de date și imagini.
Veți observa în panoul Component Parameters al componentelor pe care le puteți verifica și selecta anumite proprietăți.
Imaginea de mai sus este pentru Componenta listei, ale căror proprietăți sunt după cum urmează:
Accentsconagua
„allowMultipleSelection: o valoare booleană care indică dacă pot fi selectate simultan mai multe elemente dintr-o listă„dataProvider: modelul de date al listei de elemente care trebuie vizualizate"activat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatorului„horizontalLineScrollSize: o valoare care descrie cantitatea de conținut care urmează să fie derulată, orizontal, când se face clic pe o săgeată de defilare„horizontalPageScrollSize: numărarea pixelilor prin care să se mute degetul mare în bara de navigare orizontală atunci când este apăsată pista de derulare.„horizontalScrollPolicy: valoare care indică starea barei de derulare orizontale„horizontalLineScrollSize: o valoare care descrie cantitatea de conținut care urmează să fie derulată, orizontal, când se face clic pe o săgeată de defilare„horizontalPageScrollSize: numără pixeli prin care să deplaseze degetul mare de parcurgere pe bara de derulare orizontală atunci când este apăsată pista de derulare„verticalScrollPolicy: o valoare care indică starea barei de derulare verticale"vizibil: o valoare booleană care indică dacă instanța componentei este vizibilăProprietățile pentru TileList sunt următoarele:
allowMultipleSelection: o valoare booleană care indică dacă pot fi selectate simultan mai multe elemente dintr-o listăcolumnCount: numărul de coloane care sunt cel puțin parțial vizibile în listălățimea coloanei: "lățimea care se aplică unei coloane din listă, în pixeli.dataProvider: modelul de date al listei de elemente care trebuie vizualizatedirecţie: o valoare care indică dacă componenta TileList se derulează orizontal sau vertical.activat: o valoare booleană care indică dacă componenta poate accepta intrarea utilizatoruluihorizontalLineScrollSize: o valoare care descrie cantitatea de conținut care urmează să fie derulată, orizontal, când se face clic pe o săgeată de defilarehorizontalPageScrollSize: numărarea pixelilor prin care să se mute degetul mare în bara de navigare orizontală atunci când este apăsată pista de derulare.ROWCOUNT: numărul de rânduri care sunt cel puțin parțial vizibile în listă.înălțimea rândului: înălțimea care este aplicată fiecărui rând din listă, în pixeli.scrollPolicy: "politica de scroll pentru componenta TileList.verticalLineScrollSize: o valoare care descrie câți pixeli vor fi derulați vertical când se face clic pe o săgeată de defilare.verticalPageScrollSize: numărul pixelilor prin care să mutați degetul mare pe bara verticală de navigare atunci când este apăsată pista de derulare ... vizibil: o valoare booleană care indică dacă instanța componentei este vizibilăFișierele de ajutor sunt un loc minunat pentru a afla mai multe despre aceste proprietăți.
Pentru a vedea proprietățile pentru Etichete, asigurați-vă că verificați Sfatul rapid de pe componentele butonului și al etichetei.
Vă mulțumim pentru http://www.state-flags-usa.com pentru că mi-a permis să folosesc imaginile lor de pavilion.
Vă mulțumim pentru lectură și continuați să urmăriți tutorialele componente viitoare!
