La luminosité est un attribut de la perception visuelle dans lequel une source semble émettre ou réfléchir de la lumière.
Dans ce tutoriel, nous allons apprendre à modifier la luminosité d'un objet d'affichage à l'aide d'ActionScript 3..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
En utilisant la classe ColorTransform et un composant Slider, nous allons augmenter ou diminuer la luminosité d'un objet DisplayObject..
Ouvrez Flash et créez un nouveau fichier Flash (ActionScript 3)..
Définissez la taille de la scène sur 500x350px et définissez le taux de trame sur 24 images par seconde..
Tout DisplayObject peut être utilisé avec cette classe; pour cet exemple, j'ai choisi une image de Flickr:
Placez votre image au centre de la scène, convertissez-la en MovieClip et attribuez-lui un nom d'occurrence. image.
Nous allons créer un panneau avec un composant Slider et un champ de texte dynamique en tant qu'objets interactifs.
Sélectionnez l'outil Primitive Rectangle (R) et tracez un rectangle de 250x70px, définissez le rayon de l'angle sur 7 et modifiez son alpha à 60..
Convertissez-le en MovieClip et ajoutez le filtre suivant:
Le panneau devrait ressembler à ceci:
Double-cliquez sur le MovieClip pour passer en mode édition et créer un champ de texte dynamique. définir son nom d'instance sur bValue (pour "valeur de luminosité") et centrez-la. Donnez-lui une première entrée de 0. Vous pouvez également ajouter un titre au panneau et des icônes comme guide.
Ouvrez le panneau Composants (Cmd / Ctrl + F7) et faites glisser un composant Slider vers votre panneau Luminosité. le centrer et le nommer curseur.
Avec le composant curseur sélectionné, appuyez sur Maj + F7 pour ouvrir le panneau Inspecteur de composants et modifiez les options comme indiqué dans l'image:
Créez un nouveau document ActionScript et enregistrez-le sous. Main.as.
Nous allons utiliser une classe de document pour ce projet. Si vous ne savez pas comment utiliser une classe de document, lisez cette introduction rapide..
paquet
Le mot clé package vous permet d'organiser votre code en groupes pouvant être importés par d'autres scripts. Il est recommandé de les nommer en commençant par une lettre minuscule et d'utiliser des interconnexions pour les mots suivants, par exemple: mes classes.
Si vous ne souhaitez pas regrouper vos fichiers dans un package ou si vous n'avez qu'une seule classe, vous pouvez l'utiliser directement à partir de votre dossier source..
Quelques cours sont nécessaires pour que cela fonctionne. Pour une description plus détaillée de chaque classe, reportez-vous à l'aide de Flash (F1)..
import flash.display.Sprite; import fl.events.SliderEvent; import flash.geom.ColorTransform;
le s'étend mot-clé définit une classe qui est une sous-classe d'une autre classe. La sous-classe hérite de toutes les méthodes, propriétés et fonctions, ainsi nous pouvons les utiliser dans notre classe.
public class Main étend Sprite
Une seule variable est nécessaire dans cet exemple: une instance ColorTransform. Ceci sera utilisé pour changer les valeurs RVB de l'objet d'affichage cible.
var colorTransform: ColorTransform = new ColorTransform ();
Cette fonction est exécutée lorsque la classe est chargée.
Un écouteur SliderEvent est ajouté au composant Slider pour exécuter une fonction lorsque l'utilisateur modifie la valeur du Slider..
fonction publique Main (): void panel.slider.addEventListener (SliderEvent.CHANGE, updateBrightness);
Cette fonction est exécutée lorsque la valeur du curseur change. C'est la partie ColorTransform. Les décalages rouge, vert et bleu de la matrice de transformation de couleur sont définis pour correspondre à la valeur du curseur..
fonction privée updateBrightness (e: SliderEvent): void / * Définit les décalages RVB sur la valeur du curseur * / colorTransform.redOffset = e.value; colorTransform.greenOffset = e.value; colorTransform.blueOffset = e.value;
Vous voulez savoir ce que nous faisons ici? Consultez cet article expliquant les transformations de couleur.
Cette ligne applique les modifications à l'image sur la scène..
image.transform.colorTransform = colorTransform;
Le texte dans le panneau de luminosité est également mis à jour.
panel.bValue.text = e.value;
Revenez au fichier .fla et dans le panneau Propriétés, définissez le champ Classe sur Principale pour le lier à la classe de document.
Maintenant, vous pouvez facilement implémenter un moyen de modifier la luminosité d'une image ou d'un autre objet d'affichage à l'aide d'ActionScript 3..
Merci pour la lecture!