Comment gérer la transparence sous Flash CS3

Pré requis pour ce tutoriel:

Gestion de l’alpha – Création d’un reflet pour une icône

La création d’un reflet est le parfait exemple d’utilisation de la transparence par les alphas. Ouvrons un nouveau projet (ctrl+n ou cmd+n). Peut importe si vous choisissez un projet ActionScript 1&2 ou ActionScript 3, nous n’allons aborder que des aspects graphiques qui seront valables dans tous les cas. Je renomme le «calque1 » en « icône » et me positionne sur ma première image clé.

J’insère sur cette première image clé une image. Pour cela j’ai deux options dans fichier>importer. Je peux importer dans la bibliothèque ce qui aura pour effet d’ajouter un nouvel objet dans notre biliothèque d’objets (comprenant nos boutons, clips et éléments graphiques), ou, importer dans la scène, ce qui aura pour effet d’importer à la fois notre image dans l’image clé courante (si celle-ci n’est pas verouillée) et dans la bibliothèque. Je choisi ici cette seconde option et importe sur ma première image clé une icône (vous aurez reconnu ma belle icone appareil photo  )

Je crée deux nouveaux calques en dessous de mon calque « icone ». Le premier que je nomme « masque » et le second « reflet ».

Je copie mon image (ctrl+c ou cmd+c), je me positionne ensuite sur la première image clé de mon calque « reflet » et colle mon image (clic droit>coller en place) j’ai ainsi deux fois mon icône sur deux calques différents, exactement à la même place. Je renverse verticalement ma nouvelle image (Modification>Transformer>Renverser Verticalement) et la décale verticalement en dessous afin d’obtenir notre première image, et son reflet:

Je me positionne alors sur l’image clé de notre calque « masque » et crée un rectangle blanc sans bordure par dessus notre image « reflet »:

Commençons maintenant notre travail sur la transparence. Sélectionner avec l’outil de sélection (V) votre rectangle blanc et modifier l’alpha de la couleur de remplissage. Paramétrez le à 50%, et dé-sélectionnez votre rectangle. Voilà on obtient un soupçon de transparence:

Bon ça commence à ressembler à quelque chose hein?  Mais ce n’est pas non plus un super reflet (voir pas du tout hein? ) Améliorons donc un peu tout ça. Je re-sélectionne mon rectangle et lui applique une couleur de remplissage dégradée de blanc à noir que je fais pivoter avec l’outil de transformation de dégradé (F):

La gestion de l’alpha que nous venons de voir peut également s’appliquer à chacune des couleurs du dégradé. Nous allons donc utiliser cette option pour créer notre reflet final. Je change le noir du dégradé en blanc (nous verrons qu’il est important d’avoir deux fois la même couleur) et je passe l’alpha du blanc du haut à 80%. Je tasse ensuite mon dégradé pour effacer un bout de mon reflet et voilà le résultat:

Maintenant, il est tout à fait possible de jouer avec le reflet . Vous pouvez transformer l’image « reflet » en clip et en lui appliquer un effet de flou.

Voici ce que cela donne:

Gestion du mode produit – ajout de texture

Nous allons voir maintenant que l’alpha ne permet pas de couvrir tous les besoins en matière de transparence et que le mode produit se révèle très pratique dans certaines situations. Créons un nouveau projet (toujours ActionScript 1,2 ou 3 peu importe) renommer le premier calque « dessins » et créer un nouveau calque par dessus « texture ».

Importer une nouvelle image sur la première image clé du claque « dessin » (cf.voir au dessus pour importer une image)

Positionnez vous ensuite sur la première image clé du calque « texture » et importez de la même manière votre texture (pour notre exemple, il s’agira d’une texture papier toute simple)

Avec l’outil de sélection (V) sélectionnez votre texture et transformez la en clip (et je dis bien en clip et non en élément graphique pour lesquels certaines options ne sont pas disponibles) Modification>Convertir en symbole.

Sélectionnez à nouveau votre clip texture_clip et changez le paramètre « fondu » en produit. Et voilà le tour est joué. Vous venez de créer une belle texture pour votre animation.

Je vous laisse juger de la différence entre la gestion de la transparence avec le mode de fusion « produit » (à droite) et l’alpha du même clip à 50% (à gauche).

Saisissant non? Donc vous l’aurez compris, ces deux modes de transparence ont des utilisations bien distinctes et sont complémentaires. Les exemples très simples que je vous ai donné sont aisément utilisables pour n’importe quelle illustration ou animation sous flash. Alors n’attendez plus! A vos souris!