Cours Flash Ppp

4,717 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,717
On SlideShare
0
From Embeds
0
Number of Embeds
70
Actions
Shares
0
Downloads
243
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Cours Flash Ppp

  1. 1. Formation au logiciel Flash Macromédia MX Menasri Sabrina Mai 2007
  2. 2. Sommaire <ul><li>Introduction </li></ul><ul><li>L’interface de flash </li></ul><ul><li>L’interpolation de mouvement </li></ul><ul><li>L’interpolation de forme </li></ul><ul><li>L’animation de texte </li></ul><ul><li>Formats et publication </li></ul>
  3. 3. Introduction <ul><li>Macromedia Flash est un logiciel graphique développé par Macromedia servant à produire des documents animés destinés à être diffusés sur internet. </li></ul><ul><li>Cette application à l'avantage de posséder à la fois une interface graphique ressemblant à un logiciel de traitement d’images ( photoshop, gimp, …) et un éditeur de code script (Actionscript ) proche du javascript permettant la programmation. </li></ul><ul><li>Il permet d'autre part de créer du dessin animé et des jeux. </li></ul>
  4. 4. L’interface de Flash: les principaux éléments <ul><li>La scène </li></ul><ul><li>La boite à outils </li></ul><ul><li>Les panneaux </li></ul><ul><li>La fenêtre scénario (timeline) </li></ul><ul><li>Les propriétés du document </li></ul><ul><li>La palette des propriétés </li></ul>
  5. 5. L’interface de Flash La scène Actionscript Boite à outils Les panneaux Les propriétés La fenêtre scénario
  6. 6. La scène
  7. 7. La boite à outils            outil flèche ,       outil flèche sous-sélection et outil lasso pour saisir, sélectionner, et déplacer          outil ligne          outil texte pour insérer du texte dans votre animation.           outil ovale outil rectangle pour dessiner des formes          outil crayon pour dessiner à la main des lignes droites ou des courbes.          outil pinceau pour remplir ou peindre des zones avec une couleur unie.         outil pot de peinture pour remplir une zone avec une couleur.           outil pipette pour récupérer la couleur.          outil gomme pour effacer.          outil main pour se déplacer autour de votre animation.          outil zoom pour zommer vers l'avant ou vers l'arrière .
  8. 8. Les panneaux Le mélangeur permet de choisir la couleur de remplissage et du trait . Le nuancier affiche la palette de couleur spécifique au fichier ouvert, le nuancier par défaut est celui des couleurs web.
  9. 9. Les propriétés du document <ul><li>Il faut obligatoirement avant de commencer toute animation définir la taille et la cadence. </li></ul>Il faut choisir les dimensions en pixels (ou pouces) et la couleur d'arrière plan . La cadence , correspond au nombre d'image par seconde.
  10. 10. La palette des propriétés <ul><li>La palette «Propriétés» sert à paramétrer la sélection. Elle s’adapte à l’objet sélectionné. </li></ul><ul><li>Lorsque vous sélectionnez du texte, une scène, une image clé,… la fenêtre des propriétés s'adapte et affiche différentes configurations. </li></ul>
  11. 11. La palette des propriétés <ul><li>Texte </li></ul>Formes Image clé
  12. 12. La fenêtre scénario (timeline) <ul><li>La timeline contrôle vos animations. </li></ul>
  13. 13. La fenêtre scénario : Calques (1) Astuces : Pour renommer un calque faire un double clic sur le nom Gestion des calques :        Créer un nouveau calque         Ajouter un guide de mouvement à un calque.        Créer un dossier afin de regrouper des calques.        Supprimer un calque.
  14. 14. La fenêtre scénario : Calques (2) Oeil : Permet d'afficher ou masquer un calque. Cadenas : Permet de verrouiller un calque. Carré : Permet de visualiser le contour du contenu des calques.
  15. 15. La fenêtre scénario : Calques (3) Lorsque votre animation contient un nombre important de calques, vous pouvez regrouper certains calques dans un même dossier.
  16. 16. La fenêtre scénario (timeline) Timeline : si vos animations contiennent trop d'images, vous pouvez changer l'échelle du scénario afin de visualiser plus d'images. Astuces : Un clic sur le bouton à droite de la timeline permet de modifier son échelle
  17. 17. Images et images clés (1) <ul><li>Un film est composé d’une suite d’images. Dans la timeline chaque cellule correspond à une image. </li></ul><ul><li>Une image peut contenir plusieurs plans et ou plusieurs personnages, objets, d’où la présence des calques pour composer une image. </li></ul><ul><ul><li>Sur la timeline ci-dessous: </li></ul></ul><ul><ul><li>l’image 1 contient un fond + du texte. </li></ul></ul><ul><ul><li>l’image 5 par contre ne contient que le fond </li></ul></ul><ul><ul><li>l’image 10 est vide et ne contient ni fond ni texte </li></ul></ul>
  18. 18. Images et images clés (2) <ul><li>Insertion sur la timeline d’une image clé </li></ul><ul><li>Effectuez un clic-droit (PC) CTRL-clic (Mac) sur une image </li></ul><ul><li>Sélectionnez &quot;Insérer une image clé&quot; </li></ul><ul><li>OU </li></ul><ul><li>Sélectionnez une image de la timeline </li></ul><ul><li>Tapez F6 </li></ul>Définitions : une image clé correspond à un moment clé dans l’animation (point avant une modification du scénario)
  19. 19. Interpolation <ul><li>Définitions: </li></ul><ul><li>Les interpolations permettent d’effectuer des déplacements sur une scène, des rotations, des agrandissements, … </li></ul><ul><li>Il existe 2 types d’interpolations: </li></ul><ul><ul><li>Les interpolations de mouvement </li></ul></ul><ul><ul><li>les interpolations de forme </li></ul></ul>
  20. 20. Interpolation de mouvement <ul><li>Définitions: </li></ul><ul><li>L'interpolation de mouvement permet de faire bouger des objets, de les faire changer de forme, tout ceci dans un laps de temps donné.Voici les étapes: </li></ul><ul><li>créer un objet dans un calque (par exemple un carré). </li></ul><ul><li>dans la timeline, sélectionner un laps de temps (par exemple 40), puis dans le menu &quot;insertion&quot; et cliquez sur «Images clés» </li></ul><ul><li>Sélectionner les images du calque puis faites un clic droit et choisissez le menu « créer une interpolation de mouvement » </li></ul><ul><li>Désélectionner la ligne et se positionner sur l’image clé </li></ul><ul><li>Utiliser l’outil flèche pour déplacer votre forme (ici notre carré) </li></ul><ul><li>Cliquer ensuite dans le menu sur «contrôle», «tester l’animation» </li></ul><ul><li>Vous verrez votre carré se déplacer sur la scène  </li></ul>
  21. 21. Interpolation de mouvement
  22. 22. Interpolation de mouvement
  23. 23. Interpolation de mouvement
  24. 24. Interpolation de mouvement
  25. 25. Interpolation de mouvement
  26. 26. Interpolation de mouvement Voir un exemple animé http:// www . cyberformateur . com /support/flash/index. htm
  27. 27. Animation de texte Pour animer un texte, vous devez utiliser l’interpolation de mouvement (voir explication précédente en remplaçant la forme par du texte) Vous pourrez ainsi faire défiler un texte et même transformer sa taille, faire une rotation. Avant chaque changement, vous devez insérer une image clé.
  28. 28. Animation de texte
  29. 29. Animation de texte
  30. 30. Interpolation de forme <ul><li>Définitions: Cette interpolation s'applique à peu près comme l'interpolation de mouvement. Elle permet à la différence de transformer une forme en un autre (exemple un rond en carré avec une modification de la couleur). </li></ul><ul><li>créer un objet dans un calque (par exemple un rond). </li></ul><ul><li>dans la timeline, sélectionner un laps de temps (par exemple 40), puis dans le menu &quot;insertion&quot; et cliquez sur «Images clés» </li></ul><ul><li>Sélectionner les images du calque puis dans les propriétés (en bas) choisissez « créer une interpolation de forme » </li></ul><ul><li>Désélectionner la ligne et se positionner sur l’image clé </li></ul><ul><li>Supprimer le rond (touche « supp » sur le clavier) </li></ul><ul><li>Dessiner un carré de couleur différente n’importe où sur la scène Cliquer ensuite dans le menu sur «contrôle», «tester l’animation» </li></ul><ul><li>Vous verrez votre rond se déplacer, changer de couleur et se transformer en carré sur la scène  </li></ul>
  31. 31. Interpolation de forme
  32. 32. Interpolation de forme
  33. 33. Interpolation de forme
  34. 34. Interpolation de forme
  35. 35. Interpolation de forme
  36. 36. Interpolation de forme
  37. 37. Interpolation de forme Voir un exemple animé http:// www . cyberformateur . com /support/flash/index. htm
  38. 38. <ul><li>Lorsque vous enregistrerez vos animations (fichiers), vous obtiendrez le format de fichier .fla . </li></ul><ul><li>Lorsque vous publierez celles-ci, le format sera alors un .swf . </li></ul><ul><li>La publication permet à l’utilisateur d’insérer son animation flash sur une page web </li></ul><ul><li> Icône d'un fichier au format .fla (format de travail) </li></ul><ul><li> Icône d'un fichier au format .swf (format de publication sur une page web) </li></ul>Formats et publication
  39. 39. Formats et publication Pour publier un document flash, il faut cliquer sur paramètres, puis publier
  40. 40. Conclusion <ul><li>Vous trouverez la dernière version de Flash sur le site www . macromedia .com . Pour un essai vous pouvez télécharger la version 30 jours </li></ul><ul><li>Pour toutes questions </li></ul><ul><li>[email_address] </li></ul>

×