Animer une boule (interpolation de mouvement)

 

Ce tutoriel est écrit avec Flash CS 3.

 

Outils utilisés :

Ovale : Trace une forme ovale (ou cercle) ou un contour seul ou les deux à la fois selon que les options de couleur ou de contour sont activées. On peut remplir d’un ton uni ou dégradé. La touche Alt permet d’effectuer un tracé à partir du centre, avec la touche Maj le tracé est contraint à un cercle parfait.
Pot de peinture : Rempli d’une couleur unie ou d’un dégradé, l’intérieur d’une ou plusieurs zones ou formes sélectionnées.
Transformation de dégradé : Permet d’effectuer des modifications d’échelle, de rotations, de biseau qui s’appliquent uniquement à un ou à des dégradés (remplissages).
Transformation : Sur toute sélection, permet de modifier l’échelle, le biseau, la rotation, l’inclinaison. La touche Alt permet de transformer symétriquement, la touche Ctrl permet de déplacer les coins indépendamment.

 

Animer une boule :

Nouveau document :

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

ensuite, enregistrer ces paramètres comme les paramètres par défaut à l’ouverture de Flash, en cochant la case (voir capture)

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.

Fichier source :

télécharger puis ouvrir dans Flash, le fichier Interpollation-boule.fla

Téléchargement :

Télécharger : Interpolation .flaTéléchargé 164 fois –

 

La timeline :

Une animation se déroule dans le temps, c’est la Timeline ou Ligne de temps. Il faut donc déclarer une durée et pour cela il faut déterminer l’emplacement de la fin de d’animation.

Par exemple si je veux une animation de 10 secondes, il faut que je me rende à la frame 250 car
10 secondes x 25 images secondes = 250 images (ou frames) et que je fixe une image de fin.

Insérer une image clé

La durée de l’animation dépend de l’emplacement de la dernière frame déclarée. Chaque objet peut avoir sa propre durée de visibilité selon la longueur de son segment.

Régler la durée de l'animation

Le symbole :

Le symbole (clip, bouton ou graphique) dans Flash permet de distinguer les objets à animer ou sur lesquels nous envisageons une action ou une commande, des autres objets présents (forme, tracé ou texte).

Avant toute animation d’un objet (ou d’un groupe d’objets) il faut impérativement le déclarer en tant que Clip.

Il y a plusieurs manières de Convertir en clip un objet ou un groupe d’objets. Commencer par sélectionner l’ensemble des objets à animer. Dans notre exemple, nous allons sélectionner la boule et son ombre pour faire de ces deux objets un seul clip. Et oui la boule est inséparable de son ombre.

Convertir en symbole Clip

Nous avons donc un clip nommé boule dans lequel, si on clique sur l’icône de la Bibliothèque ou si on fait un double-clique sur le clip présent sur scène, on retrouve la boule et son ombre.

Une bonne organisation dans la manière de gérer son travail est signe de sérieux et de professionnalisme.

L’interpolation de mouvements :

Enfin pour animer un objet il faut au moins deux images. Par exemple à l’étape 1 (frame1) notre boule est à gauche de l’écran et à l’étape 100 elle est à droite de l’écran, nous aurions donc deux images clés sur notre scène une image à la frame 1 et une autre à la frame 100.

Sans interpolation, nous aurions l’image de la boule à gauche pendant la durée de la frame 1 à la frame 99 puis d’un coup la boule à droite à la frame 50. Avec l’interpolation activée, la boule se déplacera de gauche à droite, de la frame 1 à la frame 100.

Interpolation

Dans notre exemple à l’étape 1, notre boule est en haut à gauche et a été modifiée en taille avec l’outil Transformation, elle est plus petite.

À l’étape 100 la boule est en bas à droite et est de taille plus grande. Ainsi l’interpolation donnera l’effet d’une Boule qui s’approche.

Exporter l’animation :

pour exporter l’animation, utiliser le menu Fichier / Exporter / Exporter l’animation ou 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 :