Share
Dans cette introduction rapide aux composants Flash Professional, nous allons examiner UILoader et UIScrollbar..
Jetez un coup d'œil à l'aperçu. Dans le fichier SWF, à gauche, il y a un composant UILoader invisible au premier coup d'œil (car il ne contient rien); nous chargerons une image dans cette.
Sous UILoader, il y a une étiquette avec le texte "Image non chargée"; une fois l'image chargée, nous modifierons le texte de cette étiquette en "Image chargée".
Le bouton situé sous l’étiquette permet de lancer le chargement de l’image. Sur le côté droit, il y a un champ de texte et UIScrollbar qui sont initialement invisibles (le champ de texte est invisible car il ne contient rien); en appuyant sur le bouton portant l'étiquette "Load Text", nous chargeons le texte d'un exemple de fichier texte et définissons la barre UIScroll pour qu'elle soit visible.
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 un UILoader, une étiquette, deux boutons et une barre de défilement vers la scène.
Dans le panneau Propriétés, attribuez à UILoader le nom d’instance "imageLoader". Si le panneau Propriétés ne s'affiche pas, allez à Menu> Fenêtre> Propriétés ou appuyez sur CTRL + F3.
Définissez la position X de UILoader sur 37 et son Y sur 20
Donnez à l’étiquette le nom d’instance "LoadLabel". Définissez le X de l'étiquette sur 37 et son Y sur 182.
Donnez au premier bouton le nom d’instance "loadImageButton" et définissez le X de l’étiquette sur 37, son Y sur 213.
Dans le panneau Outils, sélectionnez l'outil Texte et faites glisser un champ de texte sur la scène. Si le panneau Outils n'est pas affiché, allez à Menu> Fenêtre> Outils ou appuyez sur CTRL + F2.
Donnez à TextField le nom d’instance "loremText". Définissez le X du TextField sur 272 et le Y sur 15, puis définissez sa largeur sur 243, sa hauteur sur 101.
Donnez à la barre UIScroll le nom d'instance "textScroller". Définissez le X du UIScrollbar sur 525,00 et son Y sur 15
Donnez au second bouton le nom d’instance "loadTextButton" et définissez son X sur 272, son Y sur 213.
Le composant UILoader est un conteneur pouvant afficher les fichiers SWF, JPEG, JPEG progressif, PNG et GIF. Vous pouvez charger ces ressources au moment de l'exécution et éventuellement contrôler la progression du chargement. Pour voir comment cela peut être fait, consultez mon tutoriel sur le composant ProgressBar (les concepts sont les mêmes) et appliquez-le à UILoader comme je l'ai fait avec Loader dans ce tutoriel..
La barre UIScrollbar vous permet d'ajouter une barre de défilement à un champ textField. Lorsque vous avez un long bloc de texte, le composant UIScrollbar vous permet de faire défiler l'écran sans avoir un très grand TextField pour accueillir tout votre texte. Ce composant est très facile à utiliser car vous pouvez simplement le déposer sur un TextField et le connecter automatiquement à ce TextField. Ici, je vais vous montrer comment le faire en ActionScript..
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 faire cela est que vous obtenez des conseils de code pour l'instance lorsque vous utilisez l'éditeur de code de Flash. Pour ce faire, allez à Menu> Fichier> Paramètres de publication et cliquez sur Paramètres, à côté de Script [Actionscript 3.0].
Décocher "Déclarer automatiquement les instances d'étape".
Dans Main.as, ouvrez la déclaration de package et importez les classes que nous allons utiliser. Ajoutez ce qui suit à Main.as:
package // Nous allons étendre la classe de MovieClip import flash.display.MovieClip; // Importer les composants que nous utiliserons import fl.containers.UILoader; import fl.controls.Button; import fl.controls.Label; import fl.controls.UIScrollbar; // Nécessaire pour nos gestionnaires d'événements import flash.events.MouseEvent; import flash.events.Event; // Nécessaire pour charger les images et le texte import flash flash.net.URLLoader; import flash.net.URLRequest; import flash.text.TextField;
Ajoutez la classe, faites-la prolonger Movie Clip et configurez notre fonction constructeur.
Ici, nous déclarons nos variables et appelons nos fonctions dans le Principale() constructeur. Ajoutez ce qui suit à Main.as:
public class Main étend MovieClip // Nos composants sur scène public var loadImageButton: Button; public var loadTextButton: Button; public var LoadLabel: Label; public var loremText: TextField; public var imageLoader: UILoader; public var textScroller: UIScrollbar; // Utilisé pour charger le texte dans le TextField public var textLoader: URLLoader; fonction publique Main () setupButtonsAndLabels (); setupTextField (); setupScrollBar ();
Ici, nous allons définir les fonctions utilisées dans notre constructeur. dans le setupButtonAndLabels () fonction nous définissons notre bouton étiquette propriété et ajouter des écouteurs d'événements à déclencher lorsque l'utilisateur clique sur le bouton.
dans le setupTextField () fonction nous définissons le champ de texte wordWrap propriété à vrai de sorte que le texte passe à la ligne suivante lorsqu'il atteint le bord droit du champ TextField.
Dans setupScrollBar () nous définissons la direction de la barre UIScrollbar sur "verticale" (cela peut être "vertical" ou "horizontal") et, comme nous ne voulons pas qu'elle soit visible au premier lancement du film, nous la fixons visible propriété à faux.
Ajoutez ce qui suit à Main.as:
fonction privée setupButtonsAndLabels (): void // Définit les boutons Label (Texte affiché sur le bouton) loadImageButton.label = "Charger l'image"; loadImageButton.addEventListener (MouseEvent.CLICK, loadImage); // Définit les boutons Label (Texte affiché sur le bouton) loadTextButton.label = "Charger le texte"; loadTextButton.addEventListener (MouseEvent.CLICK, loadText); // Définit le texte des étiquettes LoadLabel.text = "Image non chargée"; function privée setupTextField (): void // Les lignes seront bouclées lorsqu'elles atteindront la fin (côté droit) du champ de texte loremText.wordWrap = true; fonction privée setupScrollBar (): void // Définit la direction de notre scrollBars; peut être "vertical" ou "horizontal" textScroller.direction = "vertical"; textScroller.visible = false;
Ici, nous allons coder les écouteurs d'événements que nous avons ajoutés aux boutons, puis fermer la classe et le package..
dans le loadImage () fonction nous définissons la scaleContent du imageLoader à faux (si c'était vrai l'image serait réduite à la taille de la UILoader), car nous voulons que l’image ait sa taille normale. Nous chargeons ensuite l'image et ajoutons un écouteur d'événements à déclencher lorsque le chargement de l'image est terminé..
dans le loadText () fonction nous mettons en place notre URLLoader et chargez le fichier texte. Ici, nous avons également configuré un écouteur à déclencher lorsque le chargement du texte est terminé..
dans le imageLoaded () fonction, nous définissons le texte de l'étiquette sur "Image chargée" - un exemple simple, mais vous pouvez faire quelque chose de moins trivial dans une application "réelle".
dans le textLoaded () fonction, nous définissons le texte du champ de texte sur celui de l'événement (e.target.data), qui sera le texte du fichier texte. Nous avons ensuite mis le UIScrollbar être visible et mettre sa scrollTarget (le champ de texte que nous souhaitons contrôler).
Accentsconagua
fonction privée loadImage (e: MouseEvent): void // Si défini sur true, l'image serait réduite à la taille de UILoader // Nous définissons ici la valeur false afin que UILoader respecte la taille réelle de l'image imageLoader.scaleContent = false; // Charge l'image et déclenche une fonction lorsque le chargement est terminé imageLoader.load (new URLRequest ("theimage.jpg")); imageLoader.addEventListener (Event.COMPLETE, imageLoaded); function privée loadText (e: MouseEvent): void // Charge notre fichier texte et déclenche une fonction lorsque le chargement est terminé textLoader = new URLLoader (); textLoader.load (new URLRequest ("lorem.txt")); textLoader.addEventListener (Event.COMPLETE, textLoaded); fonction privée imageLoaded (e: Event): void // Définit le texte sur l'étiquette chargéeLabel.text = "Image chargée"; fonction privée textLoaded (e: Event): void // Définit le champ TextField sur les données du chargeur (le texte du fichier texte) loremText.text = e.target.data; textScroller.visible = true; textScroller.scrollTarget = loremText; // fermer la classe fermer le paquet Notez qu'à la fin, nous fermons la classe et le package..
Vous remarquerez dans le Paramètres des composants panneau des composants que vous pouvez vérifier et sélectionner certaines propriétés.
L'image ci-dessus concerne le composant UILoader..
Les propriétés du composant UILoader sont les suivantes:
Les propriétés du UIScrollbar sont
Les fichiers d’aide sont un bon endroit pour en savoir plus sur ces propriétés..
Pour en savoir plus sur les propriétés des étiquettes et des boutons, assurez-vous de consulter Introduction rapide aux composants Button et Label..
Merci d'avoir lu!
