Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

en complément
Masques et ActionScript

Masques (et interpolations)

Compatible Flash CS3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash Professionnel. Priorité aux techniques d'animation, de dessin et recours minimum à ActionScript.. Cliquer pour en savoir plus sur les compatibilités.Par Nataly, le 21 avril 2010

La technique du masque est en soi simplissime et on pourrait la résumer en deux lignes.
Ce qui est moins résumable, en revanche, c'est sa mise en œuvre combinée à des interpolations. On obtient très facilement des effets tout à fait intéressants sans une ligne de code.
Ce sera l'objet de ce non-tuto.
Je dis non-tuto car le propre du tuto c'est d'illustrer au pas à pas les étapes successives qui mèneront à un résultat, lequel résultat est l'objet du tuto.
Ici je me propose plutôt de vous raconter le quoi du pourquoi du comment de la gestion des masques afin que vous vous l'appropriiez pour inventer des effets chaque fois plus bluffants.

Prérequis Pour suivre ce qui va se passer, vous devrez être à l'aise avec les interpolations (MX, CS3 ou CS4, aucune discrimination ici) et les outils de dessin. Je ne détaillerai pas comment construire les différents éléments graphiques, je l'ai dit : ceci tient plus du didacticiel que du tuto dans son acception la plus généralement répandue.
Pas de panique néanmoins : il n'y aura rien de bien compliqué, dessiner des rectangles ou des cercles, voire des étoiles… ;)

Si ça vous dit, vous pourrez ensuite perfectionner la technique en ajoutant un zeste de code (rubrique en complément).

Construire un masque

Commençons par le tout début pour ceux qui découvriraient le principe, les autres peuvent sauter cette mise en route et se rendre ici : Animer les objets masqués

Si nous étions ensemble pour de vrai, je me serais déjà saisie d'une feuille A4, déchiré un trou en son centre, posé la dite feuille sur la couverture du premier magazine extirpé de mon sac à main, et on aurait constaté sans la moindre surprise que l'on voit à travers le trou une portion de l'image de couverture.

Et bien voilà, à pas grand chose près, c'est la technique du masque avec Flash.
Il nous faudra deux calques, un pour le trou, l'autre pour l'image dont on ne souhaite voir qu'une portion.

A vos souris on expérimente sur le champ !
Sur un calque une photo (ou un clip, ou n'importe quoi…)
Sur le calque du dessus un trou… Non ! N'attaquez pas le moniteur au piolet ! Le trou on va le figurer par une forme. On prend bien soin d'avoir le calque portant la forme-trou au dessus du calque contenant l'image dont on souhaite ne voir qu'un morceau.

Clic droit sur le calque du dessus, choisir Masque, (attention pas 'Masquer les autres' ;)) et voilà !

Vous remarquez que :
• Les icônes de calque ont changé de visuel, ils sont maintenant plutôt bleus, celui qui sert de masque figure un trou circulaire à travers lequel on verrait le motif à quadrillage bleu de celui du dessous… C'est-y pas mignon ? ;)

• Le calque portant la photo s'est “déporté” vers la droite. Je dis volontiers qu'il est subordonné au calque masque. Ça s'est fait “tout seul” quand on a “dit” que le calque du dessus était un masque. Bien sûr, si on souhaitait plusieurs calques subordonnés on pourrait le faire, mais ce n'est pas automatique. On peut ajouter ou supprimer des calques en subordination par simple glissé/lâché vers la droite (subordination) ou vers la gauche.

• Les calques sont verrouillés. D'ailleurs si vous les déverrouillez, l'effet masque disparait, on voit la construction et non le résultat.

Donc on est d'accord qu'on peut avoir plusieurs calques sous le calque masque, et qu'on ne verra de chacun d'eux que la portion découverte par le (ou les) “trou(s)”

On va aussi tomber d'accord sur une autre évidence, les graphismes portés par des calques sous le masque mais non masqués (pas subordonnés, pas bleus) ne sont pas masqués…
Oui ! Je vous énerve à énoncer des évidences. :mrgreen:
Il se trouve qu'on oublie un peu vite les dites évidences et que tout à l'heure vous vous direz peut-être “ah mais oui, mais c'est bien sûr”.

Maintenant je peux abandonner la métaphore du trou. Il est devenu limpide qu'un masque, masque tout graphisme à l'extérieur des formes (ou textes) qu'il porte, pour peu que ces graphismes soient sur des calques en subordination.

J'en vois qui ont entendu ma parenthèse rapide et qui frétillent de l'imagination : “Comment ça ? on peut mettre du texte sur un calque masque ? mais alors ?”

ben oui, on peut obtenir ça en deux coups de souris :) Fabriquez donc le tout dans un clip, ce clip posé sur la scène peut alors recevoir un filtre - ici un bête “Ombre portée” -

Animer les objets masqués

Maintenant passons aux choses, sinon sérieuses, du moins rigolotes (je trouve). Animons tout ça !

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ça vraiment c'était trop facile, c'était juste en matière d'échauffement. Oui il suffit d'animer l'image de fond (masquée) pour la voir se déplacer dans le “pochoir” constitué par le texte.

Alors je vous propose l'étape d'après :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Vous avez trouvé ? Super ! Passez à la suite, on vous rejoint.
Vous séchez ?
Merci, à quoi je sers sinon ;)
Donc, un indice : hop, je reprends ma feuille A4 du début, non une autre elle est toute abimée ;) et je déchire un trou en forme de U (ça suffit pour illustrer). Si je glisse sous la feuille un Canson rouge (fou tout ce qu'on trouve dans mon sac à main), voilà un U rouge… Je glisse un Canson bleu, le U est bleu… Ayé, vous avez compris :)
Je finis quand même.
Ce qui colorie le texte c'est un rectangle de couleur sous le calque masque portant le texte. Si maintenant je veux une lumière qui parcourt le texte, ce n'est rien d'autre qu'un ruban glissé entre la feuille A4 et le Canson de couleur. Pour nous donc, deux calques subordonnés, un pour la couleur (tout au dessous) un autre pour la “lumière”, avec une interpolation pour déplacer la lumière…

Avec ce principe d'animation des clips portés par des calques subordonnés, on fait tout un tas de choses, de la jauge qui se remplit aux effets de mouvement perpétuel qui nécessitent de masquer la triche…

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

On y reviendra dans le tuto dédié.

Animer le masque

Rien ne nous empêche d'appliquer une interpolation à l'objet posé sur le clip masque.

la première étape pour se mettre les idées au clair, c'est obtenir un effet d'apparition comme celui-ci

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Ici la photo reste fixe, c'est la petite étoile posée sur le calque masque qui s'interpole de la forme pour devenir grand rectangle aux dimensions de la photo.

Et du coup, si on garde à l'esprit que seuls les graphismes portés par des calques subordonnés sont masqués, on obtient ça tout facilement :
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

On met la zolie photo dans un clip, afin de pouvoir lui appliquer une teinte (propriété) elle sera portée par un calque, tout en bas, non masqué (mais c'est bien sûr ! ;)). Au dessus le couple masque/photo, un rectangle sur le calque masque qui recouvre progressivement toute la surface de la photo (la dévoile, donc) à l'aide d'une interpolation.
Avec une image noir et blanc l'effet colorisation est souvent sympa.

Dans la foulée, on peut sophistiquer les choses (bon, là, c'est tout moche mais les créatifs, c'est vous ;))

D'ailleurs le tuto accueillera avec plaisir
une illustration du principe
plus ébouriffante

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
On a tout bonnement empilé deux couples masque/photo avec tout en dessous, non masquée, la photo colorisée vert.

Exactement le même principe appliqué à une transition entre deux images

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ça commence à vous donner des idées ?

Plusieurs clips masquant le(s) même(s) objet(s)

Alors tiens, juste pour être sûrs…
L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

La seule subtilité, si on peut dire, consiste à réunir les trois cercles dans un même clip. Chacun des cercles sur son propre calque avec sa propre interpolation de mouvement. C'est ce clip principal qui sera posé sur le calque masque.


Mézalors… le reverso, c'est du même tonneau… ;)

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour vous entrainer

Jusque là, on était dans le cadre d'une technique ou d'une autre qu'on illustrait d'exemples… ça guide le raisonnement. Dans la vie c'est le contraire, on a une idée derrière les yeux et on se demande quelle technique on va bien pourvoir utiliser pour la réaliser.

Alors pour jouer je vous propose ça :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.
Vous trouverez le clip dans le fichier source joint.

Si ce qui vous arrête, c'est comment disposer des lettres en rond,
allez faire un tour
,

Les sources