Share
Dans cette introduction rapide aux composants Flash Professional, nous allons examiner ScrollPane et ColorPicker. Plongeons dedans?
Découvrez la démo. Dans celui-ci, à gauche, vous voyez deux composants du sélecteur de couleurs, deux étiquettes intitulées "Sélecteur de couleurs personnalisé" et "Sélecteur de couleurs normales" et un rectangle bleu.
Le sélecteur de couleurs personnalisé utilise des couleurs provenant exclusivement d'une sélection de notre choix. Le sélecteur de couleurs normal a toutes les couleurs d'un sélecteur de couleurs normal et lorsqu'un utilisateur choisit une couleur, le rectangle est remplacé par la couleur de son choix..
Sur le côté droit du fichier SWF, il y a un ScrollPane, dans lequel nous chargeons une image, et un bouton que nous utilisons pour lancer le chargement de l'image..
Ouvrez un nouveau document Flash et définissez les propriétés suivantes:
Ouvrez la fenêtre des composants en allant dans Menu> Fenêtre> Composants ou en appuyant sur CTRL + F7.
Faites glisser deux ColorPickers, deux étiquettes, un ScrollPane et un bouton sur la scène.
Dans le panneau Propriétés, donnez à la première étiquette le nom de l'instance. customLabel.
Si le panneau Propriétés ne s'affiche pas, allez à Menu> Fenêtre> Propriétés ou appuyez sur CTRL + F3..
Définissez le X de l'étiquette sur 16 et son Y sur 12.
Donnez à la deuxième étiquette le nom d'instance "normalLabel"; mettre son X à 16 et son Y à 176.
Donnez au premier ColorPicker le nom d’instance "customColorPicker"; mettre son X à 16 et son Y à 41.
Attribuez à l'instance ColorPicker le nom d'instance "normalColorPicker"; mettre son X à 16 et son Y à 206.
Donnez à la seconde ScrollPane le nom d'occurrence "imageScrollPane"; mettre son X à 277 et son Y à 29.
Donnez au bouton le nom d'occurrence "loadImageButton"; mettre son X à 354 et son Y à 332.
À l'aide de l'outil Rectangle, tracez un rectangle sur la scène. J'ai dessiné le mien avec une couleur bleue. Sélectionnez le rectangle et allez à Menu> Modifier> Convertir en symbole (ou appuyez sur F8); définissez son nom sur "carré" et assurez-vous que "Type" est défini sur MovieClip.
Ensuite, donnez-lui un nom d'instance de carré comme nous l'avons fait avec les composants ci-dessus. Définissez sa taille sur 143x97px, définissez son X sur 90 et son Y sur 47.
Le ColorPicker est un excellent petit composant qui permet aux utilisateurs de sélectionner une couleur. Vous pouvez également définir les couleurs que vous souhaitez voir disponibles dans ColorPicker..
Le composant ScrollPane affiche les fichiers DisplayObjects, JPEG, GIF et PNG, ainsi que les fichiers SWF, dans une zone déroulante. Lorsque le contenu que vous chargez est trop volumineux pour le film, il s'agit d'un composant idéal à utiliser..
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 et cliquez sur Paramètres à côté de Script [Actionscript 3.0]
Décocher "Déclarer automatiquement les instances d'étape".
Ensuite, dans Main.as, nous ouvrirons la déclaration du paquet et importerons les classes que nous utiliserons..
Ajoutez ce qui suit à Main.as:
package // Nous étendons l'importation de MovieClip flash.display.MovieClip; // Besoin d'importer les composants que nous utilisons import fl.controls.ColorPicker; import fl.controls.Label; importez fl.containers.ScrollPane; import fl.controls.Button; // Les événements dont nous avons besoin import flash.events.MouseEvent; import flash.events.Event; // Nécessaire pour changer la couleur de movieClip import flash.geom.ColorTransform; // Nécessaire pour charger l'image import flash.net.URLRequest;
Ajoutez la déclaration de classe, faites-la prolonger Movie Clip et configurez notre fonction constructeur. Ici nous déclarons nos variables et appelons nos fonctions dans le constructeur principal.
Ajouter ce qui suit à Main.as
public class Main étend MovieClip // Nos composants sur scène public var var customLabel: Label; public var normalLabel: Label; public var customColorPicker: ColorPicker; public var normalColorPicker: ColorPicker; public var square: DisplayObject; public var imageScrollPane: ScrollPane; public var loadImageButton: Button; fonction publique Main () setupLabels (); setupColorPickers (); setupButton ();
Ici, nous définissons les fonctions utilisées dans notre constructeur.
dans le setupLabels fonction nous mettons le texte sur les étiquettes. Dans setupColorPickers nous avons mis les couleurs pour notre customColorpicker; ces couleurs sont un tableau de couleurs utilisant la syntaxe de Flash pour les couleurs hexadécimales. Nous ajoutons également un écouteur d'événement à nos sélecteurs de couleurs afin que, lorsqu'un utilisateur choisit une couleur, la fonction correspondante soit activée..
dans le setupButton fonction, nous définissons la propriété Label du bouton et ajoutons un écouteur d'événements lorsque l'utilisateur clique sur le bouton.
Ajoutez ce qui suit à Main.as:
fonction privée setupLabels (): void // définit le texte des étiquettes customLabel.text = "Sélecteur de couleurs personnalisé"; normalLabel.text = "Sélecteur de couleurs normal" function privée setupColorPickers (): void // Nous définissons ici les couleurs du sélecteur de couleurs customColorPicker.colors = [0x000FF, 0xFF0000,0x00FF00, 0xFFFF00,0xFF33FF]; // Lorsque l'utilisateur sélectionne une couleur, nous appelons la fonction changeColor customColorPicker.addEventListener (Event.CHANGE, changeColor); normalColorPicker.addEventListener (Event.CHANGE, changeColor); private function setupButton (): void // Définit le libellé des boutons (le texte du bouton) loadImageButton.label = "Charger l'image"; // Lorsque l'utilisateur clique sur le bouton, nous appelons la fonction loadImage loadImageButton.addEventListener (MouseEvent.CLICK, loadImage);
Ici, nous codons les fonctions pour les écouteurs d'événements que nous avons ajoutés ci-dessus.
le changer de couleur fonction utilise un ColorTransform objet afin que nous puissions changer la couleur du rectangle sur la scène. Nous définissons la couleur de ColorTransform sur la couleur sélectionnée par l'utilisateur à l'aide de e.target.selectedColor. La cible est le ColorPicker dont la couleur vient d'être modifiée. Ensuite, nous utilisons le transformer propriété du carré movieClip et définissez le colorTransform à la couleur choisie.
Accentsconagua
fonction privée changeColor (e: Event): void // Nécessité de configurer un objet ColorTransform pour modifier la couleur var de MovieClip: ColorTransform = new ColorTransform (); // définit la couleur colorTransform sur la couleur choisie par l'utilisateur dans colorPicker color.color = e.target.selectedColor; // Modifie la couleur du clip en utilisant le paramètre ColorTransform square.transform.colorTransform = color; function privée loadImage (e: Event): void // Charge l'image dans le scrollPane imageScrollPane.load (new URLRequest ("image.jpg")); // ferme la classe // ferme le paquet Vous remarquerez dans le Paramètres du composant panneau (pouvant être ouvert à partir du menu Fenêtre) que vous pouvez vérifier et sélectionner certaines propriétés.
L'image ci-dessus concerne le composant ColorPicker..
Les propriétés sont les suivantes pour le composant ColorPicker:
Les propriétés du ScrollPane sont
ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO.ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO. 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, veillez à consulter le conseil rapide relatif aux composants Button et Label.
