Stickman - Masque en Dégradé

INFOS
Version Flash 4 Niveau Intermediate Créé 5th June 2000 Modifié 12th June 2000

TRADUCTIONS
English

FICHIERS
ZIP	FLA

J'ai vu la question posée très souvent sur plusieurs forums: "Est-il possible d'avoir des masques en dégradé ?". Ce qui veut dire est-il possible d'avoir un masque qui se fond entre 2 calques, au lieu d'avoir un bord plein? Strictement parlant la réponse est non, mais il est possible de simuler cet effet. Au fait, le cercle statique dans l'exemple est juste là pour montrer ce que pourrait être un masque non dégradé.

Alors, seriez-vous l'oiseau rare ?

Pour être honnête, je ne crois pas que ce soit une idée originale, mais j'ai eu beau chercher, je n'ai rien trouvé de tel sur les sites de tutoriaux que je connais. Je ne peux pas dire que j'ai cherché très longtemps non plus. Ce n'est pas une solution des plus élégantes mais après tout ça fonctionne et c'est l'essentiel non ?

Alors quel est le secret ?

C'est très simple en fait. Pour comprendre comment fonctionne un masque déplaçable, vous devez lire le tutoriel que j'ai fait il y a quelques temps. Une fois que vous aurez compris ça, vous serez prêt pour le masque dégradé. Accrochez-vous.

On ne peut pas avoir de dégradé dans un masque, mais on peut avoir une série de masques, chacun un peu plus transparent que le précedent. Dans l'exemple il y a une série de cercles concentriques autour de la souris, chacun masquant seulement une petite partie de l'image, et qui sont de plus en plus transparents en s'éloignant du centre.

Le truc est de créer des cercles concentriques qui s'emboitent exactement, sans espace visible entre eux. Il y a deux méthodes -- ma méthode 'personnelle' et celle suggérée par Wooozle :

1) La méthode 'Stickman'

Créez d'abord des cercles concentriques linéaires de la plus petite épaisseur, H. Vous pouvez voir ça dans le clip d'animation Circle (source). Puis remplissez l'espace entre les lignes avec l'outil pot de peinture et coupez-collez les cercles résultants (un pour chaque clip, sans les lignes) --appelés ici circle1 jusqu'à circle 8--dans un calque de masque.

2) La méthode 'Wooozle'

Pendant un échange sur We're Here, Wooozle a indiqué que beaucoup de temps pouvait être gagné en utilisant l'interpolation de forme pour générer les masques au lieu de les créer un par un. Vous pouvez voir cette technique dans cet exemple. Intelligemment, l'exemple se sert d'un seul clip d'animation (Circle (tweened mask)), avec une interpolation de forme entre un grand cercle et un plus petit. Ensuite on crée plusieurs occurences et on les place chacun à une image différente (vous pouvez voir le code dans l'image 1 de la scène principale), donnant l'apparence d'une transition uniforme. Le résultat n'est pas aussi précis que la méthode ci-dessus mais ça passe si on ne fait pas de zoom. C'est un gain de temps appréciable.

Quand on place les masques obtenus dans la scène principale, on devra régler la transparence de sorte que le cercle le plus près du centre soit opaque (alpha 100%), le suivant un peu moins (par ex alpha 90%), le suivant un peu plus transparent (par ex alpha 80%) et ainsi de suite jusqu'au dernier presque invisible (par ex alpha 10%). Faites un zoom sur le coin haut à gauche sur la scène principale et vous verrez quelque chose comme ça.

Ouais, c 'est simple.

Très. Cela peut ne pas être très esthétique sur des machines lentes (je n'ai pas testé) mais je pense que la charge de travail n'est pas si importante pour le résultat obtenu.