• 12 heures
  • {0} Facile|{1} Moyenne|{2} Difficile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 30/04/2014

Filtres et modes de fusion

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, nous allons introduire les filtres et les modes de fusion ! Ils permettent de modifier facilement l'apparence de vos éléments graphiques à votre guise. Si certains en ont déjà entendu parler dans divers logiciels de graphisme, vous ne serez pas perdus puisque le principe est le même et les effets sont assez semblables.

Avant de vous lancer dans la lecture de ce chapitre, je dois vous mettre en garde. Effectivement, celui-ci est composé de deux glossaires qui regroupent l'ensemble des filtres et modes de fusion. Leur but est de pouvoir vous être utile plus tard lorsque vous en aurez besoin, ne passez donc pas trop de temps dessus pour le moment, retenez simplement le principe général de ces effets.

Les filtres

Introduction

Pour améliorer simplement le visuel de vos animations, vous pouvez utiliser les différents filtres proposés par l'Actionscript. Il s'agit d'effets graphiques que vous pouvez ajouter à l'ensemble de vos éléments visuels. Vous disposez donc de neuf filtres que vous pouvez combiner selon vos préférences pour changer l'apparence d'un objet. Voici, par exemple, à la figure suivante une combinaison de deux filtres ajoutée à une image.

Deux filtres ont été ajoutés à une image
Deux filtres ont été ajoutés à une image

Vous constaterez donc qu'il est alors possible de transformer radicalement le rendu final d'une scène. Parmi les filtres, vous trouverez plusieurs effets :

  • Le flou.

  • L'ombre portée.

  • La lueur.

  • Le biseau.

  • Etc.

Avant de vous énumérer l'ensemble des filtres disponibles je vous propose de voir ensemble le principe d'utilisation de ceux-ci.

Création d'un exemple

Pour comprendre le fonctionnement des filtres, nous allons prendre un exemple. Je suggère donc que nous reprenions l'image ainsi que l'effet précédent. La figure suivante représente l'image originale telle qu'elle est chargée à l'intérieur de l'animation. Vous pouvez évidemment travailler sur une image différente.

L'image originale
L'image originale

Nous allons donc charger notre image comme vous savez maintenant le faire :

[Embed(source = 'images/Photo.png')]
private var Photo:Class;

Puis nous allons l'instancier et l'ajouter à la liste d'affichage :

var maPhoto:Bitmap = new Photo();
this.addChild(maPhoto);

Ajout de filtres

Chacun des neufs filtres est en fait défini par sa propre classe. Ainsi, ils possèdent chacun leurs propres propriétés permettant de paramétrer l'effet correspondant. Dans l'exemple précédent, nous avons utilisé les deux classes BlurFilter et ColorMatrixFilter.
Nous apprendrons à utiliser ces classes plus tard, c'est pourquoi, je vous propose directement le code de ces deux effets.

Flou
var flou:BlurFilter = new BlurFilter(); 
flou.blurX = 2; 
flou.blurY = 2; 
flou.quality = BitmapFilterQuality.HIGH;
Correction colorimétrique
var matrix:Array = new Array();
matrix.push(0.75, 0.75, 0.75, 0, 0); // Rouge
matrix.push(0.50, 0.50, 0.50, 0, 0); // Vert
matrix.push(0.25, 0.25, 0.25, 0, 0); // Bleu
matrix.push(0, 0, 0, 1, 0); // Alpha
var correctionCouleur:ColorMatrixFilter = new ColorMatrixFilter(matrix);

Application des filtres

Tout objet DisplayObject possède une propriété filters de type Array. Il est ainsi possible d'ajouter des filtres à sa guise en manipulant ce tableau.
Ajoutons donc nos deux filtres à l'initialisation de notre tableau filters :

maPhoto.filters = new Array(correctionCouleur, flou);

Nous obtenons ainsi notre image avec une correction de couleur et un flou comme le montre la figure suivante.

L'image a été modifiée
L'image a été modifiée

Glossaire des filtres

Les filtres de base

Flou

Pour flouter un élément graphique, nous disposons de la classe BlurFilter :

var flou:BlurFilter = new BlurFilter(); 
flou.blurX = 5; 
flou.blurY = 5; 
flou.quality = BitmapFilterQuality.MEDIUM;

Le flou est ainsi définit par les propriétés suivantes :

  • blurX : quantité de flou horizontal.

  • blurY : quantité de flou vertical.

  • quality : qualité du flou définie par les valeurs de la classe BitmapFilterQuality.

Le résultat se trouve à la figure suivante.

L'image est floutée
L'image est floutée
Ombres portées

Les ombres portées sont définies grâce à la classe DropShadowFilter :

var ombre:DropShadowFilter = new DropShadowFilter(); 
ombre.color = 0x333333;
ombre.distance = 5; 
ombre.angle = -30;

Pour paramétrer votre ombre portée, utilisez les propriétés suivantes :

  • color : couleur de l'ombre.

  • distance : distance « fictive » de l'objet à la surface derrière elle.

  • angle : orientation de la lumière et donc de l'ombre.

Le résultat se trouve à la figure suivante.

Une ombre portée a été ajoutée
Une ombre portée a été ajoutée
Lueur simple

Il est possible de créer une lueur ou un rayonnement derrière l'objet grâce à la classe GlowFilter :

var lueur:GlowFilter = new GlowFilter(); 
lueur.color = 0xFFAA66;
lueur.blurX = 15; 
lueur.blurY = 15; 
lueur.quality = BitmapFilterQuality.MEDIUM;

Nous retrouvons ici des propriétés semblables à celles que nous avons déjà vu précédemment, auxquelles vous pouvez en ajouter de nouvelles :

  • alpha : opacité de la lueur.

  • strength : intensité du rayonnement.

  • inner : indique si l'ombre est interne ou non.

  • hideObject : indique si l'objet doit être visible ou non.

Le résultat se trouve à la figure suivante.

Une lueur simple
Une lueur simple
Lueur en dégradé

L'effet de rayonnement que nous venons d'aborder peut être personnalisé en ajoutant un dégradé à la lueur. Pour cela, nous disposons de la classe GradientGlowFilter :

var lueur:GradientGlowFilter = new GradientGlowFilter(); 
lueur.distance = 0; 
lueur.angle = 45; 
lueur.colors = [0xFF0000, 0x333333]; 
lueur.alphas = [0, 1]; 
lueur.ratios = [0, 255]; 
lueur.blurX = 15; 
lueur.blurY = 15; 
lueur.strength = 2; 
lueur.quality = BitmapFilterQuality.HIGH; 
lueur.type = BitmapFilterType.OUTER;

Dans ce cas de figure, nous observons plusieurs nouveautés comme la définition du dégradé grâce aux propriétés colors, alphas et ratios ainsi que la définition de la lueur en interne ou en externe par le biais de la classe BitmapFilterType.

Le résultat se trouve à la figure suivante.

Une lueur en dégradé
Une lueur en dégradé
Biseau simple

Pour donner du relief à un objet, vous pouvez définir un biseau à l'aide de la classe BevelFilter :

var biseau:BevelFilter = new BevelFilter();
biseau.distance = 5; 
biseau.angle = 45; 
biseau.highlightColor = 0xFFFFFF; 
biseau.highlightAlpha = 0.5; 
biseau.shadowColor = 0x000000; 
biseau.shadowAlpha = 0.5; 
biseau.blurX = 3; 
biseau.blurY = 3; 
biseau.strength = 3; 
biseau.quality = BitmapFilterQuality.HIGH; 
biseau.type = BitmapFilterType.INNER;

Pour définir ce filtre, vous aurez principalement besoin de définir la distance de l'effet ainsi que des effets de lueurs et d'ombres définis par les couleurs et opacités highlightColor, highlightAlpha, shadowColor et shadowAlpha.

Le résultat se trouve à la figure suivante.

Un biseau simple
Un biseau simple
Biseau en dégradé

Une variante de biseau existe grâce à l'utilisation d'un dégradé dans la classe GradientBevelFilter :

var biseau:GradientBevelFilter = new GradientBevelFilter(); 
biseau.distance = 6; 
biseau.angle = 60; 
biseau.colors = [0x000000, 0x006666, 0xFFFFFF]; 
biseau.alphas = [1, 0, 1]; 
biseau.ratios = [0, 128, 255]; 
biseau.blurX = 6; 
biseau.blurY = 6; 
biseau.quality = BitmapFilterQuality.HIGH;

Là encore, la principale différence par rapport à la version simple est la définition d'un dégradé de couleurs.

Le résultat se trouve à la figure suivante.

Un biseau en dégradé
Un biseau en dégradé

Correction de couleurs

Un peu de théorie

Pour effectuer des corrections au niveau des couleurs, il existe la classe ColorMatrixFilter. Comme son nom l'indique, elle est composée d'une matrice qui permet de redéfinir la couleur d'un pixel. Ainsi, les lignes redéfinissent, dans l'ordre, les composantes suivantes d'un pixel : rouge, vert, bleu et alpha. Les différentes composantes de celles-ci peuvent alors s'écrire suivant la forme suivante :

$f_{canal}(x,y) = \alpha_R \times s_{rouge}(x,y) + \alpha_V \times s_{vert}(x,y) + \alpha_B \times s_{bleu}(x,y) + \alpha_A \times s_{alpha}(x,y) + \alpha$. Où :

  • $s_{rouge}(x,y)$, $s_{vert}(x,y)$, $s_{bleu}(x,y)$ et $s_{alpha}(x,y)$ sont les composantes rouge, vert, bleu et alpha du pixel source.

  • $\alpha_R$, $\alpha_V$, $\alpha_B$ et $\alpha_A$ représentent leur contribution dans la valeur du canal de sortie.

  • $\alpha$ est une constante.

En réalité, cette matrice est décrite à l'intérieur d'un tableau de 20 éléments. Chaque ligne est alors définie par une succession de 5 coefficients. Voici donc notre « pseudo-matrice » A dans laquelle les colonnes correspondent aux composantes du pixel d'origine et les lignes aux composantes du pixel final :

$s_{rouge}$

$s_{vert}$

$s_{bleu}$

$s_{alpha}$

$f_{rouge}$

A[0]

A[1]

A[2]

A[3]

A[4]

$f_{vert}$

A[5]

A[6]

A[7]

A[8]

A[9]

$f_{bleu}$

A[10]

A[11]

A[12]

A[13]

A[14]

$f_{alpha}$

A[15]

A[16]

A[17]

A[18]

A[19]

En suivant cette logique, l'image serait inchangée par application de la matrice suivante :

$\begin{matrix} 1 & 0 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 & 0 \\ 0 & 0 & 1 & 0 & 0 \\ 0 & 0 & 0 & 1 & 0 \\\end{matrix}$
Afin de mieux comprendre ce dont il est question, je vous propose à la suite divers exemples d'utilisation de cette classe ColorMatrixFilter.

Saturation

Cette technique consiste à saturer les couleurs afin d'obtenir une image finale en noir et blanc. Il faut alors que chaque pixel dispose au final de la même quantité de rouge, de vert et de bleu. Voici comment réaliser cela :

var matrix:Array = new Array();
matrix.push(0.33, 0.33, 0.33, 0, 0); // Rouge
matrix.push(0.33, 0.33, 0.33, 0, 0); // Vert
matrix.push(0.33, 0.33, 0.33, 0, 0); // Bleu
matrix.push(0, 0, 0, 1, 0); // Alpha
var correctionCouleur:ColorMatrixFilter = new ColorMatrixFilter(matrix);

Le résultat se trouve à la figure suivante.

Un effet de saturation
Un effet de saturation
Luminosité

En parlant de luminosité, il est justement possible de la contrôler en jouant sur la valeur de ces coefficients. Nous pouvons alors diminuer cette luminosité par exemple :

var matrix:Array = new Array();
matrix.push(0.5, 0, 0, 0, 0); // Rouge
matrix.push(0, 0.5, 0, 0, 0); // Vert
matrix.push(0, 0, 0.5, 0, 0); // Bleu
matrix.push(0, 0, 0, 1, 0); // Alpha
var correctionCouleur:ColorMatrixFilter = new ColorMatrixFilter(matrix);

Le résultat se trouve à la figure suivante.

Il est possible de jouer sur la luminosité
Il est possible de jouer sur la luminosité
Teinte

La teinte est plus difficile à gérer car la « rotation » des couleurs est généralement suivie d'une saturation.
Toutefois, je vous donne l'exemple d'un décalage de 120° dans les couleurs, ce qui revient à décaler le vert au rouge, le bleu au vert, etc. :

var matrix:Array = new Array();
matrix.push(0, 0, 1, 0, 0); // Rouge
matrix.push(1, 0, 0, 0, 0); // Vert
matrix.push(0, 1, 0, 0, 0); // Bleu
matrix.push(0, 0, 0, 1, 0); // Alpha
var correctionCouleur:ColorMatrixFilter = new ColorMatrixFilter(matrix);

Le résultat se trouve à la figure suivante.

Il est possible de « décaler » les couleurs
Il est possible de « décaler » les couleurs
Négatif

Un effet négatif consiste à inverser les couleurs, c'est-à-dire soustraire les valeurs d'origine à la valeur maximale 255.
Dans ce cas, nous aurons alors besoin d'utiliser une constante, comme vous pouvez le voir ci-dessous :

var matrix:Array = new Array();
matrix.push(-1, 0, 0, 0, 255); // Rouge
matrix.push(0, -1, 0, 0, 255); // Vert
matrix.push(0, 0, -1, 0, 255); // Bleu
matrix.push(0, 0, 0, 1, 0); // Alpha
var correctionCouleur:ColorMatrixFilter = new ColorMatrixFilter(matrix);

Le résultat se trouve à la figure suivante.

L'image en négatif
L'image en négatif

Convolution

Introduction

La convolution utilisée par la classe ConvolutionFilter fonctionne également à l'aide d'une matrice. Néanmoins, celle-ci est une représentation d'un pixel et de ses voisins proches. Cette matrice peut théoriquement être de dimension quelconque, toutefois nous nous contenterons d'une matrice $3 \times 3$ pour la suite.
Ainsi, la valeur centrale représente le pixel actuel et les autres valeurs, les pixels alentours. La couleur finale d'un pixel est alors déterminée à partir de sa valeur initiale et de celles des pixels voisins.
Une image intacte est donc composé uniquement de la valeur 1 au centre de la matrice :

$\begin{matrix} 0 & 0 & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 0 \\\end{matrix}$

Avant de vous montrer différents exemples d'application, je vous présente ici la manière d'utiliser ce filtre en Actionscript :

var matrix:Array = new Array(); 
// Définition de la matrice
var convolution:ConvolutionFilter = new ConvolutionFilter(); 
convolution.matrixX = 3; 
convolution.matrixY = 3; 
convolution.matrix = matrix;

Vous remarquerez alors que la matrice est également définie à l'aide d'un tableau de type Arraydont il est nécessaire de spécifier les dimensions à l'aide des propriétés matrixX et matrixY.

Flou

L'application la plus simple est donc de générer un flou en « moyennant » la valeur du pixel central à celle des pixels voisins :

var matrix:Array = new Array();
matrix.push(0, 0.2, 0);
matrix.push(0.2, 0.2, 0.2), 
matrix.push(0, 0.2, 0);

Le résultat se trouve à la figure suivante.

L'image est floue
L'image est floue

Il pourrait également être possible de prendre en compte la valeur des pixels en diagonale pour la génération de ce flou.

Détection de contours

La convolution est principalement utile pour détecter les contours à l'intérieur d'une image. Le principe est alors de retrancher la valeur des pixels voisins et ainsi révéler les zones où les pixels proches n'ont pas une valeur identique. Voici donc comment détecter des contours :

var matrix:Array = new Array();
matrix.push(0, -1, 0);
matrix.push(-1, 4, -1), 
matrix.push(0, -1, 0);

Le résultat se trouve à la figure suivante.

Détection des contours
Détection des contours
Accentuation de contours

Si vous avez bien regardé la matrice de détection de contours, vous noterez que la somme des valeurs est nulle. Nous avons alors perdu des informations concernant l'image. Ainsi, en rajoutant 1 au centre, il est possible de transformer cette détection de contours en accentuation de contours. Voyez donc ce que cette nouvelle matrice provoque :

var matrix:Array = new Array();
matrix.push(0, -1, 0);
matrix.push(-1, 5, -1), 
matrix.push(0, -1, 0);

Le résultat se trouve à la figure suivante.

Accentuation des contours
Accentuation des contours
Estampage

Cette détection de contours permet également de créer un effet d'estampage pour faire ressortir le « relief » de l'image. Voici comment procéder :

var matrix:Array = new Array();
matrix.push(-2, -1, 0);
matrix.push(-1, 1, 1), 
matrix.push(0, 1, 2);

Le résultat se trouve à la figure suivante.

Estampage de l'image
Estampage de l'image

Dans l'exemple précédent, nous avions des valeurs négatives dans le coin supérieur gauche et des valeurs positives dans le coin opposé, ce qui a pour effet de « creuser » l'image. En inversant ces valeurs, vous obtiendrez donc l'effet inverse.

Mappage de déplacement

Enfin, la classe DisplacementMapFilter est le dernier filtre en Flash. Celui-ci permet d'utiliser ce qu'on appelle une carte de déplacement pour déformer une image.
Le déplacement est alors créé à partir des différents canaux de cette « carte ». Dans l'exemple que nous verrons par la suite, nous avons ainsi défini le canal de couleur bleue pour l'affectation de la position en x, et le canal de couleur rouge de celui en y.
Voici donc notre image de mappage du déplacement à la figure suivante.

<image legende="" legendevisible="oui">http://uploads.siteduzero.com/files/407001_408000/407091.png</image>

Voici donc comment utiliser cette image de mappage du déplacement chargée grâce à la classe Class sous le nom de Deplacement :

var monDeplacement:Bitmap = new Deplacement();
// Définition de la carte de déplacement
var map:BitmapData = new BitmapData(monDeplacement.width, monDeplacement.height); 
map.draw(monDeplacement);
// Création du filtre
var deplacement:DisplacementMapFilter = new DisplacementMapFilter();
deplacement.mapBitmap = map; 
deplacement.componentX = BitmapDataChannel.BLUE;
deplacement.componentY = BitmapDataChannel.RED;
deplacement.scaleX = 60;
deplacement.scaleY = 60;
deplacement.mode = DisplacementMapFilterMode.IGNORE;

Comme vous l'avez certainement deviné, les canaux de couleurs sont choisis grâce à la classe BitmapDataChannel et l'échelle d'affectation est spécifiée à l'aide des propriétés scaleX et scaleY. Enfin, les constantes de la classe DisplacementMapFilterMode permettent de gérer l'affectation des pixels sur les bords de l'image.

Le résultat se trouve à la figure suivante.

<image legende="" legendevisible="oui">http://uploads.siteduzero.com/files/407001_408000/407092.png</image>

Les modes de fusion

Définition

Un autre moyen d'améliorer rapidement et facilement le rendu final de vos objets visuels est l'utilisation de modes de fusion !
Lorsqu'on parle de fusion, il s'agit en fait de « mixer » différents éléments graphiques ensemble. Le principe est alors de gérer la manière dont ces différents objets seront fusionnés dans le rendu final. Les modes de fusion sont donc également une manière rapide de transformer l'apparence de vos objets d'affichage.

Fusion de calque

La première utilité de ces modes de fusion est de pouvoir combiner différents objets superposés, nommés communément calques, en fusionnant leurs couleurs.
Voici à la figure suivante un exemple de fusion entre deux calques.

Fusion de deux images
Fusion de deux images
Fusion de transparence

La seconde utilisation de ces modes de fusion est la fusion de transparence. Le principe est d'utiliser les niveaux de transparence d'un calque pour masquer certaines parties d'un second élément.
Voici un exemple :

Fusion de transparence
Fusion de transparence

Mise en place

La fusion de calques peut être réalisée entre n'importe quels objets héritant de la classe DisplayObject. Ceux-ci disposent alors d'une propriété nommée blendMode pour définir le mode de fusion désiré. Cette définition est alors réalisée à l'aide des constantes de la classe BlendMode.

Voici donc comment ajouter le mode de fusion nommée DARKEN à l'objet monCalque :

monCalque.blendMode = BlendMode.DARKEN;

Toutefois, en ce qui concerne les fusions de transparence, vous aurez également besoin d'imposer la création d’un groupe de transparences pour l’objet d’affichage. Cela consiste à appliquer un mode de fusion de type LAYER au conteneur :

this.blendMode = BlendMode.LAYER;

Voilà, vous connaissez tout sur les modes de fusion à présent. Il ne nous reste plus qu'à faire un tour des treize modes de fusion disponibles.
Pour vous aider, je vous propose un petit glossaire.

Glossaire de modes de fusion

Le mode de fusion par défaut

Tout objet d'affichage possède obligatoirement un seul et uniquemode de fusion. Ainsi, il existe un mode de fusion nommé NORMAL qui est appliqué par défaut à tout objet. Voici donc comment redéfinir le mode de fusion :

monCalque.blendMode = BlendMode.NORMAL;

Le résultat se trouve à la figure suivante.

Fusion par défaut
Fusion par défaut

Les fusions de calques

Addition

Comme son nom l'indique, ce mode de fusion va additionner les différents canaux de couleurs du calque à ceux de l'arrière-plan. Pour utiliser celui-ci, vous disposez le la constante ADD :

monCalque.blendMode = BlendMode.ADD;

Le résultat se trouve à la figure suivante.

Fusion par addition
Fusion par addition

Ce mode de fusion aura donc tendance à éclaircir l'arrière-plan. Celui-ci peut être utilisé pour créer des transitions entre deux objets en utilisant un fondu d’éclaircissement.

Obscurcir

Ce mode de fusion permet de sélectionner les valeurs les plus faibles des canaux de couleurs entre le calque et l'arrière-plan. Il est défini par la constante DARKEN :

monCalque.blendMode = BlendMode.DARKEN;

Le résultat se trouve à la figure suivante.

L'image est obscurcie
L'image est obscurcie

Bien évidement, en l'utilisant vous allez obscurcir l'arrière plan. L'assombrissement est toutefois moins intense qu'avec le mode de fusion MULTIPLY.

Différence

Le principe ici est de soustraire, pour chacun des canaux de couleurs, la valeur la plus sombre des deux de la plus claire. Voici la constante concernée :

monCalque.blendMode = BlendMode.DIFFERENCE;

Le résultat se trouve à la figure suivante.

Fusion par différence de couleur
Fusion par différence de couleur

L'utilisation de ce mode de fusion n'est pas très courante car il est difficile de prévoir l'apparence finale. Utilisez donc celui-ci avec précaution !

Lumière crue

Le principe de ce mode de fusion est relativement complexe. Néanmoins, vous pouvez retenir qu'il permet de faire ressortir et d'assombrir les ombrages d'une image. Le nom de la constante qui le définit est HARDLIGHT :

monCalque.blendMode = BlendMode.HARDLIGHT;

Le résultat se trouve à la figure suivante.

Les ombres sont mises en valeur
Les ombres sont mises en valeur

Notez que celui-ci a tendance a masquer les couleurs claires de l'arrière-plan.

Négatif

Le principe de cet effet, que nous avons déjà vu auparavant, est d'inverser les valeurs sur chacun des canaux de couleurs. Il est défini par la constante INVERT :

monCalque.blendMode = BlendMode.INVERT;

Le résultat se trouve à la figure suivante.

Inversion de la couleur de chaque pixel
Inversion de la couleur de chaque pixel

La couleur d'origine du calque où le mode de fusion est appliqué n'a ici aucun effet sur le rendu final. Il s'agit également d'un mode de fusion peu courant.

Éclaircir

Dans ce mode de fusion, les valeurs de canaux de couleurs de couleurs retenues sont celles qui sont les plus claires entre le calque et l'arrière-plan. Il s'agit du mode de fusion opposé à DARKEN. Voici sa constante :

monCalque.blendMode = BlendMode.LIGHTEN;

Le résultat se trouve à la figure suivante.

Éclaicissement de l'image
Éclaicissement de l'image

Ce dernier est également moins éclaircissant que le mode de fusion ADD.

Produit

Dans ce mode de fusion, les valeurs des canaux de couleurs du calque et de l'arrière-plan sont multipliées entre elles puis sont « normalisées ». La constante correspondante est MULTIPLY :

monCalque.blendMode = BlendMode.MULTIPLY;

Le résultat se trouve à la figure suivante.

Multiplication des couleurs
Multiplication des couleurs

L'effet produit est un assombrissement de l'arrière-plan. Ce mode de fusion proche de DARKEN est toutefois plus radical dans l'obscurcissement.

Incrustation

Le principe de fonctionnement de ce mode de fusion est plutôt complexe. La constante utilisée est OVERLAY :

monCalque.blendMode = BlendMode.OVERLAY;

Le résultat se trouve à la figure suivante.

Incrustation des couleurs
Incrustation des couleurs

Proche de HARDLIGHT, ce mode de fusion est généralement très utilisé. Le rendu final est néanmoins légèrement différent de ce dernier dans les couleurs claires qui restent quasi-intactes.

Écran

La particularité de ce mode de fusion est de supprimer toute nuance de noir du calque. Il ne reste ensuite plus que la couleur « brute » de celui-ci. La constante qui le définit est SCREEN :

monCalque.blendMode = BlendMode.SCREEN;

Le résultat se trouve à la figure suivante.

Mode de fusion écran
Mode de fusion écran

Ce mode de fusion a donc pour effet d'éclaircir l'arrière-plan.

Soustraction

Comme vous vous en doutez, ce mode de fusion va soustraire les différents canaux de couleurs du calque à ceux de l'arrière-plan. Celui-ci correspond à la constante SUBTRACT :

monCalque.blendMode = BlendMode.SUBTRACT;

Le résultat se trouve à la figure suivante.

Soustration des couleurs
Soustration des couleurs

Ce mode de fusion est donc l'opposé de ADD. Ainsi, il peut être utilisé pour créer des transitions en utilisant cette fois un fondu d’assombrissement.

Les fusions de transparence

Transparence

Ce mode de fusion permet d'appliquer les niveaux de transparence du calque à l'arrière-plan. Comme nous l'avons dit, ce type de fusion nécessite de modifier également le mode de fusion du conteneur. Voici donc comment réaliser cette opération grâce à la constante ALPHA :

this.blendMode = BlendMode.LAYER;
monCalque.blendMode = BlendMode.ALPHA;

Le résultat se trouve à la figure suivante.

Transfert de la transparence
Transfert de la transparence
Suppression

Le principe ici est l'opposé de ALPHA. Ainsi, les niveaux de transparence du calque sont maintenant soustraits de l'arrière-plan. Le nom de la constante correspondant est donc ERASE :

this.blendMode = BlendMode.LAYER;
monCalque.blendMode = BlendMode.ERASE;

Le résultat se trouve à la figure suivante.

Suppression de l'opacité
Suppression de l'opacité
En résumé
  • Les filtres sont des effets qui sont applicables à tout objet graphique.

  • Il existe neuf filtres en Actionscript, regroupés dans le package flash.filters.

  • Chaque filtre est associé à une classe, dont les propriétés permettent de décrire l'effet correspondant.

  • Ceux-ci sont ensuite ajoutés à la propriété filters de type Array de tout objet DisplayObject.

  • Les modes de fusion permettent de définir la manière dont plusieurs éléments doivent être fusionner lors de l'affichage final.

  • Chaque élément héritant de DisplayObject dispose d'un unique mode de fusion défini dans la propriété blendMode.

  • Tous ces modes de fusion sont définis à l'aide des constantes de la classe BlendMode.

Exemple de certificat de réussite
Exemple de certificat de réussite