2004/2005 Projet de Fin d'Année - Glossip · cité, dans un tableau ... Illustrator Adobe 2D...

Rapport du PFA

Encadré par :

Mme. Laila KJIRI

Réalisé par :

Mossaab BAGDOURI

Abdelilah CHAOUI

2004/2005

1ère annéeProjet de Fin d'Année

ENSIAS 2005 PFA : La Multimédiatisation des cours à distance 2

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


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.


Table des matières Remerciements Liste des figures Liste des tableaux Table des matières Introduction Chapitre 1 Etat de l’art des outils

1.1. Outils multimédias

1.2. Analyse et synthèse

Chapitre 2 : Comparaison Flash / Director

2.1. Présentation

2.2. Différences entre Flash et Director

Chapitre 3 : Réalisation d'animations avec Flash

3.1. Première animation

3.2. Deuxième animation

Conclusion

Bibliographie

2

3

3

4

5

6

6

10

11

12

11

18

18

18

18

18


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.


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 Editeur Catégorie Commentaires

3D Studio Max Discreet 3D Animation et modélisation

AfterEffects Adobe 3D Effets visuels

Amapi Eovia 3D Animation et modélisation

Archicad Audodesk 3D Modélisation architecturale

Authorwave Macromedia Web Intégration audio et vidéo

Autocad Autodesk 3D Modélisation

Blender Blender 3D Modélisation et animation 3D

Bodypaint Maxon 3D Bodypainting et textures

Bryce Corel 3D Modélisation et animation

Cinema4D Maxon 3D Modélisation et environnement 3D



Carrara Eovia 3D Création 3D

Cinepaint Sourceforge 2D Retouche image par image (gratuit)

Coldfusion Macromedia Web Intégration html et langage serveur

Combustion Discreet 2D/3D Compositing 2D, 3D, tracker 2d...

Commotion Pinacle Systems Vidéo Retouche Vidéo

Cool3D Unlead Systems 3D Création 3D

Corel Draw Corel 2D Réalisation vectorielle

Director Macromedia Multimedia conception sur CD ou jeux

Dreamweaver Macromedia Web création pages HTML

Flash Macromedia 2D/Web Réalisation d'animation

Fireworks Macromedia 2D/Web Optimisation et exportation de

graphismes

Freehands Macromedia 2D Graphique vectoriel

Frontpage Microsoft Web Création pages HTML

Gimp (the) Gimp 2D Manipulation et

retouche d'images (gratuit)

Golive Adobe Web Création pages HTML

Homesite Macromedia Web Conception web

Illustrator Adobe 2D Graphisme vectoriel

Image Forge Cursorarts 2D Edition Retouche d'images (gratuit)



Image Ready Adobe 2D/Web Optimisation et

exportation graphiques

Indesign Adobe Print Mise en page

Inspire 3D Newtek 3D Animation et modelisation

Lightwave 3D Newtek 3D Animation et modelisation

Live motion Adobe 2D/web Animation web

Maya Alias Wavefront 3D Animation et

modelisation

MotionBuilder Kaydara 3D Animation de personnages cinéma & télé

Painter Corel 2D Imagerie et retouche photo

Paint Shop Pro Jasc 2D Graphisme

Photopaint Corel 2D Graphisme

Photoshop Adobe 2D Edition et retouche photo

PhotoStudio Arcsoft 2D Imagerie et

retouche photo (gratuit)

Pinnacle Pinacle Systems Vidéo Montage vidéo et

création DVD

Pixia Soldier 2D Edition Retouche d'images (gratuit)

Plasma Discreet 3D/web Création 3D pour le web

Poser Curious Labs 3D Posture et

animation de personnages

Premiere Adobe Vidéo Montage et effets vidéo



Project Dogwaffle

ImageMagick Studio 2D Imagerie et

retouche (gratuit)

Rhinoceros 3D Rhino3d 3D Modélisation

Softimage XSI 3D Modélisation et animation

Strata 3D Rich Media 3D Animation et

modélisation 3d (gratuit)

Terragen Planetside 3D Environnement 3D (gratuit)

Toon Boom Studio

Toon Boom Technologies Multimedia Animation pour le

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.


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.


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.


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


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 image-

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


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 images-

objets.

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.


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

Sans Objet

Bibliothèque Fenêtre Distribution

Dossiers de bibliothèque

Distributions de l'animation

Bibliothèques partagées

Distributions liées ou externes

Symboles Acteurs

Séquence vidéo Boucles, similaires mais néanmoins

différentes

Occurrences Images-objets

Calques Pistes des images-

objets

Panneaux Inspecteurs des

propriétés et de texte

Image-clé Image-clé

Etiquette d'image Repère

Les

Eléments

De

l’interface

Scène (partie de l'animation)

Sans objet

Langage

de

programmation

ActionScript (semblable à JavaScript)

Lingo


Propriétés Flash Director

.fla .dir

.swf .dcr

Fichiers

OpenSource Compilés

Poids des

fichiers Plus léger Plus lourd

Players Flash Player Shockwave Player

Désignation Internet CD

Puissance Moins puissant Plus puissant

Manipulation Plus facile

Compliqué un petit peu, même s'il est facile par rapport à

ses capacités.

Animation 3D Non recommandé Puissant.

Plus de 90% des navigateurs ont

installé le plug-in de Flash.

Moins de 60% des navigateurs ont installé celui de

Shockwave.

Expansion

[site 7]

906.000 fichiers sur le web.

123.000 fichiers sur le web.

Tableau 2 : Comparaison entre Flash et Director.


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.


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.


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.

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

(a) (b)

(a) (b)


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


Figure 6 (a, b, c) : Le traçage du graphe.

Et enfin, le tableau de bord apparaît [Figures 7.a et 7.b].

Figure 7 (a,b) : L'insertion du tableau de bord.

(a)

(b)

(c)

(a) (b)


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.


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.

2004/2005 Projet de Fin d'Année - Glossip · cité, dans un tableau ... Illustrator Adobe 2D...

Documents

Transcript of 2004/2005 Projet de Fin d'Année - Glossip · cité, dans un tableau ... Illustrator Adobe 2D...