LES DESSOUS DES INTERPOLATIONS
Voici le premier numéro d'HelioFlash Mag.
Dans ce numéro...
Ce premier numéro d'HelioFlash Magazine vous fera découvrir les multiples facettes des interpolations dans Adobe Flash. Apprenez à en créer et à les personnaliser afin de monter vos propres animations interactives.
Il n'y a pas de niveau particulier requis car tout est expliqué, alors... bonne lecture !
Au sommaire...
|
|
1. Introduction aux interpolations
Il est possible d'animer des objets/textes image par image sous Flash ; il suffit alors de produire les images une par une comme pour un dessin animé. Mais Flash possède de nombreuses fonctions pour animer des objets/textes plus facilement. Leur principe est simple, il consiste à définir une image de départ et d'arrivée (images clés) et de dire à Flash de calculer les positions de l'objet/texte entre ces deux images selon des paramètres bien définis (coordonnées X et Y initiale et finale ; accélération ; trajectoire ; etc.). Ce principe s'appelle l' " interpolation ". Nous allons l'étudier de fond en comble tout au long de ce dossier.
2. Interpolation de mouvement
a. Interpolation de déplacement
Après avoir défini le principe de l'interpolation, nous allons l'appliquer à un cas courant : le déplacement dans l'espace d'un objet/texte. Nous vous conseillons d'ouvrir un nouveau document afin d'y voir plus clair. Aussi vous garderez ce même document tout au long du dossier.
1. Ouvrez Flash et créez un nouveau document.
2. Insérerez une vingtaine d'images au calque 1 afin d'y créer l'interpolation.
3. Insérez un texte quelconque.
4. Faites clique droit sur la première image du calque 1 et cliquez sur " Créer une interpolation de mouvement ".
5. Vous remarquerez que les cases grisées sont devenues bleues et que votre texte s'est transformé en symbole dit " graphique ".
6. Faites clique droit sur la dernière image du calque 1 (l'image n°20), et cliquez sur " Insérer une image clé ".
7. Vous remarquerez qu'une flèche est apparue sur le calque 1 de l'image 1 à 20. Cela confirme que votre interpolation a été prise en compte par Flash. Si jamais les pointillés persistent, c'est qu'il y a un problème et que Flash ne pourra pas calculer l'interpolation.
8. Sélectionnez votre texte (symbole) sur l'image 20, et déplacez-le dans l'espace.
9. Faites " Ctrl + Entrée " et visionnez l'interpolation de déplacement ainsi créée.
b. Effets: alpha, teinte, luminosité, avancé
Les différents effets proposés par Flash sont couramment utilisés pour créer une animation. Ils permettent un changement de couleurs (teinte), de luminosité et de transparence (alpha). La fonction " avancé " permet d'ajuster séparément les valeurs des couleurs et de la transparence.
Pour en utiliser un, il vous suffit d'abord de sélectionner le symbole (clip, bouton, graphique) sur lequel vous souhaitez appliquer cet effet et de vous rendre dans la fenêtre " Propriétés ". Là vous verrez un menu déroulant appelé " Couleur ", choisissez-y votre effet. Il vous sera demandé de choisir des valeurs ou des couleurs correspondantes aux paramètres de l'effet choisi.
Voici quelques suppléments d'informations sur chaque effet:
ALPHA
Valeurs : entre 0 et 100% > Correspond au niveau de transparence du symbole, à savoir 0 = transparent et 100 = visible.
TEINTE
Couleur à choisir + niveau de teinte (plus la valeur est grande, plus la couleur prend le dessus).
RVB : Standard des couleurs.
LUMINOSITE
Valeurs : entre -100 et 100% > Correspondant au niveau de luminosité.
AVANCE
Valeurs pour chaque couleur et leur niveau de teinte + valeur de transparence.
c. Rotation
Il est également possible de créer un effet de rotation sur une interpolation de mouvement. Deux paramètres interviennent alors : le sens et le nombre de tours. Vous pouvez décider de ne pas créer de déplacement et de n'utiliser l'interpolation pour une rotation seulement. Flash gère automatiquement l'effet, ce qui s'avère agréable pour le genre de manipulation qu'une rotation manuelle demande.
Pour en créer une : rendez-vous dans la fenêtre " Propriétés " de l'image clé de l'interpolation de mouvement ; puis sélectionnez un sens de rotation ; enfin rentrez le nombre de tours à effectuer.
d. Guide de mouvement
Il vous est aussi possible de définir une trajectoire à vos interpolations de mouvement. Ainsi, au lieu de créer différentes images clés afin de reproduire une trajectoire, définissez les points de départ et d'arrivée, et le tracé à suivre !
1. Créez une interpolation de mouvement quelconque d'un rond.
2. Insérez un nouveau calque au dessus de celui sur lequel vous avez créé l'interpolation.
3. Créez à l'aide du crayon ou de la plume un tracé quelconque sur le calque du dessus.
Exemple :
4. Faites clique droit sur la calque du dessus et sélectionnez " Guide ".
5. Faites glisser/coller le calque de l'interpolation juste en dessous du calque du tracé.
6. Ajustez les positions de départ et d'arrivée de l'interpolation sur le tracé.
7. Votre interpolation de mouvement a maintenant une trajectoire. Vous remarquerez que le symbole est attiré vers le tracé : cela est bien la preuve que Flash a pris en compte le guide de mouvement.
Il existe une option " Orienter vers la trajectoire " qui vous permet de faire en sorte que le symbole reste dans l'alignement du tracé (cf. juste en dessous les paramètres " sens " et " nombre de tours ").
e. Accélération
Pour compléter le panel de fonctions de l'interpolation de mouvement, il vous est possible d'insérer un effet d'accélération/décélération. Pour ce faire, rendez-vous toujours dans la fenêtre " Propriétés " de l'image clé de l'interpolation de mouvement ; puis insérez une valeur entre -100 et 100 dans la case " Accélération ".
Valeurs positives > Décélération.
Valeurs négatives > Accélération.
3. Interpolation de forme
a. Morphing
Un autre type d'interpolation existe sous Flash, l'interpolation dite " de forme ". Elle permet de créer un effet de morphing, peu évolué, mais qui peut paraître sympa.
La différence avec l'interpolation de mouvement est qu'elle ne s'applique pas sur des symboles, mais sur des éléments dissociés (vecteurs). Ainsi pour créer un morphing d'une photo à une autre, il va vous falloir d'abord les convertir en éléments vectorisés (cf. 5. Astuces).
1. Créez une forme quelconque (exemple : un rond) dans un calque sur 20 images environ.
2. Insérez une image clé à la dernière image.
3. Sur cette même image, remplacez le rond par un carré.
4. Cliquez sur la première image clé et rendez-vous dans sa fenêtre " Propriétés ". Sélectionnez alors " Forme " dans le menu déroulant " Interpolation ".
5. Flash réagit en changeant la couleur du calque (vert) et en créant le morphing du rond vers le carré.
b. Repères
Lors de morphings plus complexes que le précédant (rond > carré), il peut être utile d'utiliser des repères (au nombre de 26 maximum) afin que Flash gère mieux les images intermédiaires. Un repère se place sur l'image de départ et d'arrivée, et indique à Flash que le point de l'emplacement de départ doit correspondre à celui d'arrivée.
Pour en insérer, sélectionnez la première image clé de l'interpolation de forme, puis allez dans le menu " Modification > Forme > Ajouter les repères de formes " (ou Ctrl + Maj + H). Une petite lettre apparaît sur les deux images clés (départ et arrivée) et se déplace à l'aide d'un " glisser/coller ".
4. Avancé
a. Combiner les deux types d'interpolation
IL est possible de combiner les deux types d'interpolation à l'aide des symboles " clips ". Le principe est de créer une interpolation de forme dans un clip et d'utiliser ce même clip dans une interpolation de mouvement, l'inverse étant impossible.
1.Insérez un nouveau symbole " clip " à partir du menu " Insérer > Nouveau symbole… > Clip ".
2. Créez-y une interpolation de forme sur une vingtaine d'image (par exemple : carré > rond).
3. Retournez à l'animation principale, et insérez-y votre clip " Interpolation de forme " (glisser/coller à partir de la bibliothèque).
4. Insérez une vingtaine d'images au calque sur lequel vous avez inséré le clip, puis créez-y une interpolation de mouvement (changez par exemple la transparence, tracez une trajectoire, faites un effet d'accélération…).
5. L'interpolation de forme est prise en compte par l'interpolation de mouvement par le biais du clip.
(L'interpolation de forme n'apparaît que lors de la publication finale de l'animation)
b. Animer un masque de fusion
Un masque de fusion permet de ne laisser apparaître qu'une partie (préalablement déterminée) d'un calque sur lequel il est appliqué. Il peut également s'appliquer sur plusieurs calques en même temps.
Pour l'animer, procédez de la même manière que pour un calque traditionnel (à l'aide des interpolations). Si vous ne savez pas comment en créer un, en voici la méthode:
1. Insérez deux calques à votre animation. Dans celui du dessus, insérez une forme quelconque (exemple : un rond). Dans celui du dessous, insérez n'importe quel élément (exemple : une image bitmap) en faisant en sorte que la forme du calque du dessus apparaisse sur l'élément.
2. Faites clique droit sur le calque du dessus, et sélectionnez " Masque ".
3. Vous remarquerez que le calque du dessous s'est collé au masque. Vous pouvez en " coller " autant que vous voulez au masque à l'aide d'un glisser/coller.
Aussi vous remarquerez que les calques collés au masque n'apparaissent qu'aux endroits où le masque se trouve (ici : le rond).
5. Astuces
L'outil " Pelure d'oignon "
Pour être plus précis lorsque vous réalisez une interpolation, l'outil " Pelure d'oignon " vous permet de voir l'image que vous avez sélectionné et celles environnantes (au choix).
La première fonction permet de voir les images en détails ; le deuxième les contours seulement.
Tracer un bitmap
Tracer un bitmap (ou vectoriser une image) consiste à transformer une image au format GIF/JPEG/PNG en formes vectorielles afin de la retravailler.
Sélectionnez d'abord une image, puis allez dans le menu " Modification > Tracer le bitmap… ". Une fenêtre apparaît dans laquelle vous allez modifier (ou laisser) des valeurs. Plus elles seront petites, plus les vecteurs seront précis et nombreux.
Attention ! Une image contenant beaucoup de détails peut très vite devenir lourdes en vecteurs!
Jean-Michel Gigault
Webmaster d'helioflash.com
Achetez des jetons poker sur Pokchips.com
