Créer des interpolations avec Flash

Introduction du cours

Qu'est-ce que c'est Flash ?

Macromedia Flash est un logiciel graphique servant à produire des documents animés destinés à être diffusés sur le Web. Cependant, Flash est aussi un environnement de développement d'applications utilisant le langage Actionscript.
Avec Flash, chaque application peut être enrichie avec des images, du son ou encore avec des vidéos.

Une des fonctionnalités de base que propose Flash est la possibilité de créer des interpolations.
Il existe deux types d'interpolation : l'interpolation de forme et l'interpolation de mouvement.
En fait, pour faire une interpolation, il suffit de définir la forme (pour une interpolation de forme) ou le point de départ et d'arrivée (pour une interpolation de mouvement). Flash calcule automatiquement les formes intermédiaires ou les déplacements nécessaires.

Allons-y ! Et voyons comment peut-on créer chacune de ces interpolations

L'interpolation de forme

L'interpolation de forme sert, comme son nom l'indique, à modifier la forme d'un objet. Cette dernière se différencie de l'interpolation de mouvement, car elle s'applique à une forme plutôt qu'à un symbole.

Pour réaliser une interpolation de forme, on va tout d'abord créer deux calques que l'on va nommer transformation et titre.

Dans le calque titre on va saisir le texte "Interpolation de forme" qui s'affiche jusqu'à l'image n°40 (cliquez sur l'image n°40 dans le scénario puis F5).
Dans l'image n°1 du calque transformation, on va dessiner un petit cercle ;) puis dans l'image n°40 du même calque appuyez sur le bouton droit de la souris et sélectionnez "Insérer une image clé vide" (ou bien tout simplement appuyez sur F7 :-° )
A l'aide des outils graphiques, on dessine un autre objet (un rectangle, un polygone...). Pensez aussi à varier les couleurs.
Au final on aura :

Cliquez pour agrandir

Enfin, cliquez n'importe où sur l'échelle entre les deux images clés du calque transformation puis dans le panneau Propriétés , choisissez le mode d'interpolation Forme.

Pour jouer l'animation, appuyez sur Ctrl+Entrée ;)
Normalement, vous êtes entrain de voir un cercle qui se transforme en un rectangle (ou quoi que ce soit :p ).
Vous pouvez, sur l’interpolation, créer une accélération positive ou négative (cliquez dans le scénario, au milieu de votre interpolation et modifiez ce paramètre dans le panneau des propriétés).

L'interpolation de forme est indiquée par un point noir au niveau de la première image-clé, les images intermédiaires comportant une flèche noire sur fond vert clair :

Une ligne pointillée indique que l'interpolation est rompue ou incomplète, par exemple parce que l'image clé finale est absente.

Les objets particuliers

Pour les textes ou les Bitmaps, avant de créer l’interpolation, cliquez avec le bouton droit de la souris sur ceux-ci et sélectionnez « séparer » (ou bien appuyez sur Ctrl+B) jusqu’à ce que votre texte ou votre bitmap soit recouvert de petits points blancs.
Notez que pour séparer un texte de plusieurs lettres, vous devrez séparer le tout 2 fois ! C'est à dire séparer le texte en plusieurs lettres puis séparer les lettres :

==>
Cliquez pour agrandir

Appuyez une autre fois sur Ctrl+B pour séparer les lettres. Au final, on va avoir un rendu comme ça :

Cliquez pour agrandir

Attention, seuls les textes on les sépare deux fois ! Les images juste une fois.

Interpolation de forme avec repères de formes

Les points de repère servent à choisir quelle partie du premier objet deviendra telle partie du second objet. Pour créer un point de repère, placez vous à la première image de l’interpolation (oui, il faut que vous ayez déjà créé une interpolation de forme ;) ) et allez dans le menu "Modification > Forme > Ajouter les repères de formes" (ou faites Ctrl+Maj+H). Vous verrez normalement un point rouge avec marqué « a » à l’intérieur. Ce point se situe aussi à la dernière image de l’interpolation. Placez-les là où vous voulez pour qu’une partie de l’objet se transforme en une autre :

==>
Cliquez pour agrandir

Vous pouvez bien entendu créer autant de points de repère que vous le voulez ;) .

L'interpolation de mouvement

On va créer un nouveau document Flash, et à l'image n°1 on va dessiner un objet à l'aide des outils graphiques. Ensuite, sélectionnez le, puis convertissez le en symbole graphique : "Modification > Convertir en symbole", sélectionnez graphique et appuyez sur OK (ou plus simple, sélectionnez l'objet et appuyez sur F8).

Cliquez pour agrandir

Dans l'image n°45, appuyez sur le bouton droit de la souris, puis sélectionnez "Insérer une image clé" (F6).
Une instance du symbole est alors placée à cet endroit. Vous pouvez alors la modifier, soit la déplacer, la changer de grosseur, de couleur, etc...
Cliquez n'importe où sur l'échelle entre les deux images clés, puis dans le panneau Propriétés choisissez le mode d'interpolation Mouvement.

L'interpolation de mouvement est indiquée par un point noir au niveau de la première image-clé, alors que les images interpolées intermédiaires comportent une flèche noire sur fond bleu clair :

La même chose, lorsque l'image clé finale est absente, une ligne pointillée apparaît :

Interpolation de mouvement avec guide de déplacement

Voilà, nommez notre premier calque "Cercle". Et à l'image n°1 on va dessiner un petit cercle et ensuite le convertir en symbole graphique (F8 ;) ). Cliquez sur l'image n°40 et insérez une image clé (F6).
Insérez maintenant un "calque guide de mouvement" en cliquant sur l'icône

ou bien dans le menu "Insertion > Scénario > Guide de mouvement". Sélectionnez l'image n°1 de la couche Guide : Cercle, sélectionnez l'outil crayon, puis l'option

, et tracez une courbe de déplacement qui sera suivie par votre cercle.
Cliquez sur l'image n°40 du calque guide et insérer une image clé (F6). Ensuite, positionnez vous sur l'image n°1 du calque Cercle, puis cliquez sur le petit cercle se trouvant au centre du cercle dessiné et déplacez-le vers le début de votre ligne de déplacement à l'aide de l'outil

:

Cliquez pour agrandir

La même chose aussi, positionnez vous sur l'image n°40 du calque Cercle, puis cliquez sur le petit cercle se trouvant au centre du cercle dessiné et déplacez-le vers la fin de votre ligne de déplacement à l'aide de l'outil

.

Cliquez maintenant n'importe où sur l'échelle entre les deux images clés du calque Cercle puis, dans le panneau Propriétés, choisissez le mode d'interpolation Mouvement.
Et, c'est fini ^^ Cliquez sur Ctrl+Entrée pour visualiser votre animation :D

Voilà, ce petit tuto est terminé ^^ . C'est très simple, je vous l'accorde mais j'espère bien qu'il a pu présenté les bases pour créer des interpolations avec Flash.
Notamment, Flash est un logiciel très puissant avec son langage Actionscript. Ce que vous venez de voir ici ce ne sont vraiment que les choses les plus basiques des plus basiques.

• #

Waouh !

Très heureux de voir que nos cours vous plaisent, déjà 3 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un Roomie, un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres Roomies.

S'inscrire Se connecter

• Thématiques du cours : 2D Flash Graphisme

Chaque cours est créé par un professeur ou un expert dans le domaine. Il est composé d'une ou plusieurs parties et peut comporter du texte, des images (schéma, illustration) et des vidéos. Chaque partie d'un cours certifiant est ponctuée d'exercices de 2 types : Des quiz corrigés automatiquement Des devoirs libres (exemple : créer un site web avec des consignes précises). Ces devoirs sont évalués par les pairs. Chaque devoir est corrigé 3 fois par 3 autres élèves, dans un processus en double aveugle, selon un barème fixé par le professeur. La note finale est la moyenne des 3 notes reçues sur le devoir. 50% des devoirs corrigés par les pairs obtiennent quasiment les 3 mêmes notes, avec une variance inférieure à 1. La recherche académique montre d'ailleurs que l'évaluation par les pairs peut être aussi précise que celle des professeurs.