FLASH 1. SI28 - A08 Alice DAUSSY - Aurélie CHARLES

Transcription

1 FLASH 1 SI28 - A08

2 Pl a n Présentation du logiciel Différence entre Bitmap et Vectoriel Présentation de l interface Grouper et Dissocier Image clé Scénario Symboles et Scénario de symbole Interpolations Guide de mouvement Exemples Exportation et insertion dans Dreamweaver

3 Présentation du logiciel Les animations Flash sont : des graphiques et des objets destinés aux sites web ou au multimédia composées de graphiques vectoriels, mais peuvent aussi contenir des graphiques bitmap et des sons importés interactives et ainsi permettre l entrée d informations par l utilisateur et la création d animations non linéaires capables de dialoguer avec d autres applications web

4 Différences entre bitmap et vectoriel Le dessin bitmap : travail avec des pixels qui peuvent avoir une valeur de couleur et de transparence. convient pour la retouche photographique, le photomontage... Plus il y a de pixels dans une image et plus son «poids» numérique augmente Le dessin vectoriel : composé de courbes mathématiques, ou de droites et segments qui ont une couleur et une taille permet de zoomer sans pixeliser convient pour des réalisations qui demandent des résolutions de travail importantes son poids numérique ne varie pas avec la taille de l image

5 Présentation de l interface Séquence et scénario Palette Outils Scène Inspecteur de propriétés Bibliothèque

6 Présentation de l interface Les outils Flèche Ligne Plume Ovale Crayon Transformation libre Encrier Pipette Main Sous sélection Lasso Texte Rectangle Pinceau Transformer le remplissage Pot de peinture Gomme Zoom Couleur de trait Couleur de remplissage Options (en rapport avec l outil sélectionné)

7 Présentation de l interface La scène est la zone dans laquelle vous composez le contenu des images individuelles de l animation, soit en y dessinant directement les illustrations, soit en organisant les illustrations importées Le scénario est l endroit où vous coordonnez la temporisation de l effet animé et où vous assemblez les illustrations sur différents calques. Le scénario affiche chaque image de l animation L inspecteur des propriétés simplifie la création des documents en facilitant l accès aux attributs les plus fréquemment utilisés de la sélection actuelle, que ce soit sur la scène soit dans le scénario

8 Exemple 1 Ouvrir un nouveau document (ctr + N). Nommez le calque «Feu de circulation». Dessinez deux rectangles noirs comme ci-contre. Dessinez ensuite un rond rouge et positionnez le sur le panneau Cliquez hors de la zone de dessin. Sélectionnez le rond rouge et déplacez-le. Que constatez-vous?

9 Grouper et Dissocier Pour résoudre ce problème de superposition, il faut grouper. On peut grouper un ou plusieurs éléments. Pour Grouper, sélectionner les objets. Faire Modification - Grouper (ctr + G) Pour Dissocier, les éléments groupés, sélectionner les objets. Faire Modification - Dissocier ( ctr + Maj + G)

10 Exemple 2 Refaire l exemple, en groupant convenablement pour que le rond rouge ne supprime pas une partie du panneau Ajoutez les ronds verts et oranges avec une opacité de 30 pour finir le feu de circulation Ajoutez un nouveau calque et renommez le «fond» et importez (Fichier - Importer - Importer dans la scène) le document intitulé photo-virage.jpeg. Mettez le aux dimensions de l écran. Verrouillez ensuite le calque de fond. Positionnez le feu de circulation près du virage en bas à droite.

11 Image clé Il existe deux types principaux d images: les images clés et les images «virtuelles». Une image : Elément de l animation. Une image clé : C est une image singulière qui correspond à un changement d état à un moment bien précis défini dans le scénario. Généralement chaque image clé est différente de l image clé qui la précède. Elles sont très utilisées dans les interpolations. Les images clés sont repérées dans le scénario par des points noirs.

12 Sc é n a r i o Image courante Numéro de l image courante Temps écoulé Cadence en image/sec

13 Exemple 3 Dans le calque «Feu de circulation», ajoutez une image-clé sur l image 20. (Insertion - Scénario - Image clé) Sur l image clé créée, mettez une opacité de 100 au rond vert et baissez l opacité à 30 pour le rond rouge Ajoutez une image clé sur l image 38 et faites passer le feu au orange. Puis à l image 53 faites de nouveau passer le feu au rouge. Pour visionner le résultat, Contrôle - Tester l animation

14 Sy m b o l e Il existe trois type de symboles : Graphique Bouton Clip Un symbole créé peut ensuite être réutiliser indans le même document ou dans d autres documents. Tout symbole créé devient automatiquement un élément de la bibliothèque du document courant.

15 Scénario de symbole En mode d édition de symbole, vous pouvez créer une animation indépendante du scénario principal dans un scénario de clip.

16 In t e r p o l at i o n L interpolation consiste à remplir les images situées entre deux images-clés pour transformer l objet graphique affiché dans la première image-clé en l objet graphique affiché dans la deuxième imageclé. L interpolation de forme s applique à des objets non groupés et qui ne sont pas des symboles. L interpolation de mouvement s applique à des objets groupés ou à des symboles

17 Exemple 4 Créez un nouveau calque «oiseau». Créez un nouveau symbole «clip» nommé oiseau et placez vous dans le scénario du symbole. Créer trois calques : aile devant, corps et aile derrière. Calque Corps : Placez vous à l image 1 du scénario et dessinez un corps d oiseau. Convertissez le en symbole. Placez vous sur l image 5 et insérez une image clé. Créer une interpolation de mouvement entre les deux images.

18 Exemple 4 Calque aile derrière : Placez vous à l image 1 du scénario et dessinez une aile d oiseau en position basse. Convertissez la en symbole. Placez vous à l image 5 du scénario et insérez une image clé. Modifiez la position et la forme de l aile. Créez une interpolation de mouvement entre les deux images. Calque aile devant : Répétez les même opérations que pour l aile derrière Retournez dans le scénario principal et dans le calque oiseau, insérez à l image 1 un symbole oiseau. Testez l animation.

19 Guide de mouvement Avec les calques de guide de mouvement on peut tracer les trajectoires le long desquelles des objets interpolés seront animés. Il est possible de lier plusieurs calques à un calque de guide de mouvement pour que plusieurs objets suivent la même trajectoire. Un calque normal lié à un calque de guide de mouvement devient un calque guidé.

20 Exemple 5 Insérez une image clé au delà de l image 60 Placez vous sur le calque oiseau. Ajoutez un calque de mouvement à ce calque (clic droit sur le calque) A l aide de la plume, du crayon... dessinez la trajectoire souhaitée Accrochez le centre au début de la ligne dans la première image et à la fin de la ligne dans la dernière image. Créez une interpolation de mouvement Il est possible de positionner des images clés intermédiaires, de jouer sur la vitesse de déplacement et la taille des symboles et donner une impression d aloignement.

21 Exportation et insertion dans dreamweaver Il existe de nombreux formats d exportation pour les images et les animations créées sous flash. Exportez l animation à partir de l onglet «fichier» en sélectionnant le format.swf pour qu il soit insérable dans Dreamweaver. Ouvrez un projet dreamweaver. Dans «Insertion», «Médias» choisir «Flash»

22