1. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 1
I. Introduction
Un objet animé est un objet qui subit une sorte d’action ou de mouvement pour créer une animation. On doit passer par des logiciels d’animations tels que Switch, Macromedia Flash.
Ce dernier (MX Flash) permet de créer, intégrer des animations et des scripts (actions) dans des pages Web. Les fichiers du flash ont comme extension ‘swf’ et ils sont intégrés dans les pages html comme des fichiers GIF.
II. Présentation de l’interface Flash
& Activité 1 : Activité 1 page 21.
1. La barre des menus
2. Les panneaux affichés
3. Le scénario
4. La scène
5. L’inspecteur des propriétés
6. La boite à outils
7. La zone du travail
8. Le calque actif
9. La tête de lecture
10. La barre d’édition
11. La ligne du temps
II.1 La scène/ séquences
La scène est l'endroit auquel vous composez le contenu des images de l'animation, soit en y dessinant directement les illustrations, soit en organisant des illustrations importées.
1
4
3
6
2
7
5
9
8
10
11
2. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 2
II.2 Le scénario
Le scénario organise et contrôle le contenu d’une scène (document) au fil de temps par des
calques. Tout comme les films, les documents flash divisent les périodes de temps en images.
Figure 1 : Fenêtre d’un scénario
III. Les éléments du menu affichage
Flash contient :
- Des règles, des guides, une grille : destinés à vous aider à dessiner et à positionner les
objets avec précision
3. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 3
- Des panneaux de modifications
III.1 La règle
& Activité 2 : Créer un document flash et faire apparaître les règles.
Figure 2 : les règles horizontale/verticale dans Flash
III.2 La grille
& Activité 3 : Dans le document crée dans l’activité 2, faire les modifications suivantes sur sa grille et l’afficher.
Couleur : bleu clair
Hauteur = largeur = 22 px
Figure 3 : Fenêtre de la modification d’une grille en Flash
III.3 Les guides
& Activité 4 :
Créer un nouveau document
Dessiner un objet selon votre choix
Attribuer une animation à cet objet qui suit la trajectoire suivante :
Règles
4. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 4
Figure 4 : guide en Flash
III.4 Les panneaux
Les panneaux donnent accès à nombreuses paramètres de Flash. Ils présentent plusieurs
améliorations. Exemple : panneau de couleur, panneau de la bibliothèque, panneau d’action,
panneau de propriétés,…
Panneau de couleur
Panneau de propriétés
Panneau bibliothèque
Panneau Action
5. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 5
Figure 5 : Quelques panneaux dans Flash
Remarque : Pour afficher un panneau souhaité, le sélectionnez dans le menu Fenêtre.
IV.Les éléments d’une animation Flash
Activité 5 : Observez la figure ci-dessous et répondez aux questions
1. Quelle est l’animation courante? ……………………………………………………………
2. Quelle est la séquence courante? ……………………………………………...……………
3. Quels sont les calques que comporte cette séquence?.....................................……………...
…………………………………………………………………………………………………..
4. Combien d’images comporte chaque calque? ………………………………………………
5. Quelle est l’mage courante du calque image1?....…………………………………………..
IV.1 Les propriétés du document
& Activité 6 :
Créer une nouvelle animation
Lui attribuer le titre suivant : mon premier essai
Changez sa taille (600 x 500), son arrière plan (bleu foncé) et lui appliqué une vitesse (cadence) 20 ips (image par seconde)
6. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 6
Figure 6 : Propriété du document de l’activité 2
IV.2 Les séquences
& Activité 7 : Activité 4 page 27 du manuel.
Figure 7 : les 3 séquences de l’activité 5
A retenir
Pour ajouter une séquence :
Ouvrir le menu Insertion
Choisir la commande Séquence
Pour renommer, déplacer ou supprimer une séquence :
Ouvrir le menu Fenêtre
Choisir le groupe Autre panneaux
Sélectionnez la commande Séquence
Effectuez les opérations nécessaires
Pour se déplacer d’une séquence à une autre, on utilise le bouton modifie la séquence
IV.3 Les calques
7. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 7
& Activité 8 : Activité 5 page 28 du manuel + constations
Remarque :
Icône d’affichage
Si dans la colonne d’affichage, on a une croix rouge
dans un calque ceci veut dire que le contenu de ce
dernier sera masqué. Dans notre cas le contenu du
calque Ctrois sera masqué.
Icône de verrouillage
Si dans un calque on trouve cette icône ceci veut dire
que le calque est verrouillé c.à.d. on peut rien faire la
dessus. Et on aura aussi une croix rouge au dessus du
crayon. Dans notre cas le calque Cdeux sera verrouillé.
Icône d’activation
Le crayon permet de montrer que le calque est actif et
que vous pouvez manipuler son contenu. Dans notre cas
l’animation 1 est actif.
Application
Créer trois calques nommés : triangle, rectangle et cercle, ensuite insérer dans chaque calque
une image significative.
IV.4 Les images
& Activité 9 : A partir du scénario suivant décrire ce que vous voyez.
8. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 8
A droite de calque, on trouve une grande quantité de rectangle. Chacune représente une image (trame). Au début de chaque animation, ces trames sont vides (rectangle vide), mais, au cours de la création, ils contiendront l’un des 5 types d’images suivants:
Types d’images
Formes graphiques
Image clé : est une image dans laquelle vous définissez les changements des propriétés d'un objet pour une animation, ou dans laquelle vous incluez du code ActionScript afin de contrôler un aspect du document
Image clé vide : prête à recevoir un contenu
o
Image vide : sans aucun contenu caractérisée par une couleur blanche
Image copiée : toute image de couleur gris est une copie de l’image précédente, tels que de l’image n°2 jusqu’à l’image n°5 des calques boutons, traits,…
Image calculée : Image de milieu d’une interpolation est une image calculée suite à des commandes mathématiques tels que de l’image n°2 jusqu’à l’image n°5 du calque calculé,…
IV.5 Utilisation d’images dans le scénario
Pour insérer des images dans le scénario :
- Insertion Image Image-clé (pleine ou vide)
Pour supprimer une image, une image-clé ou une séquence d'images :
- Sélectionnez-la, puis choisissez Insertion > Supprimer les images
Pour déplacer une image-clé ou une séquence d'images et leur contenu :
- Faites-la glisser vers l'emplacement souhaité.
Pour copier une image ou une séquence d'images :
- Sélectionnez-la et choisissez Edition > Copier les images. Sélectionnez une image ou séquence à remplacer et choisissez Edition > Coller les images.
Ou bien
- En la faisant glisser : Cliquez tout en appuyant sur la touche Alt. et faites glisser l'image-clé vers l'emplacement souhaité.
Pour convertir une image-clé en image vide:
9. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 9
- Sélectionnez-la et choisissez Insertion > effacer l'image-clé.
Pour ajouter un élément de la bibliothèque à l'image-clé en cours :
- Faites glisser l'élément du panneau Bibliothèque vers la scène.
V. Les Formes
& Activité 10 :
Créer une nouvelle animation.
Dessinez un cercle de remplissage rouge et de contour bleu.
Modifiez sa couleur de remplissage en bleu, et sa couleur de contour en vert.
Modifiez sa taille L=100 et H=100 et ses coordonnées X=50 et Y=50.
Sélectionnez le contour et le déplacez aux coordonnées X=250 et Y=50 puis le remplir par une couleur jaune.
Pour le disque jaune, appliquez une transformation de 120% aux dimensions et une inclinaison de 90°.
A retenir
Boite à outil
Changer les couleurs d’une forme Panneau de propriété
Panneau couleur
Modifier les coordonnées et les dimensions Panneau de propriété
Panneau info
Le contour et le remplissage peuvent être modifiés
Panneau transformer
10. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 10
Transformer une forme Boite à outils
Choisir la transformation souhaitée
VI. Les Groupes
& Activité 11 : Activité 9 page 32 du manuel + solution
A retenir
Pour grouper des formes
- Sélectionner les formes à grouper
- Activez le menu Modification
- Choisir la commande Grouper
Pour changer l’ordre des groupes
- Sélectionner le groupe à modifier
- Activez le menu Modification
- Choisir la commande Réorganisation
Pour verrouiller un groupe (ne plus l’utiliser)
- Menu modification
- Réorganisation
- Verrouiller
Pour dissocier les groupes :
- Modification
- Dissocier
VII. Les textes
& Activité 12 :
En utilisant l’outil texte, saisir le mot 4 SI TIC
Appliquez les propriétés suivantes :
Police
Couleur
Style
Taille
Espacement
Monotype Corsiva
Rouge
Gras
30
10
Séparer le texte
Dispersez les lettres de ce texte
Les convertir en des formes
A retenir
Pour séparer le texte
11. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 11
- Sélectionner le texte à séparer
- Activez le menu Modification
- Choisir la commande Séparer
Pour convertir une lettre en forme :
- Sélectionner la lettre à mettre en forme
- Activez le menu Modification
- Choisir la commande Séparer
VIII. L’importation des médias
Avec Flash, on peut insérer des médias tel que : son, image, vidéo…
& Activité 13 : Activité 10 page 33 + solution
IX. Les symboles
IX.1 Présentation
Les symboles sont des représentations qui n’apparaissent qu’une seule fois dans la
bibliothèque. Ils sont des éléments réutilisables dans un document c.à.d. une fois crée,
enregistré et si vous en avez besoins, il suffit de travailler avec l’occurrence. On a trois types
de symboles :
Type de Symboles Rôles
Formes
graphiques
Symboles Clips
Ce sont des sous animations flash qui seront joué
indépendamment du scénario principal mais avec
la même cadence.
Symboles Boutons
Ce sont des symboles utilisés dans le but de
déclencher une action.
12. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 12
Symboles Graphiques
Ce sont des symboles qui ne contiennent que des
graphiques. Le schéma d’une table est un
ensemble de lignes raccordées Pour manipuler
l’objet on peut le transformer en un symbole
graphique
IX.2 Création des symboles graphiques
& Activité 14: Activité 11 page 34 + solution
Il existe deux façons de créer des symboles :
Avant avoir placé un élément sur la scène Après avoir placé un élément sur la scène
a) Dessinez un carré sur la scène à l’aide de
l’outil .
a) Choisissez le menu Insert, puis l’option
Nouveau symbole.
b) Sélectionnez l’outil , puis double cliquez
sur l’ovale que vous venez de dessiner de façon à
ce que l’intérieur et le contour soient sélectionnés.
b) Nommez votre symbole case et choisissez
l’option Graphique. Cliquez sur OK. Vous vous
trouvez maintenant dans une deuxième fenêtre.
c) Choisissez le menu Insertion, puis l’option
c) Sélectionnez l’outil et dessinez un
13. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 13
Convertir en symbole.
rectangle.
d) Nommez votre symbole case et choisissez
l’option Graphique. Cliquez sur OK.
d) Cliquez ensuite sur Scène 1 pour revenir à
la scène principale.
e) Votre symbole apparaît maintenant dans la
bibliothèque.
e) Votre symbole apparaît maintenant dans la
bibliothèque.
Application
Créer trois occurrences du symbole « carré » réalisé précédemment (activité 14)
1ère occurrence: réduire la taille
2ème occurrence: modifier la luminosité à 70%
3ème occurrence: modifier la teinte. Choisir une couleur bleue et modifier la
transparence alpha à 40%
Solution
Sélectionner le calque
Faire glisser le symbole de la bibliothèque
Sélectionner l’occurrence et modifier ses propriétés dans l’inspecteur de propriété.
X. Les Animations
X.1 L’animation image par image
& Activité 15 :
Importez les images suivante dans la bibliothèque : Tigre, Tigre1, Tigre2, Tigre3
(D:/4SI/doc Tic)
Insérez une image à l’image 10, ensuite disposé l’image TIGRE dans la scène
Insérez une image clé vide à l’image 11, puis insérer une image à l’image 20 ensuite
disposé l’image TIGRE1 dans la scène
Insérez une image clé vide à l’image 21, puis insérer une image à l’image 30 ensuite
disposé l’image TIGRE2 dans la scène
14. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 14
Insérez une image clé vide à l’image 31, puis insérer une image à l’image 40 ensuite
disposé l’image TIGRE3 dans la scène
Tapez Ctrl + Entrer pour voir l’exécution
Enregistrez l’animation sous le nom « TP1.fla » (Fichier Enregistrer-sous)
Exportez l’animation sous le nom « TP1.swf » (Fichier Exporter Exporter
l’animation)
Les animations image par image peuvent être représentées comme suit
Application : Activité 12 Page 35. A faire chez eux
Solution
Cette activité, pour être réalisée, nécessite 4 calques:
Calque arrière plan contenant les éléments fixes durant toute l’animation
Calque tableau contenant les cases du tableau
Calque compteur contenant les indices des cases à remplir
Calque valeur contenant les différentes valeurs contenues dans le tableau.
Pour ralentir l’animation on peut agir sur la cadence dans les propriétés du document
X.2 L’animation interpolée
Dans certains cas l’animation image par image est très lourde, et lente à réaliser, pour ceci on
fait recours aux animations interpolées.
Ce type d’animation, et comme sont l’indique est interpolé par deux images clés de début et
de fin de l’animation.
X.2.a L’interpolation de forme
Avec l'interpolation de forme, vous dessinez une forme à un point dans le temps, puis
modifiez cette forme ou dessinez une autre forme à un autre point dans le temps.
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.
& Activité 16 :
Créez un cercle à l’image 1
15. Chapitre 2: Production électronique avancée 4ième SI - TIC
Leçon 1 : Animations
Enseignante :Mme. Achour Gharsallah Meriem page 15
Insérez une image clé vide à l’image N°30
Créez dans l’image N°30 un rectangle
Cliquez sur une image entre 1 et 25 dans le calque, puis choisir Interpolation de forme
Tapez Ctrl + Entrer pour voir l’exécution
Enregistrez l’animation sous le nom « TP3.fla » (Fichier Enregistrer-sous)
Exportez l’animation sous le nom « TP3.swf » (Fichier Exporter Exporter
l’animation)
X.2.b L’interpolation de mouvement
Avec l'interpolation de mouvement, vous définissez des propriétés telles que la position, la
taille et la rotation d'une occurrence, d'un groupe ou d'un bloc de texte à un point dans le
temps, puis modifiez ces propriétés à un autre point dans le temps.
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.
& Activité 17 : Essayer de schématiser le jet flèche.
X.2.c L’interpolation de mouvement avec guide
Avec Flash, on peut appliquer également une interpolation de mouvement le long d'un
trajectoire (cercle, trait,…). Il faut ajuster les deux occurrences du symbole à animer avec le
début et la fin du trajet.
L'interpolation de mouvement avec guide est indiquée par uns superposition du calque guide
et du calque qui contiendra l’interpolation.
& Activité 18 : Activité 15 du manuel page 38.
Remarques
Une ligne pointillée indique que l'interpolation est rompue ou incomplète, par exemple
parce que l'image-clé finale est absente.
Les interpolations de forme ne s’appliquent qu’aux groupes ou graphiques
Les interpolations de mouvement ne s’appliquent qu’aux groupes ou symboles.
Les guides de mouvement ne s’appliquent qu’aux interpolations de mouvement.