3 scénario, images et calques - pearson.fr · nouveau document le choix par défaut actionscript...

Une fois donné à votre nouveau document Flash ses propriétés de base, vous allez le déve-

lopper sur la scène et dans le scénario. En composant vos écrans sur la scène, vous agis-

sez dans deux dimensions spatiales, voire trois. Dans le scénario, vous agissez également

dans deux dimensions. La première est temporelle, c’est celle des images, qui sont autant

de moments différents de l’application fi nale. La seconde est structurelle, c’est celle des

calques. En effet, comme dans n’importe quel autre logiciel d’infographie, chaque image

gagne à être décomposée en éléments répartis sur différents calques.

La complexité du travail d’intégration multimédia peut dérouter le débutant. Elle tient à ces

cinq dimensions que sont sur la scène, la largeur, la hauteur et la profondeur et dans le scéna-

rio, le temps et l’ordre d’empilement des calques. Dans ce chapitre, nous n’aborderons que

quatre de ces cinq dimensions. La profondeur 3D ne sera traitée qu’à la Fiche 39. Signalons

aussi qu’au Chapitre 5 nous rajouterons une dimension architecturale avec la notion de sym-

boles stockés dans la bibliothèque et instanciés sur la scène et dans le scénario.

Fiche 19 Créer un nouveau document

Propriétés de l’animation Future Splash, l’ancêtre de Flash, était un logiciel dédié à l’animation vectorielle. C’est la

raison pour laquelle on parle souvent d’animation Flash pour un document Flash. Lorsque

vous créez un nouveau document (Fichier > Nouveau) et que vous validez dans la fenêtre

Nouveau document le choix par défaut ActionScript 3.0, l’animation créée possède les

valeurs de propriétés illustrées Figure 19.1. En l’absence de toute sélection sur la scène, le

panneau Propriétés affi che ces propriétés de l’animation.

Figure 19.1Propriétés par défaut d’une animation.

3 Scénario, images et calques

Flashcs5.indb 119Flashcs5.indb 119 22/10/10 19:3722/10/10 19:37

© 2010 Pearson France – Flash CS5 – Gil Mathieu

120 Flash CS5

Par défaut, une animation a donc un arrière-plan blanc, sa scène fait 550 pixels de large

par 400 pixels de haut et son scénario est lu à 24 images par seconde (I/S). Pour accéder à

l’ensemble des propriétés de l’animation, cliquez sur le bouton Modifi er, à droite des dimen-

sions de la scène. La boîte de dialogue Propriétés du document s’affi che, reproduite à la

Figure 19.2. Vous pouvez également y accéder via la commande Modification > Document.

Figure 19.2La boîte de dialogue Propriétés du document.

Si un fond de scène uni vous convient, le même pour tous les écrans de l’animation, cliquez

sur la puce de couleur pour choisir la couleur de fond (voir Fiche 17). Dimensionnez votre

scène grâce aux champs Dimensions qui acceptent une valeur entre 1 et 2 880 pixels. Il est

important de faire ce choix d’emblée, car s’il sera toujours possible de modifi er ces valeurs

plus tard, vous serez par contre obligé de reprendre la composition de tous les écrans. Vous

avez deux alternatives à la spécifi cation numérique des dimensions : Imprimante donne à la

scène celles de la zone d’impression maximale, tandis que Contenu cadre sur le contenu en

ménageant une marge sur les quatre côtés.

La cadence, exprimée en images par seconde, est le débit d’affi chage des images que vous

souhaiteriez lors de la relecture de votre animation. Notez bien qu’il ne s’agit que d’un

souhait et que rien ne garantit que l’animation sera effectivement relue à cette cadence. La

valeur par défaut a longtemps été 12 I/S ; elle est depuis la version CS4 de 24 I/S, ce qui

est beaucoup demander (reportez-vous à la Fiche 26 pour un traitement plus détaillé de la

cadence).

Par défaut, les règles (décrites Fiche 7) sont graduées en pixels. La Figure 19.2 vous montre

que le menu Unités de la règle vous propose cinq autres choix.

L’option relative à la perspective 3D sera abordée à la Fiche 39.

Vos réglages faits, si vous prévoyez de produire toute une série d’animations qui partageront

ces valeurs de propriétés, vous avez tout intérêt à les établir comme valeurs par défaut en

cliquant sur le bouton homonyme.

CMD+J (Mac) ou CTRL+J (Windows) ouvre la boîte de dialogue Propriétés du document.

Racc

ourc

i



121Scénario, images et calques

Modèles de documentL’idée d’un modèle de document est de ne plus partir d’une animation vide, mais d’une ébauche.

Imaginons par exemple que vous développiez un support de formation se déclinant en un

ensemble de chapitres faisant chacun l’objet d’une animation séparée. Bien que différents,

les chapitres auront des éléments en commun : un canevas de mise en page défi ni par des

guides, du graphisme en fond d’écran, des boutons de navigation, des sons, du code Action-

Script, etc. Créez cette animation, puis au lieu de l’enregistrer classiquement, utilisez la

commande Fichier > Enregistrer comme modèle. Une première boîte de dialogue vous aver-

tit que les données de l’historique du fi chier SWF seront effacées au cours de l’opération.

Validez. Dans la boîte de dialogue suivante, renseignez les trois champs Nom (par exemple

Chapitre), Catégorie (Formation) et Description.

Ensuite, à chaque fois que vous créerez un nouveau chapitre via Fichier > Nouveau, cliquez

sur l’onglet Modèles de la boîte de dialogue. La Figure 19.3 reproduit cet onglet. Flash

vous est livré avec six catégories de modèles : Animation, Bannières, Fichiers d’exemples,

Lect. fi chier multimédia, Présentations et Publicité. Les modèles de cette dernière catégorie

constituent des ébauches on ne peut plus minimales puisqu’elles se contentent de donner à

la scène l’une des tailles de bandeaux publicitaires couramment utilisées sur la Toile, mais

vous pouvez explorer les Fichiers d’exemples ou les ébauches d’Animation, plus élaborées.

Dans notre exemple, il vous faudrait sélectionner le modèle Chapitre dans la catégorie For-

mation et vous auriez votre nouveau chapitre ébauché.

Figure 19.3La boîte de dialogue Nouveau à partir d’un modèle.



122 Flash CS5

Vue d’ensemble de l’environnement d’intégrationLa Figure 19.4 montre à quoi ressemble l’environnement Flash CS5 dans l’espace de travail

Classique après création d’un nouveau document. Au chapitre précédent, vous vous êtes

déjà familiarisé avec le panneau Outils, la scène – sur laquelle vous avez dessiné – et le pan-

neau Propriétés. À droite du panneau Outils, la fenêtre de document affi che les animations

ouvertes sous forme d’onglets. Elle comprend de bas en haut, la scène, la barre d’édition

et une zone réservée aux deux onglets du scénario et de l’éditeur de mouvement. À droite

de la fenêtre de document se trouve la zone réservée aux différents panneaux. Sur la copie

d’écran de la Figure 19.4, tous sont réduits sauf le panneau Propriétés. À droite de ce dernier,

verticalement et regroupés en trois groupes d’onglets, on trouve successivement les icônes

de : Couleur, Nuancier ; Aligner, Infos, Transformer ; Fragments de code, Composants, Pré-

sélections de mouvements. Il ne s’agit ici que d’un premier contact. Les fonctionnalités de

ces éléments d’interface seront décrites dans les fi ches suivantes.

Figure 19.4L’environnement dans l’espace de travail Classique.

La version Windows de Flash offre en plus une barre d’outils Principale contenant des bou-

tons d’accès raccourci aux commandes les plus courantes (voir Figure 19.5).

Figure 19.5La barre d’outils Principale.




Fiche 20 Composer des écrans

Le premier aspect du travail d’ intégration s’apparente à un exercice de mise en page. On

pourrait parler de mise en écran. Une fois que vous aurez créé ou importé dans votre anima-

tion des éléments de médias visuels de divers types, vous devrez les intégrer dans différents

écrans. Ces écrans pourront contenir des formes vectorielles (Chapitre 2), des animations

imbriquées (Fiche 36), des textes (Chapitre 6), des images bitmap (Chapitre 7), des vidéos

(Chapitre 9) ou encore des composants (Chapitre 10). Souvent, ces éléments de médias

seront stockés dans la bibliothèque, décrite à la Fiche 33.

Dans le contexte du dessin vectoriel, nous avons déjà évoqué les aides à la composition que

sont l’ outil Zoom, l’outil Main, les règles, la grille, les guides et l’ accrochage. Ces outils res-

tent pertinents pour n’importe quel média visuel. Reportez-vous à la Fiche 7, section Aides

au dessin et à la composition pour plus de détails.

Le panneau Aligner constitue un outil de choix pour la composition des écrans. Il est repro-

duit Figure 20.1. Sélectionnez sur la scène avec l’outil Sélection les éléments à traiter. Par

défaut, la référence est le rectangle englobant cette sélection d’éléments, mais si vous enfon-

cez le bouton Sur la scène, la référence est le cadre de la scène. Cliquez alors le bouton

correspondant à l’opération voulue.

Figure 20.1Le panneau Aligner.

La première série de boutons concerne les opérations d’ alignement proprement dites. Les

trois premiers pour l’alignement vertical (Aligner les bords gauches, Aligner les centres

verticalement et Aligner les bords droits) et les trois autres pour l’alignement horizontal.

La seconde série de six boutons concerne les opérations de distribution d’éléments à inter-

valles réguliers. Il s’agit de placer les bords ou les axes de chaque élément (les six mêmes

que pour l’alignement) à égale distance les uns des autres. Cela implique que si les éléments

sont de tailles variables, l’espacement entre eux sera lui aussi variable.



124 Flash CS5

Les deux opérations d’espacement horizontal ou vertical produisent le même espacement

entre éléments, même si ces derniers sont de tailles différentes.

Enfi n, il est possible de redimensionner automatiquement les éléments, c’est-à-dire mettre

tous les éléments à la même hauteur, ou à la même largeur, ou à la même taille (hauteur et

largeur). La dimension retenue est la plus grande parmi les éléments sélectionnés.

Rappelons que vous pouvez caler votre sélection à l’aide des fl èches du clavier : le déplace-

ment est de 1 pixel d’écran et de 10 si la touche MAJ est enfoncée. Cela veut dire que la scène

étant affi chée à 400 %, le déplacement sera d’un quart de pixel de la scène et de 2,5 pixels

de la scène si la touche MAJ est enfoncée.

Les options d’accrochage Accrocher aux objets, Accrocher à la grille et Accrocher aux

guides sont inopérantes lorsque vous calez ainsi à l’aide des fl èches du clavier. Par contre, la

commande Affichage > Accrochage > Accrocher aux pixels fonctionne, qui plus est quelque

soit le pourcentage d’affi chage de la scène. La conséquence contradictoire avec l’intitulé de

la commande est qu’un élément peut avoir pour coordonnée un nombre décimal et non un

nombre entier de pixels !

Les calques guides sont un dernier auxiliaire de composition de la scène. Ils sont traités à la

section Calques non standard, Fiche 22.

CMD+K (Mac) ou CTRL+K (Windows) affi che le panneau Aligner.

Fiche 21 Défi nir les contenus successifs du scénario

ImagesComposer un écran, c’est travailler dans les deux premières dimensions, spatiales, de l’in-

tégration : la largeur et la hauteur de la scène. La troisième dimension de l’intégration mul-

timédia est le temps. L’axe horizontal du scénario représente la ligne du temps qui s’écoule

de gauche à droite. Chaque colonne du scénario représente une unité insécable de temps,

une image. Nous avons dit que Flash a débuté comme logiciel d’animation. Sa métaphore

fondatrice est le cinéma d’animation. En fi lant cette métaphore, chaque image de l’anima-

tion informatique – donc chaque colonne du scénario – correspond à un photogramme de

fi lm d’animation.

Jusqu’à présent, vous avez appris à dessiner sur la scène et à composer des écrans sur cette

même scène. Nous ajoutons maintenant la dimension temporelle : chaque écran est une

image de l’animation. Le scénario est une collection d’images. La scène affi che à un instant

donné le contenu d’une seule de ces images : l’ image courante est indiquée dans le scénario

par la tête de lecture. Glissez la tête de lecture sur la ligne de temps pour changer l’image

courante, donc l’affi chage de la scène.

Racc

ourc

i




À moins que vous ayez créé votre document à partir d’un modèle dont le scénario comporte

déjà un certain nombre d’images, votre nouvelle animation ne contient au départ qu’une

seule image. Si vous dessinez un contenu sur la scène et que vous prévisualisez l’animation

(Contrôle > Lire) celle-ci, puisque sa cadence est par défaut 24 I/S, va affi cher le dessin un

vingt-quatrième de seconde !

Pour augmenter la durée de l’animation, il faut lui ajouter des images. La commande Inser-

tion > Scénario > Image insère une image après l’image courante. Dans le menu contextuel

qui surgit au clic sur une image (voir Figure 21.1), vous trouvez également une commande

Insérer une image.

Figure 21.1Le menu contextuel des images.

Dans le scénario illustré Figure 21.2, on a inséré quatre images, puis cliqué dans la ligne du

temps à hauteur de l’image 3. Le numéro de l’image courante est affi ché en bas du scéna-

rio dans la barre d’état, à gauche de la cadence. À droite de celle-ci et fonction de celle-ci,

vous pouvez lire le temps écoulé en secondes depuis le début de l’animation pour atteindre

l’image courante. L’image initiale porte un petit cercle indiquant qu’il s’agit d’une image-

clé (nous y viendrons dans la section suivante). Le cercle est vide, ce qui dénote une image-

clé vide. En effet, la scène est encore vide de contenu. La dernière image (5) est indiquée

par un petit rectangle. Du cercle au rectangle, il y a ce que l’on appelle une plage d’images,

les images 1 à 5 ici. Par défaut, lorsque vous cliquez sur une image dans une plage, vous ne

sélectionnez que l’image cliquée. Mais si dans les préférences, catégorie Général, rubrique

Scénario, vous cochez l’option Sélection basée sur plages, au clic sur n’importe quelle image

de la plage, vous sélectionnerez cette dernière intégralement, donc ici les cinq images.



126 Flash CS5

Figure 21.2Après insertion de quatre images : une plage de cinq images.

Lorsque vous insérez une image, la tête de lecture reste en place si vous avez sélectionné

une image, mais en l’absence de sélection, elle passe à l’image suivante, donc à l’image qui

vient d’être insérée. Également, lorsque vous insérez une image, si vous avez sélectionné

une image dans un calque (les calques seront abordés dans la fi che suivante), l’insertion ne

concerne que ce calque. Par contre, en l’absence de sélection dans un calque (image dési-

gnée d’un clic sur la ligne du temps), l’insertion concerne tous les calques.

Vous pouvez rallonger une plage de plusieurs images en une seule opération d’insertion.

Sélectionnez un emplacement d’image au-delà de l’actuelle dernière image, puis insérez une

image. La Figure 21.3 donne en exemple en montrant le scénario avant et après l’opération.

Figure 21.3Rallonger de quatre images une plage.

Pour faire une sélection multiple d’images dans des calques : sélectionnez des images conti-

guës à l’aide de MAJ+OPTION+CLIC (Mac) ou MAJ+ALT+CLIC (Windows) et des images non

contiguës à l’aide de CMD+CLIC (Mac) ou CTRL+CLIC (Windows).

Si vous demandez l’insertion d’image après avoir sélectionné un certain nombre d’images

contiguës (éventuellement sur plusieurs calques contigus), vous dupliquez la sélection.

Ainsi, sur l’exemple de la Figure 21.4, la plage est rallongée de cinq images après avoir

sélectionné à l’intérieur cinq images contiguës.

Figure 21.4Insertion de cinq images dans une plage.




Lorsque vous aurez développé un scénario assez long, l’ascenseur de défi lement horizon-

tal du scénario sera bien pratique. Par contre, il arrivera souvent qu’après avoir fait défi ler

l’ascenseur, vous ayez perdu trace de la tête de lecture se trouvant en dehors de la portion

affi chée du scénario. Cliquez dans ce cas le bouton Centrer l’image (bouton rouge de la

barre d’état représentant la tête de lecture, visible Figure 21.2) pour recadrer l’affi chage du

scénario avec l’image courante au centre.

Vous pouvez déplacer une sélection d’images contiguës par glisser-déposer. Si vous la glis-

sez-déposez avec la touche OPTION (Mac) ou ALT (Windows) enfoncée, vous la dupliquez.

Vous avez la possibilité de donner un nom à une image. Sélectionnez la, puis dans le sous-

panneau Étiquette du panneau Propriétés, renseignez le champ Nom (le Type est par défaut

Nom). Le nom s’affi che alors dans le calque en regard d’un petit drapeau rouge. C’est

souvent utile pour repérer dans votre scénario des débuts de séquences d’animation (voir

Fiche 25). Ainsi, dans l’exemple de la Figure 21.5, la première image de l’animation géné-

rique d’accueil a été nommée.

Figure 21.5Nommage de la première image d’une séquence d’animation.

Pour supprimer une sélection d’une ou plusieurs images, utilisez la commande Supprimer

les images du menu contextuel des images (voir Figure 21.1).

Sachez enfi n que certaines animations Flash tout à fait sophistiquées ne contiennent qu’une

seule image ! En effet, certains développeurs adoptent parfois la position radicale qui

consiste à tout gérer par programmation ActionScript et leur scénario peut être vide ou ne

contenir qu’un calque d’une seule image contenant le code.

Images-clésEn animation traditionnelle, lorsque le dessin animé américain est devenu une industrie, sa

chaîne de production a été taylorisée : les auteurs animateurs n’ont plus dessiné que cer-

taines images-clés, laissant à des auxiliaires intervallistes (inbetweeners) le soin de dessiner

les images intermédiaires à intercaler entre deux images-clés pour assurer la transition fl uide

de l’une à l’autre. Nous verrons au chapitre suivant que l’animation informatique reprend ce

principe, l’intervallisation étant remplacée par l’interpolation par l’ordinateur.

Mais sans même parler d’interpolation, la fi nalité du scénario est de décrire l’évolution tem-

porelle de votre animation. Plus précisément, durant l’animation l’existence d’un élément



128 Flash CS5

visuel connaît des moments signifi catifs. Il y a au moins celui où l’élément apparaît sur

scène et celui où il disparaît. Entre les deux, éventuellement, il pourra y avoir des moments

où la valeur d’une certaine propriété de l’élément (sa position, son orientation, son opacité,

sa couleur, etc.) est modifi ée. À chacun de ces moments correspondra une image-clé.

Pour être tout à fait précis, en interpolation, il s’agira effectivement d’image-clé dans le contexte de l’interpolation classique (voir section “Scénario d’une interpolation classique”, Fiche 28) et d’image-clé de propriétés dans le contexte de l’interpolation de mouvement (voir section “Nouvelle approche de l’interpolation depuis Flash CS4”, Fiche 27).

En toute image-clé, il se passe quelque chose dans l’animation : apparition, modifi cation,

disparition. De sorte qu’une image-clé diffère toujours de l’image juste avant elle. En effet,

en dehors de toute interpolation, une image ordinaire n’est que la prolongation dans la durée

de l’image-clé qui la précède. La Figure 21.6 met cela en évidence : la tête de lecture est

en image 4, juste avant la seconde image-clé. En haut, le scénario est affi ché en mode habi-

tuel, tandis qu’en bas le même scénario est affi ché en mode Aperçu. Il est clair que la scène

affi che le dessin de l’image-clé initiale. Les images 1 à 4 sont identiques visuellement.

À la section précédente, nous avons appelé plage d’images la séquence d’images contiguës

depuis une image-clé (la première image de tout calque est toujours une image-clé) jusqu’à

la dernière image non vide du calque (dénotée par un rectangle). On appellera aussi plage

d’images la séquence d’images contiguës depuis une image-clé jusqu’à l’image précédant

l’image-clé suivante. L’exemple de la Figure 21.6 contient deux plages d’images et l’on y

constate que les images d’une plage sont homogènes visuellement. Lorsque vous double-

cliquez sur une image ordinaire (en dehors d’une image-clé), vous sélectionnez entièrement

la plage à laquelle elle appartient.

Remarquez que les images-clés de la Figure 21.6 ont toutes deux un contenu visuel : elles

sont dénotées par un cercle plein. Les images-clés des fi gures précédentes sont toutes des

images-clés vides : elles sont dénotées par un cercle vide. De plus, les plages d’images de la

Figure 21.6 ont toutes deux un contenu visuel : elles ont un fond gris. Les plages d’images

des fi gures précédentes sont toutes vides : elles ont un fond blanc.

Du point de vue informatique, les images ordinaires d’une plage d’images n’étant que la

prolongation de l’image-clé initiale de cette plage, elles ne nécessitent aucun codage. C’est

seulement au niveau des images-clés qu’il y a de l’information à encoder. Autrement dit, les

images ordinaires n’ont aucune incidence sur le poids de votre fi chier, seules les images-clés

l’alourdissent. Le scénario reproduit Figure 21.7 produira visuellement rigoureusement la

même animation que le précédent, mais puisqu’il n’est constitué que d’images-clés, il est

inutilement plus long à télécharger que le précédent. Ne créez des images-clés que là où

elles sont strictement nécessaires : apparition, modifi cation de propriété, disparition. Le seul

contexte dans lequel des images-clés en série se justifi ent est celui de l’animation image par

image (voir Fiche 26).




Figure 21.6Deux images-clés : deux plages d’images homogènes.

Figure 21.7Un scénario inutilement lourd ne comportant que des images-clés.

Voir les fi chiers FCS5_21a.fl a et FCS5_21b.fl a dans les exemples du livre.

Ligne du temps. Depuis qu’elle existe, l’animation exploite la persistance des images au

fond de notre rétine pour donner l’illusion d’un mouvement continu à partir d’éléments

discontinus, discrets. La pellicule d’un fi lm est une succession de photogrammes séparés.

Dans le cas d’un fi lm d’animation réalisé image par image, chacun de ces photogrammes

est une phase de l’animation. De même, le scénario d’une animation image par image sur

ordinateur est une succession d’images-clés contenant ses phases successives.

Notio

ns clé

s

La commande Insertion > Scénario > Image-clé insère une image-clé à l’image courante

(et non après, comme c’était le cas pour l’insertion d’image). Dans le menu contextuel qui

surgit au clic sur une image (voir Figure 21.1), vous trouvez également une commande

Insérer une image-clé. Le contenu par défaut de la nouvelle image-clé est une copie de celui



130 Flash CS5

de l’image-clé précédente, comme le montre la Figure 21.8. Vous devez ensuite modifi er ou

supprimer ce contenu par défaut – sinon pourquoi avoir créé une image-clé ?

F5 insère une image après l’image courante, F6 insère une image-clé à l’image courante. MAJ+F5 supprime une image. MAJ+F6 efface une image-clé.

Figure 21.8Insertion d’une image-clé sur une image existante (avant, après).

Vous pouvez également insérer une image-clé sur un emplacement vide d’image, c’est-à-

dire au-delà de la dernière plage du calque. Celle-ci est alors prolongée jusqu’à la nouvelle

image-clé, comme l’illustre la Figure 21.9.

Figure 21.9Insertion d’une image-clé sur un emplacement vide d’image (avant, après).

Lorsque vous insérez une image-clé, la tête de lecture passe à l’image suivante si vous aviez

sélectionné une image, mais en l’absence de sélection d’image dans un calque (image dési-

gnée d’un clic sur la ligne du temps), l’image-clé est insérée dans le calque de sommet de

pile et la tête de lecture reste en place.

Les règles de sélection multiple d’images-clés sont les mêmes que pour les images. En sélec-

tionnant dans le scénario, vous sélectionnez tout le contenu sur la scène. Réciproquement,

en sélectionnant un élément sur la scène, vous sélectionnez l’image-clé dans le scénario.

La commande Copier, à la différence de Copier des images, ne copie que le contenu sur la

scène (aucune image du scénario).

Racc

ourc

i



3 scénario, images et calques - pearson.fr · nouveau document le choix par défaut actionscript...

Documents