Flash Mx 2004
Niveau I
tutorial 03/22
L'étoile filante
Pour configurer votre interface de travail vous devez ouvrir ces panneaux: "menu du haut > Fenêtres"
Les outils à utiliser
Outil | Symbole | Descriptif | Raccourci |
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 |
Le pinceau | ![]() |
La plume est un outil de tracé vectoriel. "Clic" permet de placer des points reliés par des droites. "Clic" et déplacement de souris permet de créer des courbes. "Clic" sur un point permet d'annuler une courbe. "Clic" sur une ligne permet d'ajouter un point. "Clic + Alt" efface un point. La flèche blanche de la palette d'outil permet de sélectionner un ou plusieurs points, les déplacer, les effacer avec "Suppr" |
B |
Le crayon | ![]() |
Permet de dessiner à main levée avec la couleur de contour, options "Maj / Shift" pour tracer des droites. Option en bas de la palette redresser, lisser les traits |
Y |
Le rectangle | ![]() |
Trace un rectangle seul ou un contour seul ou les deux à la fois selon que les options de couleur ou de contour sont activées. On peut remplir un ton uni ou dégradé. L'options "Alt" : le tracé s'effectue à partir du centre L'option "Maj/Shift" : le tracé est contraint à un cercle parfait ou un carré parfait |
R |
Créer un nouveau fichier depuis "Flash" "menu du haut > fichier > nouveau"
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 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 par secondes.
II) Rectangle en dégradé
Dans notre document, avec l'outil rectangle , nous allons faire un fond de dégradé bleu, notre ciel de crépuscule.
Ce fond doit recouvrir l'ensemble du document, sur le premier calque que l'on nommera "ciel". Ce rectangle ciel est un dégradé linéaire (vertical) de 800x600 dont nous réglerons la taille exacte dans la palette "infos".
Nous allons donc faire un "ciel" bleu dégradé linéaire et vertical vers le bleu foncé.
Pour modifier les couleurs ou ajouter une nouvelle teinte au dégradé.
III) Le pinceau
Sur un nouveau calque nommé "étoiles", avec le pinceau nous allons peindre des petites étoiles en faisant quelques clics avec une petite brosse de couleur blanche. Bien entendu on peut varier la couleur avec des tons jaune clair, bleu clair...
IV) L'étoile filante (symbole clip)
L'intérêt de "flash" réside en deux points:
1) L'animation
Nous avons évoqué le principe d'interpolation de "flash" qui calcule toutes les étapes de déplacement d'un objet entre deux position dans le temps. La condition pour animer un objet est de le convertir en symbole, C'est une balise qui permet à "flash" de reconnaître les objets animés.
2) La légèreté
Le principe des tracés vectoriels, à la différence des pixels, permet d'avoir des coordonnées simples pour des objets. (coordonnées des courbes et de la couleur) à la différence d'une image pixel 'mosaïque de points) où chaque pixel est codé (couleur, teinte, saturation, emplacement)
Le principe est simple, il faut sélectionner l'étoile filante à l'aide de la flèche noire puis avec la touche "F8" ou par le "menu du haut > insertion > nouveau symbole" Choisir "clip"
Nous avons donc pour le moment 3 calques, de bas en haut "ciel", "étoiles" et "filante" et dans la bibliothèque nous avons un "clip" nommé "étoile_filante". Nous sommes prêts pour notre interpolation de mouvement et notre animation.
V) L'interpolation de mouvement
Dans notre "timeline" (ligne de temps) nous avons 3 calques superposés et à l'étape 1 de la piste.
La première étape est de définir combien de temps que va durer notre animation. Disons que pour commencer une animation de 60 images (à raison de 25 images secondes: 60/25=2,4 secondes) sera largement suffisant. Rendons-nous à l'étape 60 de la timeline et sélectionnons la colonne entière comprenant toutes les images.
Pour déterminer la longueur de temps, sur notre colonne sélectionnée, un" clic droit > insérer une image" ou la touche "F5".
Nous voici donc avec un segment de 60 images, et si on appuie sur la touche "Entrée" on voit bien le lecteur qui lit ces images de la 1 à la 60.
Maintenant nous allons déterminer le principe "d'interpolation de mouvement", placer notre clip "étoile filante" à un endroit à l'étape 1, à un autre endroit à l'étape 60 et nous verrons l'étoile se déplacer toute seule d'un point à l'autre, c'est "l'interpolation de mouvement".
Maintenant il faut définir la deuxième position en ajoutant une image clef à l'étape 60 de la timeline et toujours sur la même piste "filante". Cliquer dans la case de l'image 60 de la piste de notre étoile puis "clic droit > insérer image clé" ou la touche "F6".
En appuyant sur "Entrée" votre interpolation de mouvement est animée.
Résumons
1) Convertir l'objet (forme) sélectionné en symbole la touche "F8" ou "menu du haut > modification > convertir en symbole"
2) Choisir "clip" et nommer, le symbole s'inscrit dans la bibliothèque.
3) Définir la longueur de temps de l'animation en cliquent plus loin dans la timeline, puis "F5" ou "clic droit > ajouter une image.
4) Définir l'interpolation de mouvement, "clic droit" sur la piste de l'objet à animer ou dans la barre de propriétés de la piste "interpolation mouvement"
5) Définir la point d'arrivée de l'animation en ajoutant une nouvelle position pour le symbole "clic droit" sur l'étape de fin de la piste puis "insérer un image clé" ou la touche "F6" qui copie le symbole à la même place mais plus loin dans le temps.
6) Définir la trajectoire du mouvement en déplaçant l'objet à l'étape de fin.
Plus d'info sur l'interpolation, voir le tutorial "interpolation_bille.html"
Touche "Entrée" pour lancer une lecture, "Ctrl + Alt + Entrée" pour une prévisualisation rapide.
Exporter l'animation
Menu du haut > Fichier > Exporter > Exporter l'animation ou "Ctrl + Maj/Shift + Alt + S
Et voilà, faisons un voeux.