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.

Documents

Cours flash