Share
Ces trois composants traitent tous de nombres dans des intervalles. Dans ce petit conseil, nous verrons comment les utiliser.
Le stepper numérique vous permet de définir un nombre dans une certaine plage en utilisant le clavier ou en cliquant sur les touches fléchées; le curseur vous permet de faire glisser un pouce pour sélectionner un nombre dans une plage de manière plus graphique, et la barre de progression indique la distance parcourue par une plage..
Dans l'aperçu SWF, vous verrez deux étiquettes, deux NumericSteppers, deux boutons, un cercle bleu et un curseur. Les NumericSteppers sont utilisés pour définir une plage de nombres à partir desquels nous allons générer un nombre aléatoire. Lorsque le bouton est cliqué, l’étiquette changera pour indiquer le nombre aléatoire généré. Le curseur sert à modifier la taille du cercle; faire glisser le curseur vers la droite augmente la taille du cercle, tandis que le faire vers la gauche diminue la taille du cercle.
L’autre bouton sert à charger un fichier SWF; appuyez sur le bouton et une barre de progression est ajoutée à la scène pour afficher la progression du chargement. Une fois que le chargeur charge son contenu, il est ajouté à la scène et la barre de progression est supprimée..
Ouvrir un nouveau document Flash et définir 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 boutons, deux étiquettes, deux steppers numériques et un curseur vers la scène.
Dans le panneau Propriétés, attribuez à la première étiquette le nom d'occurrence "StepperLabel".
(Si le panneau Propriétés ne s'affiche pas, allez à Menu> Fenêtre> Composants ou appuyez sur CTRL + F3)
Définissez le X de l'étiquette sur 19 et son Y sur 9.
Utilisation du panneau Propriétés:
Tracez un cercle bleu avec l'outil ovale (maintenez la touche Maj enfoncée tout en faisant glisser pour le rendre conforme à un cercle) et convertissez-le en MovieClip en le sélectionnant, en cliquant avec le bouton droit de la souris, puis en choisissant "Convertir en symbole". Donnez-lui un nom d'occurrence "theCircle".
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.
Aller à Menu> Fichier> Paramètres de publication
Cliquer sur Réglages à côté de la 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 utiliserons..
Ajouter ce qui suit au Main.as.
package // Nos composants sur scène importent fl.controls.NumericStepper; import fl.controls.Slider; import fl.controls.ProgressBar; import fl.controls.Label; import fl.controls.Button; // Nécessaire pour étendre la classe import flash.display.MovieClip; // Nécessaire pour redimensionner automatiquement le texte de notre étiquette import flash.text.TextFieldAutoSize; // Les événements dont nous avons besoin dans ce projet import flash.events.MouseEvent; import flash.events.Event; import fl.events.SliderEvent; import flash.events.ProgressEvent; // Nécessaire pour charger le fichier .swf import flash.net.URLRequest; import flash.display.Loader;
Ajoutons la classe, faisons-la étendre Movie Clip et configurons notre fonction constructeur.
Ajoutez ce qui suit au Main.as:
classe publique Main étend MovieClip public var StepperLabel: Label; public var sliderLabel: Label; public var fromStepper: NumericStepper; public var toStepper: NumericStepper; public var randomNumButton: Button; public var loaderButton: Button; public var slider: Slider; public var progressBar: ProgressBar; public var theLoader: Loader; public var theCircle: Circle; fonction publique Main () setupLabels (); setupSteppers (); setupButtons (); setupSlider ();
Ici, nous définissons les fonctions utilisées dans notre constructeur.
Dans setupLabels () fonction, nous faisons une configuration de base sur nos étiquettes en utilisant taille automatique de sorte que chaque étiquette sera automatiquement redimensionnée pour contenir tout le texte qui lui est transmis.
Dans setupSteppers () fonction nous définissons les propriétés "minimum" et "maximum" de nos steppers. Ceux-ci sont utilisés pour restreindre les nombres disponibles dans le stepper. Nous n'utilisons pas d'écouteur d'événement avec les curseurs ici (bien que vous puissiez utiliser Event.CHANGE pour que les curseurs détectent quand leur valeur est modifiée).
Dans setupButtons () nous ajoutons notre texte aux boutons via le étiquette propriété et ajouter des écouteurs d'événement aux boutons.
Dans setupSliders () nous avons mis le le minimum et maximum pour les valeurs des curseurs. le snapInterval définit combien la valeur du curseur change lors du glissement; Ici, nous utilisons .1. le liveDragging est réglé sur vrai de sorte que la valeur du curseur soit disponible lors du glissement - si cela était réglé sur faux nous ne pourrions pas obtenir la valeur tant que l'utilisateur n'aurait pas arrêté de faire glisser. Enfin, nous ajoutons un auditeur au curseur.
Ajoutez ce qui suit à Main.as:
fonction privée setupLabels (): void StepperLabel.text = "Cliquez sur le bouton pour un nombre aléatoire"; // Taille automatiquement l'étiquette pour contenir tout le texte StepperLabel.autoSize = StepperLabel.autoSize = TextFieldAutoSize.LEFT; sliderLabel.text = "Faites glisser le curseur pour changer la taille du cercle"; // Taille automatiquement l'étiquette pour contenir tout le texte sliderLabel.autoSize = sliderLabel.autoSize = TextFieldAutoSize.LEFT; fonction privée setupSteppers (): void // valeurs minimales des steppers fromStepper.minimum = 0; toStepper.minimum = 1; // Valeurs maximales des steppers fromStepper.maximum = 99; toStepper.maximum = 100; // Définit la valeur des steppers ici fromStepper.value = 0; toStepper.value = 45; fonction privée setupButtons (): void randomNumButton.label = "Cliquez"; randomNumButton.addEventListener (MouseEvent.CLICK, getrandomNumer); loaderButton.label = "Charger Swf"; loaderButton.addEventListener (MouseEvent.CLICK, loadSwf); private function setupSlider (): void // Valeurs minimale et maximale du curseur slider.minimum = 1; slider.maximum = 3; // Ceci définit combien le curseur "incrémente" de slider.snapInterval = .1; // liveDragging signifie que les valeurs steppers sont disponibles lors du déplacement // si défini sur false, nous n'obtenons pas la valeur tant que nous n'avons pas arrêté de faire glisser slider.liveDragging = true; slider.addEventListener (SliderEvent.CHANGE, scaleCircle);
Ici nous ajoutons les fonctions restantes.
dans le getrandomNumber () fonction nous appelons une autre fonction, generateRandomNumber (), qui est tiré d'un tutoriel ici sur Activetuts + de Carlos Yanez. Allez-y et consultez ce tutoriel pour voir comment cela fonctionne!
le scaleCircle () fonction obtient la valeur du curseur et définit la scaleX et échelleY du le cercle movieClip. le scaleX et échelleY sont utilisés pour changer la taille (échelle) du clip.
le loadSwf () function configure un chargeur que nous utilisons pour charger un fichier SWF externe. Nous ajoutons ensuite un écouteur d'événement au programme du chargeur. contentLoaderInfo; la contentLoaderInfo contient des informations sur le chargement du chargeur (ici, un fichier SWF).
Nous avons ensuite mis en place un Barre de progression et l'ajouter à la scène. Nous définissons la barre de progression la source aucontentLoaderInfo du chargeur, et depuis le contentInfoLoader contient des informations sur le chargement du chargeur (y compris le bytesLoaded et octetsTotal) C’est ainsi que la barre de progression peut se mettre à jour pour refléter la quantité de fichier SWF chargée..
le terminéChargement () function définit les positions x et y du contenu du chargeur (c'est-à-dire le fichier SWF), puis l'ajoute à la scène. À ce stade, nous avons terminé avec la barre de progression, nous la supprimons donc du stade.
Puis nous fermons la classe et le paquet.
Accentsconagua
fonction privée getrandomNumer (e: Event): void // On passe ici deux nombres (les valeurs des steppers) generateRandomNumber (fromStepper.value, toStepper.value); fonction privée generateRandomNumber (minNum: Number, maxNum: Number): void // contient le nombre généré var randomNumber = (Math.floor (Math.random () * (maxNum - minNum + 1)) + minNum); // Ici, nous convertissons un nombre aléatoire en chaîne afin de pouvoir l'utiliser dans les libellés. StepperLabel.text = "Votre nombre aléatoire est" + String (randomNumber); fonction privée scaleCircle (e: Event): void // scaleX et scaleY augmentent ou diminuent la taille d'un MovieClip // nous utilisons ici la valeur du curseur de "1-3" theCircle.scaleX = e.target.value; theCircle.scaleY = e.target.value; fonction privée loadSwf (e: Event): void theLoader = new Loader (); theLoader.x = 319.00; theLoader.y = 31,00; theLoader.load (new URLRequest ("dummy.swf")); // Ici nous obtenons le contentLoaderInfo du chargeur qui est ce que le chargeur // charge (ici un swf) theLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, completedLoading); progressBar = new ProgressBar (); progressBar.x = 323; progressBar.y = 244; addChild (progressBar); // La source de la barre de progression est définie sur contentLoaderInfo du chargeur // contentLoaderInfo contient les informations sur le bytesLoaded / bytesTotal progress du fichier SWF progressBar.source = theLoader.contentLoaderInfo; public function termineLoading (e: Event): void // Nous définissons ici le chargeur content.x et .y //I.E. le swf .x et .y theLoader.content.x = 290; theLoader.content.y = 20; // On ajoute le contenu du chargeur I.E. le swf addChild (theLoader.content); // Comme le chargement est terminé, nous n'avons plus besoin de la barre de progression // Nous le supprimons donc removeChild (progressBar); // ferme la classe // ferme le paquet De nouveau, l’utilisation de composants est un excellent moyen d’ajouter des fonctionnalités à vos animations Flash sans avoir à les créer à partir de zéro.
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 NumericStepper.
Les propriétés sont les suivantes pour le composant NumericStepper:
Les propriétés du curseur sont les suivantes
SliderDirection.HORIZONTAL et SliderDirection.VERTICAL.Les propriétés de ProgressBar sont les suivantes
ProgressBarDirection.RIGHT indique que la barre de progression est remplie de gauche à droite. Une valeur de ProgressBarDirection.LEFT indique que la barre de progression est remplie de droite à gauche.ProgressBarMode.EVENT, ProgressBarMode.POLLED, ProgressBarMode.MANUAL Pour voir les propriétés des étiquettes et des boutons, veillez à consulter le conseil sur les étiquettes et les boutons..
Les fichiers d’aide constituent également un excellent endroit pour en savoir plus sur les propriétés du composant que vous pouvez définir dans le panneau des paramètres..
Merci de votre lecture et soyez attentifs aux prochaines introductions de composants!
