coues multiedia

Cours développement multimédia

Assuré par : Mme MAHA Charfeddine Hamza

2009/2010

REPUBLIQUE TUNISIENNEMINISTERE DE L’ENSEIGNEMENT SUPERIEUR ET DE LA RECHERCHE SCIENTIFIQUE

UNIVERSITE DE SFAXECOLE NATIONALE D’INGENIEURS

DE SFAX

PARTIE I : FLASH MX

03/02/2010 2Maha Charfeddine Hamza

Plan PARTIE I• Présentation de l’application flash• Interpolation• Notions de comportement• Actions script


• Présentation de l’application flash• Interpolation• Notions de comportement• Actions script

03/02/2010 Maha Charfeddine Hamza 4

Présentation de l’application flashIntroduction

• Flash est un logiciel qui sert à créer des animationsadaptées aux caractéristiques d'Internet.

• Ces animations sont très petites en taille rapides àtransmettre sur le Web.

• Flash est un logiciel de design vectoriel, qui permetl'incorporation des images, de sons,...

• Le logiciel Flash est un outil puissant permettant lacréation facile des interfaces de haut niveau(interaction et esthétique).


Présentation de l’application flashIntroduction

• Flash interpole des mouvements dans le temps :– il crée des hyperliens entre les éléments de la

scène– son langage Action Script, permet de concevoir des

effets d'interactivité spectaculaires etprofessionnels dans un scénario linéaire.

• Plusieurs designers d'interface préconisent maintenantl'utilisation de Flash dans leurs sites Web, pour leursprésentations, la publicité, etc.


Présentation de l’application flashInterface



La scène (stage) : désigne le plan de travail.La zone grise n'apparaît pas dans le film final, mais elle permet de travailleret de disposer les objets (clips, graphiques ou boutons) pour uneanimation.


Présentation de l’application flashInterface : Barre d’outils


Barre d’outils (drawing toolbar):Les différents icônes de la barred'outils sont similaires auxlogiciels de dessins Bitmap ouvectoriels, comme Photoshop,Paint ou Illustrator.


Chaque outil possède différentes propriétés, par exemple :

– Une couleur de remplissage ou/et un contour :• Vous pouvez fixer la couleur, la taille et le style de

la ligne.• Vous pouvez choisir directement vos couleurs, des

solides ou des dégradés ou créer vos proprescouleurs.

– Vous ferez des formes droites et proportionnelleslorsque vous appuierez sur Shift en les créant, en lestransformant ou en les déplaçant.



Comprendre les fonctions dessin et peinture de Flash :Lorsque vous tracez une ligne qui croise une autre ligne ou une formepeinte, la ligne que vous dessinez agit comme un couteau et divise laligne ou la forme qu'elle croise en différents segments.La ligne tracée est elle-même divisée en segments. Vous pouvezsélectionner, déplacer et modifier individuellement la forme de chaquesegment.



Dessiner avec l'outil Crayon Vous pouvez dessiner des lignes et des formes avec l'outil Crayon.Après avoir tracé les lignes, Flash les redresse ou les lisse.Choisissez un des modes de dessin : redresser, lisser, encre

Tracer des lignes droites, des ovales et des rectangles Vous pouvez utiliser les outils Ligne, Ovale et Rectangle pour tracerfacilement des formes.Les outils Ovale et Rectangle vous permettent de tracer et deremplir la forme lors de son dessin.L'outil Rectangle vous permet de dessiner des rectangles avec descoins droits ou arrondis.

Pour l'outil Rectangle, indiquez des coins droits en cliquant surle modificateur Rayon de rectangle arrondi et entrez une valeurpour définir son rayon. La valeur zéro crée des coins droits.



Peindre avec l'outil Pinceau• L'outil Pinceau trace des traits qui évoquent ceux d'un pinceau• Sélectionnez l'outil Pinceau.• Choisissez un mode de peinture :

• Choisissez une taille de pinceau, une forme de pinceau et une couleur de peinture dans les modificateurs de l'outil Pinceau.

Image originale, Peint normalement, Peint derrière, Remplissage, Peint la sélection, et Peint à l'intérieur



EffacerL'outil Gomme efface les lignes et la peinture de remplissage.• Pour effacer rapidement tout ce qui se trouve sur la Scène :Double-cliquez sur l'outil Gomme.• Pour supprimer en totalité des segments de ligne ou des remplissages :Sélectionnez l'outil Gomme puis cliquez sur le modificateur Robinet.Cliquez sur la ligne ou la zone remplie que vous souhaitez effacer.• Pour effacer par glissement :Sélectionnez l'outil Gomme.Choisissez un mode d'effacementChoisissez une forme de gomme et vérifiez que le modificateur Robinetn'est pas sélectionné.



Utiliser l'outil Remplissage

L'outil Remplissage remplit de couleur les zones fermées. Il remplit leszones vides et modifie la couleur de la peinture existante.

Vous pouvez également utiliser l'outil Remplissage pour ajuster ladimension, la direction et le centre des remplissages dégradés etbitmaps.



Utiliser l'outil Remplissage pour remplir une zone :

Sélectionnez l'outil Remplissage.

Choisissez la couleur de remplissage.

Choisissez une option de fermeture pour que Flash fermeautomatiquement les espaces.

Cliquez sur la zone à remplir.



Utiliser l'outil Remplissage pour ajuster un remplissage dégradé :

Choisissez l'outil Remplissage.Cliquez sur le modificateur Transformer le remplissage.Cliquez sur une zone remplie avec un remplissage dégradé.Modifiez la forme du dégradé



Utiliser l'outil EncrierSélectionnez l'outil Encrier.Choisissez la couleur de ligne, le style de ligne et l'épaisseur de ligne dans les modificateurs de l'outil.Cliquez sur une ligne ou une forme de la Scène.

Utiliser l'outil PipetteSélectionnez l'outil Pipette et cliquez sur une ligne ou une forme.Cliquez sur une autre ligne ou forme.



Pour modifier la forme d'une ligne ou d'un contour de forme à l'aide de l'outil Flèche :Sélectionnez l'outil Flèche.Faites glisser la souris à partir de n'importe quel point du segment pour en modifier la forme.


Remarque : Pour sélectionner une forme remplie et ses contourshachurés, sélectionnez l'outil Flèche et double-cliquez sur leremplissage.


Pour sélectionner des objets en dessinant une zone de sélection àmain levée :Sélectionnez l'outil Lasso et faites-le glisser autour de la zone.Terminez la boucle approximativement à l'endroit où vous avezcommencé, ou laissez Flash fermer automatiquement la boucle parune ligne droite.

Pour sélectionner des objets en dessinant une zone de sélectionpolygonale :Sélectionnez l'outil Lasso et sélectionnez le modificateur Lassopolygonal.Cliquez pour définir le point de départ.Positionnez le pointeur à l'endroit où vous voulez arrêter la premièreligne, et cliquez. Continuez de définir les points d'arrêt pour lessegments de ligne supplémentaires.Pour fermer la zone de sélection, double-cliquez.



Vous avez accès à toutes les fenêtres par le menu Window (fenêtre)



Panneau de contrôle (Controller)

Gère le déroulement du film, avec les fonctionnalités habituelles d'unvisionnement d'un film (Play, revient au début ou de un, avance de unou à la fin).

Il ne permet pas de tester un film avec plusieurs scène ou diverséléments actifs complexes, c'est pourquoi on utilise plus souvent lacommande Ctrl + Enter pour voir l'interaction dans le film.



Propriétés (Properties) : Vous pourrez ajuster les propriétés de basede votre film, vous pourrez ajuster la cadence de l'animation en fps(frame per second), sa dimension et la couleur de l'arrière-plan(background).



Actions [-Object] : Sert à définir des comportements ou des actionssur des objets positionnés sur la scène ou à une image clé précisedans le scénario.



Scénario (Timeline) : la barre avec plusieurs petites casesnumérotées, représente le scénario dans le temps de l’animation.Ces cases sont des marques dans le temps des différentesinterventions qui sont effectuées.L'accès au menu contextuel (clic du bouton droit de la souris sur unobjet, une image clé) est très utile pour ajuster les propriétés demouvement (Tweening), de transformation, d'inscription de, pour savoiroù sont joués les sons (Sounds).Le scénario affiche les images à l'aide d'un pointeur courant, c'est-à-dire qu'il détermine quelle image vous affichez. Les images sontnumérotées dans l'ordre croissant de l'animation.


Présentation de l’application flashImportation

Vous pouvez importer ces fichiers : .eps, .ai, .dxf, .bmp, .emf, .fh, .spl,.gif, .jpg, .png, .swf, .wmf

Les types de fichiers suivant peuvent être importés si vous avezQuicktime 4 installé : .psd, .pct, .pic, .qti, mov, .sai,.tga, .tif.

Vous pouvez importer les fichiers de sons suivants : .wav, .aif, .mp3.

Enfin vous pouvez importer des fichiers d'images animées ou de filmsde type .mov, .avi, .swf.


Présentation de l’application flashExportation

Les fichiers Flash (.fla) sont enregistrés et ne peuvent être lus que parl'application.

Vous pouvez enregistrer votre document 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.


• Présentation de l’application flash• Interpolation• Notions de comportement• Actions script

03/02/2010 Maha Charfeddine Hamza 28

Interpolation

Pour créer une animation, vous devez modifier le contenu d'unesuccession d'images.

Vous pouvez déplacer un objet sur la scène, augmenter ou diminuersa taille, le faire pivoter, changer sa couleur, ou modifier sa forme.

Pour créer une séquence d'animation dans Flash, vous créez lesimages de début et de fin et laissez ensuite à Flash le soin de créer lesimages intermédiaires.

Chaque image dont un élément change sur la scène est uneimage-clé


InterpolationUne image-clé est une image où vous définissez les modificationsdans l'animation.Dans l'animation interpolée, vous définissez les images-clés auxpoints importants dans l'animation et laissez Flash créer le contenudes images intermédiaires.Flash affiche les images interpolées d'une animation interpolée en

vert ou bleu clair avec une flèche dessinée entre les images-clés.


InterpolationLes images-clés apparaissent dans une image sous forme de cercle plein.

Des images-clés vides apparaissent comme des cercles creux.La première image de chaque calque devient automatiquement uneimage-clé.Le contenu d'une image clé apparaît dans de nouvelles images que vousajoutez à un calque.

Pour créer une image-clé :Sélectionnez une image et cliquez sur Insérer > Image-clé ou Choisir lemenu insertion puis cliquez sur image-clé.


Interpolation

Distinction des animations dans le scénarioDans le scénario, Flash distingue l'animation interpolée de la façonsuivante :Les images-clés en interpolation de mouvement sont signalées par unpoint noir alors que les images interpolées intermédiaires sontdésignées par une flèche noire sur un fond bleu clair.

Les images-clés en interpolation de forme sont signalées par un pointnoir alors que les images intermédiaires sont désignées par une flèchenoire sur un fond vert clair.


Interpolation

Une ligne discontinue signale un problème d'interpolation.

Les images-clés uniques ont des points noirs. Les images gris clairplacées avec une image-clé unique présentent le même contenu sansmodification.


InterpolationAnimer à l'aide de calques :• Chaque scène d'une animation Flash peut comprendre un nombrequelconque de calques.• Lorsque vous effectuez une animation, utilisez des calques pourorganiser les composants d'une séquence d'animation et séparer lesobjets animés de façon à éviter tout problème d'effacement, deconnexion ou de segmentation entre eux.• Si vous voulez que Flash interpole le mouvement de plusieursgroupes ou symboles à la fois, placez chacun d'eux sur un calqueséparé.• En principe, le calque d'arrière plan contient des graphismesstatiques. Les calques supplémentaires contiennent chacun un objetanimé distinct.


InterpolationMouvement

Flash peut interpoler la position, la taille, la rotation, la couleur.Pour opérer une interpolation de mouvement :Choisir la forme carré et glisser la sur la scèneSélectionner la première cellule (frame) dans le calque (layer) de l'objetà déplacerBouton droit de la souris, créer une interpolation de mouvementSélectionner une cellule plus loin dans le temps (scénario : timeline)Sélectionner Insérer une image-cléModifier la position de l'objet dans le deuxième temps

• Faire une interpolation de mouvement de rotation puisd’agrandissement puis de modification de couleur.• Combiner tous ces mouvements sur l’objet choisi dans unmême calque03/02/2010 35Maha Charfeddine Hamza

InterpolationForme

Pour opérer une interpolation de forme:Choisir la forme carré et glisser la sur la scèneSélectionner la première cellule (frame) dans le calque (layer) de l'objetà transformerSélectionner forme dans l’onglet interpolation de la fenêtre propriétésSélectionner une cellule plus loin dans le temps (scénario : timeline)Modifier la forme de l'objet dans le deuxième temps (utiliser la flècheblanche ou supprimer la forme et la changer avec une autre ousupprimer la forme et dessiner une autre avec l’outil crayon)

Combiner toutes ces interpolations de forme dans un mêmecalque

Faites un exemple de combinaison d’interpolation de mouvementde déplacement suivi d’une interpolation de forme dans un mêmecalque


Interpolation GUIDE DE MOUVEMENT

Choisir la forme carré et glisser la sur la scèneSélectionner la première cellule (frame) dans le calque (layer) de l'objetBouton droit de la souris, créer une interpolation de mouvementSélectionner une cellule plus loin dans le temps (scénario : timeline)Sélectionner Insérer une image-cléBouton droit de la souris sur le calque, ajouter un guide de mouvement.Tracer le guide souhaité à partir du centre de l’objet avec l’outil crayonDans la frame de fin, déplacer votre objet à la fin du guide à suivreavec la souris

Exercice du guide - Créez une balle qui rebondit.


coues multiedia

Documents

logiciel flash

flash mx03022010

peinture de flash

ligne trace

style dela ligne

loutil crayon

diffrents segments

logiciel de design vectoriel