INITIATION AU LOGICIEL FLASH

FLASH
Flash est un logiciel de dessin vectoriel et de cration danimation. Il permet galement de dvelopper des applications interactives. Apparu l'origine sous le nom de FutureSplash Animator, rachet par Macromdia et renomme Flash en 1997.

N Voir les fichiers solar.swf, bird.swf, bio_logo.swf dans le dossier exemples

BITMAP VERSUS VECTORIEL

Avec Flash le dessin se fait en mode vectoriel par opposition au mode bitmap. Il permet galement d'importer et de manipuler des graphiques bitmap crs dans d'autres applications. Le tableau suivant rsume les diffrences entre images vectorielles images bitmap.

N Voir le fichier feuilles.swf dans le dossier exemples

Nature

Bitmap (point par point) Matrice de points (pixels) ou chaque point possde un attribut de couleur spcifique Effet dagrandissement Change avec lagrandissement effet descalier (cas des tracs obliques) Retouche Ncessite la modification de tous les points qui composent un lment Utilisation des calques non Texte Difficile dcrire petit en restant visible Poids lev Conversion vectoriel. Possible avec un logiciel de retraage mais complexe et dcevante Impression Cest une copie dcran, il utilise la dfinition de lcran. Important (voir feuilles.swf) Ralisme Formats BMP, GIF, JPG, TIF, TGA, PNG, PCT Logiciels Paintshop, Photoshop.

Vectoriel Formule mathmatique dcrivant la forme, la couleur, la localisation spatiale Aucune modification (tracs prcis) Modification se fait dun seul coup oui Lisible mme rduit faible Bitmap. Toujours possible mais on perd la finesse et la prcision Dessin compos en mmoire, il utilise la dfinition de limprimante Moyen WMF, CGM, DRW, CDR, DXF, EPS, AI Illustrator, FreeHand

ESPACE DE TRAVAIL

Dmarrage

- dmarrer le logiciel Flash - dans Fichier > Nouveau *Scne : espace dans lequel se trouve les acteurs de lanimation (dcor, personnage, son) *Scnario: organise et contrle le contenu des calques et des images dune animation dans le temps. Il comporte la rgle temporelle (timeline).

Modification de lespace de travail

- dans barre des menus: Modifier > Animation - dbit ou cadence: 12 images par seconde (pour le web) - dimensions : L:550 X H:400 pixels (19,3 X 14,04 cm) la taille varie de 18 X 18 jusqu' 2880 X 2880. - arrire-plan, slectionnez une couleur de votre choix - afficher ou non la grille et dfinir l'espacement et la couleur de la grille. ajuster selon: permet d'adapter la dimension de la scne la zone d'impression ou au contenu.

Initiation Flash 4

Mostafa Kriat. Septembre 2000

LES OUTILS DE TRAVAIL

Les icnes et raccourcis clavier
Le survol par la souris des icnes permet d'obtenir une aide sous forme de bulle jaune.

Les icnes de la barre d'outils possdent tous des options qui apparaissent en bas de la barre (voir cercle).
Annuler (ctrl+Z) Grouper (ctrl+G) Couper (ctrl+X) Convertir en symbole (F8) Copier (ctrl+C) Insrer image cl (F6) Coller (ctrl+V) Insrer image cl vide(F7) Coller sur place (ctrl+ Maj+V) Tester l'animation (ctrl+entre)

LES CALQUES
Ce sont des couches superposables apparentes des feuilles transparentes. Ils peuvent contenir des acteurs, mais galement des guides ou des masques. Deux rgles sont respecter: - crer un calque par objet anim - un mme calque ne doit pas contenir un objet statique et un objet anim

Manipulation des calques

- dans le dossier exo ouvrir le fichier calques.fla - renommer les trois calques en cercle, rectangle et texte. - afficher le calque texte - dverrouiller le calque rectangle - dsactivez l'affichage en contour du cercle

Le verrouillage permet d'afficher le contenu d'un calque tout

en le rendant inaccessible pour l'criture.

LE TEXTE AVEC FLASH

Contrairement l'html, le choix des polices avec Flash n'est pas limit aux invitables Georgia et Verdana. En effet Flash exporte le texte dans un ensemble de tracs indpendants des polices installes sur la machine client.

- ouvrir un nouveau fichier - renommez le calque 1 en titre - slectionner l'outil texte - dans les options choisir la couleur, la police et la taille - taper un texte de votre choix. - enregistrer le fichier sous essai1 dans votre dossier de travail

Cration d'objets texte

L'objet texte peut tre dplac, redimensionn, pivot comme n'importe quel trac. - slectionner le texte avec flche - redimensionner le texte - pivoter le texte

Manipulation d'objets texte

Pour raliser une inclinaison et non une rotation il faut saisir la poigne centrale.
Aprs vectorisation, le texte n'est plus ditable sauf si on utilise la commande annuler. - vectoriser le texte prcdemment cre par la commande Modifier>sparer - modifier la couleur d'une lettre avec le pot de remplissage - appliquer un contour d'une autre couleur avec l'encrier

Vectorisation du texte

Initiation Flash 4

Mostafa Kriat. Septembre 2000

LE DESSIN AVEC FLASH

Avant de dessiner et de peindre il est important de noter que: - Lorsquon superpose deux formes, la partie qui se trouve en dessous est remplace par celle qui vient au-dessus. - Les peintures de mme couleur se mlangent. - Les peintures de diffrentes couleurs restent distinctes.

Pour viter de modifier des formes et des lignes par inadvertance, regroupez-les ou utilisez des calques pour les sparer.
- dessiner un cercle bleu avec l'outil cercle et supprimer son contour - dessiner un rectangle rouge sans contour ct du cercle selon le modle ci-contre - choisir l'outil pipette et l'appliquer sur le cercle - sans changer d'outil cliquez sur le rectangle (la pipette se transforme en pot de remplissage) - modifier la forme pour obtenir un dessin quivalent celui-ci

Formes avec cercle et rectangle

Pour dformer le cercle et le rectangle

- slectionner l'outil flche - faites glisser la souris en la rapprochant de la forme modifier jusqu' apparition d'une courbe - en restant cliqu faites glisser la souris dans une direction donne. - enregistrer le fichier sous le nom de chauve_souris

ou d'un angle

Pour crer un nouveau point d'angle partir d'une courbe il faut appuyer sur la touche contrle.
- dessiner un nuage avec l'outil pinceau - lisser son contour avec le modificateur lisser - colorier le nuage en gris - enregistrer le fichier sous le nom de nuage

Formes avec lignes et courbes

La palette Flash par dfaut est la palette web de 216 couleurs. Les autres couleurs sont galement disponibles en cliquant sur le bouton fentre couleurs en haut de la palette. exercice - reprendre le fichier nuage - appliquer au nuage une couleur grise avec une couche alpha de 60%. - reprendre la chauve_souris et ralisez des yeux rouges avec un dgrad radial.

Jeu de couleurs

IMPORTATION D'ELEMENTS GRAPHIQUES

Flash permet l'importation d'lments graphiques crs dans d'autres applications: images bitmap, images vectorielles et des squences animes

- ouvrir un nouveau fichier - dans fichier > importer - pointer sur le dossier exo et slectionner l'image joconde.jpg - slectionner limage et cliquer modifier > tracer bitmap - refair loperation avec un seuil de couleur de 30 - refaire le mme travail avec l'image fleur.jpg

Retraage d'une image bitmap

EXPORTATION D'ELEMENTS GRAPHIQUES

- dans le dossier exo ouvrir le fichier fusee.fla - dfinir les paramtres de publication dans fichier > paramtres de publication - cocher toutes les options de format de sortie gif, jpg et png. - visualiser les images avec un logiciel d'images - ouvrir le fichier html - ouvrir lexcutable et film quicktime (ncessite la version 4)

Publication d'images

Initiation Flash 4

Mostafa Kriat. Septembre 2000

L'ANIMATION AVEC FLASH

L'animation ou l'impression d'animation est produite par l'affichage d'une squence d'images une cadence donne. Il existe deux mthodes pour crer des animations: - l'animation image par image : la manire d'un dessin anim. Elle prsente l'avantage de contrler le contenu de chaque image, mais prsente un inconvnient majeur : son poids. En pratique ce type d'animation est utilis quand les objets ne pourront pas tre gnrs partir d'un mme symbole. Exemples: animer un objet 3D, une silhouette

N Voir le fichier woman_walking.swf dans le dossier exemples

- l'animation par interpolation: L'interpolation permet de crer une animation partir de deux images cls: une image cl de dpart et une image cl de fin. Entre ces deux images le logiciel calcule les images intermdiaires en interpolant partir de ces deux images. Flash permet deux types d'interpolation: l'interpolation de mouvement et l'interpolation de formes.

1- Interpolation de mouvement
- ouvrir un nouveau fichier - dans un calque dessiner un rectangle bomb sans contours en bas dpassant les limites de la scne - placer le curseur sur l'image 50 de la base temporelle et cliquer: Insrer > une image cl (F6) - dans un autre calque dessiner une balle avec un dgrad rouge - dplacer la balle gauche et hors de la scne - placer le curseur sur l'image 50 de la base temporelle de la balle cliquer: Insrer > une image cl (F6) - amener la balle droite et hors de la scne - dans l'image cl 1 de la balle cliquer: Insrer > Crer interpolation de mouvement - tester l'animation avec en cliquant: contrle > tester l'animation

La balle qui roule

et

La balle raliste

La balle doit tre centre sur le guide au dpart et la fin de l'animation. Zoom sur un texte en rotation et qui s'claircit

Maintenant on va raliser une trajectoire raliste pour la balle - placer le curseur sur le calque balle et cliquer: Insrer > guide de dplacement - un nouveau calque est insr portant le nom guide balle - dessiner un guide en vous aidant avec le contour de la pente - amliorer l'animation en jouant sur la rotation de la balle et les mouvements d'acclration et de dclration

Dans un nouveau fichier et dans l'image cl 1 - taper un texte (ex bonjour) - convertir le texte en symbole - insrer une seconde image cl 30 - sur l'image cl 1 rduire le texte et appliquer une couche alpha 0% dans proprits de l'occurence - appliquer une interpolation de mouvement

2- Interpolation de forme
Ce type d'interpolation permet de crer des squences de "morphing". De mme que pour l'interpolation de mouvement il faut une image cl de dpart et une image cl d'arrive, mais la diffrence de celle-ci, ces objets ne doivent tre ni des tracs groups ni des occurrences de symboles.

Morphing simple: du carr rouge au cercle bleu

Ouvrir un nouveau fichier - dessiner un carr rouge dans l'image cl 1 - dessiner une cercle bleu dans l'image cl 20 - activer la bote de dialogue proprits de l'images en double-cliquant sur l'image cl 1. - dans l'onglet interpolation choisir : forme. - tester l'animation avec en cliquant: contrle > tester l'animation (Ctrl + entre)

- raliser une animation similaire en passant du triangle rouge un carr vert. On constate des dformations anormales et imprvisibles. Pour les liminer il faut utiliser des repres de formes en utilisant la commande: Modifier > Transformer > Ajouter des repres de formes (Ctrl+H) - sur le triangle disposer des repres selon l'image ci-contre - sur le carr disposer des repres selon l'image ci-contre

V Morphing avec repre de formes

Initiation Flash 4

Mostafa Kriat. Septembre 2000

LES SYMBOLES ET LA BIBLIOTHEQUE DE SYMBOLES

Pour manipuler un objet avec flash il est prfrable d'en faire un symbole. Le symbole reste la faon la plus aise de manipuler les objets et plusieurs options ne sont possibles qu'avec un symbole. Un symbole est un graphique (image, un bouton, animation, son) rutilisable. Lorsqu'on place un symbole sur la scne on cre une occurrence (instance) de ce symbole. L'utilisation de symboles est incontournable pour produire: - des fichiers de taille rduite et par consquent exploitable sur le web - des animations simples modifier dans la mesure o il suffit d'effectuer les modifications dans les symboles pour que Flash mette jour toutes leurs occurrences. Les symboles sont enregistrs et organiss dans la bibliothque. Noter galement l'existence d'un menu bibliothques contenant des boutons, des graphiques et des sons fournis avec le logiciel.

Cration et modification d'un symbole graphique

- dessiner une molcule d'eau - slectionner la molcule, puis choisissez Insrer > Convertir en symbole (F8). - dans la bote de dialogue Proprits du symbole, spcifiez eau comme nom du symbole, cocher graphique puis valider. - choisir Fentre > Bibliothque pour ouvrir la fentre de la bibliothque. Vous remarquez que le symbole eau que vous avez cr apparat dans la liste. - dupliquer le symbole plusieurs fois dans la scne en modifiant la taille et la rotation.

Si on compare les fichiers obtenus avec et sans symbole le rapport de taille est
4 fois plus faible dans le cas de l'utilisation des symboles. - avec le bouton droit de la souris cliquer sur n'importe quelle occurence - dans le menu flottant slectionner modifier Une nouvelle scne apparat avec la molcule d'eau - appliquer une couleur diffrente sur l'atome d'oxygne - revenir la scne principale en cliquant sur scne 1 Que remarque-t-on ? A partir du fichier prcdent copier une occurrence d'une molcule d'eau et la coller dans un nouveau fichier - avec le bouton droit de la souris cliquer sur l'occurence - dans le menu flottant slectionner proprits - cocher clip d'animation et valider - modifier ensuite le symbole pour obtenir une molcule d'eau en rotation. Utiliser les connaissances acquises sur l'interpolation de mouvement.

Modification d'un symbole graphique

V Cration d'un symbole anim (movie-clip)

V Ajout de boutons

Reprendre l'animation la balle qui roule On souhaite lui associer deux boutons un stop et un play permettant le contrle de l'animation. - copier le bouton de votre choix dans le menu bibliothques > boutons - placer les boutons sur un claque distinct - avec un clic droit de la souris cliquer sur le bouton et choisir proprits de l'occurence > actions - sur l'onglet + et slectionner play - faire la mme chose pour le deuxime bouton avec l'action stop - tester votre animation.

N Voir le fichier traduc.swf et son fichier source traduc.fla dans le dossier exemples

Initiation Flash 4

Mostafa Kriat. Septembre 2000

DES ANIMATIONS INTERACTIVES

Une animation interactive implique la participation des utilisateurs par l'intermdiaire du clavier, de la souris ou des deux. La cration d'animations interactives ncessite la dfinition d'actions (annexe 1) qui peuvent tre associes: - soit des boutons (voir animation la balle qui roule) dclenches par l'utilisateur. - soit une image et adresses directement la tte de lecture par l'intermdiaire de la base temporelle. Ces actions sont dclenches quand la tte de lecture atteint une image et permettent de contrler l'animation de manire passive. Les actions sont dfinies dans l'onglet Actions de la bote de dialogue Proprits pour un bouton ou une image. Les actions peuvent comporter une ou plusieurs instructions ou correspondre une srie d'instructions avec des boucles et des conditions.

1- Des boutons en action

Cration d'un bouton

- dessiner un cercle et le convertir en symbole bouton (F8) et dans Comportement cocher Bouton - un clic droit de la souris sur le nouveau symbole permet d'accder au menu Modifier On accde une nouvelle scne imbrique dans la principale; - modifier l'aspect du bouton dans les quatre tats - vrifier le fonctionnement du bouton en testant l'animation.

Dans cette nouvelle scne il faut dfinir l'aspect du bouton comportant quatre tats:

-Haut : reprsente l'aspect normale du bouton quand le pointeur n'est pas dessus. -Dessus: reprsente l'aspect du bouton quand le pointeur se trouve dessus. -Abaiss: reprsente l'aspect du bouton au moment du clic. -Cliqu: dlimite la zone sensible qui ragit la souris. Cette zone est invisible dans l'animation.

Ajout d'un son un bouton

Dans un premier temps il faut choisir un son dans la bibliothque ou l'importer d'un autre dossier par la commande: Fichier > Importer Dans le menu bibliothques > son choisir un son ( vous pouvez les tester avec le bouton lecture) Slectionner le bouton cr ( vous pouvez y accder galement par la fentre bibliothque) - choisir Modifier pour accder la scne symbole - ajouter un calque son dans le scnario - dans ce calque nomm son, crer une image-cl correspondant l'tat abaiss - positionner le curseur sur cette image - faire glisser le son de la bibliothque vers la scne - revenir la scne principale et tester l'animation.

2- Des images en action

Il s'agit d'affecter une action une image-cl de la base temporelle pour que l'animation excute une opration lorsqu'elle atteint cette image. Les actions d'images doivent tre places dans un claque distinct.

Boucle de prchargement

Analyser l'animation terreur.fla dans le dossier exemples

INTRODUCTION A LA PROGRAMMATION DES ACTIONS

On a vu jusqu' prsent la construction d'actions simples associes des boutons ou des images, ce dernier paragraphe aborde la programmation d'actions sous Flash.

Modification de la proprit d'un movie-clip ( Get Property, Set Property)

Set Property ("/p", Rotation) = GetProperty ("/p",_rotation)+10
- set property: permet de modifier une proprit de l'occurrence - get property: permet de rcuprer la proprit concerne - "/p" dsigne le nom de l'occurence

Examiner l'animation poisson.swf et son fichier source poisson.fla Le poisson subit une rotation de 10 pixels chaque clic de souris. Le bouton a t programm comme suit:

Utilisation d'une variable (Set Variable)

Examiner l'animation bonjour.swf et son fichier source bonjour.fla

Initiation Flash 4

Mostafa Kriat. Septembre 2000

LES EVENEMENTS-SOURIS (mouse event)

L'insertion d'une action de bouton gnre un vnement-souris qui est utilis comme dclencheur de l'action. Le logiciel Flash dispose d'une srie d'vnements supplmentaires pour remplacer l'vnement "clic" gnr par dfaut. Pour modifier les vnements souris il faut mettre On () en surbrillance - Appuyer: l'action se produit si vous appuyez avec la souris - Relcher l'action si vous appuyez avec la souris et vous relchez ensuite (clic standard) - Relcher en dehors: l'action se produit quand vous relchez en dehors du bouton - Roll Over: l'action se produit quand le pointeur passe au-dessus du bouton (attention trs sensible) - Roll Out: l'action se produit quand le pointeur quitte le bouton. - Faire glisser au-dessus: l'action se produit lorsque le bouton de la souris est enfonc passe au-dessus du bouton, le quitte puis revient au-dessus du bouton. - Faire glisser en loignant: l'action se produit lorsque le bouton de la souris est enfonc passe au-dessus du bouton et le quitte. - Touche: l'action se produit lorsque la touche clavier spcifie est enfonce.

N voir le fichier mouse_event.swf dans le dossier exemples

LES ACTIONS
Les instructions pouvant tre associes aux images ou aux boutons:
Instruction Go To and stop actions Paramtres permet d'atteindre directement une - Scne: dsigne une scne de destination image ou une scne prcise dans une - Image: spcifie une image dans une scne - contrle: Go To and Play animation. permet de charger un document partir - URL: dsigne l'adresse (absolue ou relative) document d'une URL spcifique dans une fentre du - Fentre: dsigne la fentre o le document particulire doit tre charg - Variables: dtermine s'il faut utiliser GET ou POST pour envoyer les formulaires permet d'excuter des animations - Action: dtermine s'il faut charger une supplmentaires sans fermer le Flash animation, dcharger (unload) une animation ou charger des variables. Player - URL: dsigne l'adresse (absolue ou relative) du fichie swf - Emplacement: spcifie un niveau ou une cible. L'animation principale possde le niveau 0. Les animations sont ensuite empiles dans les niveaux suprieurs (1,2) permet de prendre le contrle d'un clip - Target: indique le scnario devant tre d'animation diffrent ou d'une autre contrl. animation. Elle permet de crer des objets imbriqus, menus droulant, interrupteurs.. Permet de vrifier si le contenu d'une - Scne: dsigne une scne de destination image spcifique est disponible. Elle - Image: spcifie une image dans une scne Is permet de crer une squence de prchargement (chargement en cours, patientez !).

Get URL

Load Movie

Tell Target

If Frame Loaded

permet de dplacer un clip d'animation - Dmarrer action de glisser: lance le Drag movie clip pendant que l'animation est en cours dplacement du clip d'animation d'excution

Initiation Flash 4

Mostafa Kriat. Septembre 2000

PUBLICATION ET INTEGRATION DES ANIMATIONS DANS UN SITE WEB

Contrairement aux mdias standards du web, le texte et l'image, le shockwave , issu d'une animation flash, ne fait pas partie des formats reconnus par dfaut par tous les navigateurs (Except les dernires versions de IE). De ce fait la lecture des animations ncessite un module (plug-in) Shockwave Flash conu et diffus gratuitement par Macromedia. Les dernires versions de Quicktime et de Real Player prennent en charge les animations au format flash (.swf). Le module Shockwave gre le chargement de l'animation et son affichage en flux continu (streaming); cela signifie que le navigateur commence jouer l'animation avant que celle-ci ne soit entirement charg sur le poste client. Outre le format Flash Player, vous pouvez exporter depuis Flash des images fixes ou animes sous diffrents formats : GIF, JPEG, PNG, BMP, PICT, QuickTime et AVI.

1- Optimisation des animations avant publication

Afin de rduire le temps de tlchargement, il est ncessaire d'optimiser l'animation en suivant les instructions : - Utilisez des symboles pour tout lment apparaissant plus d'une fois - Chaque fois que cela est possible, utilisez des animations interpoles - Evitez les lignes en tirets, en pointills ou lignes non justifies - Utilisez des calques diffrents pour diffrencier les lments anims et les lments statiques - Limitez le nombre de polices et de styles de polices - MP3 est le format audio le moins volumineux, utilisez-le autant que possible - Evitez d'animer les bitmaps ; utilisez-les comme lments statiques ou d'arrire-plan - Groupez les lments autant que possible - Utilisez les dgrads avec parcimonie

2- Exportation et publication
Pour publier une animation Flash dispose de deux commandes accessibles via le menu Fichier. La commande Exporter l'animation et la commande Publier.

V Exportation - exporter l'animation balle1.fla dans les formats de votre choix l'aide de la commande Fichier > Exporter l'animation Les formats obtenus par la commande exporter. Animation Squence d'images Squence Gif (.gif) Adobe illustrator (.ai) Shockwave (.swf) Squence jpg (.jpg) QuickTime (.mov) Squence bmp (.bmp) Window AVI (.avi) Squence png (.png) Squence Gif anim (.gif) Squence wmf (.wmf, PC) Lecteur FutureSplash (.spl) Squence PICT (Mac)

PNG est le seul format bitmap multi-plateforme qui prenne en charge la transparence (comme Canal Alpha).
Avant de publier on doit spcifier les types de fichier publier via la commande Paramtres de publication du menu Fichier. Par dfaut seules deux options sont coches: le format Flash (.swf) et la page Html support. - publier l'animation balle1.fla en html, Quicktime (.mov), projecteur Windows (.exe), projecteur Mac (.hqx).

Publication

Le format Quicktime n'est obtenu qui si on dispose de la version

3- Tester le chargement de l'animation

4 du logiciel.

Avant de charger l'animation sur le web, il est recommand de tester la vitesse de tlchargement l'aide du testeur de bande passante. - choisir Contrle > Tester la scne ou Contrle > Tester l'animation - slectionner une vitesse la vitesse de modem tester: 14,4 Kbps, 28,8 Kbps ou 56 Kbps - choisir Afficher > Testeur de bande passante pour visualiser le graphique des performances de tlchargement.

Test

REFERENCES
- Aide de Flash 4.0 version franaise - Macromedia Flash 4. Mathieu Lavant. Collection L'expert de Sybex. 1999 - Flash 3 (Flash 4). Osman Eyrolles Multimdia. 1998 et 2000 - www.praktica.com (fr) - www.ivanb.com/zf1.htm (fr)

- www.multimania.com/flashtv/ (fr) - www.flashexpress.net (fr) - www.flashzone.com (Ang). - www.flashkit.com (Ang) - www.flashresources.com (Ang)
Initiation Flash 4 Mostafa Kriat. Septembre 2000