Accentsconagua

Hurtig introduksjon Flash List og TileList Components

Kode
Share

I denne ukens Quick Tip on Flash Professional-verktøy vil vi se på komponentene Tile and TileList.

Trinn 1: Sette opp dokumentet

Åpne et nytt Flash-dokument og angi følgende egenskaper:

  • Dokumentstørrelse: 550x400px
  • Bakgrunnsfarge: #FFFFFF

Trinn 2: Legg komponenter til scenen

Åpne komponentvinduet ved å gå til Meny> Vindu> Komponenter eller trykk CTRL + F7.

Dra to etiketter, en liste og en TileList-komponent til scenen.

I Egenskaper-panelet gir den første etiketten et forekomstnavn på "populationLabel".

(Hvis Egenskaper-panelet ikke vises, gå til Vindu> Egenskaper eller trykk CTRL + F3.)

Sett etikettens X til 31.00 og dets Y til 26.00.

I Egenskaper-panelet gir den andre Etiketten forekomstnavnet "flagsLabel". Sett etiketten er X til 31,00 og dens Y til 238.

Gi deretter listen forekomstnavnet "statesList" og sett listen X til 31.00 og dets Y til 62.00.

Til slutt, gi TileList forekomstnavnet "statesTileList" og sett TileList's X til 31.00 og dets Y til 269.00.

Trinn 3: Importere klassene

Opprett en ny ActionScript-fil og gi den navnet Main.as. Vi vil erklære komponentene våre i Main.as, så vi må slå av "auto deklarere scenevaner"; Fordelen med å gjøre dette er at du får koden hinting for forekomsten.

Gå til Meny> Fil> Publiser innstillinger. Klikk på innstillinger ved siden av Skript [Handlingsskrift 3].

Fjern merket for "Oppgi automatisk forekomst av forekomster".

I Main.as åpner du pakkedeklarasjonen og importerer klassene vi skal bruke ved å legge til følgende kode:

 pakke import flash.display.MovieClip; importer flash.display.Loader; importere fl.data.DataProvider; importere fl.controls.List; importer fl.controls.TileList; importere fl.controls.Label; importere flash.events.Event; importere flash.text.TextFieldAutoSize; importere fl.controls.ScrollBarDirection; importere flash.net.URLRequest;

Trinn 4: Konfigurer hovedklassen

Vi legger til klassedepartementet, slik at det utvider MovieClip, og vi vil sette opp vår konstruktørfunksjon.

Legg til følgende til Main.as:

 offentlig klasse Main utvider MovieClip // vår List Component public var statesList: List; // vår TileList Component public var statesTileList: TileList; // Våre etiketter offentlige var populationLabel: Etikett; public var flagsLabel: Etikett; // Dataleverandører for listen komponenter var listDp: DataProvider; var tileListDp: DataProvider; // Trenger du å laste et større bilde av det valgte flagget, var picLoader: Loader; offentlig funksjon Main () setupListDataProvider (); setupTileListDataProvider (); setupLabels (); setupList (); setupTileList (); setupLoader ();

Trinn 5: Funksjoner

Her definerer vi setupListDataProvider (), setupTileListDataProvider (), setupLabels (), setupTileList (), og setupLoader () Funksjoner, som nevnt tidligere i konstruktøren.

I biblioteket finner du filmklipp kalt "state" MC; Disse brukes som et ikon for listekomponenten. Du må sette opp koblingen for filmklippene for at de skal legges til listen. Gjør dette ved å høyreklikke på filmklippet og velge "Egenskaper". Her bruker vi navnet på filmklippet som klassenavnet:

DataProvider-klassen gir oss en enkel måte å sette opp data som skal brukes av komponenter.

Legg til følgende funksjoner i Main.as:

 privat funksjon setupListDataProvider (): void // Denne dataprodusenten vil levere vår Liste komponentlisteDp = ny DataProvider (); // Her er ikoneneSource en filmClip koblet i biblioteket // befolkningen virker som en dynamisk variabel i vår liste listeDp.addItem (iconSource: alabamaMC, etikett: "Alabama", befolkning: "4661900"); listDp.addItem (iconSource: alaskaMC, etikett: "Alaska", befolkning: "686293"); listDp.addItem (iconSource: arizonaMC, etikett: "Arizona", befolkning: "6500180"); listDp.addItem (iconSource: arkansasMC, etikett: "Arkansas", befolkning: "2855390"); listDp.addItem (iconSource: californiaMC, etikett: "California", befolkning: "36756666"); listDp.addItem (iconSource: coloradoMC, etikett: "Colorado", befolkning: "4939456"); listDp.addItem (iconSource: conneticutMC, etikett: "Conneticut", befolkning: "3501252"); listDp.addItem (iconSource: delawareMC, etikett: "Delaware", befolkning: "873092"); listDp.addItem (iconSource: floridaMC, etikett: "Florida", befolkning: "18328340"); listDp.addItem (iconSource: georgiaMC, etikett: "Georgia", befolkning: "9685744"); listDp.addItem (iconSource: hawaiiMC, etikett: "Hawaii", befolkning: "1288198"); listDp.addItem (iconSource: idahoMC, etikett: "Idaho", befolkning: "1523816"); listDp.addItem (iconSource: illinoisMC, etikett: "Illinois", befolkning: "12901563"); listDp.addItem (iconSource: indianaMC, etikett: "Indiana", befolkning: "6376792"); listDp.addItem (iconSource: iowaMC, etikett: "Iowa", befolkning: "3002555");  privat funksjon setupTileListDataProvider (): void // Denne dataProvider vil forsyne vår tilelist // Kilden er dem bildet du vil vise // fullSize fungerer som en dynamisk variabel til våre tileList tileListDp = new DataProvider (); tileListDp.addItem (kilde: "flagg / alabama.gif", full størrelse: "flagsLarge / alabama.jpg"); tileListDp.addItem (kilde: "flagg / alaska.gif", full størrelse: "flagsLarge / alaska.jpg"); tileListDp.addItem (kilde: "flagg / arizona.gif", full størrelse: "flagsLarge / arizona.jpg"); tileListDp.addItem (kilde: "flagg / california.gif", full størrelse: "flagsLarge / california.jpg"); tileListDp.addItem (kilde: "flagg / colorado.gif", full størrelse: "flagsLarge / colorado.jpg"); tileListDp.addItem (kilde: "flagg / connecticut.gif", full størrelse: "flagsLarge / connecticut.jpg"); tileListDp.addItem (kilde: "flagg / delaware.gif", full størrelse: "flagsLarge / delaware.jpg"); tileListDp.addItem (kilde: "flagg / florida.gif", full størrelse: "flagsLarge / florida.jpg"); tileListDp.addItem (kilde: "flagg / georgia.gif", full størrelse: "flagsLarge / georgia.jpg"); tileListDp.addItem (kilde: "flagg / hawaii.gif", full størrelse: "flagsLarge / hawaii.jpg"); tileListDp.addItem (kilde: "flagg / idaho.gif", full størrelse: "flagsLarge / idaho.jpg"); tileListDp.addItem (kilde: "flagg / illinois.gif", full størrelse: "flagsLarge / illinois.jpg"); tileListDp.addItem (kilde: "flagg / indiana.gif", full størrelse: "flagsLarge / indiana.jpg"); tileListDp.addItem (kilde: "flagg / iowa.gif", full størrelse: "flagsLarge / iowa.jpg");  privat funksjon setupLabels (): void populationLabel.text = "Velg en stat"; flagsLabel.text = "Klikk på flagg for større bilde"; // Trengs, slik at våre etiketter autosize for å holde hele teksten populationLabel.autoSize = populationLabel.autoSize = TextFieldAutoSize.LEFT; flagsLabel.autoSize = flagsLabel.autoSize = TextFieldAutoSize.LEFT;  private funksjon setupList (): void // Ikonet feltet angir hva ikonet skal være // Her bruker det ikonSource som vi definerte i vår dataprovider statesList.iconField = "iconSource"; statesList.width = 150; // angi høyden av radene statesList.rowHeight = 30; // angir hvor mange rader som vises i listen statesList.rowCount = 5; // Her satt vi listens dataProvider til den vi opprettet tidligere statesList.dataProvider = listDp; statesList.addEventListener (Event.CHANGE, getPopulation);  privat funksjon setupTileList (): void // angi retningen for scrollBar for flislisten statesTileList.direction = ScrollBarDirection.HORIZONTAL; statesTileList.rowHeight = 60; // Hvor mange kolonner vil TileList'en ha statesTileList.columnCount = 1; // Hvor mange rader som skal vises i TileList statesTileList.rowCount = 1; statesTileList.width = 400; // Her satt vi TileList's data Provider til den vi opprettet statesTileList.dataProvider = tileListDp; statesTileList.addEventListener (Event.CHANGE, loadPic);  privat funksjon setupLoader (): void // Dette er Loader vi bruker for å laste de større bildene av flaggene picLoader = new Loader (); picLoader.x = 228; picLoader.y = 117; addChild (picLoader);

Trinn 6: Event Lyttere

Her kodes vi for våre Event Lyttere for når et element i en av listene klikkes.

Legg til følgende til Main.as

 privat funksjon getPopulation (e: Event): void // Her får vi befolkningen ved å ta tak i etiketten (staten) og befolkningen // Den valgteItem.label returnerer den valgte elementet i listen populationLabel.text = "Befolkningen for "+ e.target.selectedItem.label +" er "+ e.target.selectedItem.population;  Private funksjon loadPic (e: Event): void // Her legger vi inn fullSize bilde ved å få de valgte elementene fullSize var picLoader.load (ny URLRequest (e.target.selectedItem.fullSize));  // Lukk klassen // Lukk pakken

Konklusjon

Bruke List og TileList-komponentene er en fin måte å vise lister over data og bilder på.

Du vil legge merke til i komponentparameterepanelet på komponentene som du kan sjekke og velge bestemte egenskaper.

Bildet ovenfor er for listekomponenten, egenskapene for hvilke er som følger:

  • "allowMultipleSelection: en boolsk verdi som angir om flere listemner kan velges samtidig
  • "dataprovider: Datamodellen på listen over elementer som skal vises
  • "aktivert: en boolsk verdi som indikerer om komponenten kan godta brukerinngang
  • "horizontalLineScrollSize: en verdi som beskriver mengden innhold som skal rulles horisontalt når en rullepilen klikkes
  • "horizontalPageScrollSize: Antall piksler for å flytte rulletrimmen på den horisontale rullefeltet når rullefeltet spores.
  • "horizontalScrollPolicy: verdi som angir tilstanden til den horisontale rullefeltet
  • "horizontalLineScrollSize: en verdi som beskriver mengden innhold som skal rulles horisontalt når en rullepilen klikkes
  • "horizontalPageScrollSize: han teller av piksler for å flytte rulletrimmen på den horisontale rullefeltet når rullefeltet spores
  • "verticalScrollPolicy: en verdi som angir tilstanden til den vertikale rullefeltet
  • "synlig: en boolsk verdi som angir om komponenteksemplet er synlig

Egenskapene til TileList er som følger:

  • allowMultipleSelection: en boolsk verdi som angir om flere listemner kan velges samtidig
  • Kolonner: Antall kolonner som er minst delvis synlige i listen
  • kolonnebredde: "Bredden som brukes på en kolonne i listen, i piksler.
  • dataprovider: Datamodellen på listen over elementer som skal vises
  • retning: en verdi som indikerer om komponenten TileList ruller horisontalt eller vertikalt.
  • aktivert: en boolsk verdi som indikerer om komponenten kan godta brukerinngang
  • horizontalLineScrollSize: en verdi som beskriver mengden innhold som skal rulles horisontalt når en rullepilen klikkes
  • horizontalPageScrollSize: Antall piksler for å flytte rulletrimmen på den horisontale rullefeltet når rullefeltet spores.
  • ROWCOUNT: Antall rader som er minst delvis synlige i listen.
  • rowHeight: høyden som brukes på hver rad i listen, i piksler.
  • scrollPolicy: "Rullepolitikken for komponenten TileList.
  • verticalLineScrollSize: en verdi som beskriver hvor mange piksler som skal rulles vertikalt når en rullepilen klikkes.
  • verticalPageScrollSize: Antallet piksler for å flytte rulletrimmen på den vertikale rullefeltet når rullefeltet blir trykket ...
  • synlig: en boolsk verdi som angir om komponenteksemplet er synlig

Hjelpefilene er et flott sted å lære mer om disse egenskapene.

For å se egenskapene for etiketter, må du sjekke ut Hurtig Tips på knappene og etikettkomponentene.

Takk til http://www.state-flags-usa.com for å la meg bruke flaggbildene sine.

Takk for at du leser og fortsetter å se etter kommende komponentveiledninger!

Kode
×