Macromédia Flash

Animation : Gestion d’objets

Importation d’objets

Il est conseillé de placer 1 objet par calque, en ayant nommé les calques pour les repérer plus facilement. Pour nommer un calque, faire un double-clic sur « calque 1 » et mettre le mot bateau en remplacement.
Cliquer sur l’image 1 du calque bateau et utiliser le menu « Fichier – importer ». Sélectionner le dossier contenant les médias téléchargés.
Importer le bateau.ai (fichier Adobe Illustrator version 7). Suivant l’objet créé, il sera possible de récupérer les calques ou de créer des animations…. Pour le bateau, il faut demander à aplatir l’illustration (même si elle l’est déjà).
Le bateau prend quasiment toute la scène. Cette importation doit être transformée en symbole pour en faciliter la manipulation ultérieurement. Pour cela, utiliser le menu « Insertion – Convertir en symbole ». Choisir Graphique ou Clip et nommer le symbole bateau.
Un graphique ne permet pas de nombreuses transformations. Si vous n’êtes pas certain de l’utilisation de votre symbole, il est préférable de le transformer en clip, ce qui permettra une plus grande souplesse d’utilisation. Un symbole se différencie d’un objet par la croix cerclée (ici au milieu de l’image)

Déplacement d’objet

Trajectoire rectiligne

Le bateau importé : il est nécessaire de lui donner son utilité dans le scénario.
Utiliser l’outil redimensionné pour diminuer la taille du bateau et le mettre dans « les coulisses » à gauche de la scène.
Pour garder la proportionnalité de l’image il faut, comme pour d’autres applications, utiliser la touche « shift » (majuscule temporaire) pendant le redimensionnement.

Dans notre scénario le bateau va passer de la gauche à la droite de l’écran.
Dans la ligne de temps du scénario vous devez créer l’image finale. Pour cela, faire un clic droit sur l’image 60 (soit 5 secondes à 12 ips) du calque bateau et utiliser « Insérer une image clé », ou utiliser le menu « Insertion – Image-clé » en ayant fait un clic gauche sur l’image 60.
Déplacer le bateau de l’image 60 à la droite de la scène.

Pour visualiser le résultat, utiliser le menu « Contrôle – tester l’animation » (raccourci clavier : [Ctrl] [Entrée] »). Pendant 5 secondes le bateau est à gauche puis pendant 1/12 de seconde il se situe à droite…

En cliquant sur le bateau, le panneau Propriété indique les propriétés de l’objet bateau en tant que graphique. Pour créer l’animation, il faut cliquer sur l’image 1 du calque bateau et demander une interpolation de mouvement à partir des propriétés de l’image 1.

Une flèche sur fond bleuté se trouve dans la ligne de temps. En utilisant [Ctrl] [Entrée], le bateau traverse l’écran de gauche à droite en 5 secondes.
Le mode de visualisation affichant plus que la fenêtre, il est fort probable que le bateau soit visible dans les différentes positions.

Guide de trajectoire

La mer est rarement plate, même dans la Chambre (mer intérieure de l’archipel des Glénan).

Le bateau peut suivre le mouvement de la houle. Pour cela, créer un guide de trajectoire en cliquant sur l’icône en-dessous du nom du calque « bateau ». Cliquer sur l’image 1 du calque « Guide : bateau ».

Plusieurs outils permettent de dessiner. Pour la houle, l’outil crayon sera préféré. Le dessin à la souris n’est pas évident et une tablette graphique n’est pas toujours à disposition. Pour éviter les irrégularités de la houle, sélectionner « Lisser » dans les options de l’outil.

Avec la flèche noire il est possible de modifier la trajectoire de la houle si elle n’est pas conforme à vos attentes. Attention : un clic sur la courbe permet de sélectionner la courbe qui devient à damiers noir et blanc, et la courbe est déplacée au lieu d’être modifiée.

Quand la courbe a la forme souhaitée, cliquer sur le bateau, dans la séquence et le déplacer pour qu’il s’accroche à la courbe.

Cliquer aussi sur le calque bateau à l’image 60, pour le déplacer sur la courbe.
Le bateau se déplace sur la courbe, mais reste parallèle à l’horizon.

Dans les propriétés de l’image 1 du calque bateau, cocher la case « Orienter vers la trajectoire ».

Le fichier final est visible ici.

Objet animées

Il est possible d’insérer des objets animés, comme un GIF de goéland composé, de 5 images où chaque image est présente 20/100 de seconde. Que l’objet soit importé ou créé, il est préférable de générer un clip par le menu « Insertion – Nouveau symbole » ayant pour nom « goéland » et de comportement « Clip ». Après validation, le clip goéland apparaît dans la « séquence 1 ». Utiliser le menu « Fichier – Importer… » et sélectionner le fichier « Goel-vol-accueil.gif ». Chaque dessin dure 3 images (la plus proche valeur à 12 ips de 20/100 s). Le clip généré peut être de l’image bitmap, comme ici, ou de l’image vectorielle. La croix du symbole sert à la fois de point d’ancrage sur la trajectoire et d’axe de rotation initial. Dans notre exemple cela n’a aucune incidence, mais peut être important pour certains symboles.

Pour revenir sur la scène de départ, il suffit de cliquer sur « séquence 1 ». Le goéland n’est pas présent sur la scène, mais il est disponible dans la bibliothèque. Contrairement à Office, la bibliothèque de Flash est quasiment vide (comme de nombreux logiciels professionnels) et c’est à vous de la créer. La bibliothèque où se trouve le goéland est la bibliothèque liée au projet. Elle est accessible par le menu « Fenêtre – bibliothèque » ([F11] ou [Ctrl] + [L]). Si l’objet de la bibliothèque est un clip animé ou un bouton, il est possible de visualiser l’animation ou les états du bouton. Créer un calque goéland au-dessus du guide de bateau. Prendre le goéland dans la bibliothèque et le déplacer sur la scène. Le positionner sur l’image 1. Sur l’image 60, calque goéland, faire un clic droit et insérer une image clé. Déplacer le goéland à gauche de l’écran et, avec l’outil « redimensionner », augmenter sa taille.

Cliquer sur l’image 1, puis sur le goéland. Dans les propriétés de l’occurrence Glénan, changer la couleur en modifiant la transparence alpha et demander une transparence à 50% pour donner « l’illusion » du goéland sortant de la brume.

Pour que la transformation soit progressive, cliquer sur l’image 1 du calque goéland et dans les propriétés de l’image, demander une interpolation de mouvement. Elle est représentée dans la ligne de temps par une flèche sur fond bleuté.
En visualisant l’animation, le goéland se déplace du point de départ jusqu’au point d’arrivée. Il suit la trajectoire créée en diminuant progressivement sa transparence tout en grossissant. Le goéland qui est lui-même un clip animé sur 15 images, effectue 4 battements d’ailes pendant son déplacement.

Le fichier final est visible ici.

Forme et interpolation

Interpolation de base

Le bateau se déplace sur la mer que nous allons créer maintenant.
Contrairement aux autres objets précédemment créés qu’il fallait transformer en symboles, la mer sera créée directement sur la scène. Pour d’autres usages (utilisation avec de la programmation…), il est souhaitable de l’intégrer dans un clip (voir le chapitre suivant).

Créer un calque « mer » au dessus du calque goéland.
Sur l’image 1 de ce calque, dessiner la mer avec l’outil « Plume ». Pour réaliser une courbe, il suffit de cliquer et de rester cliquer en même temps que l’on déplace le curseur pour créer les tangentes au point (voir le cours sur le dessin vectoriel et les courbes de Béziers). La forme doit être fermée et les points de la mer en-dehors de l’écran seront placés largement en-deçà des limites de la scène pour éviter tout problème ultérieur avec l’objet.

Sur l’image 60 de la mer, faire un clic droit et insérer une image clé.
Modifier la forme en utilisant soit :

• l’outil « flèche noire » pour modifier la mer (voir le chapitre : modification de la trajectoire).
• l’outil « flèche blanche » qui permet de modifier les points et les tangentes de la courbe de Bézier. Attention : le fait de créer une image clé à l’image soixante, modifie la forme qui contient plus de points intermédiaires que la forme générée initialement.

Changer la couleur de la mer en modifiant la couleur de remplissage dans la barre d’outils et, éventuellement, en appliquant le pot de peinture pour remplir la forme (l’outil encrier remplit le trait de la forme avec la couleur de trait)

Il ne reste plus qu’à faire l’interpolation de forme sur l’image 1 du calque mer.

Le fichier final est visible ici.

Contraintes de formes

Un titre agrémenterait l’animation. Ce titre est composé de deux parties « L’archipel » d’une part et « des Glénan » d’autre part. Les deux parties contiennent le même nombre de lettres (hormis l’apostrophe). Envisageons la transformation de l’un en l’autre. Créer un symbole de type clip appelé texte. Avec l’outil texte, écrire « L’archipel ». Sélectionner le texte et utiliser le menu « Modification séparer » pour décomposer chaque lettre du titre, puis « Modification – repartir dans les calques » pour placer chaque symbole dans un calque particulier. Utiliser de nouveau « Modification séparer » pour décomposer chaque lettre en forme dans son calque et permettre la transformation de forme. Sur le calque 1 écrire le texte « des Glénan » et utiliser 2 fois le menu « Modification séparer » pour décomposer le texte en forme dans le calque 1.

Sélectionner la lettre e du mot « des », et la copier. Insérer une image clé vide sur le calque a, image 13, et coller la lettre copiée. Sur l’image 1 du calque « a », mettre une interpolation de forme. La transformation s’effectue anarchiquement, alors qu’une possibilité est de garder l’œil de la lettre pour faire grandir ou diminuer le « jambage ».

Utiliser le menu « Modification – Formes – Ajouter les repères de forme ». Un repère de forme ayant pour nom la lettre a apparaît sur fond rouge. Recommencer l’opération ([Ctrl]+[Maj]+[H]) pour avoir les lettres jusqu’à d. Les lettres sont à disposer dans le sens des aiguilles d’une montre, en fonction des contraintes à donner à la forme. Quand les repères de forme seront bien positionnés, ils apparaîtront respectivement jaune et vert sur les formes de départ et de fin. Sans être parfaite, la transformation du A en E est améliorée. Il faut maintenant envisager la transformation de chaque lettre. Lors des premières transformations il est souhaitable, avant de maîtriser les transformations, de créer une nouvelle animation, d’insérer un clip, de le mettre sur la séquence et de faire la transformation dans le clip. La transformation sera visible immédiatement et il sera possible de la positionner ensuite sur l’autre animation par glisser-déplacer depuis la bibliothèque, même si d’autres techniques existent. Pour que l’animation ait un semblant de sens, il est souhaitable que la transformation revienne au point de départ. Pour permettre au lecteur de lire l’animation, un délai sera laissé pour chaque passage. Concrètement : sélectionner les calques de lettre sur l’image 13 et insérer une image clé, puis faire de même sur l’image 49. Sur l’image 25, insérer une image clé vide pour les différentes lettres. Positionner les transformations des lettres sur l’image 25 sur chaque calque de lettre. La fonction Copier – Coller en place ([Ctrl] [Maj] [V]) est très pratique pour positionner un objet au même endroit sur un autre calque. Insérer une image clé sur l’image 37. Une fois chaque lettre positionnée, demander pour chaque calque de lettre des interpolations de forme pour les images 12 puis 37. Positionner les repères de forme sur les images 12 et 25, puis 37 et 49. Noter qu’il existe des logiciels complémentaires qui produisent des effets intéressants sur le texte mais, pour réaliser exactement ce que l’on veut, il faut souvent dépenser beaucoup d’énergie. La transformation des lettres ayant un œil n’est pas évidente, sauf en décomposant la lettre en plusieurs morceaux.

Le fichier final est visible ici.

Formes imbriquées

Forme de base

Pour étudier les formes imbriquées, nous allons réaliser un poisson et dessiner les écailles du poisson. Si on dessine des écailles à main levée, la texture ressemble au dessin ci-contre. La forme obtenue pour une écaille de base est relativement difficile à dessiner, car elle doit paver le plan et il ne faudra aucun « trou » entre les écailles. Pour faciliter le dessin, si on prolonge la forme de base on obtient une demi ellipse, voire une ellipse entière (forme qui serait plus proche de l’écaille réelle du poisson dont seul 1/5 est visible). La première opération consiste à créer une écaille, puis à généraliser la texture. Utiliser le menu « Insertion – Nouveau symbole… » ou la touche [Ctrl] [F8]. Avec l’outil « plume », dessiner une écaille comme représentée ci-contre. Elle est constituée de 3 points dont 1 avec une tangente obtenue en cliquant sur le point, tout en restant cliqué, en tirant le point vers le bas (ou le haut) suivant le point de départ. Il est préférable de commencer par un des points à gauche de la forme en ne faisant qu’un clic simple pour créer le point. La forme sera remplie avec la couleur de remplissage.

Dégradé

Création d’une texture

Pour créer la texture « écaille » il est possible de créer 2 symboles intermédiaires (1 et 2 lignes d’écailles). Cette technique permet, en modifiant un des symboles, de modifier les symboles qui l’incluent. Utiliser le menu « Insertion – Nouveau symbole… » et créer un clip nommé « écailles ». Ouvrir la bibliothèque ([Ctrl] [L]), cliquer sur le symbole « écaille » et déplacer-le sur la scène. Mettre plusieurs occurrences de l’écaille sur la scène (5 dans l’exemple).

Pour les aligner, utiliser le panneau « aligner », cliquer sur le bouton « Aligner au centre verticalement » et sur le bouton « Répartir verticalement par rapport au centre ». Les écailles apparaissent comme ci-contre.

Créer un nouveau symbole de clip, appelé « écailles ligne », et mettre 2 clips « écailles » en décalé l’un par rapport à l’autre. La texture générée n’est pas tout à fait celle de la page précédente, du fait de l’empilement des écailles, mais reste relativement proche de celle d’un poisson. Créer un nouveau clip appelé « écailles texture ». Le nom « texture écaille » serait plus approprié, mais le fait de commencer par écaille permet d’obtenir tous les symboles écailles… regroupés ensembles. Mettre des objets « écailles ligne » sur la forme, en les empilant de la droite vers la gauche (11 symboles dans le cas ci-dessous).

Ne pas omettre de demander un alignement et une répartition horizontale des objets. Pour modifier la répartition, prendre l’objet le plus à gauche, le déplacer vers la droite ou la gauche et redemander une répartition horizontale.
La texture est terminée.
Pour expérimenter l’imbrication d’objet :
Ouvrir la bibliothèque ([Ctrl] [L]). Double-cliquer dans l’objet « écaille ». Cet objet n’a qu’une image sur un calque. Il est possible de faire une animation de couleurs sur les écailles. Faire un clic droit sur l’image 36 et demander à insérer une image clé. Pour que l’image de début et de fin soient identiques. Sur l’image 18, idem en insérant une image clé. Changer la couleur du dégradé et l’appliquer sur l’écaille de l’image 18.
Cliquer sur le calque 1 pour sélectionner toutes les images et demander à créer une interpolation de forme.
Vous avez une texture dont les reflets changent en fonction du temps, à raison d’un cycle toutes les 3 secondes.

Le masque

Créer un nouveau symbole clip nommé « poisson ». Nommer le calque 1 « texture ». Depuis la bibliothèque, insérer le clip « écaille texture ». Créer un nouveau calque au dessus et le nommer « corps ».
Sur l’image 1 du calque corps, dessiner avec l’outil plume une forme de corps de poisson qui doit s’inscrire dans le rectangle de la forme « écaille texture ».

Une fois l’opération terminée, faire un clic droit sur l’image 1 du calque « corps » et sélectionner « masque ». La forme reste et la texture se trouve comprise dans la forme. Créer des calques supplémentaires en-dessus et en-dessous de la forme du poisson.

Rajouter des détails sur des calques différents pour simplifier le travail et permettre l’animation ultérieure. Le masque et la texture sont verrouillés. Pour les modifier, enlever le cadenas et faire les modifications sur la texture ou la forme. Il n’est pas nécessaire de remettre les cadenas, mais dès que les 2 cadenas sont remis, cela facilite la vision de l’objet final. La bibliothèque devient difficilement lisible. Utiliser l’icône « Nouveau dossier » dans la bibliothèque. Nommer le dossier (il ne peut y avoir 2 objets ayant le même nom au même niveau de la bibliothèque). Déplacer les objets dans le dossier. Il est possible d’avoir plusieurs dossiers imbriqués.

Créer un nouveau symbole clip nommé « poisson mouvement » permettant de gérer l’animation du poisson. Le poisson est orienté vers le haut et à gauche de l’écran sur l’image 1. Sur l’image 48, insérer une image clé et faire faire une rotation au poisson pour qu’il plonge (suite normale de la trajectoire). Créer un guide de mouvement pour que la trajectoire du poisson soit un saut. Sur l’image 1 du calque contenant le poisson, demander une interpolation de mouvement.

Une fois le clip finalisé, placer-le sur la scène et redimensionner-le pour que la scène soit réaliste. Le poisson étant dans la mer, déplacer le calque « poisson » dessous (donc derrière) le calque « mer ».

Le fichier final est visible ici.

Optimiser l’animation

L’animation donne satisfaction, toutefois en bouclant de la dernière à la première image, cela peut être gênant, car l’utilisateur voit le retour en arrière de la mer.
Il sera possible d’agrandir la ligne de temps (de la doubler). Le plus simple est de diminuer l’échelle de temps visible pour visionner plus d’images sur une même longueur (en choisissant « minuscule »). Sur l’image 120 du calque mer, insérer une image vide ; se positionner sur l’image 1 du calque mer, faire une copie du calque et, sur l’image 120 du calque mer, faire une copie sur place (Ctrl – Shift – V) et demander une interpolation de forme pour l’image 60. Cette technique permet d’obtenir la mer en boucle.
Le goéland et le bateau ne partent pas nécessairement au même moment et ne mettent pas le même temps pour traverser l’écran.
Pour ajouter ou enlever des images, il faut respectivement utiliser les touches ([F5] et [Maj] [F5]).
Si le pointeur est sur un chiffre de la ligne de temps, une image est ajoutée (ou enlevée) à tous les calques.
Si le pointeur est sur une image d’un calque, c’est uniquement sur le(s) calque(s) sélectionné(s) qui sera modifié.

Il est aussi possible d’insérer des images vides devant les images clés pour éviter d’avoir l’objet présent dés le début de l’animation. Dans la représention ci-dessus, seuls la mer et le poisson sont présents dès le départ de l’animation, puis vient le texte, le goéland et le bateau apparaissent, ce qui permet une meilleure gestion des flux et donc évite trop de problèmes de chargement.

Concernant le texte, il serait intéressant d’utiliser le même principe qu’à la télévision : le texte apparaît progressivement puis disparaît. Pour obtenir plus de fluidité dans le clip texte, la durée d’affichage de chaque ligne de texte passe de 1 à 2 secondes, soit une durée totale de 73 images (6,0 s). Le texte est repoussé pour commencer en image 10 et des images clés sont placées en images 20, 80,90. Le texte des images 10 et 90 et passé en transparence alpha complète (texte non visible) et sur les images 10 et 80 du texte une interpolation de mouvement du texte est intégré.
Comme 10 images (<1.0 s) sont nécessaires au texte pour devenir visible, le texte « l’archipel » dure un peu plus d’1 seconde avant de se transformer. L’animation interne du texte ne durant que 73 images au lieu de 80 dans la ligne de temps, le texte revient sur l’archipel avant de disparaître.

Le fichier final est visible ici.