Créer un reflet sur un texte

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

Partager cet article avec vos amis

Ajouter un nouveau commentaire

Article publié par Julien DEBOVE

Voir le profil Google+ de

Images Réalisées à partir de ce tutoriel Photoshop

Il y a aucune image pour le moment, soyez le premier à ajouter une image à ce tuto Photoshop.

Vous avez terminé ce tuto ? Partager votre création graphique.

Il y a 7 commentaires publiés sur cet article
  • 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
  • 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
    • 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
  • 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
    • MØG

      Merci
      Si tu peux publie le résultat pour donner un autre exemple.
      Je pense faire d’autre petit tuto sur Flash ... à suivre ;-)

      Voir en ligne : MØG Folio

      Répondre
  • Votre pseudonymeaccro22

    merci beaucoup pour ce tuto, l’effet est superbe, très stylé. vos tutos m’aident beaucoup à progresser. merci donc de partager vos expériences.

    Répondre
Ajouter un nouveau commentaire

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 60

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 72

Fatal error: Call to undefined function: spip_unlink() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 96