COM3562 Communication Multimédia - Dufresne, Aude, Département de Communication, Montréal, Qc, Canada

Transcription

1 Production file:///titan3/cassiopaepetit/site/bta/flashmx2004/page0flash.html Notes de cours à imprimer Notes sur le vidéo à imprimer COM3562 Communication Multimédia - Dufresne, Aude, Département de Communication, Montréal, Qc, Canada 1 sur 1 07/01/07 11:53 1/34

2 Untitled Document 15/02/06 11:23 Présentation de l'application Flash Flash est un logiciel qui sert à créer des animations adaptées aux caractéristiques d'internet. Ces animations sont faites de dessins vectoriels, donc elles demeurent très petites (nombre de K) et sont rapides à transmettre sur la Web. Flash permet aussi d'insérer des images bitmaps, des sons, des vidéos et de définir des interactions plus complexes. Le logiciel Flash est ainsi un outil puissant permettant de créer facilement des interfaces de haut niveau au plan de l'interaction et de l''esthétique. Flash est une application qui construit l'animation écran par écran, mais sa force est qu'il permet d'interpoler des mouvements dans le temps. Flash permet également de créer des hyperliens entre les éléments pour permettre la navigation sur Internet. Son langage ActionScript, permet de concevoir des effets d'interactivité spectaculaires et professionnels dans un scénario linéaire. Plusieurs designers d'interface préconisent maintenant l'utilisation de Flash dans leurs sites Web, pour leurs présentations, la publicité, les vidéos, etc... Pour avoir une meilleure vue d'ensemble et pour avoir de l'aide supplémentaire, n'hésitez pas à visiter le site de Macromedia Flash Vous pouvez y retrouver de la documentation en français sur Flash, des notes techniques, des exemples, des téléchargements et des dictionnaires ActionScript. Interface Lorsque vous ouvrez Flash, vous découvrez une fenêtre comme celle-ci. Nous vous présentons ces principales zones de travail. La scène désigne le plan de travail. La zone grise n'apparaît pas dans le film final, mais elle permet de travailler et de disposer les objets (symboles, graphiques ou boutons) pour une animation. Essayez les différents icônes des 2/34 Page 1 of 3

3 Untitled Document 15/02/06 11:23 barres d'outils pour découvrir leurs fonctions, qui sont d'ailleurs similaires aux autres logiciels MSWindows ou MacOS, pour ce qui est de la gérance des dossiers. Les différents icônes des barres d'outils sont similaires aussi aux logiciels de dessins Bitmap ou vectoriels, comme Photoshop ou Illustrator, dans le cas des outils de sélection et de dessin. Attention dans Flash les formes sont composées d'un contour et d'un fond. Pour sélectionner les deux il faut double-cliquer. Vous pourrez ajuster les propriétés de base de votre animation en faisant la commande Modification/Document ou Cmd ou Ctrl + J, vous pourrez ajuster la cadence de l'animation en images par secondes (fps - frame per second), sa dimension, l'espace et la couleur de l'arrière-plan (background) et l'unité de mesure pour les règles. Fenêtres Vous avez accès à toutes les fenêtres par le menu Fenêtre. Les barres d'outils et les panneaux de contrôle sont flottants, vous pouvez les déplacer comme bon vous le semble. Explorez les différents menus et les différents panneaux qui peuvent s'ouvrir du menu Fenêtre. Les prochaines parties décrivent les principales fonctionnalités de ces barres d'outils et fenêtres. Les raccourcis sont indiqués au survol des options ou au bout des choix dans le menu du haut. Créer des couleurs, des gradients.. Ouvrir Fenêtre / Panneaux de conception graphique / Nuancier Sélectionner un gradient, dupliquer (menu en haut à droite) Sélectionner la nouvelle couleur créée 3/34 Page 2 of 3

4 Untitled Document 15/02/06 11:23 Ouvrir Fenêtre / Panneaux de conception graphique / Mélangeur Modifier les couleurs des extrémités ajouter au besoin des étapes en cliquant dans le continuum Essayer votre nouvelle couleur, pour créer une balle un bouton. Essayez le dessin vectoriel 4/34 Page 3 of 3

5 Symboles et importations 15/02/06 11:23 Les symboles Les différents élements que l'on intègre dans une animation Flash peuvent ëtre définis comme des symboles, si on veut les animer ou les réutiliser. Un symbole peut donc servir pour: faire des animations insérer des actions interactives dans les images,créer des boutons, ou lorsque vous importez des fichiers extérieurs de photos, de sons, de vidéos; ils deviennent des symboles. Il est parfois plus facile d'utiliser des symboles, de donner des noms à ceux-ci pour s'y retrouver dans la production. Ceci vous permet de vous y retrouver et surtout de "commander" les objets à l'écran. Lorsque vous créez un symbole, vous avez le choix de le définir comme Animation Bouton Graphique Les symboles sont dans la fenêtre Bibliothèque Vous pouvez toujours modifier la définition d'un symbole en utilisant le menu contextuel Modifier avec le bouton droit 5/34 Page 1 of 3

6 Symboles et importations 15/02/06 11:23 Importation Fichiers possibles à importer dans Flash :.eps,.ai,.dxf,.bmp,.emf,.fh,.spl,.gif,.jpg,.png,.swf,.wmf Les types de fichiers d'images par points (bitmaps) qui peuvent être importés dans Flash sont les fichiers de type.psd,.pct,.pic,.qti, mov,.sai,.tga,.tif. Les types de fichiers son suivants aussi :.wav,.aif,.mp3. Transparence des images ou dessins importés Il est important de savoir que pour avoir des images transparentes et non pas rectangulaire, il faut que celles-ci soient enregistrées en Gif ou en PNG. Lorsque vous voulez créer des images transparentes avec Photoshop ou Illustrator, il faut s'assurer que la transparence est déjà bien définie dans le fichier source de l'image. Lorsque que ce dernier est transparent, il apparaît avec les mêmes propriétés sur la scène de Flash. Un conseil, un File/Save for Web dans Photoshop rèlge souvent les problèmes de taille des fichiers sources et on peut y cocher l'option Transparency. Importation des sons 6/34 Page 2 of 3

7 Symboles et importations 15/02/06 11:23 Lorsque vous importez des sons, ajustez leurs propriétés en double cliquant sur eux dans la Bibliothèque et ajustez la compression (mp3 est suggéré pour être lu rapidement sur le Web). Modification d'un QuickTime importé Comment modifier un QuickTime, comme ajouter un titre? 1. Importez un fichier QuickTime (.mov) et ajuster sa durée dans le scénario. 2. Sur un autre calque, indiquez un titre, par exemple, et animez-le selon vos besoins dans le scénario. 3. Exportez le résultat en.mov dans un autre fichier. Liste des fichiers exportables possibles à partir de Flash Vous pouvez enregistrer votre film, s'il ne contient pas d'interaction complexe, en différents types de fichiers, voici la liste disponible dans File/Export Movie ou Image:.swf,. swt,.spl,.avi,.mov,.gif,.wav,.emf,.wmf,.eps,.ai,.dxf,.bmp,.jpg,.png. 7/34 Page 3 of 3

8 15/02/06 10:41 Création d'une animation Cette partie sert à l'application de divers exercices sur la construction d'une petite animation Flash : l'utilisation de ses formes de base, les transformations, le texte, les calques et la gestion de l'animation d'une scène. Pour apprendre à faire des animations vous pouvez consulter l' Aide de Flash : Section Comment Dessiner dans Flash Création des formes de base Exercice 1- Interpolation de mouvement Créez une forme avec un outil de dessin. Cliquez dans le calque où vous avez mis l'image. Allez dans le menu choisissez INsertion/Scénario/Interpolation de Mouvement. Puis placez vous plus loin dans un frame de la fenêtre scénario et allez dans le menu demander Insertion/Scénario/Insérer une image clé. Exercice 2 - Interpolation de forme Créez une étoile avec la plume. Utilisez la flèche blanche pour replacer les pointes de votre flèche Cliquez dans le calque où vous avez mis l'image. Allez dans la fenêtre des propriétés et modifiez le choix pour Interpolation Forme 8/34 Page 1 of 8

9 15/02/06 10:41 Ensuite placez vous plus loin dans un frame de la fenêtre scénario et allez dans le menu demander Insertion/Scénario/Insérer une image clé vide. Sélectionnez la dernière image clé et essinez un carré jaune ou rouge Vous pouvez aussi Vous placer dans le frame de la fin. Aller dans le menu demander Insertion/Scénario/Insérer une image clé L'étoile du début sera collé à la fin de l'animation. Déformez l'image de la fin avec la flèche blanche, une couleur, etc. Visualisez l'animation. Controle / Tester l'animation Exercice 3 animation du pommier - Faites d'abord l'arbre et ses pommes. Choisissez un rectangle pour faire le tronc. Modifiez le en étirant le côté avec la flèche noire. Créez un nouveau calque et dessinez les feuilles en créant un cercle vert et en modifiant avec la flèche blanche (comme dans Illustrator utilisez les points d'ancrage et leurs poignées). Attention pour les pommes, il faut créer un symbole de type graphique donnez lui un nom comme "pomme", créer autant de calques que vous voulez de pommes et y placer une pomme. Flash permet de déformer les lignes, il s'agit de ne rien sélectionner et de mettre son curseur (outil flèche noire) prêt d'une ligne vectorielle et draguer la ligne pour la déformer. Faites tomber les pommes Après avoir mis les pommes dans l'arbre chacune sur un calque différent, nous allons crééer l'animation des pommes qui tombent. Voici le résultat 9/34 Page 2 of 8

10 15/02/06 10:41 Sélectionnez tous les calques. Tous les objets sont sélectionnés dans la scène. Glissez vers la droite en tenant Option (ALT sur PC) enfoncé. Ceci étire votre animation en créant une image clé à la fin Enregistrez une version pour pouvoir retrouver cette version. Placez vous au début d'un calque où il y a une pomme et Choisissez dans le menu Insertionr/ Scénario/Créer une interpolation de mouvement Une flèche apparaît sur le calque signifiant que l'interpolation est créée. Placez-vous à la fin de l'animation en sélectionnant l'image clé à la fin ( ) et déplacez la pomme vers le bas de l'arbre. Testez votre animation avec le menu Control / Tester l'animation. Créez l'animation des autres pommes. 10/34 Page 3 of 8

11 15/02/06 10:41 Vous pouvez insérer des images clés au milieu d'un calque pour changer le début et la fin du mouvement de la pomme. Vous créez alors l'animation entre deux nouvelles images clés. Masquager. Nous allons apprendre comment créer un masque, c'est à dire une zone qui sert de masque pour faire apparaître un objet ou une animation. Exercice 4 - Faites un masque pour la photo du Lac. Enregistrez la photo du lac avec le bouton de droit de la souris Vous créez ensuite un document Flash, où vous importez l'image du Lac comme un symbole dans la bibliothèque. Créez un calque où vous mettez un ovale. Placez la photo sur un calque que vous nommez Photo Puis créez un calque que vous nommez Masque, dessinez un ovale dans ce calque Ajustez-le sur la photo en utilisant l'outil de déformation Sélectionnez le calque du 11/34 Page 4 of 8

12 15/02/06 10:41 Masque et avec le bouton droit définissez le comme un masque. Testez l'animation et vous verrez le masque apparaître.. Nous allons créer un nouveau calque que nous utiliserons comme masque. Celui-ci déterminera l'espace de défilement du texte. Seul le remplissage est pris en compte lors ce cette opération. Nous vous suggérons d'explorer l'aide Bases de Flash/Utiliser les calques et Ajouter du texte statique, de saisie ou dynamique, qui explique comment on peut utiliser un calque servant de masque pour animer du texte comme dans un générique. Exercice 6 - Créez votre texte puis un nouveau calque, et enfin un rectangle, pour définir votre espace de défilement. 12/34 Page 5 of 8

13 15/02/06 10:41 Sélectionnez le calque, puis avec votre bouton droit (ou Control sur Mac) choississez Masque. Voyez les icônes se transformer pour indiquer le masque créé et le texte sur la scène qui est caché par le rectangle. Le texte apparaît dans le rectangle du Masque. 13/34 Page 6 of 8

14 15/02/06 10:41 Exemple de Masque (ici on mis un fond beige au document d'animation Flash) Traçage d'un guide de mouvement Nous allons faire un exercice pour tracer un guide de mouvement appliqué à un objet dans une couche de l'animation. Vous devez bien comprendre l'animation. Exercice 4 du guide - Créez une balle qui rebondit. Créez un symbole et dans ce symbole placez sur un calque une forme de base ronde (sphère), avec un effet de dégradé comme remplissage dans un symbole graphique. Sur un autre calque du symbole, faîtes un rond pouvant représenter l'ombre de la boule et placez-là en dessous de la première. Placez votre boule dans le scénario. Créez une interpolation de mouvement (Menu Insertion/Scénario/Interpolation de mouvement). Créez un nouveau calque par dessus la boule, dessinez avec la plume la trajectoire de la boule. Avec le bouton droit vous transformez le calque en guide.(le calque de la boule doit se trouver exactement en dessous du guide). Cliquez dans le premier frame du calque de la boule, déplacez la au début de la trajectoire. Un petit rond apparaît lorsque la boule se place sur le guide. Cliquez dans le dernier frame du calque de la boule, déplacez la à la fin de la trajectoire. 14/34 Page 7 of 8

15 15/02/06 10:41 Vous pouvez ajuster les mouvements en créant des images clés où il vous semble que le mouvement n'est pas fluide et vous pouvez l'ajuster /34 Page 8 of 8

16 Untitled Document 15/02/06 11:24 Créer des boutons animés ( Rollover) Pour créer des boutons on peut utiliser un dessin ou tracer une forme simple. Mais Flash est particulièrement intéressant, parce qu'il permet de faire des boutons ayant un aspect 3D. Nous verrons comment dessiner un bouton oval avec un effet 3D en Flash 5. Puis nous verrons comment utiliser les transformations pour créer les différents états du bouton, soit Créer un bouton Pour créer votre bouton Insérez un symbole de type Bouton. Une fenêtre symbole s'ouvre qui vous montre les quatres états de votre bouton. Vous devez ensuite dessiner votre bouton dans la fenêtre symbole. Pour créer un effet 3D on utilise une forme avec un radial. Créer les états du bouton Les quatre états du bouton sont: Haut Dessus Abaissé Cliquable Tel qu'il apparaît dans la page Image apparaissant lorsque la souris passe sur le bouton; on peut aussi ajouter un texte ici. Image apparaissant lorsque l'usager clique avec la souris. Image correspondant à la zone sensible au clic (Peu importe la couleur, cette zone ne sera pas visible). Vous pouvez dessiner votre bouton, dans la fenêtre symbole, en utilisant une forme simple comme un rond. Si vous utilisez une couleur de remplissage sous forme de gradient vous pourrez créer un effet 3D. Vous créez ensuite chaque état du bouton. Sélectionnez l'état suivant et Insérez une nouvelle image clé. 16/34 Page 1 of 4

17 Untitled Document 15/02/06 11:24 L'image précédente du bouton a été recopiée dans l'état mais vous pouvez la modifier: Changer la couleur, ajouter un texte qui appraîtra au survol. L'image du bouton cliquable peut avoir n'importe quelle couleur, elle doit recouvrir tout le bouton et le texte, car l'usager peut cliquer sur l'un ou l'autre. Ici on a fait une forme cliquable carrée. Utiliser le bouton en le plaçant sur la scène Les symboles sont dans la bibliothèque, il faut les placer sur la scène pour les utiliser. Sélectionnez la séquence où vous voulez placer votre bouton (en haut à gauche) de la fenêtre du projet. Sélectionnez y votre nouveau bouton et glissez le sur la scène. Vous pouvez toujours accéder à la définition de votre bouton en double cliquant sur le bouton dans la fenêtre bibliothèque ou sur la scène et modifier le symbole. 17/34 Page 2 of 4

18 Untitled Document 15/02/06 11:24 Sélectionnez le sur la scène et donnez un nom à l'occurence. Ceci vous servira pour créer les associées à cette occurence. Par exemple actions on peut placer le même bouton trois fois sur la scène: donner trois noms différents aux occurences: associer différents liens à chacune des occurences du bouton Lorsque le bouton est sur la scène on peut l'éditer en en cliquant sur l'objet lui-même à l'aide du menu contextuel et en choississant Modifier en place, de cette façon, nous pouvons voir le bouton en place dans l'interface. Important! Lorsqu'on modifie un symbole toute les occurences de ce symbole sont modifiées Ajouter un comportement au bouton POur ajouter un comportement on peut utiliser la fenêtre Comportements. On sélectionne le bouton sur la scène. On Affiche Menu Fenêtres/Panneaux de développement/comportements On sélectionne un comportement qui sera associé au bouton. 18/34 Page 3 of 4

19 Untitled Document 15/02/06 11:24 Important! Assurez-vous que bouton est sélectionné dans la fenêtre des Comportements. Ici le bouton sélectionné est Bouton1_btn Par exemple on choisit d' atteindre une image (trame) ou une étiquette (Nom donné à cette image dans la fenêtre des propriétés) et de jouer à partir de là. On spécifie ensuite quelle image (trame) ou quelle étiquette il faut atteindre. Par exemple ici il faut atteindre l'étiquette 'etiquette1'. Visualiser le bouton Pour visualiser les boutons on peut cliquer la cliquer la flèche de prévisualisation dans la fenêtre Librairie On peut placer le bouton sur la scène et demander à visualiser la séquence ou l'animation. Pour tester les Actions c'est la seule façon. Les boutons sont gérés souvent dans une même calque ( Layer) étant donné qu'ils ne se superposent pas normalement. 19/34 Page 4 of 4

20 Untitled Document 15/02/06 11:24 Introduction Insérez le symbole du bouton que vous avez créé sur la scène. Vous pouvez l'insérer le même bouton plusieurs fois et définir pour chaque bouton une interaction différente. Pour créer l'interaction dans les boutons, il faut associer une action au bouton (object). Il faut aussi associer un arrêt au niveau de l'animation (frame) pour que le film s'arrête pour laisser l'usager cliquer Définir l'action du bouton Sélectionnez le bouton sur la scène Sélectionnez Actions dans le menu contextuel (avec le bouton droit IBM ou control clic sur Mac) choisissez dans la fenêtre Actions une action comme Goto pour aller à un moment (frame) particulier et fixez les paramêtres. Définir l'action d'arrêt de l'animation Sélectionnez sur la scène, dans la couche des boutons, le keyframe où appraissent les boutons (ici on choisit le premier keyframe et tous les boutons apparaissent sélectionnés) Sélectionnez Actions dans le menu contextuel (avec le bouton droit IBM ou control clic sur Mac- la fenêtre Actions apparaît Sélectionnez Stop dans les actions. 20/34 Page 1 of 2

21 Untitled Document 15/02/06 11:24 Pour visualiser l'animation d'un bouton dans la scène, il s'agit de faire les touches Ctrl + Alt + B ou d'utilisler le Ctrl + Enter (pour tester l'animation). Les boutons sont gérés souvent dans une même calque ( Layer) étant donné qu'ils ne se superposent pas normalement. 21/34 Page 2 of 2

22 15/02/06 11:00 Hiérarchie des animations, séquences, symboles Les séquences permettent de créer des sous-parties dans votre animation Flash. Le tableau suivant présente la hiéarchie des structures d'une animation Flash et comment il faut faire pour visualiser ou modifier chaque niveau de l'animation Flash. Il faut bien comprendre les niveaux Prenez le temps de les étudier. Séquences multiples Vous pouvez insérer des séquences différentes pour mieux contrôler l'animation sur chacune. Insérer une nouvelle séquence Menu Insérer / Séquence Afficher les séquences Utiliser le menu apparaissant en haut de la fenêtre à droite Ouvrir Menu Fenêtre / Panneaux de conception graphique / Séquence Vous pouvez Renommer les séquences Dupliquer une séquence Réordonner les séquences Visualiser une séquence Par défaut Tester l animation présente chaque séquence dans l ordre Utilisez Tester la séquence pour voir seulement le déroulement de la séquence affichée Les actions permettront de contrôler le déroulement d une séquence à l autre. Contôle des séquences avec des actions Arrêter le défilement Pour chaque séquence, il faut ajouter l action Stop dans le scénario pour arrêter le défilement après une animation. Insérez un calque - Nommez le Actions Insérez dans le calque Actions une image clé vis-à-vis la fin de l animation (dernière image) Affichez - Menu Fenêtre/Panneau de développement/actions Sélectionnez la trame (Frame) dans le calque Actions Écrivez dans le Panneau Actions stop(); 22/34 Page 1 of 3

23 15/02/06 11:00 Repartir le défilement Il faut ensuite ajouter l'action Play dans un bouton pour repartir le défilement Insérez un symbole de type bouton, il apparaît dans la bibliothèque. Dans la première séquence ajoutez un calque, nommez le Boutons Glissez sur ce calque le bouton, il doit apparaître sur toute la scène Sélectionnez le bouton sur la scène Dans la fenêtre des propriétés donnez un nom à l occurence du bouton Avec le bouton sélectionné (vérifiez l'onglet dans la fenêtre Actions) Écrivez dans le Panneau Actions (spécifiez à quelle image ou quelle séquence continuer) Séquences multiples Ici le symbole bouton_btn Placé sur la scène est devenu une instance de bouton qu on a nommé Bouton1_btn Le bouton sélectionné sur la scène on écrit dans la fenêtre action le petit programme suivant. On peut choisir demander de jouer 23/34 Page 2 of 3

24 15/02/06 11:00 Vers un numéro de trame gotoandplay (24) une étiquette une séquence et un numéro de trame dans cette séquence gotoandplay ("etiquette1") gotoandplay ("sequence1", 20) Attention! Si vous utilisez des Actions Il est important de donner aux occurences des symboles (symbole placé sur la scène) des noms qui correspondent à leur type en ajoutant l extension appropriée: Boutons _btn Bouton1_btn Animations (Movie clip) _mc EtoileClignote_mc Texte _txt NomUsager_txt Si les noms des occurences ont la bonne extension, Flash vous aidera à écrire le code des actions (option Afficher les conseils de code) Transformation des objets 24/34 Page 3 of 3

25 Insertion de vidéos dans une animation Flash Vous pouvez importer des videos de type AVI, MP3 ou Quicktime dans une animation Flash. Les vidéos sont comme d'autres dessins ou comme des animations Flash que l'on insère et combine dans un projet Flash. Importez les Vidéos dans la bibliothèque (ne faites pas le choix de laisser le ddocument lié) Sélectionnez un image dans un calque et glissez le vidéo sur la scène. Testez votre vidéo. On utilise les vidéos liés lorsque le vidéo est très gros, ou s'il y en a plusieurs dans une animation, ou si l'animation elle-même est complexe. Exercice 17 - Importez le vidéo de planche à neige et faites une animation Flash qui le montre. Essayez ensuite d'enregistrer un commentaire verbal. Video du saut en planche à neige(zip) ou Fichier Mov (Utilisez le bouton droit sur le lien) Visualiser le vidéo Si le vidéo est inséré dans l'animation Flash on peut utiliser Tester l'animation pour voir le vidéo Si le vidéo a été inséré comme un document lié, il faut Exporter le document en Quicktime pour visualiser le vidéo. Par défaut le vidéo ne joue qu'une fois, cependant s'il y a d'autres couches avec des animations qui se poursuivent, le vidéo recommencera au début. De la même façon si l'animation FLash joue en boucle le vidéo recommencera. Si nécessaire il faut définir une action STOP pour qu'il s'arrête au moment voulu. Création des vidéos avec FinalCut Pro Vous pouvez filmer un vidéo en utilisant une caméra numérique. Le vidéo est ensuite transfèré sur l'ordinateur en utilisant Final Cut Pro: Créez un nouveau projet Utilisez Capture (si le film est dans la caméra) en lancant la caméra comme un magnétoscope. ou Import si vous voulez découper un film existant pour le raccourcir, enle ver la bande sonore, superposer deux films, etc. Faites avancer votre clip avec J, K, L pour avancer et reculer, la barre d'espace pour arrêter et repartir. Définissez le In et le Out de votre Clip envous placant au bon endroit et en cliquant sur I et O 1 sur 4 13/03/06 23:22 25/34

26 Faites ensuite glisser votre film dans le Timeline. Choisissez bien les canaux que vous voulez garder, Débranchez les autres comme ici on a débranché lesd eux canaux audio A1 et A2 pour ne garder que l'image. Faites votre montage sonore dans Final Cut Faites apparaître la ligne de contrôle du son Utilisez ALT pour faire apparaître la plume et pour insérer des points de changement du son. Exportez votre film en Quicktime choisissez si vous voulez seulement le vidéo, le son et le vidéo ou seulement le son. Vérifiez votre film Après avoir fait votre montage, Enregistrez votre projet, ce qui vous permettra de le modifier plus tard. Puis sélectionnez la fenêtre du montage et faites le choix Fichier / Exporter / Using Quicktime Compression Choisissez la compression du vidéo Une façon simple de choisir le VIdéo est de préciser la vitesse de connexion ou la qualité de l'inage désirée en allant dans Options. 2 sur 4 13/03/06 23:22 26/34

27 Selon les choix que vous faites, Final Cut produira un vidéo plus petit de taille, ou avec une définition un peu moins bonne. Faites des essais, mais malheureusement, surtout pour diffusion sur Internet, il faut réduire la taile et la qualité des vidéos. Vous pouvez aussi contrôler plus précisément l'exportation du vidéo. Préciser les formats de compression FinalCut PRo exporte les films en format Quicktime, mais il vous permet de compresser votre vidéo selon différents formats de compression. Exporter selon la conversion Quicktime et cliquez sur le bouton Options En cliquant sur le bouton Options vous pouvez choisir la compression Sorenson qui réduit efficacement la taille des vidéos. Vous pouvez aussi changer la qualité, la fréquence des images par seconde ips. Ajustez aussi la taille du document les filtres 3 sur 4 13/03/06 23:22 27/34

28 la présence de son ou non et enfin le démarrage. Les tailles de vidéos doivent correspondre à la forme originale de l'écran si vous ne voulez pas déformer le vidéo..par exemple le video mesure soit 720 x 480 si on divise la hauteur et la largeur par 2 (ou n'importe quel chiffre) on ne déforme pas le vidéo. Ainsi les formats suivant sont acceptables : 360 X X X X 600 Mais plus la taille est grande plus le vidéo sera long à afficher. 4 sur 4 13/03/06 23:22 28/34

29 Contrôle des vidéos dans une animation Flash Pour contrôler le vidéo on utilise les comportements ou les actions. Importez d'abord votre vidéo dans votre document Flash. Importez dans la bibliothèque et pour commencer faite le choix d'intégrer le vidéo directement dans l'animation. Placez-vous dans un calque vide et glissez votre vidéo sur la scène. Par défaut le vidéo jouera automatiquement et s'étalera dans l'animation en prenant un nombre suffisant d'images. Vous pouvez ensuite ajouter des comportements pour contrôler le vidéo: Ajoutez un calque Insérer le video dans la scène et donnez lui un nom dans la fenêtre des propriétés. Attention vérifiez que vous donnez le nom à la vidéo intégrée. Insérez des boutons pour contrôler le défilement - arrêt, défilement, recul, etc Donnez des noms faciles à reconnaître. (Dans l'exemple les boutons existent déjà) Assurez vous que les boutons restent sur la scène tant que le vidéo dure..sélectionnez le calque des boutons et du fond. 1 sur 2 13/03/06 23:21 29/34

30 Utilisez F5 pour allonger la zone d'apparition des boutons. Sélectionnez un bouton sur la scène Associez un comportement de vidéo Mettez une action au début pour arrêter le vidéo sur la première image clé. 2 sur 2 13/03/06 23:21 30/34

31 file:///titan3/cassiopaepetit/site/bta/flashmx2004/11-pagepublie... Publier une application Flash Lorsque votre application Flash est terminée ou mieux avant pour tester, vous pouvez la Publier votre animation Flash de diverses façons :.fla.swf Enregistrement de votre document principal Flash. Celui que vous pouvez modifier. Publication de votre animation dans un document shockwave qui sera affiché dans une page web Page web avec un lien pour pouvoir afficher l"animation.swf.htm.html Vous n'avez pas à utiliser cette page, si vous voulez insérer votre Flash dans une page existante, un cadre par exemple, Utilisez alors Insérer Shockwave dans Dreamweaver..jpg.gif.png.exe Formats d'images divers qui peuvent être utilisés pour afficher durant le chargement d'un film plus long ou si le Player Flash n'est pas installé. Créer un projecteur ou fichier exécutable qui pourra être joué sans Navigateur Web. Vous avez le choix de créer un exécutable pour PC ou pour Mac, La commande Publier crée, en fonction des options spécifiées dans la boîte de dialogue Paramètres de publication, les fichiers suivants : Fichier Flash SWF Des images de remplacement dans divers formats (GIF, JPEG, PNG et QuickTime), qui s'affichent automatiquement si Flash Player n'est pas disponible. Les documents HTML nécessaires à l'affichage du contenu d'un fichier SWF (ou d'une image de remplacement) dans un navigateur et les paramètres de contrôle du navigateur. Trois fichiers HTML (si vous gardez la valeur par défaut, Détecter la version de Flash, sélectionnée) : le fichier de détection, le fichier de contenu et le fichier secondaire. Les fichiers de projections autonomes pour les systèmes Windows et Macintosh et les vidéos QuickTime des animations Flash (fichiers *.exe, *.hqx ou *.mov, respectivement). Remarque : Pour modifier ou mettre à jour un fichier SWF créé à l'aide de la commande Publier, vous devez modifier le document Flash d'origine, puis de nouveau utiliser la commande Publier pour conserver les informations de création. L'importation d'un fichier SWF dans Flash élimine certaines informations de création. Pour plus d'informations sur les paramètres de publication, consultez Configuration des paramètres de publication pour la détection de Flash Player. Pour plus d'informations, consultez Définition de 1 sur 4 07/01/07 12:20 31/34

32 file:///titan3/cassiopaepetit/site/bta/flashmx2004/11-pagepublie... paramètres de publication en vue de créer des documents HTML dotés d'une animation Flash intégrée. Trucs pour optimiser Lorsque vous voulez publier une animation, il est important d'optimiser l'affichage. Voici quelques trucs qui peuvent vous aider : Simplifiez votre oeuvre 1 Utilisez des symboles et même des symboles dans des symboles 2 Groupez les objets 3 Evitez les bitmaps 4 Optimisez les courges (Modification/Forme/Optimiser) 5 Utilisez des linges pleines plutôt que continues 6 Utilisez le crayon plutôt que le pinceau 7 Utilisez la palette compatible WEB (256 couleurs) 8 Utilisez des couleurs unies plutôt que dégradées Optimisez le texte 1 Réduire le nombre de polices (gras, italique) 2 Pour l'entrée de texte limitez les options (nombre de caractères, sans contours. Utilisez les bibliothèques partagées Optimisez lesanimations 1 Utilisez des interpolations 2 Ne placez pas les objets fixes sur les mêmes calques que les objets animés. Compressez le son 1 2 Ajustez les points d'entrée et de sortie pour éviter de stocker des zones silencieuses dans votre.swf Réutilisez les sons en modifiant simplement les points d'entrée et de sortie et en bouclant différentes parties d'un même son. 3 Ne bouclez pas le son en continu, Tester vos animation Pour tester l'efficacité qu'auront vos animations sur Internet, vous devez d'abord lancer l'animation. Allez dans le menu Control/Tester l'animation. Pendant que l'animation est affichée, allez dans le menu Affichage/Paramêtres de téléchargement et modifiez les paramètres. Allez ensuite dans le menu Affichage/Simuler le téléchargement pour voir comment est affectée l'animation, 2 sur 4 07/01/07 12:20 32/34

33 file:///titan3/cassiopaepetit/site/bta/flashmx2004/11-pagepublie... Vous pouvez aussi aller dans le menu Affichage/Testeur de bandes passante. Ceci vous permet de vérifier les sections de votre animation, qui sont trop lentes au téléchargement, soit celles qui sont sous la barre rouge. Exemple de test de bande passante Fichier source.fla pour vérifier les changements de paramères Exporter des images Vous pouvez cliquer à un moment de l'animation et exporter une image donnée. Utilisez Exporter Image et faites le choix du type d'image à exporter. 3 sur 4 07/01/07 12:20 33/34

34 file:///titan3/cassiopaepetit/site/bta/flashmx2004/11-pagepublie... 4 sur 4 07/01/07 12:20 34/34