Créer un éditeur de luminosité dans ActionScript 3

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..


Aperçu du résultat final

Jetons un coup d'œil au résultat final sur lequel nous allons travailler:


Étape 1: bref aperçu

En utilisant la classe ColorTransform et un composant Slider, nous allons augmenter ou diminuer la luminosité d'un objet DisplayObject..


Étape 2: démarrage

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..


Étape 3: Choisissez un objet d'affichage

Tout DisplayObject peut être utilisé avec cette classe; pour cet exemple, j'ai choisi une image de Flickr:


Photo de Chi King.

Placez votre image au centre de la scène, convertissez-la en MovieClip et attribuez-lui un nom d'occurrence. image.


Étape 4: Panneau de luminosité

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.


Étape 5: Composant du curseur

Ouvrez le panneau Composants (Cmd / Ctrl + F7) et faites glisser un composant Slider vers votre panneau Luminosité. le centrer et le nommer curseur.


Étape 6: Inspecteur de composants

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:


Étape 7: ActionScript

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..


Étape 8: forfait

 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..


Étape 9: Classes requises

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;

Étape 10: Extension de la classe

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 

Étape 11: Variables

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 ();

Étape 12: Fonction du constructeur

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); 

Étape 13: Transformation de la couleur

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.


Étape 14: Appliquer les modifications

Cette ligne applique les modifications à l'image sur la scène..

 image.transform.colorTransform = colorTransform;

Étape 15: Valeur textuelle

Le texte dans le panneau de luminosité est également mis à jour.

 panel.bValue.text = e.value; 

Étape 16: Classe de document

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.


Conclusion

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!