|
2. LA TIMELINE
La Timeline permet de contrôler
les étapes de votre animation dans le temps, à travers les
différentes images clés placées sur les différentes
pistes (calques). Pour les habitués du Logiciel Director, une simple
petite période d’adaptation suffira pour maîtriser la
manipulation de ces nouvelles pistes.
|
Comme vous pourrez l’observer,
dans cette version 4 de Flash, la Timeline peut à présent
être une fenêtre indépendante de la scène. Il
suffit de la saisir par la zone grise située au dessus du nom des
calques (quadrillé en rouge sur la copie d'écran ci-dessous)
et de la tirer en dehors de son emplacement, vers le bas de l’écran
par exemple.
|
 |
 |
| |
|
| Le
calque : En
théorie, chaque composant de votre animation doit se trouver sur
sa propre " piste ". Il est en effet plus pratique et
plus facile de manipuler l’occurrence d’un symbole si elle se
trouve sur un calque (gestion des plans, afficher ou masquer un calque,
suppression…). Dans le cas d’une interpolation, vous n’avez
pas le choix, une occurrence qui doit se déplacer ou changer de taille
ou encore changer d’aspect d’un point de vu chromatique, devra
impérativement être seule sur un calque. |
|
|
Le calque sans attributs qui a pour seul but
de recevoir les différentes occurrences que vous placez sur la
scene.
|
 |
| Le
calque de guide de déplacement contient le tracé que devra
suivre une occurrence placée sur un calque situé sous le calque
du guide de déplacement. Observez l’icône qui le caractérise :
Dans l’exemple ci-dessous il porte le nom " Guide :
Balle ".
|
 |
| Le
calque du masque contient la forme au travers de laquelle on pourra
voir une partie (de la forme du masque) du calque situé sous le calque
du masque. Observez l’icône qui le caractérise :
Dans l’exemple ci-dessous il porte le nom " Masque ".
La technique du masque comporte toujours deux calques.
|
 |
| Les
attributs de calque : Flash 4.0 ne possède plus de menu
local déroulant pour définir les attributs d’un calque.
Un simple clic dans la colonne de l’œil, du verrou ou du tracé
permet de masquer, bloquer (afin d’éviter la sélection)
ou afficher en mode tracé, la ou les occurrences située(s)
sur ce calque. Un double-clic sur l’icône située à
gauche du nom des calques, affiche une fenêtre d’attribut du
calque. |
 |
|
Nom (Name) : Nom du
calque
Visible (Show) :
Affiche/Masque le calque. (Equivalent à un clic sur l’œil
du calque).
Verrouillé (Lock) :
Interdit la sélection des occurrences situées sur ce calque.
(Equivalent à un clic sur le verrou du calque).
Normal : Calque sans
attribut.
Guide : Calque contenant
le tracé sur lequel un objet peut suivre une interpolation.
Guidé (Guided) :
Calque contenant l’objet en mouvement interpolé.
|
Masque (Mask)
: Calque contenant l’objet qui sert de masque.
Masqué (Masked) :
Calque contenant l’occurrence qui sera partiellement visible au travers
du masque.
Couleur (Outline Color) :
Lorsque vous affichez votre calque en tracé, celui-ci aura un contour
de tracé de cette couleur.
Hauteur (Layer Height)
: Flash 4 permet d’augmenter du double ou du triple la hauteur
d’un calque. Très pratique pour un calque contenant seulement
un son. Cela permet de voir la représentation du son.
|
| |
|
|
La graduation de l’échelle
de temps : Située en haut de
la timeline représente un nombre d’images. Chaque animation
possède sa propre cadence de déplacement de la tête
de lecture. Celle ci est fixe durant tout le déroulement d’une
animation. Dans la version 4 de Flash, le maintien de la tête de
lecture (Rectangle rouge) suivi de son déplacement par un glisser-déplacer
permet l’écoute du son si un son a été placé
sur un calque.
|
 |
|
En haut à droite de la timeline,
un menu local déroulant vous permet de zoomer sur la taille des
cases de calque. Les deux dernières commandes vous permettent de
visualiser les différentes images de votre animation dans les cases.
|
 |
| |
|
|
Bouton calques : Situés en bas à
gauche de la Timeline, ils permettent de :
Le bouton calque blanc (avec le signe+) :
Créer un nouveau calque.
Le bouton calque bleu (avec une petite vague)
: Créer un calque de guide de déplacement.
La corbeille : Supprimer un calque sélectionné
préalablement.
|
|
| |
|
|
Boutons onions skin :
Ces boutons permettent d'afficher les différentes
étapes d'une trajectoire (Tweening ou interpolation)
|
Le
bouton contenant un trait et un carré rouge : Déplace
l’ascenseur horizontal automatiquement afin de décaler l’échelle
de temps de la timeline jusqu’à l’image où se trouve
la tête de lecture. |
|
Bouton
bleu N°1 : Affiche les différentes étapes
d’une interpolation.
Bouton
bleu N°2 : Affiche les différentes étapes
d’une interpolation en mode tracé.
Bouton
bleu N°3 : Affiche uniquement les étapes (images)
clés.
Bouton
comprenant 2 crochets noirs Affiche les poignées délimitant
la zone active des onions skins.
|
 |
| |
|
|
Zone d’affichage des images :
La première information affiche le numéro de l’image
actuelle (Le 1, derrière les 2 crochets noirs). Plus précisement,
celle sur laquelle se trouve la tête de lecture. La deuxième
case indique la cadence de l’animation. 12 images par secondes (12
fps ou ips) signifie que la tête de lecture doit défiler
sur 12 images avant qu'une seconde s'écoule. La dernière
case affiche le temps écoulé , exprimé en secondes.
|
|
| 3.
LA SCENE
La
surface de travail sur laquelle se droule votre animation s'appelle la
scne. Elle possde deux attributs. Ses dimensions (largeur et hauteur
en pixels) et sa couleur.
En aucun ca elle pourra tre transparente
sur une page html mais elle peut tout de même prendre la couleur
de la page (sauf si vous avez un motif). Dans le logiciel Director la
scène peut être transparente avec l'encre "Fond transparent".
|
|
|
La
scne se trouve dans une fentre et la timeline dans une autre. Par dfaut
cette dernire est malgrs tout attache celle de la scène ce
qui donne l'impression que scène et Timeline ne font qu'une (seule
fenêtre) comme c'tait le cas dans Flash 3.0 .
|
La Timeline peut
être disposée sur les 4 côtés de la scène.
Il suffit de saisir
la timeline par la partie supérieure gauche de celle-ci est de
la tirer en dehors de sa zone (Zone quadrillée rouge dans la copie
d'écran ci-dessus).
|
| |
|
|
Les onglets :
Le principe de
la navigation au sein de la fenêtre de la scène a été
entièrement révisé. Un système d’onglets
permet de passer rapidement du mode d’état d’édition
des symboles à la scène.
|
Il faut tout de
même reconnaître que ce mode d’édition posait
un certain nombres de problèmes dans la version 3 de Flash.
Pour les novices,
la distinction du passage de la scène à la fenêtre
d’édition des symboles n’était pas évidente
à réaliser.
|
|
Il était
très difficile de caler un symbole sur la scène (par rapport
aux autres) lorsque celui-ci venait d’être édité
dans la fenêtre d’édition des symboles.
Vous pouvez à
présent éditer un symbole de trois manières différentes.
Dans une fenêtre séparée de la scène, dans
la même fenêtre que celle de la scène (cette dernière
disparaît alors) ou directement sur la scène. Cela facilite
les modifications pour les pré visualiser dans leur contexte définitif
(CF Chapitre sur les symboles).
|
 |
| |
|
|
Les boutons :
Pour une édition rapide des scènes et symboles, deux boutons
situés dans le coin supérieur droit de la fenêtre
de la scène ont été introduit, facilitant ainsi l'accès
aux différents symboles de l'animation en cours.
|
|
| |
|
| Propriétés
de la scène : Un double clic
dans la zone d’affichage de la cadence de l’animation permet toujours
d’accéder à la fenêtre des propriétés
de l’animation. |
 |
|
Cadence d’images :
Définit le déplacement de la tête de lecture. Cette
vitesse est fixée pour toute la durée de l’animation
et ne peut changer d’une scène à l’autre. Si vous
loadez un fichier swf avec une cadence différente. Ni l’une
ni l’autre ne seront respectées.
Dimensions :
Définit la largeur et la hauteur de votre scène en pixels.
Ces valeurs ne sont qu’à titre indicatif dans Flash. Il est
important de rappeler qu’un fichier swf importés dans une
page HTML ou Director peut ensuite être redimensionnée sans
aucun risque d’une quelconque perte de qualité. La fluidité
de votre animation peut éventuellement être modifiée
à la baisse.
|
Ajuster :
Le bouton " Imprimante "
permet de régler les dimensions de la scène à celle
des réglages du format d’impression.
Le bouton le plus
intéressant est sûrement celui du " Contenu ".
Celui-ci permet en effet de régler les dimensions de la scène
à la surface utilisée par toutes les occurrences de toutes
les images de l’animation sur la scène. A la fin d’un
projet, Flash calcule automatiquement pour vous la largeur et la hauteur
minimale de votre scène.
|
|
Espacement :
Permet de régler le pas de la grille exprimé en pixels.
Afficher/Masquer
la grille: Elle
peut être magnétisée ou sans magnétisme. Un simple
clic sur le fer à cheval situé dans le bas de la barre d’outils
suffit à basculer d’un état à l’autre.
Couleurs de
grille : Elle peut changer de couleurs selon la teinte dominante de
votre scène. Il est en effet plus simple de " repérer "
si la couleur de grille est très contrastée par rapport
à celle de la scène.-
|
|
|
Couleur d’arrière-plan :
Elle définit la couleur de la scène. Rappelons que celle-ci
ne peut être transparente dans une page HTML alors qu’elle
peut l’être dans Director. La couleur de la scène d’une
animation importée par un load dans une autre animation ne sera
pas visible est donc transparente car seule la couleur de la scène
qui load garde son fond.
Unités
de règle : Permet de changer l’unité des règles
affichées sur le haut et la gauche de la fenêtre de la scène.
Rappelons que les repères ne sont toujours pas disponibles dans
Flash 4.
|
Enregistrer
comme défaut : Après avoir réglé
tous ces paramètres, ce bouton vous donne la possibilité
de mémoriser toutes vos préférences. Vous pourrez
ainsi créer d’autres animations avec les mêmes propriétés
d’animation.
Vous découvrirez
plus loin de ce chapitre qu’il existe une palette des scènes.
Par ailleurs, le raccourci clavier (Commande-E) - (CTRL-E) reste une solution
rapide pour l’édition d’un symbole.
|
|
4. LES BIBLIOTHEQUES
Pour réaliser une animation ,
il est nécessaire de disposer de symboles. Nous découvrirons
plus loin dans ce chapitre, l’importance des symboles. D’une
manière générale, ils représentent les différents
composant d’une animation tels que les décors, textes, objet
fixes ou en mouvement.
|
|
|
Trois types de bibliothèques :
La bibliothèque de l’animation :
Chaque nouveau document comprend sa nouvelle bibliothèque qui contient
tous les symboles de l’animation. Un simple (Commande-L) - (CTRL-L)
suffit à remplacer l’accès à la commande Librairie
du menu Fenêtres.
- Les bibliothèques de Flash accessibles
par le menu "Bibliothèques".
- Vos propres bibliothèques :
Vous pouvez agrandir le menu "Bibliothèques" en y ajoutant
vos propres bibliothèques. Placez simplement l’animation comprenant
la distribution où vos symboles ont été crées
dans le dossier Bibliothèques qui se trouve dans le dossier Flash
(Celui dans lequel se trouve l’application).
N.B. : Si vous faites glisser le symbole d’une
quelconque bibliothèque sur la scène de votre animation
en cours, le symbole viendra se placer automatiquement dans la bibliothèque
de votre animation.
ATTENTION : Il est très important de fermer
la bibliothèque d’une animation avant d’ouvrir une autre
animation, car la bibliothèque de l’animation précédente
reste affichée à l’écran. Il y a donc un risque
de confusion.
|
 |
| |
|
|
Les symboles :
On distingue trois types de symbole
et quatre médias.
|
Le graphique est un simple
élément qui possède sa propre identité dans
une animation. Un type (le type graphique) le définit et il porte
un nom . Une forme créée avec les outils de dessin de Flash
ne pourra être interpolée (ex : déplacement,
opacité…) si celle-ci n’a pas été transformée
en symbole de type graphique (ou bouton ou movie clip).
|
|
Le bouton est un élément
qui possède également sa propre identité mais il
a la particularité d’avoir 3 états. En effet, un bouton
présente un aspect précis lorsque le curseur n’est
pas dessus puis il en affiche un autre qui représente le bouton
survolé et enfin un autre pour le bouton enfoncé.
|
 |
|
Le clip est également
un élément qui possède un nom et un type mais il
présente deux particularité. Il est utilisé pour
afficher sur la scène des objets animés et son occurrence
(sa représentation sur la scène) porte un nom. Il est ainsi
contrôlable par les actions Flash.
|
Texte, image, son et vidéo
peuvent ainsi être utilisés dans vos animations plus ou moins
interactives. Un son n’a pas besoin d’être transformé
en symbole, alors qu’il sera conseillé de transformer une
image en symbole si on souhaite la contrôler aux travers des scripts
(actions).
N.B. : Il est très important
de faire la différence entre le symbole et l'occurrence. Le premier
porte ce nom jusqu’au moment ou il passe sur la scène. Il
ne s’appelle plus alors symbole mais occurrence.
|
|
Bitmaps et vectoriel :
Flash propose des outils de dessin assez puissants
et performants mais ils présentent certaines limites. C’est
pourquoi il vous est possible d’importer des images aux formats suivants
:
…sans oublier le format BMP de Windows.
|
Ce
livre a été rédigé à partir de la version
4.0 Bêta 3 et l’importation de fichiers Illustrator 8.0 pose
encore quelques problèmes comme cela était le cas dans la
version précédente. Vous devez enregistrer vos fichiers au
format Illustrator 7.0. |
|
Une forme créée dans
Illustrator, importée ou copiée-collée vers Flash
peut encore être éditée. Il faudra d’abord " séparer "
cet import qui n’est pas encore une forme.
1) Sélectionner l’outil de la flèche,
2) Cliquez sur la scène afin de désélectionner
toute sélection en cours,
ou
2) Faites un clic sur le bouton droit de votre souris
(CTRL+ clic pour les Macintosh)
3) Sélectionner l’import d’Illustrator
qui se trouve sur la scène,
4) Modifier/Séparer.
|
 |
|
Les sons :
Pour sonoriser vos animations vous pouvez utilisez
des sons importés aux formats :
- AIFF,
- Wave.
Lorsque vous importez un son, Flash
sera capable de le compresser au standard MP3 avec les réglages
que vous lui donnerez. Vous pouvez directement importer des fichiers MP3
et garder les réglages par défaut.
|
Les vidéos :
Nous abordions au début de
ce livre, le problème du positionnement du produit Flash sur le
marche du multimedia et nous étions arrivé à la conclusion
suivante. La puissance des outils proposés à travers de
cette version 4, font de Flash un logiciel qui devrait découvrir
une nouvelle vie sur le marché du Off-Line. Le fait de pouvoir
intégrer de la vidéo dans les animations Flash 4.0 ne présage
pas d’une anticipation de la part de Macromedia sur les débits
éventuels dans les mois à venir. La société
leader a tout simplement prévu que ce produit rentrera dans les
mois à venir dans les agences et studio de création de CD-ROM.
|
|
5.
LES PALETTES
A
l’heure où les logiciels proposent une dizaine de palettes,
voire une vingtaine, Flash n’en propose que 7 accompagnées
d’une barre d’outils et d’une fenêtre de couleurs.
A l’exception de cette dernière toutes les palettes peuvent
se placer dans une seule fenêtre en les saisissant par leur onglet
respectif, à la manière des onglets des produits Adobe.
|
|
| |
|
|
Le
contrôleur : Cette palette permet
de contrôler le déroulement de votre animation. Lecture,
arrêt, remise à zéro, image par image avant et arrière.
Cette palette manque d’intérêt car les deux fonctions
les plus utilisées en animation, la lecture et l’arrêt,
sont accessibles directement par la touche Entrée (située
en bas à droite du clavier de votre ordinateur). Regrettons tout
de même que le raccourci clavier de remise à zéro
de la tête de lecture soit si compliqué (Commande-Alt-R)
pour Mac (CTRL-Alt-R) pour Windows.
|
 |
| |
|
|
La
palette Scène : Cette
palette permet de gérer la création et la suppression des
différentes scène qui composent l’animation. Le bouton
propriétés permet simplement de renommer la scène
sélectionnée dans la liste.
Astuce :
Vous pouvez créer un scène modèle et la dupliquer
à l’aide du bouton " Dupliquer ". Cette
manipulation peut vous faire gagner du temps dans la réalisation
de vos projets.
|
 |
| |
|
|
La
palette Image : Elle présente
les différents attributs de l’image sélectionnée.
Son nom et le type (statique ou animé) d’image. Elle affiche
également le nom du son audible au passage de la tête de
lecture sur l’image ainsi que les actions qui s’y rattachent.
N.B. : Regrettons tout de même
que les actions ne peuvent être éditées directement
dans la palette. Le copier-coller reste disponible de la palette vers un
autre endroit. |
 |
| |
|
|
La palette Objet :
Elle présente les différents attributs de l’objet
sélectionné. L’objet peut être un graphique,
un bouton ou une animation. Cette caractéristique s’affiche
dans le haut de la palette.
Les positions X et Y,
exprimées en pixels, indique la position du bord gauche de l’occurrence
par rapport à la gauche de la scène et le bord supérieur
de l’occurrence par rapport au haut de la scène. La case " Centre "
permet de préciser lors d’un changement de l’occurrence
si cette dernière a pour point d’attache le centre ou le coin
supérieur gauche.
Le bouton " Rétablir
" permet de redimensionner l’occurrence à ses dimensions
d’origine, lorsqu’elle a été placée sur
la scène pour la première fois.
Les actions rattachées
à une occurrence sont également visibles dans cette palette
pour avoir un aperçu rapide du comportement ce celle-ci.
|
 |
| |
|
|
La palette Transformer :
Une occurrence peut être transformée directement sur
la scène par le biais des deux boutons qui se trouvent dans le
bas de la barre d’outils mais aussi par cette palette. Vous pouvez
ainsi régler une mise à l’échelle de l’occurrence,
exprimée en pourcentage.
Si vous décochez " Uniforme ",
seule la largeur peut être modifiée sans toucher à la
hauteur et réciproquement.
|
 |
| |
|
|
La case de rotation
peut être transformée en cases d’inclinaison si vous
cochez la case appropriée.
Astuce :
Le raccourci clavier Alt-Commande-S (Mac) Alt-CTRL-S (Windows) permet
d’afficher directement une boite de dialogue pour faire subir une
mise à l’échelle ou une rotation de l’occurrence
sélectionnée.
|
 |
| 6.
ZOOM ET DEPLACEMENTS |
|
|
Flash 4.0 présente l’avantage
d’avoir un pourcentage de zoom de 2000 %, même si le menu prévu
à cet effet ne propose que 800% comme dernière valeur. Vous
pouvez sélectionner le 10% de la copie d’écran ci-dessous,
puis saisir le taux d’agrandissement ou de réduction souhaité.
|
 |
|
La sélection des outils de la
main et des loupes peut se faire par la un clic dans la barre d’outils
mais aussi au clavier. La lettre H permet de sélectionner la Main
et la lettre M pour la loupe. Ces deux méthodes ne sont pas les
plus rapides, voici une autre solution.
Pour les adeptes des
produits Adobe et pour les autres, notons dès à présent
que les trois raccourcis clavier suivants sont aussi valables :
|
Commande-Barre d’espace donne la
loupe pour le zoom avant.,
Commande-Barre d’espace-Alt donne
la loupe pour le zoom arrière,
Barre d’espace donne la main pour
déplacer la scène dans sa fenêtre.
|
|
Notons également
que les doubles clics suivants fonctionnent de la même façon :
Double clic sur
l’outil " Loupe " dans la barre d’outil
pour un affichage de la scène à la taille réelle
(100 %)
Double clic sur
l’outil " Main " pour un affichage maximum de
la scène dans la limite de la fenêtre (Taille ajustée
à celle de la fenêtre).
|
ATTENTION
: Il est important de rappeler que la taille de votre animation (taille
de la scène), n’a pas tellement d’importance. En effet,
comme nous l’avons vu dans le premier chapitre, le fait de travailler
en vectoriel permet un agrandissement ou une réduction de la scène
dans les logiciels d’intégration HTML ou dans Director. Ne faites
pas des scènes trop petites. |
|
7. MODE
D'AFFICHAGE
Les différentes occurrences placées
sur la scène peuvent être affichées de manières
différentes. Dans certains cas, la mise en page de votre scène
sera si complexes, comprenant donc tellement d’occurrences, qu’il
vous sera possible d’accélérer son affichage. Pour
d’autres raisons, vous pouvez également souhaiter ne voir
que les contours de vos occurrences (les tracés), donc à
chaque souhait son mode d’affichage. Vous pourrez accéder
à tous ces réglages par le menu Affichage. Voici les différentes
possibilités.
|
|
|
Tracé :
Ce mode n’affiche ni couleur ni
détails afin d’accélérer le traitement de l’animation
et afficher les contours des occurrences.
|
 |
|
N.B. : Chaque contour s’affiche
de la couleur du calque. Un double clic sur l’icône située
à gauche d’un calque affiche la palette des propriétés
du calque. Vous pouvez alors sélectionner la couleur de contour
des occurrences.
N.B. : Un clic sur la case de tracé
du calque permet d’applique ce mode d’affichage localement sur
toutes les occurrences d’un calque.
|
 |
|
Rapide :
Ce mode de travail permet d’alléger
le microprocesseur de la machine tout en voyant votre animation au plus
proche de sa finalité. Les contours des textes et des formes ne
sont pas lissés.
Antialias :
Ce mode affiche les occurrences des
symboles au maximum de leur lissage sans traiter le lissage du texte.
Texte lissé :
Le mode d’affichage par excellence.
Tous les occurrences de la scène sont lissés.
|
 |
