TUTORIAUX FLASH MX 2004

Flash Mx 2004

Niveau I

tutorial 18/22

Autobus dans la ville

Pour configurer votre interface de travail vous devez ouvrir ces panneaux: "menu du haut > Fenêtres"

Les outils à utiliser

Outil	Symbole	Descriptif	Raccourci
Le texte		Outil d'écriture qui se paramètre dans les options. On peut écrire du texte statique et non statique.	T
La transformation		Sur toute sélection, permet de modifier l'échelle, le biseau, la rotation, l'inclinaison. "Alt" permet de transformer symétriquement, "Ctrl" permet de déplacer les coins indépendamment	Q
Le pot de peinture		Permet de dessiner à main levée avec la couleur de remplissage (dégradé ou uni) Tailles et inclinaisons de brosses dans les options.	K

Créer un nouveau fichier depuis "Flash" "menu du haut > fichier > nouveau" A.S.2

Un nouveau document se crée en allant dans le "menu du haut > fichier > nouveau" ou "Ctrl+N"

Choisir le format de document ici "Flash" A.S. 2.0" qui signifie Action Script 2.0, le langage de programmation de "Flash", ainsi que A.S. 3.0 dernière génération.

Paramétrage du document

Au bas de l'interface par défaut nous avons un onglet propriétés (que l'on ouvre par le "menu du haut > fenêtre" s'il n'est pas ouvert).

Cet onglet "propriété" configure notre document de travail, taille en largeur, en hauteur, couleur de fond, vitesse de lecture des images. Nous allons régler notre document en 800 x 600 pixels, fond blanc, cadence de 25 images (frames) secondes. Nous allons enregistrer ces paramètres comme les paramètres par défaut à l'ouverture de "Flash".

Nous avons donc ici un document de 800 X 600 pixels, fond banc, débit de 25 images (frames) par secondes.

Créez un nouveau document dans flash.

I) Importer image

Dans notre document 800 x 600 x 25 images secondes, nous allons importer l'image "autobus_ville.jpg" sur la piste (calque1) puis renommer ce calque "ville".

"Menu du haut > fichier > importation > importer dans la scène" ou le raccourcis clavier "Ctrl + R" plus facile et plus rapide.

L'image vient se mettre au milieu de la scène sur la piste nommée "calque1" que nous allons renommer en "ville".

Au dessus de ce calque "ville" nous allons créer un nouveau calque nommé "texte".

II) Le texte

Dans ce nouveau calque "texte", au dessus du calque ville nous allons écrire le mot "AUTOBUS" à l'aide de l'outil texte .

Choisissons la police "Impact" dans la liste de l'onglet "propriétés" en bas de l'interface. Couleur blanche et taille 120.

III) La vectorisation (décomposer, séparer)

La particularité de flash est de travailler en mode vectoriel. C'est à dire avec des courbes, des points, des angles qui ne sont pas des pixels mais bien des tracés. Il suffit de zoomer sur un texte réalisé dans photoshop et de zoomer sur un texte dans flash pour bien visualiser la différence. Le texte de photoshop laisse apparaître des pixels sur les bordures des courbes.

Le texte est un objet un peu particulier, il possède des attributs d'écriture (on peut modifier l'écriture) et doit les conserver si on veut pouvoir modifier ou corriger un mot à n'importe quel moment de la création. Ces particularités de cet objet "texte" empêchent certaine manipulations comme la déformation. Pour pouvoir déformer un texte, on est obligé de le vectoriser, le décomposer... dans flash nous utiliserons le terme "séparer".

La séparation d'un objet "texte" est le fait de le transformer en objet "forme". Une fois cette opération effectuée, impossible de pouvoir modifier le texte. C'est une forme à présent.

La séparation se fait par deux possibilités, la plus simple est de sélectionner l'objet puis la touche "Ctrl + B" ou par le "menu du haut > modifier > séparer"

Gardons en mémoire la combinaison de touches "Ctrl + B" bien facile à retenir.

IV) La Déformation et ses options

Nous allons déformer notre objet "AUTOBUS" en utilisant les options de "déplacement angles" et déplacer chaque coin en saisissant la poignée de manière à incliner l'objet dans la perspective de la rue et de son point de fuite. Prenons comme repères visuels le haut des portes et des fenêtres du rez de chaussée et les bandes au sol de la rue.

Nous avons donc pour le moment deux calques

En dessous: le calque "ville" qui contient l'image importée.

Au dessus: le calque "texte" qui contient notre "AUTOBUS" vectorisé (séparé).

Entre ces deux calques, c'est à dire au dessus de "ville" et en dessous de "texte" nous allons ajouter un nouveau calque nommé "ombre"

Dans ce calque "ombre", et avec l'outil "texte" nous allons ré-écrire le même mot (forcément c'est l'ombre) de la même taille 120 et cette fois de couleur noir.

De la même manière nous allons "séparer" ce texte pour en faire une forme.

Nous allons utiliser encore une nouvelle fois cet outil de déformation puis modifier les angles de l'ombre "AUTOBUS" de manière à donner l'illusion d'une ombre projetée au sol.

Descendre l'opacité à 30 pour plus de réalisme et remplir avec le pot de peinture .

Voilà, nous avons maintenant 3 calques

1) "texte" qui contient "AUTOBUS" blanc

2) "ombre" qui contient "AUTOBUS" noir opacité 30%

3) "ville" qui contient l'image importée.

V) L'interpolation de mouvements

Pour créer une animation dans flash il faut 3 conditions

1) Définir des symboles, le symbole est une manière de convertir un objet pour qu'il soit interprété comme animable.

2) Définir l'interpolation qui calculera le déplacement automatique entre les deux clés. (position, rotation, échelle...)

3) Définir des moments clés (ou images clés) qui déterminent deux positions minimum entre lesquelles un déplacement sera possible.

Pour finaliser cet exercice, nous allons animer le tout c'est à dire le bus qui se déplace avec son ombre (forcément).

Dans un premier temps il faut convertir les deux objets "ombre" et "AUTOBUS" en symbole clip afin de pouvoir animer cet ensemble.

1) Définir des symboles

Donc sélectionner les deux objets "ombre" et "AUTOBUS" puis "F8" ou clic droit "convertir en symbole" ou encore "menu du haut > modification > convertir en symbole", retenons "F8" qui est plus simple et plus rapide pour le même résultat.

2) Définir l'interpolation

L'interpolation se définie en cliquant sur la piste (timeline) de l'objet qu'on veut animer puis "clic droit > interpolation de mouvements" ou dans l'onglet des "propriétés" en bas de l'interface définir "interpolation de mouvement"

3) Définir des moments clés

Dans notre exemple, nous ajouterons une clé "F6" à l'étape 120 de la timeline.

Aller à l'étape 120 de la piste à animer, cliquer dans la case vide puis "F6" ou clic droit "insérer une image clé". Cette opération copie la clé qui se trouve sur la piste. Ici, en insérant une image clé, on copie le contenu de la clé qui se trouve à l'étape 1 (la première clé) si nous avions une clé à l'étape 80 par exemple, nous aurions copié la clé de l'étape 80. Ainsi le fait d'insérer une clé copie systématiquement la clé précédente qui se situe sur la piste (timeline).

Imaginons que sur une piste nous avons 3 clés, A (étape1), B (étape50) et C (étape 100) Si j'insère une image clé à l'étape 80, je copie la clé B. Si j'insère une image clé à l'étape 30, je copie la clé A.

Pour notre exemple nous avons besoin de deux clés une à l'étape 1 et une à l'étape 120 pour obtenir un mouvement linéaire.

Image clé 1, "AUTOBUS" est placé en bas à droite et sa taille est réduite avec l'outil de déformation , nous avons réduit l'échelle.

Image clé 120 "AUTOBUS" est placé à gauche et sa taille est agrandie avec l'outil de déformation , nous avons augmenté l'échelle.

Le mouvement sera donc un déplacement de la droite vers la gauche et un agrandissement de la taille de "AUTOBUS".

Visuellement, l'impression sera que l'objet "AUTOBUS" s'approche.

Plus d'info sur l'interpolation et les symboles, voir le tutorial "interpolation_bille"

"Ctrl + Alt + Entrée" pour une pré visualisation rapide. Utilisez la touche "Entrée" afin de bien prévisualiser la justesse du mouvement.

Exporter l'animation

Menu du haut > Fichier > Exporter > Exporter l'animation ou "Ctrl + Maj/Shift + Alt + S