Aller au menu - Aller au contenu

Icône Créer des interpolations avec Flash

Avatar
Par Avatar Haitham Ammar (HighTam)
Mise à jour : 18/08/2009
Difficulté : Facile Facile Creative Commons BY-NC-SA
370 visites depuis 7 jours, classé 285/786
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 :pirate:
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

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.

Image utilisateur


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 :

Image utilisateur
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.

Image utilisateur


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).

Image utilisateur


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 :
Image utilisateur

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

Image utilisateur



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 :

Image utilisateur ==> Image utilisateur
Cliquez pour agrandir


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

Image utilisateur
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 :

Image utilisateur ==> Image utilisateur
Cliquez pour agrandir


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

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).

Image utilisateur
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 :
Image utilisateur

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

Image utilisateur



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 Image utilisateur 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 Image utilisateur, 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 Image utilisateur :

Image utilisateur
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 Image utilisateur.

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
Retour en haut

Q.C.M.

Pour réaliser une interpolation de forme, on doit insérer :
Pour réaliser une interpolation de mouvement, il faut convertir notre objet en :

Statistiques de réponses au QCM

Retour en haut
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.
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
La vidéo et l'audio
Icône
Un système de menus pour votre jeu
Icône
Mémoires
Icône
HUD et interface en jeu
Retour en haut
9 commentaires pour "Créer des interpolations avec Flash"
Note moyenne : 3.32 / 4 (19 votes)
Pseudo Commentaire
Hors ligne le petit marocain # Posté le 24/02/2010 à 12:49:19
Avatar

 Joli ! ;)
@+
 
Hors ligne Claymore # Posté le 09/03/2010 à 21:33:19
Avatar

 Très bien expliqué, tout est clair. Merci. :)
Hors ligne stellaworld # Posté le 20/09/2010 à 15:40:14

Avis : Très bon

Études : CFA Descartes

 Franchement merci
Hors ligne katisoft # Posté le 27/12/2010 à 11:00:38

Merci :)
Hors ligne Harricote # Posté le 12/03/2011 à 01:12:01
Maintenant, je suis.
Avatar

Ville : Elancourt
Pays : France métropolitaine

 bonjour,

auriez-vous un lien pour télécharger ou acheter macromedia flash ??? :euh:

merci
Maintenant, je suis.
 

Voir tous les commentaires