Comment créer des dégradés avec ActionScript

De nombreuses options sont disponibles pour configurer les gradients générés avec le code AS3. Dans cet article, nous allons explorer diverses options avec une application interactive que vous pouvez utiliser pour modifier ces options à la volée..

Récréation

Jouez avec les options du fichier SWF ci-dessus. Le rectangle de gauche vous montre le dégradé résultant tel qu'il apparaîtrait lorsque tracé dans un rectangle 50x50. Le rectangle de droite montre la matrice avec le réglage actuel. Comparez les deux en explorant tous les paramètres et tout cela aura du sens..

Lorsque vous avez créé un dégradé que vous aimez, appuyez sur Cliquez ici pour le code pour voir une liste de code AS3 que vous pouvez copier et coller dans votre propre projet pour générer le dégradé créé.

Dans la génération de code, des variables supplémentaires ont été ajoutées afin que vous puissiez facilement modifier l'apparence du dégradé..

gradientScaling, utilisez ceci pour augmenter la taille.
gradientOffsetX, utilisez-le pour déplacer le dégradé horizontalement.
gradientOffsetY, utilisez-le pour déplacer le dégradé verticalement.

Aperçu du dégradé

Pour créer un dégradé, vous devez utiliser le graphique objet d'un Forme, ou toute classe qu'il sous-classe. Ensuite, nous devons créer le remplissage en dégradé, en appelant

 graphics.beginGradientFill ()

Ces paramètres sont obligatoires:

type: chaîne
couleurs: tableau
alphas: tableau
ratios: tableau

Ces paramètres sont facultatifs:

matrice: matrice = null
spreadMethod: String = "pad"
interpolationMethod: String = "rgb"
focalPointRatio: Number = 0

J'irai bien chaque paramètre plus tard. Si vous préférez jouer avec, essayer de le résoudre vous-même, j'ai créé un SWF pour cette raison, et il peut même générer un code fonctionnel pour le dégradé que vous avez créé. Découvrez-le en haut de l'article.

Pour une documentation complète sur la création de dégradés, consultez la section LiveDocs à la rubrique.

Type de dégradé

Définissez le type de dégradé avec: flash.display.GradientType

Couleurs, Alphas, Ratios

Ces trois tableaux doivent correspondre. Donc, si vous voulez trois couleurs, vous devez également fournir trois alphas et trois ratios.

Le tableau de couleurs nécessite des valeurs hexadécimales. (comme 0xFF0000 pour le rouge)

Le tableau alphas nécessite des nombres compris entre 0 et 1.

Le tableau de ratios nécessite des nombres compris entre 0 et 255. Ceux-ci doivent être dans le bon ordre. [100,0,200] n'est pas valide, mais [0,100,200] est.

Voici un exemple de ce qui se passe lorsque vous modifiez les ratios:

Matrice

La matrice définit l'apparence du dégradé. Si vous ne le définissez pas, il aura une largeur de 200px. Si vous souhaitez contrôler l'apparence du dégradé, vous devez créer une nouvelle matrice:

 var gradientMatrix: Matrix = new Matrix ();

Ensuite, vous devez créer un dégradé sur la matrice en appelant:

 gradientMatrix.createGradientBox

Les paramètres suivants sont requis:

largeur: nombre
hauteur: nombre

Ces paramètres sont facultatifs:

rotation: nombre = 0
tx: nombre = 0
ty: Nombre = 0

largeur est la largeur de la matrice (non affectée par la rotation de la matrice).

la taille est la hauteur de la matrice (non affectée par la rotation de la matrice).

rotation est la rotation de la matrice, en radians.

tx est le décalage horizontal de la matrice (non affecté par la rotation de la matrice).

ty est le décalage vertical de la matrice (non affecté par la rotation de la matrice).

Méthode de propagation

Si la matrice ne recouvre en quelque sorte pas toute la zone que vous dessinez, le reste devra être rempli. Il y a trois façons différentes de gérer cela:

Définissez la méthode de propagation avec: flash.display.SpreadMethod

Méthode d'interpolation

C’est ainsi que la transition de couleur est calculée. Deux options sont possibles:

Définissez la méthode d'interpolation avec: flash.display.InterpolationMethod

Ratio des points focaux

Cela n'a d'effet que si vous utilisez des dégradés radiaux. Il accepte les valeurs comprises entre -1 et 1. Si vous fournissez un nombre supérieur à 1, ne vous inquiétez pas, la valeur par défaut est 1. Cela est également affecté par la rotation (vous pouvez donc le placer en haut de régler le point focal sur -1 et faire pivoter sur Pi / 2).

Dessin

Lorsque vous avez terminé, vous devez dessiner le remplissage. Cela peut être effectué par n’importe laquelle des méthodes de dessin avec remplissage graphique, comme beginFill ()..

Si vous n’utilisez pas (0,0) comme point de départ de la méthode de dessin, vous devez vous rappeler de changer le tx et ty valeurs de la matrice.

Conclusion

Maintenant, vous devriez être prêt à vivre de nouvelles aventures avec des dégradés générés par le code.

Merci d'avoir lu!

Code