Mme. Laila KJIRI Mossaab BAGDOURI Abdelilah CHAOUI Projet de
Transcription
Mme. Laila KJIRI Mossaab BAGDOURI Abdelilah CHAOUI Projet de
Projet de Fin d'Année 2004/2005 1ère année Rapport du PFA Encadré par : Mme. Laila KJIRI Réalisé par : Mossaab BAGDOURI Abdelilah CHAOUI Remerciements Nous tenons sincèrement à remercier tous les professeurs de l’ ENSIAS et particulièrement Mme. Kjiri et tout ceux qui nous on aidé pendant la réalisation de notre projet de fin d'année, pour les efforts qu’ils ont fournis afin de perfectionner notre formation et enrichir nos connaissances. Nous souhaitons que ce travail soit à la hauteur du niveau estimé. En fin, veuillez accepter, mesdames et messieurs les membres du jury, toutes nos reconnaissances. BAGDOURI Mossaab CHAOUI Abdelilah ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 2 Liste des figures Figure 1 (a,b) : Interfaces de Director et de Flash. Figure 2 : 1ère image à animer. Figure 3 (a,b) : Les données qui coulent. Figure 4 (a,b) : La main qui tourne Figure 5 : Le script qui fait tourner la main 5 fois. Figure 6 : Le traçage du graphe. Figure 7 (a,b) : L'insertion du tableau de bord. Liste des tableaux Tableau 1 : Différents outils multimédia. Tableau 2 : Comparaison entre Flash et Director. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 3 Table des matières Remerciements 2 Liste des figures 3 Liste des tableaux 3 Table des matières 4 Introduction 5 Chapitre 1 Etat de l’art des outils 6 1.1. Outils multimédias 6 1.2. Analyse et synthèse 10 Chapitre 2 : Comparaison Flash / Director 11 2.1. Présentation 11 2.2. Différences entre Flash et Director 12 Chapitre 3 : Réalisation d'animations avec Flash 18 3.1. Première animation 18 3.2. Deuxième animation 18 Conclusion 18 Bibliographie 18 ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 4 Introduction Dans un monde où les médias ont bouleversé les mesures de force et de puissance, il nous semble opportun d'étudier les outils audio-visuels afin de pouvoir, au moins, poursuivre leur développement. Ainsi, dans le cadre des Projets de Fin d'Année en première année ENSIAS, il nous est demandé d'étudier les avantages de la multimédiatisation des cours pour l'enseignement à distance. Durant une petite navigation sur le web, nous avons découvert que le marché des logiciels qui permettent de créer et monter les animations est largement vaste. Citons, comme titres d'exemples des logiciels de création des animations 3D, d'autres qui permettent de monter des épisodes vidéos, ainsi que des plateformes qui servent à créer des animations voire programmer des jeux complets. Nous avons opté pour l'analyse de ces deux derniers logiciels inventés, les deux, par Macromedia. Ce choix a été fait principalement grâce à leur grande expansion et réputation chez les personnes intéressées par le monde du multimédia. Enfin nous avons essayé, à l'aide de Flash, d'animer des schémas d'un cours de la troisième année, ce qui traduit quelques possibilités offertes par ce logiciel puissant. Le présent rapport comporte 3 chapitres. Dans le chapitre I, nous allons présenter l'état de l'art des outils multimédias. Ensuite, dans le chapitre II, nous allons faire une comparaison entre deux outils : Flash et Director. Enfin, nous allons réaliser, dans le chapitre III, quelques animations qui illustrent un cours à distance. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 5 Chapitre I : Etat de l’art des outils Dans ce chapitre, nous allons présenter l'état de l'art des outils multimédia, afin d'avoir une vue globale sur les principaux logiciels qui existent sur le marché. 1.1. Outils multimédias Parmi les outils audio-visuels existant sur le marché, nous avons cité, dans un tableau [site 1], un ensemble des plus fameux logiciels, accompagnés du logo, de l’éditeur, de la catégorie et d'un petit commentaire qui décrit le champ d'intérêt de chaque logiciel. Logo Nom du logiciel Catégorie Commentaires 3D Studio Max Discreet 3D Animation et modélisation AfterEffects Adobe 3D Effets visuels Amapi Eovia 3D Archicad Audodesk 3D Authorwave Macromedia Autocad Autodesk 3D Blender Blender 3D Bodypaint Maxon 3D Bryce Corel 3D Cinema4D Maxon 3D ENSIAS 2005 Editeur Web Animation et modélisation Modélisation architecturale Intégration audio et vidéo Modélisation Modélisation et animation 3D Bodypainting et textures Modélisation et animation Modélisation et environnement 3D PFA : La Multimédiatisation des cours à distance 6 Logo Nom du logiciel Editeur Catégorie Commentaires Création 3D Carrara Eovia 3D Cinepaint Sourceforge 2D Coldfusion Macromedia Web Combustion Discreet Commotion Cool3D Corel Draw 2D/3D Pinacle Systems Unlead Systems Retouche image par image (gratuit) Intégration html et langage serveur Compositing 2D, 3D, tracker 2d... Vidéo Retouche Vidéo 3D Création 3D Réalisation vectorielle conception sur CD Macromedia Multimedia ou jeux création pages Macromedia Web HTML Réalisation Macromedia 2D/Web d'animation Optimisation et Macromedia 2D/Web exportation de graphismes Corel 2D Freehands Macromedia 2D Frontpage Microsoft Gimp (the) Gimp 2D Golive Adobe Web Homesite Macromedia Web Conception web Illustrator Adobe 2D Graphisme vectoriel Image Forge Cursorarts 2D Edition Retouche d'images (gratuit) Director Dreamweaver Flash Fireworks ENSIAS 2005 Web Graphique vectoriel Création pages HTML Manipulation et retouche d'images (gratuit) Création pages HTML PFA : La Multimédiatisation des cours à distance 7 Logo Nom du logiciel Editeur Catégorie Commentaires Image Ready Adobe 2D/Web Optimisation et exportation graphiques Indesign Adobe Print Mise en page Inspire 3D Newtek 3D Lightwave 3D Newtek 3D Live motion Adobe 2D/web Maya Alias Wavefront 3D MotionBuilder Kaydara 3D Painter 2D Corel Animation et modelisation Animation et modelisation Animation web Animation et modelisation Animation de personnages cinéma & télé Imagerie et retouche photo Paint Shop Pro Jasc 2D Graphisme Photopaint Corel 2D Graphisme Photoshop Adobe 2D PhotoStudio Arcsoft 2D Pinnacle Pinacle Systems Pixia Soldier 2D Plasma Discreet 3D/web Poser Curious Labs Premiere Adobe ENSIAS 2005 Vidéo 3D Vidéo Edition et retouche photo Imagerie et retouche photo (gratuit) Montage vidéo et création DVD Edition Retouche d'images (gratuit) Création 3D pour le web Posture et animation de personnages Montage et effets vidéo PFA : La Multimédiatisation des cours à distance 8 Logo Nom du logiciel Editeur Catégorie Commentaires Project Dogwaffle ImageMagick Studio 2D Imagerie et retouche (gratuit) Rhinoceros 3D Rhino3d 3D Modélisation Softimage 3D Modélisation et animation XSI Strata 3D Rich Media 3D Animation et modélisation 3d (gratuit) Terragen Planetside 3D Environnement 3D (gratuit) Toon Boom Studio Toon Boom Animation pour le Multimedia Technologies web TrueSpace Caligari 3D Modélisation Ultimate FX/Paint Megalux 2D Edition et retouche d'image (gratuit) Ultradev Macromedia web HTML & langage serveur (voir Dreamweaver Mx) Vicman's Photo Editor Vicman's Software 2D Edition et retouche d'image (gratuit) Vue d'esprit E-on Software 3D Modélisation de paysage et ambiance Xpress Quark Print Mise en pages Zbrush Pixologic 2D/3D Peinture et sculpture ZonerDraw Zoner 2D Edition et retouche d'images (gratuit) Tableau 1 : Différents outils multimédias. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 9 1.2. Analyse et synthèse Après une comparaison entre les options et les qualités des logiciels de création d’animation, nous avons pu extraire que les principales différences persistent dans les points suivants : Les méthodes de conversion. Les différences et les compromis coût/temps/espace/bande passante. Utilisation des technologies de type bitmap et vectoriel pour la manipulation. La création ou le traitement d'images numérisées ou de synthèse. Techniques de montage utilisant les couches multiples. Concepts de transparence et d’animation de base. Les différents formats de fichiers. Les techniques de compression et les choix des codecs. Les technologies de supports magnétiques et optiques. La méthodologie d’intégration multimédia et développement d’une application multimédia locale. Parmi tous ces outils multimédias, Flash [site 2] et Director [site 2] semblent être les logiciels les plus performants qui nous aideront à réaliser notre objectif. Dans le chapitre suivant, nous allons étudier ces deux outils afin de choisir celui le plus pertinent. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 10 Chapitre 2 : Comparaison Flash / Director Dans ce chapitre, nous essayerons d'analyser les plus importantes différences entre Flash et Director, dans le but de choisir celui qui nous sera le plus utile. 2.1. Présentation Les concepts de base de Flash et de Director sont très semblables : ces deux applications permettent de créer des animations linéaires et interactives organisées autour d'images lues en fonction d'événements définis. Le processus de création des animations est le même : vous créez un fichier, définissez les propriétés de la scène, créez et importez les graphiques et autres éléments de l'animation, disposez ces éléments sur la scène et dans le scénario, ajoutez des scripts pour l'interactivité et la navigation et publiez votre animation. Premier contact : Figure 1 (a,b) : Interfaces de Director et de Flash. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 11 Une première utilisation ou bien une comparaison non approfondie entre Flash et Director nous donne une appréciation qu’il n’y a, ou presque, aucune différence entre ces deux logiciels alors que le premier coûte 300 $ et le deuxième 1300 $. Alors, de quoi s'agit-il dans cette différence ? Un peu d’histoire : Retournons un petit peu à l'historique. Certains affirment que le Multimédia est une invention de Macromedia [site 2]. En faite, au début des années 90, cette grande société lance son programme de création des animations Director. Il permet même de programmer des jeux afin de les publier sur des disquettes (plus tard sur des CD, puis sur des DVD). Cependant, juste après le début de l'expansion de l'Internet, la contrainte du bas débit s'impose. Alors Macromedia a inventé Flash pour répondre aux nouveaux besoins et contraintes des "animateurs". 2.2. Différences entre Flash et Director Bien qu'il existe de nombreux parallèles entre Flash et Director, on doit connaître quelques différences d'importance avant de commencer de créer une application grâce à l’un des deux. Voici quelques points de différences de concepts entre Flash et Director : Dans Flash, on manipule des images vectorielles, il s'agit de générer un code qui engendre l'image souhaitée. En effet, Flash utilise des équations mathématiques pour tracer les dessins. Par conséquence, vous pouvez zoomer l'image sans perdre sa qualité. Par contre, Director traite les images bitmaps (comme les images GIF et JPEG). ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 12 Les animations Director ne contiennent qu'un seul scénario, les différents éléments d'une animation Director ne possédant pas leur propre scénario. Les éléments des animations Flash pouvant posséder leur propre scénario, la hiérarchie d'une animation Flash est en fait une arborescence, alors que celle de Director est linéaire. Alors que les calques de Flash peuvent contenir plusieurs objets, les pistes de Director ne peuvent contenir qu'une seule imageobjet. Bien que vous puissiez changer l'image-objet présente dans la piste, deux images-objets ne peuvent pas s'y trouver en même temps. Les pistes de Director, comme les calques de Flash, déterminent l'ordre d'empilement des objets sur la scène - un ordre inverse dans Director, les images-objets figurant dans les pistes aux numéros plus élevés apparaissant devant celles placées dans des pistes aux numéros inférieurs. Chaque élément d'une animation Director, tel que les graphiques créés sur la scène ou dans une des fenêtres, est un acteur apparaissant automatiquement dans la fenêtre Distribution. Vous n'aurez pas besoin de convertir les éléments de Director en acteurs pour les faire apparaître dans la fenêtre Distribution, comme vous convertissez les éléments Flash en symboles. A la différence des symboles dans Flash, les acteurs Director ne peuvent pas contenir d'autres acteurs et ne possèdent pas leur propre scénario. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 13 Dans Flash, les scripts sont associés aux objets sont placés dans le calque des actions. Dans Director, les scripts sont des acteurs qui peuvent être réutilisés et associés aux différentes images ou images-clés de l'animation. Si vous utilisez le même script pour plusieurs images-objets et souhaitez le changer pour toutes ces images-objets, vous pourrez modifier l'acteur script pour automatiquement mettre le script à jour pour toutes les imagesobjets. Flash et Director gèrent les scripts de façon différente. Dans Flash, tous les événements sont associés à un bouton, une image, un clip, un son ou un autre élément spécifique. Il ne sont ni réutilisables ni des éléments distincts dans l'animation. Dans Director, les scripts sont des acteurs à part entière qui peuvent être associés à plus d'un élément de l'animation (acteurs, images-objets ou images). Les exceptions à cette règle sont les scripts d'acteur définis pour des acteurs spécifiques. Lorsque vous définissez un script ou un gestionnaire dans Director, Director recherche l'événement conformément à la hiérarchie du modèle d'événement. Dans Flash, les scripts sont exécutés lorsque l'élément Flash qui leur est associé apparaît dans le scénario. Le tableau suivant présente une comparaison au niveau de puissance et d’expansion, comme il associe les éléments d'interface et d'animation de Director aux éléments correspondants de Flash. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 14 Propriétés Flash Director Scène (fenêtre) Scène (fenêtre) Scénario Scénario Panneau Actions Fenêtre Script Explorateur d'animations Les Eléments Sans Objet Bibliothèque Fenêtre Distribution Dossiers de Distributions de bibliothèque l'animation Bibliothèques Distributions liées ou partagées externes Symboles Acteurs Boucles, similaires Séquence vidéo De différentes Occurrences Calques l’interface Panneaux Images-objets Pistes des imagesobjets Inspecteurs des propriétés et de texte Image-clé Image-clé Etiquette d'image Repère Scène (partie de l'animation) Langage ActionScript de (semblable à programmation JavaScript) ENSIAS 2005 mais néanmoins Sans objet Lingo PFA : La Multimédiatisation des cours à distance 15 Propriétés Flash Director .fla .dir .swf .dcr OpenSource Compilés Plus léger Plus lourd Players Flash Player Shockwave Player Désignation Internet CD Puissance Moins puissant Plus puissant Fichiers Poids des fichiers Compliqué un petit Manipulation Plus facile peu, même s'il est facile par rapport à ses capacités. Animation 3D Non recommandé Puissant. Plus de 90% des Moins de 60% des navigateurs ont navigateurs ont installé le plug-in de installé celui de Flash. Shockwave. Expansion [site 7] 906.000 fichiers 123.000 fichiers sur le sur le web. web. Tableau 2 : Comparaison entre Flash et Director. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 16 Après cette étude comparative entre Flash et Director, nous pouvons conclure que : Flash est plus fréquemment utilisé pour réaliser des animations destinées au web car il exploite mieux les images vectorielles. Contrairement aux images bitmap, les images vectorielles sont relativement compactes. En effet, ce ne sont pas les pixels qui sont enregistrés mais les propriétés des objets, telles que l’épaisseur d’une ligne et ses coordonnées. Les animations réalisées en Flash sont donc en général plus légères que des animations Director. Director est plus fréquemment utilisé pour réaliser des animations destinées à être placées sur un CD-ROM car il exploite mieux les images bitmaps. Cela dit, Director permet quand même de faire des animations utilisant des images vectorielles et Flash peut également intégrer des images bitmap à ses animations. Simplement, l’un Flash est plus adapté au monde du vectoriel et l’autre Director est plus enclin à utiliser des images bitmap. Dans ce chapitre, nous avons fait une comparaison entre Director et Flash, et nous avons conclu que celui-ci est plus puissant au terme de la réalisation des animations destinées au web. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 17 Chapitre 3 : Réalisation d'animations avec Flash Essentiellement destiné au web, Flash est favorisé pour la réalisation de notre application. Durant ce chapitre, nous allons suivre les étapes de la création, à l'aide de Flash, de deux animations qui illustrent un cours à distance. 2.1. Première animation Cette animation [figure 2] assimile un traitement auquel une base de données est soumise, afin d'extraire des schémas qui représente une exposition structurée des informations saisies. Figure 2 : 1ère image à animer. Dans un premier temps, on fait apparaître des données qui coulent [figures 3.a et 3.b]. Ce sont les informations saisies. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 18 (a) (b) Figure 3 (a,b) : Les données qui coulent Puis, grâce à la commande stop(), on fait une pause et on attend que l'utilisateur clique sur la main. Après le clic [figure 4.a], la "machine" est mise en marche [figure 4.b]. C'est le début du traitement des données. (a) (b) Figure 4 (a,b) : La main qui tourne Le fait de faire tourner la main 5 fois peut être simplement programmé grâce à un petit script rédigé en ActionScript [site 2] dans la zone Actions [Figure 5]. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 19 Figure 5 : Le script qui fait tourner la main 5 fois En suite, un graphe qui désigne le résultat du traitement se trace. Pour le faire nous avions besoin de le dessiner image par image. Ceci nous a poussé à insérer le repère dans un calque [Figure 6.a], puis le graphe dans un autre [Figures 6.b et 6.c]. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 20 (a) (b) (c) Figure 6 (a, b, c) : Le traçage du graphe. Et enfin, le tableau de bord apparaît [Figures 7.a et 7.b]. (a) (b) Figure 7 (a,b) : L'insertion du tableau de bord. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 21 Conclusion L’objectif de notre projet était la réalisation d’une animation d’un cours à distance. Cette réalisation a été effectuée après une étude comparative entre deux outils : Flash et Director. Cette étude nous a amené à utiliser Flash pour des animations destinées au web car il est plus approprié. Au terme de ce projet, nous avons pu satisfaire quelques animations pour l'illustration d'un cours à distance. Par ailleurs ce projet de fin d’année était pour nous une occasion pour acquérir des atouts et des connaissances techniques sur les outils de l’animation existants sur le marché, ainsi que les utiliser pour réaliser des animations. Enfin, s'il nous a resté plus de temps, nous pourrions faire plus d'animations, et découvrir d'autres aspects comme l'insertion des animations dans une page HTML. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 22 Bibliographie Les sites : Site 1 : http://www.ftplanet.net Site 2 : http://www.macromedia.com Site 3 : http://webmonkey.wired.com/webmonkey Site 4 : http://smw.internet.com Site 5 : http://www.europschool.net Site 6 : http://www.school-for-champions.com Site 7 : http://www.alpern.org Les revues : " PS Woods ", April 26, 2000. ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 23