Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Chapitre 2: Production électronique avancée 4ième SI - TIC 
Leçon 1 : Animations 
Enseignante :Mme. Achour Gharsallah Meri...
Prochain SlideShare
Chargement dans…5
×

Cours flash

465 vues

Publié le

zz

Publié dans : Sciences
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
465
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
32
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Cours flash

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

×