partie2 multimedia

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

24/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

24/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ènes 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.


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 calque24/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.


Notions de comportement

Faites un exemple de combinaisond’interpolation de mouvement de couleursuivi d’une interpolation de forme.


Notions de comportement•Un symbole est une image, une animation ou un boutonréutilisable.•Une occurrence est une instance d'un symbole sur la scèneou d'un symbole imbriqué dans un autre symbole• Les symboles simplifient la modification d'une animationdans la mesure où il suffit d'effectuer les modifications dans lesymbole des éléments qui se répètent pour que Flash mette àjour toutes leurs occurrences.•L'utilisation de symboles dans les animations réduitsensiblement la taille du fichier ; l'enregistrement de plusieursréférences à un symbole exige, en effet, moins d'espacedisque que l'enregistrement d'une description complète del'élément de chaque occurrence.


Notions de comportement• L'utilisation de symboles peut également accélérer la

lecture des animations dans la mesure où un symbole n'abesoin d'être téléchargé qu'une seule fois vers lenavigateur.

• Pour une introduction interactive à l'utilisation dessymboles et des occurrences, cliquez sur Aide > Leçons >Création et manipulations de symboles


Notions de comportementDéterminer le type de symbole à utiliser : Chaque fois que vous créez unsymbole, vous devez déterminer comment vous voulez l'utiliser dans l'animation.

• Utilisez des symboles graphiques pour les images statiques et pour créer dansune animation des éléments réutilisables qui sont liés au scénario de la principaleanimation. Les sons et les contrôles interactifs ne fonctionnent pas dans laséquence d'animation d'un symbole graphique.

• Utilisez des symboles clips d'animation pour créer les éléments réutilisablesd'une animation qui s'exécute indépendamment du scénario de l'animationprincipale. Les clips sont des mini-animations qui s'exécutent au sein d'uneanimation principale pouvant contenir des contrôles interactifs, des sons et mêmed'autres occurrences de clips. Vous pouvez également placer des occurrences declips dans le scénario d'un symbole bouton pour créer des boutons animés.

• Utilisez des symboles bouton pour créer dans l'animation des boutons interactifsqui réagissent à des événements standard de la souris (tels que les clics et lesboutons). Définissez les graphiques associés à divers états du bouton, puisaffectez des actions à une occurrence du symbole bouton.


Notions de comportementGraphique, Bouton et clip

Essayons de voir la différence entre graphique, clip et bouton•Fichier importer dans la bibliothèque les trois images.•Faites glisser une occurrence d’une image dans la scène.redimensionner cette occurrence.•Bouton droite, convertir en symbole, choisir comme comportement «graphique » et nommé le symbole « saladeG1 »•Double click sur saladeG1•Nous allons animer dans ce symbole. On crée trois calques pour lestrois images importés et on fait plusieurs interpolations de mouvementdans chaque calque. Appuyez sur entrée•On retourne à la séquence et on fait ctrl entrée Pas d’animation car c’est un symbole de type Graphique•On utilise l’outil texte pour écrire au dessous le mot graphique24/02/2010 Maha Charfeddine Hamza 43


•Dans la scène (de séquence), faites glisser une occurrence de« saladeG1 »•Dans propriétés, remplacer graphique par « clip »•Double click sur « saladeG1 »• Animation car c’est un symbole de type Clip•On utilise l’outil texte pour écrire au dessous le mot Clip



• Faites glisser une occurrence d’une image dans la scène.redimensionner cette occurrence.•Bouton droite, convertir en symbole, choisir comme comportement« bouton» et nommé le symbole « saladeBTN »•Dans l’image « haut », bouton droite, convertir en symbole, choisircomme comportement « graphique» et nommé le symbole «btn_grah1»•Insérer une image clé dans l’image « dessus » et dans propriétés agirsur la teinte (choisir une teinte bleu de 50%)•Insérer une image clé dans l’image « abaissé» et dans propriétés agirsur la teinte (choisir une teinte rouge de 50%)•Insérer une image clé dans l’image « Cliqué». Il n'est pas nécessairede la modifier•On retourne à la séquence et on fait ctrl entrée Animation car c’est un symbole de type Bouton•On utilise l’outil texte pour écrire au dessous le mot Bouton


Notions de comportementBouton

Création de boutonsUn bouton vous permet d'ajouter de l'interaction dans vos pagesInternet.Chaque image dans le scénario d'un symbole bouton possèdeune fonction spécifique :• La première image (l'état Haut ) représente l'apparence

normale du bouton quand le pointeur n'est pas dessus.• La deuxième image (l'état Dessus) représente l'apparence du

bouton quand le pointeur se trouve dessus.• La troisième image (l'état Abaissé) représente l'apparence du

bouton au moment où vous cliquez dessus.



Bouton simplePour créer un bouton simple, suivez les instructionssuivantes :• Cliquez Insertion > Nouveau symbole (ou Ctrl+F8).

Dans la boîte de dialogue, donnez un nom à votre bouton et choisissez son comportement (bouton);



• Dessinez votre bouton



•Cliquez Insertion > Image clé (ou F6) pour insérer uneimage clé pour l'image « dessus »•Modifiez la couleur de l'image dessus. Répétez pour lesimages « abaissé » et « cliqué ». Il n'est pas nécessaire demodifier l'image « cliqué »•Une fois terminé, revenir à l'animation•Ouvrez la bibliothèque pour voir le bouton et le faireglisser sur la surface de travail•Pour le tester, dans le menu Contrôle, cliquez sur Activerun bouton simple•Pour voir l'effet du bouton, cliquez Contrôle > Testerl'animation



•Cliquez Insertion > Image clé (ou F6) pour insérer une imageclé pour l'image « dessus »•Modifiez la couleur de l'image dessus. Répétez pour les images« abaissé » et « cliqué ». Il n'est pas nécessaire de modifierl'image « cliqué »•Une fois terminé, cliquez Édition > Modifier l'animation pourrevenir à l'animation;•Ouvrez la bibliothèque pour voir le bouton et le faire glisser surla surface de travail•Pour le tester, dans le menu Contrôle, cliquez sur Activer unbouton simple•Pour voir l'effet du bouton, cliquez Contrôle > Tester l'animationExercice : Créer un bouton " rollover "



Ajouter un son à un bouton• Cliquez Fichier > Importer dans la bibliothèque pour importer le fichier son désiré• Ouvrez le symbole bouton pour le modifier• Choisissez l'état du « dessus » sur lequel vous allez insérerez le son• Faites glisser le son sur l’image de l’état choisi• Dans propriétés de l’image de l’état choisi du calque, il ya des options de

synchronisation– Événement : synchronise le son et l'événement;– Démarrage : est identique à Événement sauf qu'il ne peut redémarrer avant

qu'il ne soit terminé;– Arrêt :interrompt le son;– En continu : permet le son sur un site Internet.

• Sélectionnez Synchronisation > événement et tester l’animation• Changer sélectionnez Synchronisation > Démarrage et tester l’animation• Faites glisser le son sur l’image de l’état « abaissé » et sélectionnez

Synchronisation > Arrêt puis tester l’animation


Notions de comportementExemple de bus qui roule (sans clip)

• Dans un premier calque, on dessine le bus (sans roues).• Dans un deuxième calque, on dessine la première roue.• Dans un troisième calque, on dessine la deuxième roue.• On sélectionne toutes les images de début des trois calques et on

fait bouton droit, créer une interpolation de mouvement.• Plus loin, dans les images 100 des trois calques, on insère des

images clés.• On fait un mouvement de déplacement• On teste l’animation le bus roule mais les roues non !!!!!!!!!!


Notions de comportementExemple de bus qui roule (sans clip)

• Dans un premier calque, on dessine le bus (sans roues).• Dans un deuxième calque, on dessine la première roue.• Dans un troisième calque, on dessine la deuxième roue.• On sélectionne toutes les images de début des trois calques et on

fait bouton droit, créer une interpolation de mouvement.• Plus loin, dans les images 100 des trois calques, on insère des

images clés.• On fait un mouvement de déplacement• On teste l’animation le bus roule mais les roues non !!!!!!!!!!

Idée: dans les calques des deux roues, on insère dans chaque 10images des images clés et on fait des rotationsInconvénient : C’est ennuyeux de le faire plusieurs fois pour chaqueroue


Notions de comportementExemple de bus qui roule (avec clip)

Solution : utilisation de clips• On choisit une roue, on la transforme en clip (propriétés)• On double clique sur la roue, on crée seulement 4 images clés avec

des rotations• Pour la deuxième roue il suffit de la remplacer par une l’occurrence

de la première roue à partir de la bibliothèque


Notions de comportement

Exercice : faites l’animation d’unepersonne qui marche en utilisantun clip


partie2 multimedia

Documents

logiciel flash

flash mx24022010

peinture de flash

ligne trace

style dela ligne

loutil crayon

diffrents segments

logiciel de design vectoriel