Cours flash

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

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

- 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

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

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)

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

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

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:

- 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

 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
- 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

- Sélectionner le texte à séparer
- Choisir la commande Séparer
 Pour convertir une lettre en forme :
- Sélectionner la lettre à mettre en forme
- 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.

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

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

 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

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

Cours flash

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (20)

Similaire à Cours flash

Similaire à Cours flash (20)

Cours flash