Faire un fondu d’images (interpolation)

 

Animation Flash


animation Flash

Ce tutoriel est écrit avec Flash CS3.

Images source :

Vous pouvez télécharger ces 2 images pour suivre ce tutoriel :

Image exemple 1    Image exemple 2
cliquer sur les images pour les voir en grand (800×600)

 

Fondu de 2 images (interpolation) :

créer un nouveau fichier par le menu Fichier / Nouveau ou les touches Ctrl + N

Nouveau fichier

dans la fenêtre Nouveau document, choisir le format de document, ici Flash A.S. 2.0 (Action Script 2.0), le langage de programmation de Flash, ainsi que A.S. 3.0 dernière génération

Paramétrage du document :

Au bas de l’interface par défaut nous avons un onglet Propriétés (que l’on ouvre par le menu Fenêtre, s’il n’est pas déjà ouvert).

Ce panneau Propriétés permet de configurer notre document de travail, sa taille en largeur, sa hauteur, sa couleur de fond, la vitesse de lecture des images.

régler le document en 800 x 600 pixels, fond Blanc, cadence de 25 images/secondes

Paramétrer et enregistrer par défaut
survoler l’image pour la voir en grand

Nous avons donc ici un document de 800 x 600 pixels, fond blanc, débit de 25 images par secondes.

Importer les images :

Dans notre scène nous allons importer deux images pour réaliser notre fondu enchaîné.

Dans la Scène,
utiliser le menu Fichier / Importer / Importer dans la scène ou le raccourci Ctrl + R, pour importer 2 images de dimensions identiques. Vous pouvez utiliser les 2 images d’exemple, proposés plus haut dans ce tutoriel.

Une fenêtre de l’explorateur de fichiers s’ouvre afin que vous cherchiez les fichiers à importer. Ici il s’agit de deux images au format jpg, nous verrons dans d’autres tutoriaux que l’on peut importer de nombreux autres formats (vidéo, son, images, textes, html, etc…).

Importer les images

Si vos images ont la même appellation suivi de 01, 02, 03 ou de d’importe quelle suite de nombre, celle-ci seront interprétées par Flash comme une suite d’image animées.

Toutes les images importées sont placées sur la même piste de la timeline (ligne de temps) chacune à l’étape suivante de l’image précédente. Ainsi si on importe 7 images elles se placeront sur la timeline par défaut (nommée calque1) chacune à la même position mais à un moment différent de la piste de temps (frame1 pour l’image1, frame 2 pour l’image 2, etc…).

Dans le même temps, observez que les images se sont également placées dans la palette Bibliothèque qui contient les symboles, musiques, vidéos ou sons, à l’exception des dessins réalisés avec les outils (sauf si on le déclare comme étant un symbole).

Images ajoutées dans la Bibliothèque

Les calques :

dans la ligne de temps, ajouter un nouveau calque en cliquant sur l’icône puis glisser l’image clé (celle de la chenille), de la fram 2 vers le calque chenille avec la souris

Placer une image sur un nouveau calque

Vous devez donc avoir chaque image sur un calque différent.

Images clé :

Nous allons définir la longueur du segment d’animation, c’est à dire la durée de l’animation qui se compte en nombre d’images par seconde ou nombres de frames par seconde (pour ne pas confondre entre les termes nous allons employer le terme de frames.

Pour faire une animation de 4 secondes au rythme de 25 frames secondes, il nous faudra un segment de 100 frames (25 frames/seconde X 4 secondes = 100 frames).

sélectionnez toute la colonne à l’étape 100 (100è frame) puis faire un clic droit et choisir Insérer une image ou utilisez le menu Insertion / Scénario / Image (ou le raccourci F5)

Insertion scénario image

Voici un scénario de 2 images superposées dont la lecture dure 4 secondes (si nous avons respecté la configuration de l’interface au début de cet exercice).

L’image du dessus (la chenille) cache l’image du dessous (le papillon).

prenez la première image clé (le point noir sur la timeline de la chenille) et avec la souris emmenez ce point à l’étape 50 ou frame 50 puis appuyez sur la touche Entrée

Cette fois nous voyons le papillon pendant 2 secondes (2 secondes X 25 frames = frame 50) puis par un cut (transition nette d’une image à une autre) le papillon apparaît. Un clic pour sélectionner le point ou image clé puis déplacer la clé.

Interpolation de mouvement :

Comme son nom l’indique, l’interpolation (inter-pôles) c’est à dire entre au moins deux points, sur notre timeline de la chenille il n’y a pour le moment qu’une clé.

ajoutez une deuxième clé à l’étape (frame) 70 à l’aide de la touche F6 (qui est le raccourcis du clic droit sur la frame 70, Insérer une image clé) ou à l’aide du menu Insertion / Scénario / Image clé.

La méthode est identique que pour l’image 100 (voir capture précédente).

Ces trois méthodes pour un même résultat. La touche F6 est plus rapide et plus facile à mémoriser.

Créer une interpolation de mouvement

descendre la valeur alpha à 0% (avec le curseur) : la chenille disparaît

Pour rappel :

Touche F5 : sur une ou des frame(s) vide(s), pour ajouter des images (des frames, donc du temps d’animation).

Touche F6 : sur une ou des frame(s) vide(s), pour ajouter une clé, une copie de la clé la plus proche située avant dans le temps, c’est à dire à gauche (forcément) puisque l’animation se lit toujours de la gauche vers la droite.

Interpolation alpha :

À l’étape (frame) 70, faire un clic sur l’image et dans la barre des propriétés en bas de l’interface, tout à fait à droite on a un menu déroulant Couleur et dans ce menu on choisi Alpha qui est la gestion de la transparence d’une image.

lancer l’animation en appuyant sur la touche Entrée

Voila un fondu enchaîné du papillon vers la chenille (c’est le monde à l’envers !).

Remarquez que dans la Bibliothèque, un symbole nommé interpolation1 vient d’être créé. Rien d’anormal puisque pour animer un objet il faut en faire un symbole (sélection de l’objet + touche F8 ou par le menu Modification / Convertir en symbole. On trouve également convertir en symbole en faisant un clic droit sur l’objet sélectionné.

Ici on a oublié de convertir en symbole avant de faire notre interpolation, le logiciel va donc créer automatiquement des objets nommés interpolation… dès lors qu’on active l’interpolation sur une piste qui ne contient pas d’objet déclaré comme symbole.

C’est un peu compliqué, mais vous allez vite comprendre à l’usage…

Exporter l’animation :

choisir le menu Fichier / Exporter / Exporter l’animation ou utiliser les touches Ctrl + Maj + Alt + S

L’image finale se trouve au début du tutoriel ▲

 

Ce tutoriel a été créé par ---/// F®K Design ///---. Photoshoplus en a créé une nouvelle version, avec son autorisation.
Toute reproduction, exploitation ou diffusion du présent document est interdite.

Articles similaires :