Share
In de Quick Tip on Flash Professional-tools van deze week zullen we de componenten Tile en TileList bekijken.
Open een nieuw Flash-document en stel de volgende eigenschappen in:
Open het componentenvenster door naar te gaan Menu> Venster> Componenten of druk op CTRL + F7.
Sleep twee labels, een lijst en een TileList-component naar het werkgebied.
Geef in het venster Eigenschappen het eerste label een instantienaam van "populationLabel".
(Als het deelvenster Eigenschappen niet wordt weergegeven, gaat u naar Venster> Eigenschappen of drukt u op CTRL + F3.)
Stel de X van het label in op 31,00 en de Y op 26,00.
Geef in het venster Eigenschappen het tweede label de naam van het exemplaar 'flagsLabel'. Stel de X van de Label in op 31,00 en de Y op 238.
Geef vervolgens de lijst de instantienaam "statesList" en stel de lijst in op X tot 31.00 en de Y op 62.00.
Geef ten slotte de TileList de instantienaam "statesTileList" en stel de X van de TileList in op 31.00 en de Y op 269.00.
Maak een nieuw ActionScript-bestand en noem het Main.as. We zullen onze componenten in Main.as aangeven, dus we moeten "auto declare stage instances" uitschakelen; het voordeel hiervan is dat je code-hinting voor de instantie krijgt.
Ga naar Menu> Bestand> Publicatie-instellingen. Klik op instellingen naast Script [Actionscript 3].
Verwijder het vinkje bij "Stadium-instanties automatisch declareren".
Open in Main.as de pakketverklaring en importeer de klassen die we gaan gebruiken door de volgende code toe te voegen:
pakket import flash.display.MovieClip; import flash.display.Loader; import fl.data.DataProvider; import fl.controls.List; import fl.controls.TileList; import fl.controls.Label; import flash.events.Event; import flash.text.TextFieldAutoSize; import fl.controls.ScrollBarDirection; import flash.net.URLRequest;
We voegen de klassedefinitie toe, waardoor MovieClip wordt verlengd en we onze constructorfunctie instellen.
Voeg het volgende toe aan Main.as:
public class Main breidt MovieClip uit // onze lijstcomponent public var statesList: List; // onze TileList-component public var statesTileList: TileList; // onze Labels public var populationLabel: Label; public var flagsLabel: Label; // Gegevensproviders voor de lijstcomponenten var listDp: DataProvider; var tileListDp: DataProvider; // Nodig om een grotere afbeelding van de geselecteerde vlag te laden var picLoader: Loader; public function Main () setupListDataProvider (); setupTileListDataProvider (); setupLabels (); stellijstin (); setupTileList (); setupLoader ();
Hier zullen we het definiëren setupListDataProvider (), setupTileListDataProvider (), setupLabels (), setupTileList (), en setupLoader () functies, zoals eerder vermeld in de constructor.
In de bibliotheek vindt u filmclips met de naam "state" MC; deze worden gebruikt als een pictogram voor het onderdeel Lijst. U moet de koppeling voor de filmclips instellen zodat deze aan de lijst kunnen worden toegevoegd. Doe dit door met de rechtermuisknop op de filmclip te klikken en 'Eigenschappen' te selecteren. Hier gebruiken we de naam van de filmclip als de klassenaam:
De DataProvider-klasse biedt ons een eenvoudige manier om gegevens in te stellen die door componenten worden gebruikt.
Voeg de volgende functies toe aan Main.as:
private function setupListDataProvider (): void // Deze dataprovider zal onze List-componentenlijst leverenDp = new DataProvider (); // Hier is de iconsSource een movieClip gekoppeld in de bibliotheek // populatie gedraagt zich als een dynamische variabele in onze lijst listDp.addItem (iconSource: alabamaMC, label: "Alabama", population: "4661900"); listDp.addItem (iconSource: alaskaMC, label: "Alaska", aantal inwoners: "686293"); listDp.addItem (iconSource: arizonaMC, label: "Arizona", population: "6500180"); listDp.addItem (iconBron: arkansasMC, label: "Arkansas", populatie: "2855390"); listDp.addItem (iconBron: californiaMC, label: "California", population: "36756666"); listDp.addItem (iconSource: coloradoMC, label: "Colorado", population: "4939456"); listDp.addItem (iconBron: conneticutMC, label: "Conneticut", population: "3501252"); listDp.addItem (iconSource: delawareMC, label: "Delaware", population: "873092"); listDp.addItem (iconBron: floridaMC, label: "Florida", populatie: "18328340"); listDp.addItem (iconSource: georgiaMC, label: "Georgia", population: "9685744"); listDp.addItem (iconBron: hawaiiMC, label: "Hawaii", aantal inwoners: "1288198"); listDp.addItem (iconSource: idahoMC, label: "Idaho", population: "1523816"); listDp.addItem (iconBron: illinoisMC, label: "Illinois", populatie: "12901563"); listDp.addItem (iconBron: indianaMC, label: "Indiana", populatie: "6376792"); listDp.addItem (iconBron: iowaMC, label: "Iowa", populatie: "3002555"); private function setupTileListDataProvider (): void // Deze dataProvider levert onze tilelist op // De bron is de afbeelding die u wilt weergeven // fullSize gedraagt zich als een dynamische variabele voor onze tileList-tileListDp = new DataProvider (); tileListDp.addItem (bron: "flags / alabama.gif", fullsize: "flagsLarge / alabama.jpg"); tileListDp.addItem (bron: "flags / alaska.gif", fullsize: "flagsLarge / alaska.jpg"); tileListDp.addItem (bron: "flags / arizona.gif", fullsize: "flagsLarge / arizona.jpg"); tileListDp.addItem (bron: "flags / california.gif", fullsize: "flagsLarge / california.jpg"); tileListDp.addItem (bron: "flags / colorado.gif", fullsize: "flagsLarge / colorado.jpg"); tileListDp.addItem (bron: "flags / connecticut.gif", fullsize: "flagsLarge / connecticut.jpg"); tileListDp.addItem (bron: "flags / delaware.gif", fullsize: "flagsLarge / delaware.jpg"); tileListDp.addItem (bron: "flags / florida.gif", fullsize: "flagsLarge / florida.jpg"); tileListDp.addItem (bron: "flags / georgia.gif", fullsize: "flagsLarge / georgia.jpg"); tileListDp.addItem (bron: "flags / hawaii.gif", fullsize: "flagsLarge / hawaii.jpg"); tileListDp.addItem (bron: "flags / idaho.gif", fullsize: "flagsLarge / idaho.jpg"); tileListDp.addItem (bron: "flags / illinois.gif", fullsize: "flagsLarge / illinois.jpg"); tileListDp.addItem (bron: "flags / indiana.gif", fullsize: "flagsLarge / indiana.jpg"); tileListDp.addItem (bron: "flags / iowa.gif", fullsize: "flagsLarge / iowa.jpg"); private function setupLabels (): void populationLabel.text = "Kies een staat"; flagsLabel.text = "Klik op de vlag voor een grotere afbeelding"; // Nodig zodat onze labels automatisch worden ingesteld om alle tekst te bevatten populationLabel.autoSize = populationLabel.autoSize = TextFieldAutoSize.LEFT; flagsLabel.autoSize = flagsLabel.autoSize = TextFieldAutoSize.LEFT; private function setupList (): void // The iconField stelt in wat het pictogram zal zijn // Hier gebruikt het iconSource die we hebben gedefinieerd in onze dataprovider statesList.iconField = "iconSource"; statesList.width = 150; // stel de hoogte van de rijen in staatList.rowHeight = 30; // stelt in hoeveel rijen worden weergegeven in de lijst statesList.rowCount = 5; // Hier stellen we de DataProvider van de List in op degene die we eerder hebben gemaakt statesList.dataProvider = listDp; statesList.addEventListener (Event.CHANGE, getPopulation); private function setupTileList (): void // stel de richting van de scrollBar in voor de tileList statesTileList.direction = ScrollBarDirection.HORIZONTAL; statesTileList.rowHeight = 60; // Hoeveel kolommen de TileList heeft statesTileList.columnCount = 1; // Hoeveel rijen worden weergegeven in de TileList-statussenTileList.rowCount = 1; statesTileList.width = 400; // Hier stellen we de dataProvider van de TileList in op degene die we hebben aangemaakt statesTileList.dataProvider = tileListDp; statesTileList.addEventListener (Event.CHANGE, loadPic); private function setupLoader (): void // Dit is de Loader die we gebruiken om de grotere afbeeldingen van de vlaggen te laden picLoader = new Loader (); picLoader.x = 228; picLoader.y = 117; addChild (PICLoader);
Hier coderen we onze Event Luisteraars voor wanneer er op een item in een van de lijsten wordt geklikt.
Voeg het volgende toe aan Main.as
private function getPopulation (e: Event): void // Hier krijgen we de populatie door het label (state) en de populatie te pakken // Het selectedItem.label retourneert het momenteel geselecteerde item in de lijst populationLabel.text = "De populatie voor "+ e.target.selectedItem.label +" is "+ e.target.selectedItem.population; private functie loadPic (e: Event): void // Hier laden we de fullSize-pic door de momenteel geselecteerde items fullSize var picLoader.load (nieuwe URLRequest (e.target.selectedItem.fullSize)); // De klas sluiten // Sluit het pakket
Het gebruik van de componenten List en TileList is een geweldige manier om lijsten met gegevens en afbeeldingen weer te geven.
U zult opmerken in het paneel Componentparameters van de componenten die u kunt controleren en bepaalde eigenschappen kunt selecteren.
De bovenstaande afbeelding is voor de lijstcomponent, waarvan de eigenschappen als volgt zijn:
Accentsconagua
"allowMultipleSelection: een Booleaanse waarde die aangeeft of meerdere items tegelijk kunnen worden geselecteerd"data provider: het gegevensmodel van de lijst met items die moeten worden bekeken"ingeschakeld: een Booleaanse waarde die aangeeft of de component gebruikersinvoer kan accepteren"horizontalLineScrollSize: een waarde die de hoeveelheid inhoud beschrijft die horizontaal moet worden geschoven wanneer op een schuifpijl wordt geklikt"horizontalPageScrollSize: het aantal pixels waarmee de schuifvinger op de horizontale schuifbalk wordt verplaatst wanneer op de schuifbalk wordt gedrukt."horizontalScrollPolicy: waarde die de staat van de horizontale schuifbalk aangeeft"horizontalLineScrollSize: een waarde die de hoeveelheid inhoud beschrijft die horizontaal moet worden geschoven wanneer op een schuifpijl wordt geklikt"horizontalPageScrollSize: hij telt het aantal pixels waarmee de schuifvinger op de horizontale schuifbalk wordt verplaatst wanneer de schuifbalk wordt ingedrukt"verticalScrollPolicy: een waarde die de status van de verticale schuifbalk aangeeft"zichtbaar: een Booleaanse waarde die aangeeft of de componentinstance zichtbaar isDe eigenschappen voor de TileList zijn als volgt:
allowMultipleSelection: een Booleaanse waarde die aangeeft of meerdere items tegelijk kunnen worden geselecteerdcolumnCount: het aantal kolommen dat ten minste gedeeltelijk zichtbaar is in de lijstkolombreedte: "de breedte die wordt toegepast op een kolom in de lijst, in pixels.data provider: het gegevensmodel van de lijst met items die moeten worden bekekenrichting: een waarde die aangeeft of de component TileList horizontaal of verticaal schuift.ingeschakeld: een Booleaanse waarde die aangeeft of de component gebruikersinvoer kan accepterenhorizontalLineScrollSize: een waarde die de hoeveelheid inhoud beschrijft die horizontaal moet worden geschoven wanneer op een schuifpijl wordt geklikthorizontalPageScrollSize: het aantal pixels waarmee de schuifvinger op de horizontale schuifbalk wordt verplaatst wanneer op de schuifbalk wordt gedrukt.aantal rijen: het aantal rijen dat minstens gedeeltelijk zichtbaar is in de lijst.rijhoogte: de hoogte die wordt toegepast op elke rij in de lijst, in pixels.ScrollPolicy: "het scrolbeleid voor de component TileList.verticalLineScrollSize: een waarde die aangeeft hoeveel pixels er verticaal moeten worden geschoven wanneer op een schuifpijl wordt geklikt.verticalPageScrollSize: het aantal pixels waarmee de schuifvinger op de verticale schuifbalk wordt verplaatst wanneer op de schuifbalk wordt gedrukt ... zichtbaar: een Booleaanse waarde die aangeeft of de componentinstance zichtbaar isDe helpbestanden zijn een geweldige plek om meer over deze eigenschappen te leren.
Als u de eigenschappen voor labels wilt zien, moet u de Snelle tip van de onderdelen Knop en Label bekijken.
Dank aan http://www.state-flags-usa.com voor het toestaan van me om hun vlagbeelden te gebruiken.
Bedankt voor het lezen en blijf kijken voor de volgende tutorials over onderdelen!
