Mme. Laila KJIRI Mossaab BAGDOURI Abdelilah CHAOUI Projet de

Transcription

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
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
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
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
6
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
7
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
8
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
23