A n imation 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 é senta tion de l interface de Flash 8 10 11 12 L é g e n d e 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
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. ). Exemple : 1- La règle. 2- La grille. affichage de la règle. Dérouler le menu Affichage Choisir la commande Règle affichage de la grille. Dérouler le menu Affichage Choisir le groupe Grille Cliquer sur l option Afficher la grille 3- Les panneaux choix des panneaux. Activer le menu Fenêtre Choisir le panneau désiré III Les éléments d une a n i mation Flash C o n s t a t a t i o n s : 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
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
M a r c h e à s u i v r e : insertion d un calque. Dérouler le menu Insertion Choisir le groupe Scénario Cliquer sur la commande Calque P o u r c h a n g e r l e s p r o p r i e t é s d u n c a l q u e : 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. T y p e C a r a c t é r i s t i q u e s 1. Les images clés Indiquées par un point noir 2. Les images clés vides Indiquées par point creux (Exp : image N 1 du calque arrière plan) 3. Les images vides Caractérisées par une couleur blanche. 4. L images copiée 5. Les images calculées C est une copie de l image précédente (images 2 30 du calque Arrière plan) 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. M a n i p u l a t i o n d e s i m a g e s Marches à suivre : (v o i r l i v r e p a g e 3 0 ) 4
IV Les formes et les groupes Activité 8 :act8p30 Manipulation des formes P o u r g r o u p e r o u d i s s o c i e r d e s f o r m e s : groupement ou dissociation de formes. Sélectionner l ensemble des formes à grouper Dérouler le menu Modification Choisir la commande grouper ou bien dissocier C o n s t a t a t i o n s : 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 L e s textes Activité 9 :Act9p32 Manipulation d un texte P o u r séparer un t e x t e : séparation d un texte. Sélectionner le texte à séparer. Activer le menu Modification. Choisir la commande Séparer. P o u r c o n v e r t i r u n e l e t t r e e n f o r m e : conversion d une lettre en forme. Sélectionner le texte déjà séparé. Activer le menu Modification. Choisir la commande Sépare. 5
V I 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. V I I L e s 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
V I I 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 a n imation 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 i n t e r p o l a t i o n d e f o r m e 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
Etat I n i t i a l Etat F i n a l 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. C o n s t a t a t i o n s : 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
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? C o n s t a t a t i o n s : 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 é f i n i t i o n : 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
V I I I 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
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. S o l u t i o n : ( V o i r l i v r e p a g e s 43, 44) 11