Créer un reflet sur un texte

jeudi 12 juin 2008
Article écrit par : MØG
MØG Folio

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 2e 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 2e image (celle au format *.PNG) au-dessus de la zone de travail ; inutile de la positionné correctement.

3. Je vais convertir ma 2e 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.5 ko
RefletTexteFlash
cliques ici pour télécharger le pack de création flash contenant les sources utilisées dans ce tutorial
La galerie des membres

Ajouter votre image dans la galerie
Si vous avez réussis ce tutorial vous avez la possibilité de poster votre dessin dans la galerie, vous pourrez ensuite le publier dans les commentaires (que vous trouverez en bas de page).
Attention votre fichier devra être en format JPG, et son poid inférieur a 200ko !

Vos commentaires ( 6 messages dans le forum)
Ajouter un commentaire à cet page
  • Créer un reflet sur un texte
    4 juillet 2009 00:37, par 9MM

    salut,

    merci j ai pu créer ma toute 1er annimation grace a se tuto sa pas été des plus facile parce-que j ai la version CS4 PRO y avait certaine chose qui ne correspondait pas du style le mélangeur et le panneau conception graphique ! mais bon avec perseverance j ai fini par y arriver =) d ailleur cette anim été destiner a ma femme et vu le grand sourire et le gros calin (sans arriére penser hein !^^) au quel j ai eu droit je pense que sa devait pas etre si mal ! en tous cas pour tous ces tuto qui son tous captivant !!

    Répondre à ce message
  • Créer un reflet sur un texte
    16 décembre 2009 20:28, par KeVinG
    Bonjour , je recontre un probleme lors de la création de l’inerpolation de mouvement. Le reflet ne se met pas en place :( j’ai bien mon reflet a gauche au premier frame et a droite a mon 50 eme frame mais entre les deux l’image reste a gauche. j’ai CS4 pro. Merci de bien vouloir m’aider. cordialement Répondre à ce message
    • Créer un reflet sur un texte
      17 décembre 2009 19:19, par MØG
      Créer une interpolation de mouvement sur le frame 1 ... si Flash n’arrive pas à faire l’interpolation, la flèche est alors en pointillé.
      Donc vérifie que t’es sur le bon calque et que dans ce calque, il n’y a que ton symbole (ClipReflet). Sinon donne plus détail ...

      Voir en ligne : MØG Folio

      Répondre à ce message
  • Créer un reflet sur un texte
    12 mars 15:48, par Votre pseudonyme
    Merci beaucoup pour ce tuto, je viens de créer mon premier reflet avec texte. Et ca rend plutot pas mal casino sans telechargement Répondre à ce message

modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Ajouter un commentaire

Continuer la lecture sur wks.fr

Copyright

Les articles et images d'illustrations sont propriété de l'auteur et du réseau Grafik Network & Wks.fr.

Toute copie, reproduction ou diffusion sans autorisation sont interdites. Les images ainsi que les textes sont protégés par le droit français d'auteur ainsi que par un Copyright.