Pré requis pour ce tutoriel:

  • Flash CS3 (c’est évident, mais sait-on jamais  :) )
  • Des connaissances dans la gestion des symboles et des images clés
  • Les outils de base sous Flash

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é.

Flash tips transparence - Renommer premier calque

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  :D )

Flash tips transparence - Importer image

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

Flash tips transparence - Créer nouveaux calques

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:

Flash tips transparence - Image originale et 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 »:

Flash tips transparence - Créer nouveau masque

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:

Flash tips transparence - Modifier alpha masque

Bon ça commence à ressembler à quelque chose hein?  :D Mais ce n’est pas non plus un super reflet (voir pas du tout hein? :P ) 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):

Flash tips transparence - Ajouter dégradé masque

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:

Flash tips transparence - Résultat reflet

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.

Ce qu’il ne faut pas faire:

  • Créer un dégradé de deux couleurs différentes et passer l’apha d’une des deux couleurs à 0%

Voici ce que cela donne:

Flash tips transparence - Mauvais exemple

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 ».

Flash tips produit - Nouveaux calques

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

Flash tips produit - Importer dessin

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)

Flash tips produit - Importer texture

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.

Flash tips produit - Convertir texture en clip

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.

Flash tips produit - Résultat final

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).

Flash tips produit - Différence produit et alpha

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! :mad: