Accentsconagua

Snabb Introduktion Flash List och TileList Komponenter

Koda
Share

I den här veckans Quick Tip on Flash Professional-verktyg kommer vi att titta på komponenten Tile and TileList.

Steg 1: Ställa in dokumentet

Öppna ett nytt Flash-dokument och ställ in följande egenskaper:

  • Dokumentstorlek: 550x400px
  • Bakgrundsfärg: #FFFFFF

Steg 2: Lägg till komponenter till scenen

Öppna komponentfönstret genom att gå till Meny> Fönster> Komponenter eller tryck CTRL + F7.

Dra två etiketter, en lista och en TileList-komponent till scenen.

På Egenskaper-panelen ge den första etiketten ett förekomstnamn för "populationLabel".

(Om Egenskaper-panelen inte visas går du till Fönster> Egenskaper eller trycker på CTRL + F3.)

Ställ etikettens X till 31.00 och dess Y till 26.00.

På fliken Egenskaper ger den andra etiketten förekomstnamnet "flagsLabel". Ange etiketten X till 31.00 och dess Y till 238.

Ge sedan listan förekomstnamnet "statesList" och sätt listan X till 31.00 och dess Y till 62.00.

Slutligen ge TileList förekomstnamnet "statesTileList" och ställ in TileList X till 31.00 och dess Y till 269.00.

Steg 3: Importera klasserna

Skapa en ny ActionScript-fil och namnge den Main.as. Vi kommer att förklara våra komponenter i Main.as, så vi måste stänga av "auto deklarera scenen instanser"; Fördelen med att göra detta är att du får koden antyder för förekomsten.

Gå till Meny> Arkiv> Publicera inställningar. Klicka på inställningar bredvid Skript [Actionscript 3].

Avmarkera "Automatisk deklarera sceninstanser".

I Main.as öppnar du paketdeklarationen och importerar de klasser vi ska använda genom att lägga till följande kod:

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

Steg 4: Ställ in huvudklassen

Vi lägger till klassdefinitionen, så att den förlänger MovieClip, och vi ställer in vår konstruktörsfunktion.

Lägg till följande i Main.as:

 public class Main utökar MovieClip // vår List Component public var statesList: List; // vår TileList Component public var statesTileList: TileList; // våra etiketter offentliga var populationLabel: Etikett; public var flagsLabel: Etikett; // Dataleverantörer för listan komponenter var listDp: DataProvider; var tileListDp: DataProvider; // Behövs att ladda en större bild av den valda flaggan var picLoader: Loader; allmän funktion Main () setupListDataProvider (); setupTileListDataProvider (); setupLabels (); setupList (); setupTileList (); setupLoader ();

Steg 5: Funktioner

Här definierar vi setupListDataProvider (), setupTileListDataProvider (), setupLabels (), setupTileList (), och setupLoader () funktioner, som tidigare nämnts i konstruktören.

I biblioteket hittar du filmklipp som heter "state" MC; Dessa används som en ikon för listkomponenten. Du måste ange länken för filmklippet för att de ska läggas till i listan. Gör detta genom att högerklicka på filmklippet och välj "Egenskaper". Här använder vi namnet på filmklippet som klassnamn:

DataProvider-klassen ger oss ett enkelt sätt att konfigurera data som ska användas av komponenter.

Lägg till följande funktioner i Main.as:

 privat funktion setupListDataProvider (): void // Denna dataleverantör kommer att tillhandahålla vår lista komponentlistanDp = ny DataProvider (); // Här är iconsSource en movieClip länkad i biblioteket // befolkningen fungerar som en dynamisk variabel i vår listlistaDp.addItem (iconSource: alabamaMC, etikett: "Alabama", befolkning: "4661900"); listDp.addItem (iconSource: alaskaMC, etikett: "Alaska", population: "686293"); listDp.addItem (iconSource: arizonaMC, etikett: "Arizona", befolkning: "6500180"); listDp.addItem (iconSource: arkansasMC, etikett: "Arkansas", population: "2855390"); listDp.addItem (iconSource: californiaMC, etikett: "California", population: "36756666"); listDp.addItem (iconSource: coloradoMC, etikett: "Colorado", population: "4939456"); listDp.addItem (iconSource: conneticutMC, etikett: "Conneticut", population: "3501252"); listDp.addItem (iconSource: delawareMC, etikett: "Delaware", befolkning: "873092"); listDp.addItem (iconSource: floridaMC, etikett: "Florida", befolkning: "18328340"); listDp.addItem (iconSource: georgiaMC, etikett: "Georgia", population: "9685744"); listDp.addItem (iconSource: hawaiiMC, etikett: "Hawaii", befolkning: "1288198"); listDp.addItem (iconSource: idahoMC, etikett: "Idaho", population: "1523816"); listDp.addItem (iconSource: illinoisMC, etikett: "Illinois", population: "12901563"); listDp.addItem (iconSource: indianaMC, etikett: "Indiana", population: "6376792"); listDp.addItem (iconSource: iowaMC, etikett: "Iowa", befolkning: "3002555");  privat funktion setupTileListDataProvider (): void // Den här dataleverantören kommer att tillhandahålla vår tilelist // Källan är den bilden du vill visa // fullSize fungerar som en dynamisk variabel till vår tileList tileListDp = new DataProvider (); tileListDp.addItem (källa: "flaggor / alabama.gif", Fullsize: "flagsLarge / alabama.jpg"); tileListDp.addItem (källa: "flaggor / alaska.gif", Fullsize: "flagsLarge / alaska.jpg"); tileListDp.addItem (källa: "flaggor / arizona.gif", Fullsize: "flagsLarge / arizona.jpg"); tileListDp.addItem (källa: "flaggor / california.gif", Fullsize: "flagsLarge / california.jpg"); tileListDp.addItem (källa: "flaggor / colorado.gif", Fullsize: "flagsLarge / colorado.jpg"); tileListDp.addItem (källa: "flaggor / connecticut.gif", Fullsize: "flagsLarge / connecticut.jpg"); tileListDp.addItem (källa: "flaggor / delaware.gif", Fullsize: "flagsLarge / delaware.jpg"); tileListDp.addItem (källa: "flaggor / florida.gif", Fullsize: "flagsLarge / florida.jpg"); tileListDp.addItem (källa: "flaggor / georgia.gif", Fullsize: "flagsLarge / georgia.jpg"); tileListDp.addItem (källa: "flaggor / hawaii.gif", Fullsize: "flagsLarge / hawaii.jpg"); tileListDp.addItem (källa: "flaggor / idaho.gif", Fullsize: "flagsLarge / idaho.jpg"); tileListDp.addItem (källa: "flaggor / illinois.gif", Fullsize: "flagsLarge / illinois.jpg"); tileListDp.addItem (källa: "flaggor / indiana.gif", Fullsize: "flagsLarge / indiana.jpg"); tileListDp.addItem (källa: "flaggor / iowa.gif", Fullsize: "flagsLarge / iowa.jpg");  privat funktion setupLabels (): void populationLabel.text = "Välj en stat"; flagsLabel.text = "Klicka på flagga för större bild"; // Behövs så att våra etiketter autosize för att hålla hela texten populationLabel.autoSize = populationLabel.autoSize = TextFieldAutoSize.LEFT; flagsLabel.autoSize = flagsLabel.autoSize = TextFieldAutoSize.LEFT;  privatfunktion setupList (): void // IconField anger vad ikonen ska vara // Här använder den iconSource som vi definierade i vår dataprovider statesList.iconField = "iconSource"; statesList.width = 150; // Ställ in höjden av raden statesList.rowHeight = 30; // anger hur många rader som visas i List statesList.rowCount = 5; // Här ställer vi listans dataProvider till den vi skapade tidigare statesList.dataProvider = listDp; statesList.addEventListener (Event.CHANGE, getPopulation);  privat funktion setupTileList (): void // ställa in scrollBar-riktningen för tegellistan statesTileList.direction = ScrollBarDirection.HORIZONTAL; statesTileList.rowHeight = 60; // Hur många kolumner som TileList kommer att ha statesTileList.columnCount = 1; // Hur många rader som ska visas i TileList statesTileList.rowCount = 1; statesTileList.width = 400; // Här ställer vi TileList's data Provider till den vi skapade statesTileList.dataProvider = tileListDp; statesTileList.addEventListener (Event.CHANGE, loadPic);  privat funktion setupLoader (): void // Detta är den Loader vi använder för att ladda de större bilderna i flaggarna picLoader = New Loader (); picLoader.x = 228; picLoader.y = 117; addChild (picLoader);

Steg 6: Händelselysare

Här kodar vi våra händelselyttare för när ett objekt i någon av listorna klickas.

Lägg till följande på Main.as

 privat funktion getPopulation (e: Event): void // Här får vi befolkningen genom att ta tag i etiketten (staten) och befolkningen // Den selectedItem.label returnerar det aktuella valda objektet i listan populationLabel.text = "Befolkningen för "+ e.target.selectedItem.label +" är "+ e.target.selectedItem.population;  Private Function loadPic (e: Event): void // Här laddar vi fullSize-bilden genom att få de aktuella valda objekten fullSize var picLoader.load (ny URLRequest (e.target.selectedItem.fullSize));  // Stäng ut klassen // Stäng ut paketet

Slutsats

Att använda listorna och TileList-komponenterna är ett bra sätt att visa listor över data och bilder.

Du kommer att märka i panelen Komponentparametrar av komponenterna som du kan kolla och välja vissa egenskaper.

Ovanstående bild är för listkomponenten, vars egenskaper är som följer:

  • "allowMultipleSelection: ett booleskt värde som anger om mer än ett listobjekt kan väljas åt gången
  • "dataprovider: datamodellen i listan över objekt som ska visas
  • "aktiverad: ett booleskt värde som anger om komponenten kan acceptera användarinmatning
  • "horizon: ett värde som beskriver hur mycket innehåll som ska rullas horisontellt när en rullpilen klickas
  • "horizontalPageScrollSize: pixelantalet för att flytta rullningstummen på den horisontella rullningsfältet när rullningsfältet trycks ned.
  • "horizontalScrollPolicy: värde som anger läget för den horisontella rullningsfältet
  • "horizon: ett värde som beskriver hur mycket innehåll som ska rullas horisontellt när en rullpilen klickas
  • "horizontalPageScrollSize: han räknar med pixlar för att flytta rullningstummen på den horisontella rullningsfältet när rullningsfältet trycks ned
  • "vertical: ett värde som anger tillståndet för den vertikala rullningsfältet
  • "synlig: ett booleskt värde som anger om komponentinstansen är synlig

Egenskaperna för TileList är följande:

  • allowMultipleSelection: ett booleskt värde som anger om mer än ett listobjekt kan väljas åt gången
  • column: antalet kolumner som åtminstone delvis är synliga i listan
  • kolumnbredd: "bredden som appliceras på en kolumn i listan, i pixlar.
  • dataprovider: datamodellen i listan över objekt som ska visas
  • riktning: ett värde som anger om komponenten TileList rullar horisontellt eller vertikalt.
  • aktiverad: ett booleskt värde som anger om komponenten kan acceptera användarinmatning
  • horizon: ett värde som beskriver hur mycket innehåll som ska rullas horisontellt när en rullpilen klickas
  • horizontalPageScrollSize: pixelantalet för att flytta rullningstummen på den horisontella rullningsfältet när rullningsfältet trycks ned.
  • rowCount: antalet rader som är åtminstone delvis synliga i listan.
  • Radhöjd: höjden som tillämpas på varje rad i listan, i pixlar.
  • scrollPolicy: "rullningspolicyen för komponenten TileList.
  • vertical: ett värde som beskriver hur många pixlar som ska rullas vertikalt när en rullpilen klickas.
  • vertical: antalet pixlar som ska flytta rullningstummen på den vertikala rullningsfältet när rullningsfältet trycks ned ...
  • synlig: ett booleskt värde som anger om komponentinstansen är synlig

Hjälpfilerna är ett bra ställe att lära dig mer om dessa egenskaper.

För att se egenskaperna för Etiketter, se till att du snabbt kolla på Snabbtipset på knapparna och etikettkomponenterna.

Tack till http://www.state-flags-usa.com för att tillåta mig att använda sina flaggbilder.

Tack för att du läser och fortsätter att titta på kommande komponenttutorials!

Koda
×