Share
Im Quick Tip zu Flash Professional-Tools dieser Woche werden wir uns die Komponenten Tile und TileList ansehen.
Öffnen Sie ein neues Flash-Dokument und legen Sie die folgenden Eigenschaften fest:
Öffnen Sie das Komponentenfenster, indem Sie auf gehen Menü> Fenster> Komponenten oder drücken Sie STRG + F7.
Ziehen Sie zwei Labels, eine List und eine TileList-Komponente auf die Bühne.
Geben Sie im Eigenschaftenfenster dem ersten Label einen Instanznamen von "populationLabel" an..
(Wenn das Eigenschaftenfenster nicht angezeigt wird, gehen Sie zu Fenster> Eigenschaften oder drücken Sie STRG + F3.)
Setzen Sie das X des Labels auf 31.00 und das Y auf 26.00.
Geben Sie im Eigenschaftenfenster dem zweiten Label den Instanznamen "flagsLabel" an. Setzen Sie das X des Labels auf 31.00 und das Y auf 238.
Geben Sie der Liste dann den Instanznamen "statesList" und setzen Sie das X der Liste auf 31.00 und das Y auf 62.00.
Geben Sie der TileList schließlich den Instanznamen "statesTileList" und setzen Sie das X der TileList auf 31.00 und das Y auf 269.00.
Erstellen Sie eine neue ActionScript-Datei und benennen Sie sie Main.as. Wir werden unsere Komponenten in Main.as deklarieren, daher müssen wir "Auto-Deklarationsstufe" deaktivieren. Der Vorteil dabei ist, dass Sie Code-Hinweise für die Instanz erhalten.
Gehe zu Menü> Datei> Veröffentlichungseinstellungen. Klicke auf die Einstellungen neben an Skript [Aktionsskript 3].
Deaktivieren Sie "Bühneninstanzen automatisch deklarieren"..
Öffnen Sie in Main.as die Paketdeklaration und importieren Sie die zu verwendenden Klassen, indem Sie den folgenden Code hinzufügen:
package 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;
Wir werden die Klassendefinition hinzufügen und MovieClip erweitern, und wir werden unsere Konstruktorfunktion einrichten.
Fügen Sie Folgendes zu Main.as hinzu:
public class Main erweitert MovieClip // unsere Listenkomponente public var statesList: List; // unsere TileList-Komponente public var statesTileList: TileList; // unsere Labels public var populationLabel: Label; public var flagsLabel: Label; // Datenprovider für die Listenkomponenten var listDp: DataProvider; var tileListDp: DataProvider; // Zum Laden eines größeren Bildes der ausgewählten Flagge erforderlich var picLoader: Loader; public function Main () setupListDataProvider (); setupTileListDataProvider (); setupLabels (); setupList (); setupTileList (); setupLoader ();
Hier definieren wir die setupListDataProvider (), setupTileListDataProvider (), setupLabels (), setupTileList (), und setupLoader () Funktionen, wie zuvor im Konstruktor erwähnt.
In der Bibliothek finden Sie Filmclips mit dem Namen "state" MC. Diese werden als Symbol für die List-Komponente verwendet. Sie müssen die Verknüpfung einrichten, damit die Movieclips der Liste hinzugefügt werden. Klicken Sie dazu mit der rechten Maustaste auf den Movieclip und wählen Sie "Eigenschaften". Hier verwenden wir den Namen des Movieclips als Klassennamen:
Mit der DataProvider-Klasse können wir auf einfache Weise Daten einrichten, die von Komponenten verwendet werden.
Fügen Sie Main.as die folgenden Funktionen hinzu:
private Funktion setupListDataProvider (): void // Dieser Datenprovider liefert unsere List-Komponente listDp = new DataProvider (); // Hier ist die iconsSource ein movieClip, der in der Bibliothek verlinkt ist. // Population verhält sich wie eine dynamische Variable in unserer Liste listDp.addItem (iconSource: alabamaMC, label: "Alabama", population: "4661900"); listDp.addItem (iconSource: alaskaMC, Label: "Alaska", Bevölkerung: "686293"); listDp.addItem (iconSource: arizonaMC, Label: "Arizona", Bevölkerung: "6500180"); listDp.addItem (iconSource: arkansasMC, Label: "Arkansas", Bevölkerung: "2855390"); listDp.addItem (iconSource: californiaMC, Label: "California", Bevölkerung: "36756666"); listDp.addItem (iconSource: coloradoMC, Bezeichnung: "Colorado", Bevölkerung: "4939456"); listDp.addItem (iconSource: conneticutMC, Label: "Conneticut", Bevölkerung: "3501252"); listDp.addItem (iconSource: delawareMC, Label: "Delaware", Population: "873092"); listDp.addItem (iconSource: floridaMC, Label: "Florida", Bevölkerung: "18328340"); listDp.addItem (iconSource: georgiaMC, Label: "Georgia", Bevölkerung: "9685744"); listDp.addItem (iconSource: hawaiiMC, Label: "Hawaii", Population: "1288198"); listDp.addItem (iconSource: idahoMC, Bezeichnung: "Idaho", Population: "1523816"); listDp.addItem (iconSource: illinoisMC, Label: "Illinois", Bevölkerung: "12901563"); listDp.addItem (iconSource: indianaMC, Label: "Indiana", Bevölkerung: "6376792"); listDp.addItem (iconSource: iowaMC, Bezeichnung: "Iowa", Bevölkerung: "3002555"); private Funktion setupTileListDataProvider (): void // Dieser dataProvider liefert unsere Tileliste // Die Quelle ist das Bild, das Sie anzeigen möchten. // fullSize fungiert als dynamische Variable in unserer tileList tileListDp = new DataProvider (); tileListDp.addItem (source: "flags / alabama.gif", fullSize: "flagsLarge / alabama.jpg"); tileListDp.addItem (source: "flags / alaska.gif", fullSize: "flagsLarge / alaska.jpg"); tileListDp.addItem (source: "flags / arizona.gif", fullSize: "flagsLarge / arizona.jpg"); tileListDp.addItem (source: "flags / california.gif", fullSize: "flagsLarge / california.jpg"); tileListDp.addItem (source: "flags / colorado.gif", fullSize: "flagsLarge / colorado.jpg"); tileListDp.addItem (source: "flags / connecticut.gif", fullSize: "flagsLarge / connecticut.jpg"); tileListDp.addItem (source: "flags / delaware.gif", fullSize: "flagsLarge / delaware.jpg"); tileListDp.addItem (source: "flags / florida.gif", fullSize: "flagsLarge / florida.jpg"); tileListDp.addItem (source: "flags / georgia.gif", fullSize: "flagsLarge / georgia.jpg"); tileListDp.addItem (source: "flags / hawaii.gif", fullSize: "flagsLarge / hawaii.jpg"); tileListDp.addItem (source: "flags / idaho.gif", fullSize: "flagsLarge / idaho.jpg"); tileListDp.addItem (source: "flags / illinois.gif", fullSize: "flagsLarge / illinois.jpg"); tileListDp.addItem (source: "flags / indiana.gif", fullSize: "flagsLarge / indiana.jpg"); tileListDp.addItem (source: "flags / iowa.gif", fullSize: "flagsLarge / iowa.jpg"); private Funktion setupLabels (): void populationLabel.text = "Choose A State"; flagsLabel.text = "Klicken Sie auf die Flagge für ein größeres Bild"; // Benötigt, damit unsere Labels automatisch den gesamten Text aufnehmen. PopulationLabel.autoSize = populationLabel.autoSize = TextFieldAutoSize.LEFT; flagsLabel.autoSize = flagsLabel.autoSize = TextFieldAutoSize.LEFT; private function setupList (): void // Das iconField legt fest, wie das Symbol aussehen soll // Hier verwendet es iconSource, das wir in unserem Datenverzeichnis definiert haben statesList.iconField = "iconSource"; StatesList.width = 150; // Setze die Höhe der Zeilen StatesList.rowHeight = 30; // Legt fest, wie viele Zeilen in der Liste angezeigt werden statesList.rowCount = 5; // Hier setzen wir den dataProvider der Liste auf denjenigen, den wir zuvor erstellt haben statesList.dataProvider = listDp; statesList.addEventListener (Event.CHANGE, getPopulation); private function setupTileList (): void // setze die Richtung der scrollBar für die tileList. statesTileList.direction = ScrollBarDirection.HORIZONTAL; statesTileList.rowHeight = 60; // Wie viele Spalten die TileList enthält statesTileList.columnCount = 1; // Wie viele Zeilen werden in der TileList angezeigt StatesTileList.rowCount = 1; statesTileList.width = 400; // Hier setzen wir den dataProvider der TileList auf den, den wir erstellt haben statesTileList.dataProvider = tileListDp; statesTileList.addEventListener (Event.CHANGE, loadPic); private function setupLoader (): void // Dies ist der Loader, mit dem wir die größeren Bilder der Flags laden picLoader = new Loader (); picLoader.x = 228; picLoader.y = 117; addChild (picLoader);
Hier werden wir unsere Ereignis-Listener codieren, wenn auf ein Element in einer der Listen geklickt wird.
Fügen Sie Folgendes zu Main.as hinzu
private Funktion getPopulation (e: Event): void // Hier erhalten Sie die Grundgesamtheit, indem Sie die Beschriftung (Status) und die Grundgesamtheit // abrufen. // Das selectedItem.label gibt das aktuell ausgewählte Element in der Liste populationLabel.text = "Die Grundgesamtheit für "+ e.target.selectedItem.label +" ist "+ e.target.selectedItem.population; private function loadPic (e: Event): void // Hier wird das fullSize-Bild geladen, indem die aktuell ausgewählten Elemente in fullSize geladen werden. var picLoader.load (new URLRequest (e.target.selectedItem.fullSize)); // Die Klasse schließen // Das Paket schließen
Die Verwendung der List- und TileList-Komponenten ist eine großartige Möglichkeit, Listen von Daten und Bildern anzuzeigen.
Sie werden im Bereich Komponentenparameter der Komponenten feststellen, dass Sie bestimmte Eigenschaften überprüfen und auswählen können.
Das obige Bild ist für die Listenkomponente, für die die Eigenschaften wie folgt lauten:
Accentsconagua
"allowMultipleSelection: Ein boolescher Wert, der angibt, ob mehr als ein Listenelement gleichzeitig ausgewählt werden kann"Datenanbieter: das Datenmodell der Liste der Elemente, die angezeigt werden sollen"aktiviert: Ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kann"horizontalLineScrollSize: Ein Wert, der die Menge des Inhalts beschreibt, der beim Klicken auf einen Bildlaufpfeil horizontal verschoben werden soll"horizontalPageScrollSize: Die Anzahl der Pixel, um die der Bildlauffinger auf der horizontalen Bildlaufleiste verschoben werden soll, wenn die Bildlaufleisten-Spur gedrückt wird."horizontalScrollPolicy: Wert, der den Status der horizontalen Bildlaufleiste angibt"horizontalLineScrollSize: Ein Wert, der die Menge des Inhalts beschreibt, der beim Klicken auf einen Bildlaufpfeil horizontal verschoben werden soll"horizontalPageScrollSize: Die Anzahl der Pixel, um die der Bildlaufzeiger in der horizontalen Bildlaufleiste verschoben werden soll, wenn die Bildlaufleisten-Spur gedrückt wird"verticalScrollPolicy: ein Wert, der den Status der vertikalen Bildlaufleiste angibt"sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar istDie Eigenschaften für die TileList lauten wie folgt:
allowMultipleSelection: Ein boolescher Wert, der angibt, ob mehr als ein Listenelement gleichzeitig ausgewählt werden kanncolumnCountAnzahl der Spalten, die in der Liste zumindest teilweise sichtbar sindSpaltenbreite: "die Breite, die auf eine Spalte in der Liste angewendet wird, in Pixel.Datenanbieter: das Datenmodell der Liste der Elemente, die angezeigt werden sollenRichtung: Ein Wert, der angibt, ob die TileList-Komponente horizontal oder vertikal gescrollt wird.aktiviert: Ein boolescher Wert, der angibt, ob die Komponente Benutzereingaben akzeptieren kannhorizontalLineScrollSize: Ein Wert, der die Menge des Inhalts beschreibt, der beim Klicken auf einen Bildlaufpfeil horizontal verschoben werden sollhorizontalPageScrollSize: Die Anzahl der Pixel, um die der Bildlauffinger auf der horizontalen Bildlaufleiste verschoben werden soll, wenn die Bildlaufleisten-Spur gedrückt wird.ReihenanzahlAnzahl der Zeilen, die in der Liste zumindest teilweise sichtbar sind.Zeilenhöhe: Die Höhe, die auf jede Zeile in der Liste angewendet wird, in Pixel.scrollPolicy: "die Bildlaufrichtlinie für die TileList-Komponente.verticalLineScrollSize: Ein Wert, der beschreibt, um wie viele Pixel der Bildlauf vertikal erfolgen soll, wenn auf einen Bildlaufpfeil geklickt wird.verticalPageScrollSize: Die Anzahl der Pixel, um die der Bildlauffinger in der vertikalen Bildlaufleiste verschoben werden soll, wenn die Bildlaufleisten-Spur gedrückt wird. sichtbar: Ein boolescher Wert, der angibt, ob die Komponenteninstanz sichtbar istIn den Hilfedateien können Sie mehr über diese Eigenschaften erfahren.
Um die Eigenschaften für Labels anzuzeigen, checken Sie den Quick Tip der Button- und Label-Komponenten aus.
Danke an http://www.state-flags-usa.com, dass ich ihre Flaggenbilder verwenden darf.
Vielen Dank für das Lesen und halten Sie Ausschau nach den kommenden Komponenten-Tutorials!
