Accueil > Tutoriels pour les webdesigners > Flash MX > Les bases de Flash > Créer un reflet sur un texte

Créer un reflet sur un texte

jeudi 12 juin 2008, par MØG

Voici une méthode pour créer un reflet sur un texte grâce à Flash.
Pour ce tutorial, j’aurais besoin de 2 images réalisées sous Photoshop : la 1er est l’image avec mon texte fini que j’ai enregistré au format *.JPEG, la 2ème image est mon texte à l’identique sans style de calque ni fond que j’ai enregistré au format *.PNG pour prendre en compte les transparences.

Voici le rèsultat : l’animation flash :

Texte de remplacement

Etape 1 :

1. Je viens de créer un nouveau document, je vais dans le panneau des propriétés pour changer la taille du document par rapport à l’image à venir, la couleur d’arrière plan (le blanc peut être gênant) pour un gris foncé, puis je change la cadence : de 12 ips je passe à 24 ips pour une animation plus fluide.

2. J’ouvre la bibliothèque de mon document (raccourci clavier Ctrl +L), et j’importe mes 2 images : Menu Fichier > Importer > Importer dans la bibliothèque.

3. Dans le panneau bibliothèque, je vais glisser – déplacer l’image finie (celle au format *.JEPG) vers la zone de travail, je la positionne parfaitement grâce au panneau Aligner (raccourci clavier Ctrl +K).

4. Dans la TimeLine, Je renomme ‘calque 1’ en ‘Texte’ .

Etape 2 :

1. Dans la TimeLine, je crée un nouveau calque au-dessus du calque ‘Texte’ que je renomme ‘Reflet’.

2. Toujours en restant sur le calque ‘Reflet’, je vais glisser – déplacer ma 2ème image (celle au format *.PNG) au-dessus de la zone de travail ; inutile de la positionné correctement.

3. Je vais convertir ma 2ème image en image vectorielle : dans le Menu Modification > Bitmap > Tracer le Bitmap

4. Dans la fenêtre Tracer le Bitmap, j’ai plusieurs valeurs à régler :

- Le seuil de couleur à 200
- Zone mini de 2 pixels
- Aspect des courbes : pixels
- Seuil d’angle : angles nombreux

Puis je valide, Flash a converti l’image en tracé vectoriel, Je peux supprimer l’image de ma bibliothèque si je le veux.

Etape 3 :

1. Je vérifie que l’ensemble de ma nouvelle image vectorielle est sélectionnée pour la convertir en symbole (raccourci clavier : F8), la fenêtre Convertir en Symbole fait son apparition. Je lui donne un nom : ClipReflet et un comportement : Clip ensuite je valide.

2. Je vais positionner mon Clip ClipReflet à l’emplacement exact de mon texte de manière à remplir l’écriture dorée (je m’aide des flèches directionnelles du clavier, pour un positionnement au pixel près)

Etape 4 :

1. Je fais un double-clic sur ClipReflet pour rentrer dans les modifications de celui-ci, puis je renomme ‘Calque 1’ en ‘Masque’ dans la TimeLine. Je crée un nouveau calque que je nomme ‘Effet’ et je le positionne sous le calque ‘Masque’.

2. Toujours en restant sur le calque ‘Effet’, je sélectionne l’outil rectangle dans la barre d’outils (raccourcie clavier : R), et je dois choisir des couleurs de trait et de remplissage.

3. Pour la couleur de trait, je valide la case ‘pas de couleur’ et pour la couleur de remplissage j’ouvre la fenêtre du mélangeur : Menus Fenêtre > Panneaux de conception graphique > Mélangeur (raccourci clavier : Maj. + F9).

4. Dans le panneau du mélangeur, je choisis un style de remplissage linéaire dans le menu déroulant. Je rajoute 2 étapes de dégradé vers le centre puis je leur donne une couleur jaune vif (#F9FC00) et je règle la valeur Alpha à 75% pour les 2 (l’alpha permet de gérer l’opacité). Pour les 2 étapes de dégradé aux extrémités, je règle la valeur Alpha à 0% et la couleur : Blanc (#FFFFFF) .
Ainsi j’ai un joli dégradé : Transparent > Jaune > Transparent

5. Je n’ai plus qu’a créer un rectangle un peu plus grand que mon texte, à gauche en dehors de la zone de travail. Je convertis mon rectangle en symbole (raccourcie clavier : F8) Nom : Reflet et Comportement : graphique .

Etape 5 :

1. En restant sur le calque ‘Effet ‘, je vais créer une image-clé à l’image courante (ou frame ) 50 : clic droit > Insérer une image-clé.

2. Sur cette nouvelle image-clé, je vais positionner mon rectangle à droite de la zone de travail. Je fais attention à le déplacer horizontalement

3. Ensuite, je vais créer une interpolation de mouvement en sélectionnant n’importe qu’elle image précédent mon image-clé puis : Clic Droit > Créer une Interpolation de Mouvement. Ainsi le rectangle Reflet se balade de la gauche vers la droite :-)

Etape 6 :

1. Pour la suite, je sélectionne le calque ‘Masque’ pour créer une image-clé à la frame 170 : clic droit > Insérer une image-clé.

2. Puis je vais transformer se calque en Masque : Clic droit sur le calque > Masque.

3. Ensuite, je retourne à mon scénario, avec le bouton précédent. Je vous laisse découvrir le résultat final (raccourci clavier : Ctrl + Entrée)

Conclusion :

J’espère que vous aurez maintenant compris comment donner un reflet à un texte. Tout le secret réside dans la combinaison d’une interpolation de mouvement et d’un masque. On peut créer des reflets sur différents modèles : écrans, lunettes, vitres, etc. en changeant la couleur du reflet : Blanc, gris clair, bleu ou en variant l’angle.

Post-Scriptum : Ce tutorial a été effectué sous Flash MX 2004, certains menus ou fenêtres peuvent être différents de la version Flash 8, mais rien de dramatique. Les raccourcis claviers et la méthode à suivre restent inchangés.

Zip - 83.6 ko
RefletTexteFlash
cliques ici pour télécharger le pack de création flash contenant les sources utilisées dans ce tutorial

Messages

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexions’inscriremot de passe oublié ?