Share
Nel tool Quick Tip on Flash Professional di questa settimana daremo un'occhiata ai componenti Tile e TileList.
Apri un nuovo documento Flash e imposta le seguenti proprietà:
Apri la finestra dei componenti andando a Menu> Finestra> Componenti o premendo CTRL + F7.
Trascina due etichette, un elenco e un componente TileList sullo stage.
Nel pannello Proprietà, assegna alla prima etichetta il nome di un'istanza di "populationLabel".
(Se il pannello Proprietà non viene visualizzato, vai su Finestra> Proprietà o premi CTRL + F3.)
Imposta la X dell'etichetta su 31.00 e la sua Y su 26.00.
Nel pannello Proprietà, assegnare alla seconda etichetta il nome dell'istanza "flagsLabel". Imposta la X dell'etichetta su 31.00 e la sua Y su 238.
Quindi assegna all'Elenco il nome dell'istanza "statesList" e imposta X dell'elenco su 31.00 e Y su 62.00.
Infine, assegna a TileList il nome dell'istanza "statesTileList" e imposta l'X di TileList a 31.00 e la sua Y a 269,00.
Creare un nuovo file ActionScript e nominarlo Main.as. Dichiareremo i nostri componenti in Main.as, quindi dobbiamo disattivare "istanze di stage dichiarate automaticamente"; il vantaggio di ciò è che si ottiene il suggerimento del codice per l'istanza.
Vai a Menu> File> Impostazioni pubblicazione. Clicca su impostazioni accanto a Script [Actionscript 3].
Deseleziona "Dichiara automaticamente le istanze di stage".
In Main.as, apri la dichiarazione del pacchetto e importa le classi che useremo aggiungendo il seguente codice:
package import flash.display.MovieClip; import flash.display.Loader; importare fl.data.DataProvider; importare fl.controls.List; importare fl.controls.TileList; importare fl.controls.Label; import flash.events.Event; import flash.text.TextFieldAutoSize; import fl.controls.ScrollBarDirection; import flash.net.URLRequest;
Aggiungeremo la definizione della classe, estendendo MovieClip e configureremo la nostra funzione di costruzione.
Aggiungi quanto segue a Main.as:
public class Main estende MovieClip // il nostro componente List public var statesList: List; // il nostro componente TileList public var statesTileList: TileList; // our Labels public var populationLabel: Label; public var flagsLabel: Label; // Provider di dati per i componenti list var listDp: DataProvider; var tileListDp: DataProvider; // Necessario per caricare un'immagine più grande del flag selezionato var picLoader: Loader; funzione pubblica Main () setupListDataProvider (); setupTileListDataProvider (); setupLabels (); setupList (); setupTileList (); setupLoader ();
Qui definiremo il setupListDataProvider (), setupTileListDataProvider (), setupLabels (), setupTileList (), e setupLoader () funzioni, come menzionato in precedenza nel costruttore.
Nella libreria troverai clip video nominati da "state" MC; questi sono usati come icone per il componente List. È necessario impostare il collegamento per i clip filmato affinché vengano aggiunti all'elenco. Fai clic con il pulsante destro del mouse sul clip filmato e seleziona "Proprietà". Qui usiamo il nome del clip filmato come nome della classe:
La classe DataProvider ci offre un modo semplice per impostare i dati che devono essere utilizzati dai componenti.
Aggiungi le seguenti funzioni a Main.as:
funzione privata setupListDataProvider (): void // Questo dataprovider fornirà il nostro componente List listDp = new DataProvider (); // Qui the iconsSource è un movieClip collegato nella libreria // population agisce come una variabile dinamica sul nostro elenco listDp.addItem (iconSource: alabamaMC, etichetta: "Alabama", popolazione: "4661900"); listDp.addItem (iconSource: alaskaMC, etichetta: "Alaska", popolazione: "686293"); listDp.addItem (iconSource: arizonaMC, etichetta: "Arizona", popolazione: "6500180"); listDp.addItem (iconSource: arkansasMC, etichetta: "Arkansas", popolazione: "2855390"); listDp.addItem (iconSource: californiaMC, etichetta: "California", popolazione: "36756666"); listDp.addItem (iconSource: coloradoMC, label: "Colorado", population: "4939456"); listDp.addItem (iconSource: conneticutMC, label: "Conneticut", popolazione: "3501252"); listDp.addItem (iconSource: delawareMC, label: "Delaware", popolazione: "873092"); listDp.addItem (iconSource: floridaMC, etichetta: "Florida", popolazione: "18328340"); listDp.addItem (iconSource: georgiaMC, etichetta: "Georgia", popolazione: "9685744"); listDp.addItem (iconSource: hawaiiMC, etichetta: "Hawaii", popolazione: "1288198"); listDp.addItem (iconSource: idahoMC, label: "Idaho", population: "1523816"); listDp.addItem (iconSource: illinoisMC, etichetta: "Illinois", popolazione: "12901563"); listDp.addItem (iconSource: indianaMC, etichetta: "Indiana", popolazione: "6376792"); listDp.addItem (iconSource: iowaMC, label: "Iowa", popolazione: "3002555"); private function setupTileListDataProvider (): void // Questo dataProvider fornirà il nostro tilelist // La fonte è loro l'immagine che vuoi mostrare // fullSize agisce come una variabile dinamica nella nostra tileList tileListDp = new DataProvider (); tileListDp.addItem (source: "bandiere / alabama.gif", tutto schermo: "flagsLarge / alabama.jpg"); tileListDp.addItem (source: "bandiere / alaska.gif", tutto schermo: "flagsLarge / alaska.jpg"); tileListDp.addItem (source: "bandiere / arizona.gif", tutto schermo: "flagsLarge / arizona.jpg"); tileListDp.addItem (source: "bandiere / california.gif", tutto schermo: "flagsLarge / california.jpg"); tileListDp.addItem (source: "bandiere / colorado.gif", tutto schermo: "flagsLarge / colorado.jpg"); tileListDp.addItem (source: "bandiere / connecticut.gif", tutto schermo: "flagsLarge / connecticut.jpg"); tileListDp.addItem (source: "bandiere / delaware.gif", tutto schermo: "flagsLarge / delaware.jpg"); tileListDp.addItem (source: "bandiere / florida.gif", tutto schermo: "flagsLarge / florida.jpg"); tileListDp.addItem (source: "bandiere / georgia.gif", tutto schermo: "flagsLarge / georgia.jpg"); tileListDp.addItem (source: "bandiere / hawaii.gif", tutto schermo: "flagsLarge / hawaii.jpg"); tileListDp.addItem (source: "bandiere / idaho.gif", tutto schermo: "flagsLarge / idaho.jpg"); tileListDp.addItem (source: "bandiere / illinois.gif", tutto schermo: "flagsLarge / illinois.jpg"); tileListDp.addItem (source: "bandiere / indiana.gif", tutto schermo: "flagsLarge / indiana.jpg"); tileListDp.addItem (source: "bandiere / iowa.gif", tutto schermo: "flagsLarge / iowa.jpg"); private function setupLabels (): void populationLabel.text = "Scegli uno stato"; flagsLabel.text = "Clicca sulla bandiera per un'immagine più grande"; // Necessario in modo che le nostre etichette vengano ridimensionate automaticamente per contenere tutto il testo populationLabel.autoSize = populationLabel.autoSize = TextFieldAutoSize.LEFT; flagsLabel.autoSize = flagsLabel.autoSize = TextFieldAutoSize.LEFT; private function setupList (): void // IconField imposta quale icona sarà // Qui usa iconSource che abbiamo definito nel nostro dataprovider statesList.iconField = "iconSource"; statesList.width = 150; // imposta l'hieght delle righe statesList.rowHeight = 30; // imposta il numero di righe visualizzate nella lista statesList.rowCount = 5; // Qui impostiamo il dataProvider dell'elenco su quello che abbiamo creato in precedenza statesList.dataProvider = listDp; statesList.addEventListener (Event.CHANGE, getPopulation); private function setupTileList (): void // imposta la direzione della scrollBar per tileList statesTileList.direction = ScrollBarDirection.HORIZONTAL; statesTileList.rowHeight = 60; // Quante colonne TileList avrà statesTileList.columnCount = 1; // Quante righe mostrare in TileList statesTileList.rowCount = 1; statesTileList.width = 400; // Qui impostiamo il DataProvider di TileList su quello che abbiamo creato statesTileList.dataProvider = tileListDp; statesTileList.addEventListener (Event.CHANGE, loadPic); private function setupLoader (): void // Questo è il Loader che usiamo per caricare le immagini più grandi dei flag picLoader = new Loader (); picLoader.x = 228; picLoader.y = 117; addChild (picLoader);
Qui codificheremo i nostri ascoltatori di eventi per quando viene fatto clic su un elemento in uno degli elenchi.
Aggiungi quanto segue a Main.as
funzione privata getPopulation (e: Event): void // Qui otteniamo la popolazione afferrando l'etichetta (stato) e la popolazione // L'oggetto SelectedItem.label restituisce l'elemento attualmente selezionato nella lista populationLabel.text = "La popolazione per "+ e.target.selectedItem.label +" è "+ e.target.selectedItem.population; private function loadPic (e: Event): void // Qui cariciamo la foto fullSize ottenendo gli elementi attualmente selezionati fullSize var picLoader.load (new URLRequest (e.target.selectedItem.fullSize)); // Chiudi la classe // Chiudi il pacchetto
L'utilizzo dei componenti List e TileList è un ottimo modo per visualizzare elenchi di dati e immagini.
Noterai nel pannello Parametri componente dei componenti che puoi controllare e selezionare determinate proprietà.
L'immagine sopra è per il componente Elenco, le cui proprietà sono le seguenti:
Accentsconagua
"allowMultipleSelection: un valore booleano che indica se è possibile selezionare più di una voce di elenco alla volta"dataProvider: il modello dati dell'elenco di elementi da visualizzare"abilitato: un valore booleano che indica se il componente può accettare l'input dell'utente"horizontalLineScrollSize: un valore che descrive la quantità di contenuto da scorrere, orizzontalmente, quando si fa clic su una freccia di scorrimento"horizontalPageScrollSize: il conteggio dei pixel con cui spostare il pollice di scorrimento sulla barra di scorrimento orizzontale quando viene premuta la traccia della barra di scorrimento."horizontalScrollPolicy: valore che indica lo stato della barra di scorrimento orizzontale"horizontalLineScrollSize: un valore che descrive la quantità di contenuto da scorrere, orizzontalmente, quando si fa clic su una freccia di scorrimento"horizontalPageScrollSize: contano i pixel con cui spostare il pollice di scorrimento sulla barra di scorrimento orizzontale quando viene premuta la traccia della barra di scorrimento"verticalScrollPolicy: un valore che indica lo stato della barra di scorrimento verticale"visibile: un valore booleano che indica se l'istanza del componente è visibileLe proprietà per TileList sono le seguenti:
allowMultipleSelection: un valore booleano che indica se è possibile selezionare più di una voce di elenco alla voltacolumnCount: il numero di colonne che sono almeno parzialmente visibili nella listalarghezza della colonna: "la larghezza che viene applicata a una colonna nell'elenco, in pixel.dataProvider: il modello dati dell'elenco di elementi da visualizzaredirezione: un valore che indica se il componente TileList scorre orizzontalmente o verticalmente.abilitato: un valore booleano che indica se il componente può accettare l'input dell'utentehorizontalLineScrollSize: un valore che descrive la quantità di contenuto da scorrere, orizzontalmente, quando si fa clic su una freccia di scorrimentohorizontalPageScrollSize: il conteggio dei pixel con cui spostare il pollice di scorrimento sulla barra di scorrimento orizzontale quando viene premuta la traccia della barra di scorrimento.rowCount: il numero di righe che sono almeno parzialmente visibili nell'elenco.altezza della riga: l'altezza che viene applicata a ciascuna riga nell'elenco, in pixel.scrollPolicy: "la politica di scorrimento per il componente TileList.verticalLineScrollSize: un valore che descrive il numero di pixel da scorrere verticalmente quando si fa clic su una freccia di scorrimento.verticalPageScrollSize: il conteggio dei pixel con cui spostare il pollice di scorrimento sulla barra di scorrimento verticale quando si preme la traccia della barra di scorrimento ... visibile: un valore booleano che indica se l'istanza del componente è visibileI file di aiuto sono un ottimo posto per saperne di più su queste proprietà.
Per vedere le proprietà per le etichette, assicurati di controllare il suggerimento rapido sui componenti Button ed Label.
Grazie a http://www.state-flags-usa.com per avermi permesso di usare le loro immagini della bandiera.
Grazie per la lettura e continua a guardare per i prossimi tutorial sui componenti!
