Share
Dans le conseil de cette semaine sur les outils Flash Professional, nous allons examiner les composants Tile et TileList..
Ouvrez un nouveau document Flash et définissez les propriétés suivantes:
Ouvrez la fenêtre des composants en allant à Menu> Fenêtre> Composants ou en appuyant sur CTRL + F7.
Faites glisser deux étiquettes, un composant List et un composant TileList sur la scène.
Dans le panneau Propriétés, attribuez à la première étiquette le nom d'occurrence "populationLabel"..
(Si le panneau Propriétés ne s'affiche pas, accédez à Fenêtre> Propriétés ou appuyez sur CTRL + F3.)
Réglez le X de l'étiquette sur 31,00 et son Y sur 26,00.
Dans le panneau Propriétés, attribuez à la deuxième étiquette le nom d'occurrence "flagsLabel". Réglez le X de l'étiquette sur 31,00 et son Y sur 238.
Donnez ensuite à la liste le nom d’instance "statesList" et définissez le X de la liste sur 31.00 et son Y sur 62.00..
Enfin, attribuez à TileList le nom d’instance "statesTileList" et définissez le X du TileList sur 31.00 et son Y sur 269.00..
Créez un nouveau fichier ActionScript et nommez-le. Main.as. Nous allons déclarer nos composants dans Main.as, nous devons donc désactiver "les instances de stade de déclaration automatique"; l'avantage de le faire est que vous obtenez un indice de code pour l'instance.
Aller à Menu> Fichier> Paramètres de publication. Cliquer sur Réglages à côté de Script [Actionscript 3].
Décocher "Déclarer automatiquement les instances d'étape".
Dans Main.as, ouvrez la déclaration du paquet et importez les classes que nous allons utiliser en ajoutant le code suivant:
package import flash.display.MovieClip; import flash.display.Loader; importer fl.data.DataProvider; import fl.controls.List; import fl.controls.TileList; import fl.controls.Label; import flash.events.Event; import flash.text.TextFieldAutoSize; importer fl.controls.ScrollBarDirection; import flash.net.URLRequest;
Nous allons ajouter la définition de classe, ce qui étendra MovieClip, et nous allons configurer notre fonction constructeur.
Ajoutez ce qui suit à Main.as:
public class Main étend MovieClip // notre composant List public var étatsList: List; // notre composant TileList public var statesTileList: TileList; // nos étiquettes public var populationLabel: Label; public var flagsLabel: Label; // Fournisseurs de données pour les composants de liste var listDp: DataProvider; var tileListDp: DataProvider; // Nécessaire pour charger une image plus grande du drapeau sélectionné var picLoader: Loader; fonction publique Main () setupListDataProvider (); setupTileListDataProvider (); setupLabels (); setupList (); setupTileList (); setupLoader ();
Ici nous allons définir le setupListDataProvider (), setupTileListDataProvider (), setupLabels (), setupTileList (), et setupLoader () fonctions, comme mentionné précédemment dans le constructeur.
Dans la bibliothèque, vous trouverez des clips nommés par "state" MC; ceux-ci sont utilisés comme icône pour le composant List. Vous devez configurer le lien pour que les clips soient ajoutés à la liste. Pour ce faire, faites un clic droit sur le clip et sélectionnez "Propriétés". Ici, nous utilisons le nom du clip comme nom de classe:
La classe DataProvider nous offre un moyen simple de configurer les données à utiliser par les composants.
Ajoutez les fonctions suivantes à Main.as:
fonction privée setupListDataProvider (): void // Ce fournisseur de données fournira notre composant List listDp = new DataProvider (); // Ici, iconsSource est un movieClip lié à la bibliothèque // population agit comme une variable dynamique de notre liste listDp.addItem (iconSource: alabamaMC, libellé: "Alabama", population: "4661900"); listDp.addItem (iconSource: alaskaMC, libellé: "Alaska", population: "686293"); listDp.addItem (iconSource: arizonaMC, étiquette: "Arizona", population: "6500180"); listDp.addItem (iconSource: arkansasMC, étiquette: "Arkansas", population: "2855390"); listDp.addItem (iconSource: californiaMC, libellé: "California", population: "36756666"); listDp.addItem (iconSource: coloradoMC, libellé: "Colorado", population: "4939456"); listDp.addItem (iconSource: conneticutMC, libellé: "Conneticut", population: "3501252"); listDp.addItem (iconSource: delawareMC, libellé: "Delaware", population: "873092"); listDp.addItem (iconSource: floridaMC, étiquette: "Florida", population: "18328340"); listDp.addItem (iconSource: georgiaMC, étiquette: "Georgia", population: "9685744"); listDp.addItem (iconSource: hawaiiMC, étiquette: "Hawaii", population: "1288198"); listDp.addItem (iconSource: idahoMC, libellé: "Idaho", population: "1523816"); listDp.addItem (iconSource: illinoisMC, libellé: "Illinois", population: "12901563"); listDp.addItem (iconSource: indianaMC, libellé: "Indiana", population: "6376792"); listDp.addItem (iconSource: iowaMC, étiquette: "Iowa", population: "3002555"); function privée setupTileListDataProvider (): void // Ce fournisseur de données fournira notre liste de sélection // La source est l'image que vous souhaitez afficher // fullSize agit comme une variable dynamique pour notre liste de mosaïques 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"); fonction privée setupLabels (): void populationLabel.text = "Choisir un état"; flagsLabel.text = "Cliquez sur le drapeau pour agrandir l'image"; // Nécessaire pour que nos étiquettes redimensionnent automatiquement afin de contenir tout le texte populationLabel.autoSize = populationLabel.autoSize = TextFieldAutoSize.LEFT; flagsLabel.autoSize = flagsLabel.autoSize = TextFieldAutoSize.LEFT; private function setupList (): void // Le champ iconField définit ce que sera l'icône // Il utilise ici iconSource que nous avons défini dans notre fournisseur de données statesList.iconField = "iconSource"; statesList.width = 150; // définit la taille des lignes statesList.rowHeight = 30; // définit le nombre de lignes affichées dans la liste statesList.rowCount = 5; // Ici, nous définissons le fournisseur de données de la liste sur celui que nous avons créé précédemment. StatesList.dataProvider = listDp; statesList.addEventListener (Event.CHANGE, getPopulation); function privée setupTileList (): void // définit la direction du scrollBar pour la mosaïque tilesTileList.direction = ScrollBarDirection.HORIZONTAL; statesTileList.rowHeight = 60; // Combien de colonnes la TileList aura-t-elle statesTileList.columnCount = 1; // Combien de lignes à afficher dans TileList statesTileList.rowCount = 1; statesTileList.width = 400; // Ici, nous avons défini le fournisseur de données de TileList sur celui que nous avons créé statesTileList.dataProvider = tileListDp; statesTileList.addEventListener (Event.CHANGE, loadPic); private function setupLoader (): void // Ceci est le chargeur que nous utilisons pour charger les plus grandes images des drapeaux picLoader = new Loader (); picLoader.x = 228; picLoader.y = 117; addChild (picLoader);
Ici, nous allons coder nos écouteurs d’événements pour le clic d’un élément de l’une des listes..
Ajouter ce qui suit à Main.as
fonction privée getPopulation (e: Event): void // Nous obtenons ici la population en saisissant le libellé (state) et la population // Le selectedItem.label renvoie l'élément actuellement sélectionné dans la liste populationLabel.text = "La population de "+ e.target.selectedItem.label +" est "+ e.target.selectedItem.population; function privée loadPic (e: Event): void // Ici, nous chargeons la photo fullSize en récupérant les éléments actuellement sélectionnés fullSize var picLoader.load (nouvelle URLRequest (e.target.selectedItem.fullSize)); // Fermer la classe // Fermer le package
Utiliser les composants List et TileList est un excellent moyen d’afficher des listes de données et d’images..
Vous remarquerez dans le panneau Paramètres des composants des composants que vous pouvez vérifier et sélectionner certaines propriétés..
L'image ci-dessus concerne le composant de liste, dont les propriétés sont les suivantes:
Accentsconagua
"allowMultipleSélection: une valeur booléenne qui indique si plusieurs éléments de la liste peuvent être sélectionnés à la fois"fournisseur de données: le modèle de données de la liste des éléments à visualiser"activée: une valeur booléenne qui indique si le composant peut accepter la saisie de l'utilisateur"horizontalLineScrollSize: une valeur qui décrit la quantité de contenu à faire défiler, horizontalement, quand une flèche de défilement est cliquée"horizontalPageScrollSize: le nombre de pixels par lequel déplacer le curseur de défilement sur la barre de défilement horizontale lorsque la piste de la barre de défilement est enfoncée."horizontalScrollPolicy: valeur indiquant l'état de la barre de défilement horizontale"horizontalLineScrollSize: une valeur qui décrit la quantité de contenu à faire défiler, horizontalement, quand une flèche de défilement est cliquée"horizontalPageScrollSize: nombre de pixels par lesquels déplacer le curseur de défilement sur la barre de défilement horizontale lorsque la piste de la barre de défilement est enfoncée"verticalScrollPolicy: une valeur qui indique l'état de la barre de défilement verticale"visible: une valeur booléenne qui indique si l'instance du composant est visibleLes propriétés de TileList sont les suivantes:
permettreMultipleSélection: une valeur booléenne qui indique si plusieurs éléments de la liste peuvent être sélectionnés à la foiscolumnCount: le nombre de colonnes au moins partiellement visibles dans la listelargeur de colonne: "la largeur appliquée à une colonne de la liste, en pixels.fournisseur de données: le modèle de données de la liste des éléments à visualiserdirection: une valeur qui indique si le composant TileList fait défiler horizontalement ou verticalement.activée: une valeur booléenne qui indique si le composant peut accepter la saisie de l'utilisateurhorizontalLineScrollSize: une valeur qui décrit la quantité de contenu à faire défiler, horizontalement, quand une flèche de défilement est cliquéehorizontalPageScrollSize: le nombre de pixels par lequel déplacer le curseur de défilement sur la barre de défilement horizontale lorsque la piste de la barre de défilement est enfoncée.rowCount: le nombre de lignes au moins partiellement visibles dans la liste.rowHeight: la hauteur qui est appliquée à chaque ligne de la liste, en pixels.scrollPolicy: "la politique de défilement du composant TileList.verticalLineScrollSize: une valeur qui décrit le nombre de pixels à faire défiler verticalement lorsque l'on clique sur une flèche de défilement.verticalPageScrollSize: le nombre de pixels par lequel déplacer le curseur de défilement sur la barre de défilement verticale lorsque la piste de la barre de défilement est enfoncée… visible: une valeur booléenne qui indique si l'instance du composant est visibleLes fichiers d’aide sont un bon endroit pour en savoir plus sur ces propriétés..
Pour voir les propriétés des étiquettes, veillez à consulter le conseil sur les composants Button et Label..
Merci à http://www.state-flags-usa.com pour me permettre d'utiliser leurs images de drapeau.
Merci de lire et de surveiller les prochains tutoriels sur les composants!
