Animation flash

Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
Animation flash
C’est quoi une animation ?
L’animation en informatique est une simulation de mouvements obtenue par
l’affichage d’une série d’images à l’écran. C’est la copie en plusieurs exemplaires de
la même image en subissant une légère modification.
On obtient ainsi un film ou une séquence donnant une sensation d’animation.
I°| Présentation de l’interface de Flash 8





10
11
12




Légende
1
La barre des menus
7
La boite à outils
2
La barre d’outils principale
8
La zone de travail
3
Les panneaux affichés
9
Le calque actif
4
Le scénario
10
La tête de lecture
5
Le document
11
La barre d’édition
6
L’inspecteur de propriétés
12
La ligne du temps
1
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
II°| Les éléments d’affichage de Flash 8
Activité 1 : Créer un nouveau document contenant des objets différents (texte, formes
géométriques, symboles, etc. …).
affichage de la règle.
1- La règle.
Dérouler le menu ‘‘Affichage’’
Choisir la commande ‘‘Règle’’
Exemple :
affichage de la grille.
Dérouler le menu ‘‘Affichage’’
2- La grille.
Choisir le groupe ‘‘Grille’’
Cliquer sur l’option ‘‘Afficher la grille’’
choix des panneaux.
3- Les panneaux
Activer le menu ‘‘Fenêtre’’
Choisir le panneau désiré
III°| Les éléments d’une a nimation Flash
Constatations :
 Une animation doit comporter au moin une séquence.
 Une séquence doit comporter au moin un calque.
 Un calque doit comporter au moin une image.
 Une image peut être une forme, un texte, un son, un symbole, ….
1°) L e s p a r a m è t r e s d ’ u n d o c u m e n t f l a s h :
Activité 3 : Créer un nouveau document flash :
1. Saisir le texte « ANNEE SCOLAIRE 2013 – 2014 »
2. Appliquez au document les paramètres suivants :
 Taille 600 x 450.
 Arrière plan (rouge foncé).
 Vitesse 12 ips (images par seconde).
Enregistrer l’animation obtenue sous le nom Aim2.fla dans votre dossier.
2
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
changement de paramètres.
Activer le menu ‘‘Modification’’
Choisir la commande ‘‘Document’’
Appliquer les paramètres souhaités
2°) L e s s é q u e n c e s d a n s u n d o c u m e n t f l a s h :
Activité 4 :Dans le même fichier Anim2.fla appliquez les modifications suivantes:
1. Ajouter deux séquences à votre animation.
 La première contient le texte « 4ème ANNEE SCIENCES DE L’INFORMATIQUE »
 La deuxième contient le texte « LYCEE Bechir Nabheni »
2. Testez l’animation.
3. Renommer les séquences respectivement par Année, Classe et Lycée.
4. Modifier l’ordre des séquences par Lycée, Année et Classe.
Enregistrez les modifications apportées au document.
Comment ajout, renommer, modifification, suppression d’une séquence.
Dérouler le menu ‘‘Fenêtre’’
Choisir le groupe ‘‘Autres panneaux’’
Cliquer sur la commande ‘‘Séquance’’
Appliquer les modifications désirées
3°) L e s c a l q u e s d a n s u n d o c u m e n t f l a s h :
Activité 5 : Dans le même fichier Anim2 appliquez les modifications suivantes:
 Insérer une nouvelle séquence nommée Matière.
 Insérer trois calques
 Renommer les calques respectivement par Cl1, Cl2 et Cl3.
o Dans le Cl2 saisir le texte « MATIERE »
o Dans le Cl3 saisir le texte « TIC »
o La mise en forme est laissée au libre choix.
 Supprimer Cl1, verrouiller Cl2 et masquer Cl3.
Enregistrez les modifications apportées au document.
3
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
insertion d’un calque.
Marche à suivre :
Dérouler le menu ‘‘Insertion’’
Choisir le groupe ‘‘Scénario’’
Cliquer sur la commande ‘‘Calque’’
Pour changer les proprietés d’un calque :
modification de proprietés d’un calque.
Activer le menu ‘‘Modification’’
Choisir le groupe ‘‘Scénario’’
Cliquer sur la commande ‘‘Propriétés du calque’’
Appliquer les modification souhaitées.
3°) L e s i m a g e s d a n s u n d o c u m e n t f l a s h :
Activité 6 : Activer de nouveau le fichier Anim1.fla.
1. Déduisez les types d’images utilisées et leurs caractéristiques.
Type
Caractéristiques
1. Les images clés
Indiquées par un point noir
2. Les images clés vides
3. Les images vides
Indiquées par point creux (Exp : image N°1 du calque
arrière plan)
Caractérisées par une couleur blanche.
C’est une copie de l’image précédente (images 2  30 du
4. L’images copiée
calque Arrière plan)
5. Les images calculées
Sont
calculées
suite
à
des
commandes
de
calcul
arithmétique (images : 3  14 du calque Roue)
Activité 7 :Créer un nouveau document flash.
6. Insérer dans l’image N°1 un cercle, dans l’image N°20 insérer une image clé vide et dans
l’image N°40 insérer une image clé (triangle).
7. Supprimer les images du N°7 au N°15
Enregistrer l’animation obtenue sous le nom Aim3.fla dans votre dossier.
Manipulation des images
Marches à suivre :
(v o i r l i v r e p a g e 3 0 )
4
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
IV°| Les formes et les groupes
Activité 8 :act8P30
Manipulation des formes
Pour grouper ou dissocier des formes :
groupement ou dissociation de formes.
Sélectionner l’ensemble des formes à grouper
Dérouler le menu ‘‘Modification’’
Choisir la commande ‘‘grouper’’ ou bien ‘‘dissocier’’
Constatations :

Il est possible de changer la couleur d’une forme à l’aide de la barre d’outils ou bien
à partir de l’inspecteur de propriétés et ou bien du panneau Couleur.

On peut changer la dimension à l’aide de l’inspecteur de propriétés ou bien du
panneau ‘‘ Info’’ du menu ‘‘Fenêtre’’.

La transformation d’une forme se fait à travers le panneau ‘‘Transformer’’ ou bien
avec la barre d’outils.

On peut aussi transformer une forme à l’aide du groupe ‘‘Transformer’’ du menu
‘‘Modification’’.

Une forme est caractérisée par un contour et un remplissage qui peuvent être
séparés.

Pour remplir le contour on utilise l’option ‘‘outil pot de peinture’’ da la barre d’outils.
V°| Les textes
Activité 9 :Act9p32
Manipulation d’un texte
Pour séparer un texte :
séparation d’un texte.
Sélectionner le texte à séparer.
Activer le menu ‘‘Modification’’.
Choisir la commande ‘‘Séparer’’.
Pour convertir une lettre en forme:
conversion d’une lettre en forme.
Sélectionner le texte déjà séparé.
Activer le menu ‘‘Modification’’.
Choisir la commande ‘‘Sépare’’.
5
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
VI°| L’importation des médias
Activité 10 :.
importation d’un média.
Dérouler le menu ‘‘Fichier’’.
Sélectionner le groupe ‘‘Importer’’
Choisir la commande ‘‘Importer dans la bibliothèque’’
Sélectionner le média à importer.
Cliquer sur le bouton ‘‘Ouvrir’’
Placer le média dans la scène.
VII°| Les symboles graphiques
Activité 11 :Act p34
Insertion d’un symbole.
Dérouler le menu ‘‘Insertion’’
Choisir la commande ‘‘Nouveau symbole’’
Cocher le type de symbole
Confirmer par ‘‘OK’’.
Il est possible aussi de créer la forme puis faire la conversion à partir du menu ‘‘modification’’.
6
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
VII°| L e s a n i m a t i o n s
Avec flash il est possible de créer deux types d’animations :
 L’animation image par image.
 L’animation interpolée.
1-L’animation image par image
Activité 12 : Créer une animation montrant le déplacement d’un cylindre sur 10 emplacements
différents en précisant le numéro d’emplacement. Appliquez les paramètres suivants :
 Taille du cylindre : L=80 et H=80 au coordonnée X=3 et y=150.
 Couleur : intérieure Rouge et contour Noir.
 Couleur arrière plan bleu ciel.
 Cadence 2 ips.

Enregistrer l’animation sous le nom activ12.
 Dans l’image n°1 du calque insérer un cylindre ainsi que le numéro d’emplacement.
 Dans la 2ème image insérer une image clé et modifier l’emplacement du cylindre ainsi que le
numéro d’emplacement.
 Même étapes pour la suite des autres images jusqu'à attindre l’emplacement N° 10.
Il est pomlssible d’utiliser deux calques. Dans le premier on insère le sylindre et le deuxième pour
indiquer le numéro d’emplacement.
2- L’animation interpolée
A. L’interpolation de forme
Activité 13 : On vous demande de faire l’activité 13 du livre page 36
Activité 14 :
On se propose de créer une animation nommée Transformation Soleil
dans laquelle il y aura la transformation d’une étoile de 3 sommets vers une 2ème de 5
sommets puis vers une 3ème de 10 sommets puis une autre de 15 sommets et une dernière de
30 sommets.
 Cette animation est composée de deux calques.
o Le premier calque contient le titre Transformation Soleil avec un arrière plan
Noir.
o Le second contient les différentes formes d’étoiles.
 Appliquez aux étoiles une dégradation de couleurs partant du rouge jusqu'à atteindre la
couleur jaune du soleil. Appliquez une cadence égale à 5.
 Les positions et formes d’étoiles se présente comme suit :
7
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
Etat
Initial
Etat
Final
 Dans le premier calque saisir le texte « Transformation soleil »
 Dans le 2ème calque insérer dans l’image N°1 une étoile de trois cotés.
 Dans l’image N°15 insérer une image clé vide et insérer une 2ème étoile de 5 cotés en modifiant
l’emplacement ainsi que la couleur.
 Appliquer les mêmes étapes pour les autres images.
 Positionner le curseur dans la première image, activer l’inspecteur de propriétés et appliquer une
interpolation de forme.
 De même pour les autres images 15, 30, 45 et 60.
B. L’interpolation de mouvement
Activité 15 : Reprenons l’énoncé de l’activité 12. Que constatez-vous si l’on augmente cette fois le
nombre d’emplacements à 50.
Constatations :
En utilisant le principe d’animation image par image on remarque le
nombre important d’images à utiliser. D’ou il y aura alors une perte de temps.Il est préférable alors
d’aboutir à une autre méthode pour résoudre ce problème.
C’est la technique d’interpolation de mouvement.
Activité 16 :
1==>Allez sur fichier, nouveau. Une nouvelle animation s'ouvre1
2==> Prenez l'outil cercle et tracez un rond sur le coté gauche de votre animation.
3==>Ensuite, prenez la flèche noire et faites un rectangle de sélection sur le cercle, ce qui le
sélectionne dans sa totalité. Appuyer sur F8 pour convertir le tracé en symbole, nommez le
rond "rond" et choisissez graphique pour le comportement
4==> cliquez ensuite sur l'image 10, et appuyez sur F6 pour créer une nouvelle image clé.
5==> vérifiez que vous êtes bien sur l'image 10 (la tète de lecture rouge doit se trouver sur le
10) et déplacez alors le rond en bas au centre de l'animation.
6==> cliquez (clic droit) sur une des images entre la 1ère et la 9ème image (quand une main
apparaît). puis choisissez "créer une interpolation de mouvement" dans le menu qui vient
de s'ouvrir.
8
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
7==>insérez d'autres images clés avec F6 aux images 20, 30 et 40. Sur la 20, le rond doit
être a mi hauteur, à droite; sur la 30, le rond doit être en haut au centre; et sur la 40, le rond
doit être au même endroit que sur l'image numéro 1.
8==>entre chaque image clé ainsi faite, créez une interpolation de mouvement de la même
manière qu'auparavant.
9==>enregistrez l'animation et testez la (CTRL ENTREE).
C. L’interpolation par guide de mouvement
Activité 17 : On se propose dans cette activité de créer une animation montrant le mouvement
d’un disque rouge sur les quatre côtés de la scène.
1. Que constatez vous en appliquant la technique d’interpolation de mouvement ?
2. Qu’a-t-on besoin pour résoudre ce problème ?
Constatations :
En appliquant la technique d’interpolation de mouvement on aura perte de temps vue le nombre
important d’interpolations qui sera utilisé.
On aura besoin alors d’une nouvelle technique pour résoudre un tel problème.
C’est la technique d’interpolation par guide de mouvement.
Définition :
Dans une interpolation de mouvement par guide l’objet en question doit suivre
une trajectoire représentant le chemin à suivre lors de son mouvement.

Les guides de mouvement s’appliquent seulements aux interpolations de mouvement
Activité 18 :
Créer une animation flash montrant le mouvement du symbole SI sur une
trajectoire comme le montre l’exemple ci dessous :
Enregistrer les modifications et testez l’animation.
 Dans le deuxième calque positionner le curseur dans l’image n°40 et insérer une image clé.
 Repositionner le curseur dans l’image n°1 et appliquer une interpolation de mouvement.
 Inserer par la suite un guide de mouvement à partir du menu ‘‘insertion’’ puis tracer la
trajectoire.
 Positionner le curseur dans l’image n°1 du deuxième calque et essayer de déplacer le symbole SI
au début de la trajectoire.
 Positionner le curseur à l’image n°40 et déplacer le symbole vers l’extrémité de la trajectoire.
 Tester lannimation
 sélectionné l’image1 du calque2 cochet la case orienter vers la trajectoire
 tester l’annimation de nouveau
9
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
VIII°| L e s b o u t o n s
Activité 19 : Dans le même fichier de l’activité 18 et dans un nouveau calque nommée
bouton Ajouter deux boutons de types « tube flat copper» et « tube flat steel» placez
les dans la scène comme suit :
Insertion d’un bouton : (marche à suivre)
insertion d’un bouton dans un document flash
Dérouler le menu ‘‘Fenêtre’’
Sélectionner le groupe ‘‘bibliothèque communes’’
Choisir la commande ‘‘Bouton’’
Sélectionner le type de bouton souhaité
Déplacer le bouton dans la bibliothèque
Placer le bouton dans la scène
IX°| L e s s c r i p t s d ’ a c t i o n
Activité 20 :
1- Dans la même animation de l’activité19 ajouté les actions script correspondantes
2-activité 16,17,18 p41-42 du livre
 Pour appliquer uns script d’action sur un bouton il suffit de :
1). Sélectionner le bouton désiré.
2). Activer la commande ‘‘Action’’ du menu ‘‘Fenêtre’’
 Si l’action script choisie est « goto » ou bien « stop » alors activer
l’option ‘‘Fonction globales’’ puis ‘‘Option de scénario’’.
 Si l’action script choisie est « getURL » ou bien « unloadMovie »
alors
activer
l’option
‘‘Fonction
globales’’
puis
l’option
‘‘Navigateur/réseau’’.
3). Choisir les options désirés
 Pour appliquer un script d’action sur une image il suffit de selectionner l’image
consernée, activer la commande ‘‘Action’’ du menu fenêtre, cliquer sur l’option ‘‘assistant
de script’’ , activer l’option ‘‘Fonction globales’’ puis activer l’option ‘‘Option de scénario’’
et choisir le script désiré.
10
Niveau: 4ème SI
Prof :jihen damerji toumi & Montacer Dhifallah
Production électronique avancée « Animations sous Flash 8 »
IX°| L a p u b l i c a t i o n
Activité 21 :On vous demande dans cette activité de :
 Changer les paramètres de publication du fichier précédente.
 Publier les fichiers animations de l’activité 20.
Solution :
(Voir livre pages 43,44)
11
Niveau: 4ème SI