UNIVERSITE DE SOUSSE ‫جــامعة سوسة‬

Institut Supérieur d’Informatique et des ‫المعهد العالي لإلعالمية وتقنيات االتصال بحمام سوسة‬
Techniques de Communication
Hammam Sousse

A.U. : 2016/2017
Matière : Introduction au multimédia
Enseignants : S. BEN AMOR /Ghezaiel.M
Classe : 1LM
TP1

Exercice1 : dégradation de couleur sur un texte

Créer dégradé sur un texte

1 Ouvrez un nouveau document, Fichier > Nouveau.

2 Tapez un texte à l’aide de l’outil « Texte » et sélectionnez-le sur la séquence.

3 Nous devons le dégrouper pour appliquer un effet de dégradé. Pour ce faire, appuyez sur « Ctrl+B » (Windows)
ou « Cmd+B » (Mac) deux fois de suite.

4 Ouvrez le panneau « Mélangeur » via le menu « Fenêtre > Panneaux de conception graphique > Mélangeur ».

5 Sélectionnez l’option « Linéaire » dans le menu déroulant et faites votre mélange. Appliquez ensuite ce dégradé de

couleur à votre texte avec l’outil « Pot de peinture » .

1
Exercice2 : Animation image par image
L'animation image par image change le contenu de la scène dans chaque image ; elle est plus adaptée aux
animations complexes dans lesquelles le contenu change d'une image à l'autre au lieu d'être simplement déplacé
sur la scène. L'animation image par image accroît la taille du fichier plus rapidement qu'une animation interpolée.
Dans l'animation image par image, Flash enregistre les valeurs de chaque image complète.

Pour créer une animation image par image, vous devez définir chaque image comme une image-clé, puis créer
une image différente pour chacune d'entre elles. Dans un premier temps, chaque nouvelle image-clé possède le
même contenu que l'image-clé qui la précède et vous pouvez donc modifier les images de l'animation par
incréments.

Résumé des touches importantes et des items du menu clic-droit

Avant de presser une touche ou d'utiliser le menu, il faut se positionner dans le frame (image en question) en
faisant attention de sélectionner le bon layer (calque).

Rappel: Un keyframe est une image qui contient un dessin ou autre objet. Dans la timeline, un keyframe est
indiqué par un point noir.

 F6 copie le graphisme du keyframe précédent (Insert KeyFrame).

 F7 insère un keyframe vide (Insert Blank KeyFrame).

 F5 insère un frame et prolonge la visibilité du dessin d'un keyframe antérieur dans la timeline (Insert
Frame).

 Clic-droit sur un frame vous donne d'autres options, comme le détruire ou le vider ...
La procédure

1. Créez un calque (layer) ou réutilisez un calque

2. Dessinez quelque chose (n'importe quoi, ceci dit on vous conseille d'y placer un objet ayant des
articulations que vous pouvez dans la suite bouger. Exemple: Un petit homme-allumette (stick man).

3. Insérer deux frames vides: Pressez 3 fois F5 (on ne sait jamais si plus tard il vous faut insérer d'autres

dessins, cela va aussi ralentir un peu l'animation). Autrement dit, votre dessin va s'afficher durant 4
frames en tout pendant le déroulement de l'animation.

4. Clic dans le dernier frame (le rectangle blanc)

5. Créer un 2ème keyframe avec un contenu identique au premier: Pressez F6.

6. Modifiez légèrement le dessin de ce nouveau keyframe

 Répetez à souhait (donc 3 fois F5, puis F6, aller à la fin, puis modifier le dessin)

 Si votre animation est complexe, utiliser plusieurs calques

Dans votre timeline, vous devriez voir quelque chose comme:

Pour afficher un arrière plan, il faut utiliser un ou plusieurs autre calques (layers):

2
 Créez au moins un nouveau layer et faites un dessin, par exemple un ciel.

 Allez à la hauteur du dernier frame de l'animation et pour chacuns de ces nouveaux calques, pressez
F5. Vous devriez voir dans la timeline quelque chose comme:

Pour tester maintenant votre séquence d'animation

Pressez CTRL-Entrée (ou utilisez le menu Control->Test Movie)

Note: Vous pouvez aussi bouger le contrôle rouge au-dessus de la timeline vers la gauche ou la droite.

Une animation simple - lettre après lettre

On va produire une animation qui va montrer le mot “HELLO”, lettre par lettre. Le principe est très simple : Dans
chaque keyframe, on va insérer une nouvelle lettre. On insère un “H” dans le premier keyframe. Ensuite, on
pourrait ajouter le “E” dans le 2eme etc. On va faire une chose un peu différente ici, c'est à dire on conseille
d'insérer un keyframe à chaque 5eme frame. Cette technique va ralentir l'animation.

Etape – 1

On insère la lettre “H” dans le première frame (Alternativement vous pouvez commencer par le 5ème frame, dans
ce cas l’utilisateur ne verra pas le “H” au début d’animation. De toute les façons, vous pourrez ajouter des frames
vides plus tard aussi.

Etape 2 à 5

Maintenant on répète la même procédure en ajoutant les nouvelles lettres dans des nouveaux frames. Alors, on
va ajouter un nouveau keyframe dans le 5ème frame. Il est important de comprendre qu’il y a deux types de
keyframes :

1. Les keyframes vides qui vont faire disparaître les objets

2. Les keyframes remplis avec un dessin qui va s'afficher.

La procédure est comme ci-dessous (regardez l’image)

 On clique-droit sur un frame, puis on choisit Insert Keyframe (pas “insert blank keyframe”) Ou bien vous

pouvez appuyer sur F6, c'est-à-dire un utilise unshortcut .

3
Editing keyframe #5

Répétez cette action jusqu’à ce que vous avez écrit “HELLO”.

Etape - 6

On peut tester l'animation :

 Premièrement, vous pouvez bouger le playhead (le rectangle rouge qui se trouve en tête du timeline).

 Puis, vous pouvez tester le movie en appuyant le menu Control -> Test Movie ou CTRL – Retourne.

Cette action va ouvrir une nouvelle fenêtre pour montrer le movie.

Etape - 7

Maintenant on veut régler quelques points:

(1)Si vous n’êtes pas content de voir la lettre “H” au début de l'animation

Clic-droit sur le 1er frame et choisissir Insert Frame (pas un keyframe!) ou appuyez sur F5. Répétez cette action
4-5 fois. Puis tirez le point noir du 1er frame vers le 5ème frame (un keyframe).

(2)Peut-être votre clip est trop lent ou trop rapide.

Vous pouvez changer le frame rate (images montrées/seconde) avec deux façons :

 Cliquez sur un lieu vide dans l'espace de travail et changez les propriétés de rate dans le properties

panel.

 Menu Modify->Document (CTRL-J)

Pour cette animation, on pense que 16 frames/secondes sont suffisants.

(3)Vous pouvez aligner les lettres

4
Pour aligner les lettres dans tous les frames : Cliquez sur le bouton Edit multiple frames.

Select all frames

 Puis, vous pouvez choisir les frames que vous voulez modifier en même temps en ajustant les sliders "["

"]" qui se trouvent en tête de la timeline.

 Après, choisissez les groupes des image-par-image et utilisez le panneau align (Windows->Align), mais
ne cochez pas To stage !

Cette outil est très dangereux. Sauvez le fichier avant d'essayer ! Après l'opération, décochez Edit multiple
frames !

Etape 8

Maintenant vous pouvez publier cette animation comme un page web.

 Enregistrez le fichier (et notez l'endroit), parce que Flash va publier les fichiers *.html, .js, et *.swf (flash)
dans le même répertoire.

 Puis, cliquez sur un lieu vide dans le stage et appuyez sur le bouton de “Publish Settings” ou utilisez le
menu File->Publish Settings.

 Cliquez le bouton Publish si vous êtes contant des réglages.

 Après cliquez sur le fichier *.swf ou *.html et voir s’il marche ou pas.

Comme exercice, vous pouvez maintenant ajouter des extra keyframes après les frames 1,5,10, etc. et vous
pouvez bouger les lettres en haut ou en bas.

5
Exercice3 : Interpolation de mouvement classique
L’interpolation crée la transformation progressive d’un objet au fil du temps grâce à un algorithme prédéfini
dans Flash.
Une interpolation se place à partir d’une première Image clé jusqu’à une seconde Image clé. Flash génère
automatiquement les Images intermédiaires (ou Images virtuelles) entre l’état initial d’un objet et son état final.
L’interpolation est donc associée au scénario et aux Images

Procédure pour les animations simples

Seulement les symboles peuvent être animés, donc il faut strictement suivre la procédure suivante:

 Créez un clip et donnez-lui un nom

 Créez un nouveau layer (!)
 Mettez le clip sur la scène dans ce layer
 Verrouillez les autres layers
 Cliquez qq. part dans la timeline (scénario) et créer un nouveau keyframe avec copie du symbole: appuyez sur F6
 Bouger le clip
 Clic-droit dans la timeline dans ce layer et sélectionner Create classic tween (CS4) ou Create motion tween (CS3)
 Ajuster les positions dans les 2 keyframes
 Etendre les autres layers si nécessaire. Déverrouiller puis F5 dans le dernier frame de la timeline.

Exemple dans l'introduction - le déplacement d'un chat

Si vous voulez reproduire ce que nous faisons ici, vous pouvez commencer à partir du fichier flash-cs3-drawing-trees3.fla

3.1 Déplacement d'un chat de x à y

Vous devriez verrouiller toutes les autres couches'. De cette façon vous êtes sûr de ne pas modifier par erreur un cadre d'une
autre couche.

Étape 1 - Créez une nouvelle couche et insérer un objet pour l'animation

 Créez un nouveau calque et nommez le "chat animation" par exemple (voir la Flash CS3 - Créer et modifier les
calques et les images si vous avez oublié comment).
 Sélectionnez cette couche
 Y mettez un objet animable (donc un symbole), faites-le glisser depuis votre bibliothèque vers la scène, ou
couper/coller à partir d'une autre couche ou d'un autre document *.fla.
o Dans notre cas, on coupe/colle le chat assis en bas à droit dans le layer "objects".

Alors vous devriez voir quelque chose comme ceci:

6
Le chat avant d'animation. Il est situé en dehors de la scène et attend

Le premier frame est déjà une image-clé (keyframe) pour votre animation.

Étape 2 - Créez une seconde image-clé

 Sélectionner le calque à animer (avec le chat)

 Dans la timeline, par exemple le frame 20: Appuyez sur F6' (ou clic-droit insert keyframe)
o Cette opération va créer une nouvelle image clé et copier le contenu de l'image-clé précédente, c'est à dire
le contenu de l'image 1 dans notre cas
 Faites glisser l'objet (chat) dans une autre position, par exemple vers la droite.

Étape 3 - Créer l'interpolation de mouvement classique

 Cliquez sur un frame aléatoire entre les deux images-clés (toujours dans la même couche)
 Ensuite, faites un clic-droit et:
o Pour CS3: sélectionnez Create Motion Tween
o Pour CS4: Sélectionnez Create Classic Tween

7
Création d'une interpolation de mouvement avec le menu clic-droit

La timeline (scénario) devrait maintenant montrer une ligne droite avec une flèche (si elle est en pointillés quelque chose a
mal tourné).

Le résultat (dans CS3) devrait ressembler à la capture d'écran ci-dessous:

 Entre les deux images-clés que vous voyez une ligne continue avec une flèche (regardez dans le chat "Animation"
Layer).
 Vous devriez voir votre objet quelque part au milieu entre les deux images-clés.

Création d'une interpolation de mouvement pour le chat

Étape 4 - Répliquer le contenu des autres couches

 Comme vous avez pu voir dans les captures d'écran ci-dessus, la scène est vide, sauf pour le chat. C'est parce que
tous les autres dessins des autres couches n'existent que pour l'image 1.
 Pour chaque autre couche, allez sur la position du du 2ème image clé, puis F5. Alternativement, clic-droit et
sélectionner Insert Frame. (pas Insert Keyframe !)

8
  Cela étire vos dessins du frame 1. Vous devriez voir un rectangle blanc dans la timeline pour chacun des frames.
Donc les frames "grisés" sont juste des frames, pas des keyframes.

Vous devriez maintenant avoir quelque chose comme ceci:

Le premier résultat

Étape 5 - Testez

Exercice4 : Interpolation de forme

L’interpolation de forme se construit depuis une Forme de départ vers une Forme d’arrivée. Une graphie se transfo rme
progressivement en une autre graphie. C’est l’effet de morphing
.
3.1. Principe
Avec l'interpolation de forme, vous dessinez une Forme dans une Image du scénario, puis vous modifiez cette Forme (ou
dessinez une autre forme) dans une autre Image.
Vous pouvez également interpoler la position et la couleur des formes dans une interpolation de formes.

Appliquer une interpolation de forme à un carré pour le transformer en cercle