SI28 Partie 1 Bruno Binet FLASH MX. Les atouts de Flash Création d’animation pour le Web, pouvant contenir une forte interactivité Faible poids des fichiers.

Présentation au sujet: "SI28 Partie 1 Bruno Binet FLASH MX. Les atouts de Flash Création d’animation pour le Web, pouvant contenir une forte interactivité Faible poids des fichiers."— Transcription de la présentation:

1 SI28 Partie 1 Bruno Binet FLASH MX

2 Les atouts de Flash Création d’animation pour le Web, pouvant contenir une forte interactivité Faible poids des fichiers (vectoriel) Compatible avec tous les navigateurs Chargement en lecture continue : l’application se lance sans être complètement chargée InterfaceDessinerAnimerPublier

3 Environnement de travail InterfaceDessinerAnimerPublierInterfaceDessinerAnimerPublier

4 Les fenêtres Flash MX InterfaceDessinerAnimerPublierInterfaceDessinerAnimerPublier Barre d’outil dessins 1 1 Scénario 2 2 Fenêtre des propriétés 3 3

5 Les fenêtres Flash MX InterfaceDessinerAnimerPublier 4 Mélangeur de couleurs 4 5 Nuancier 5 6 La Bibliothèque F11 6

6 Fenêtre scénario Chaque image est une superposition de calques Une séquence est un enchaînement d’images dans le temps Une animation est la succession d’une ou plusieurs séquence InterfaceDessinerAnimerPublier

7 Les outils de dessin DessinerInterfaceAnimerPublier Sous–sélection Lasso Texte Rectangle Pinceau Transformer le remplissage Pot de peinture Gomme Zoom Couleur de remplissage Flèche Ligne Plume Ovale Crayon Transformation libre Encrier Pipette Main Couleur de trait Options (en rapport avec l’outil sélectionné)

8 Les outils de dessin DessinerInterfaceAnimerPublier Options Gomme Options Pinceau Options Pot de Peinture Options Crayon

9 Dessin et groupe DessinerInterfaceAnimerPublier Les groupes permettent de créer un objet à part entière qui n’a plus d’intersection avec les autres objets (on peut séparer pour modifier). Deux objets de même couleur superposés ne forment plus qu’un (affinité de couleur). Un objet placé par dessus un autre objet de couleur différente efface une partie de cet objet.

10 Dessin et symboles Utilisation de symboles L’utilisation de symboles permet de créer des occurrences dans les dessins Le symbole est unique et est répertorié dans une bibliothèque Les occurrences sont multiples et dépendent du symbole Pour modifier toutes les occurrences en même temps il faut modifier le symbole… Conversion d’un dessin en symbole : Click droit > convertir en symbole > Graphique Ou F8 DessinerInterfaceAnimerPublier

11 Animer sa fenêtre InterfaceAnimerDessinerPublier 2 types de calques :

12 Dessiner sur plusieurs calques InterfaceAnimerDessinerPublier Sélectionner l’onglet calque dans la fenêtre scénario pour ajouter des calques. Le but est de séparer le dessin en plusieurs parties et de mettre chacune de ces parties dans un calque. La superposition de ces calques donnera le dessin d’origine. Les calques peuvent être organisés par dossiers.

13 Les images InterfaceAnimerDessinerPublier C’est une image singulière sur laquelle le travail s'effectue. Elle correspond souvent à un changement d'état et est représentée par un point sur le scénario. Les images sont identiques à l'image clé précédente la plus proche, ou bien calculées automatiquement lors d'interpolations. Image clé Dans le scénario, vous travaillez avec des images et des images-clés.Image Ce sont les éléments d’une animation

14 Insérer une image Pour une image clé Cliquer sur l’image 10, par exemple, et faire, au choix : bouton droit > Insérer une image clé F6 Ou encore aller dans le menu insertion >image clé. InterfaceAnimerDessinerPublier Ajouter une image clé et des images dans un calque Pour une image Cliquer sur l’image 20 d’un calque et faire, au choix : bouton droit > Insérer une image F5 Menu insertion >image.

15 Animation image par image Sélectionner l’image 1 du calque, dessiner ensuite un objet dans la scène, par exemple le plus à gauche possible. Aller ensuite dans insertion>image clé (F6). Faire un petit déplacement de l’objet, par exemple vers la droite, et aller dans insertion>image clé (F6). Rééditer la manipulation jusqu’à arriver vers l’autre bout (une dizaine d’image), retourner à l’image 1 et appuyer sur entrée. InterfaceAnimerDessinerPublier

16 Interpolations InterfaceAnimerDessinerPublier Les interpolations de mouvement interposé : Sélectionner l’image 1 du calque, dessiner ensuite un objet dans la scène, par exemple le plus à gauche possible. Aller par exemple à l’image 20, cliquer sur insertion>créé une interpolation de mouvement, et déplacer l’objet.

17 Interpolations Les interpolations de mouvement avec guide : Mettre dans le calque 20 images et retourner à l’image 1. Dessiner un objet, un rond par exemple. Sélectionner le calque et choisissez Insertion>Guide de mouvement. Cliquer ensuite sur l’image 1 du guide. Prendre l’outil crayon et tracer un trajet. Cliquer ensuite sur l’image 1 du calque et prenez l’outil flèche. Aller sur la scène, sélectionner le rond et déplacer le sur le début du trajet (un petit cercle noir au milieu doit se mettre en gras). Choisir ensuite Insertion>Crée une interpolation de mouvement. Sélectionner l’image 20 et mettre une image clé. Déplacer ensuite le rond vers l’autre extrémité du trajet. InterfaceAnimerDessinerPublier *

18 Interpolations Les interpolations de forme : Les interpolations de forme : Créer par exemple 20 images dans le calque et retourner à l’image 1. Dessiner un objet, un rond et retourner à l’image 20. Insérer une image clé. Effacer le rond et mettre un carré (par exemple). Cliquer ensuite sur une image entre le 1 et le 20 et dans la fenêtre propriétés, choisir dans le menu interpolation « forme ». ! ATTENTION ! Les interpolations de forme ne sont pas possibles sur les symboles ou les dessins groupés. InterfaceAnimerDessinerPublier *

19 Paramètres de publication PublierDessinerAnimerInterface Fichier > paramètres de publication …

20 Formats de publication PublierDessinerAnimerInterface Flash (.swf) : c'est le format d'exportation le plus courant, ce type de fichier est directement utilisable dans une fenêtre d'explorateur Internet. L'animation correspond exactement à celle que vous avez créée. HTML (.html) : Flash créée lui même une page html vierge contenant uniquement le.swf. GIF (.gif) : ce format est très répandu sur internet. Vous pouvez créer des gif animés mais vous perdez totalement l'interactivité, et le résultat est parfois décevant. A n'utiliser qu'en toute connaissance de cause. JPEG (.jpg) : exporte en image, il n'y aura donc plus d'animation. PNG (.png) : idem que JPEG mais pour le format PNG. Projection Windows (.exe) : l'exportation sera très lourde (plusieurs Mo) mais l'avantage est que cela fonctionnera sur n'importe quelle machine car le logiciel pour visualiser est inclus. C'est une sorte de SWF avec visualisateur intégré. Projection Macintosh (.hqx) : comme le précédent mais pour Macintosh... Quick Time (.mov) : l'animation est transformée en film, vous perdez donc totalement l'interactivité.

21 Exporter votre animationAperçu Fichier > Aperçu avant publication > Flash, HTML, … Exporter une animation Enregistrer votre animation. Fichier > Publier Insertion dans Dreamweaver PublierDessinerAnimerInterface

22 Des questions ? Merci de votre attention !