Ce tutoriel est écrit avec Flash CS 3.
Outils utilisés :
Trace une forme ovale (ou cercle) ou un contour seul ou les deux à la fois selon que les options de couleur ou de contour sont activées. On peut remplir d’un ton uni ou dégradé. La touche Alt permet d’effectuer un tracé à partir du centre, avec la touche Maj le tracé est contraint à un cercle parfait. |
Permet de tracer 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é. La touche Alt permet d’effectuer le tracé à partir du centre. Avec la touche Maj, le tracé est contraint à un cercle parfait ou un carré parfait. |
Sur toute sélection, permet de modifier l’échelle, le biseau, la rotation, l’inclinaison. La touche Alt permet de transformer symétriquement, la touche Ctrl permet de déplacer les coins indépendamment. |
Morphing géométrique :
Nouveau document :
► créer un nouveau fichier par le menu ou les touches Ctrl + N
► dans la fenêtre Nouveau document, choisir le format de document, ici Flash A.S. 2.0 (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
, s’il n’est pas déjà ouvert).Ce panneau Propriétés permet de configurer notre document de travail, sa taille en largeur, sa hauteur, sa couleur de fond, la vitesse de lecture des images.
► régler le document en 800 x 600 pixels, fond Blanc, cadence de 25 images/secondes
► ensuite, enregistrer ces paramètres comme les paramètres par défaut à l’ouverture de Flash, en cochant la case (voir capture)
survoler l’image pour la voir en grand
Nous avons donc ici un document de 800 x 600 pixels, fond blanc, débit de 25 images par secondes.
Les formes géométriques :
Pour cet exemple, nous allons nous amuser à faire du morphing, c’est à dire à transformer la forme d’un objet en diverses étapes intermédiaires.
Dans un premier temps dessinez un carré rouge, sans contour et centrez-le dans la scène.
Les outils d’alignement se trouvent à droite de l’interface (panneau Aligner)
Les images clés vides :
Nous aurons besoin de dessiner nos formes toutes centrées dans la fenêtre mais à des étapes différentes de la timeline (Ligne de temps).
Pour cela nous devrons créer des Images clés vides.
► créez des images clés vides dans lesquelles vous allez dessiner des formes géométriques
Une image clé vide à l’étape 20, une autre à l’étape 40, une autre à l’étape 60.
Carré rouge à l’étape 1 :
► dans la fenêtre dessinez un carré rouge à l’aide de l’outil Rectangle en maintenant la touche Maj, ce qui permet de dessiner un carré parfait, puis centrez l’objet à l’aide des icônes du panneau Aligner
Cercle jaune à l’étape 20 :
► de la même manière que le carré mais avec l’outil Ovale et en maintenant la touche Maj, dessinez un cercle parfait de couleur Jaune, puis centrez l’objet
Le polygone à l’étape 40 :
Dans la même barre d’outils des formes de remplissage se trouve l’outil Polygone, et tout en bas de l’interface se trouve les options de l’outil (nombre de côtés, forme étoiles, nombre de branches…).
► tracez donc la forme de polygone en Bleu en maintenant la touche Maj pour conserver sa forme parfaite puis centrez l’objet
Interpolation forme :
À la différence de l’interpolation de mouvement qui anime des clips des boutons ou des graphiques (à conditions qu’ils aient été convertis en tant que tels), l’interpolation de forme anime les éléments, les composants d’une forme (traits, points, couleur, transparence, dégradé…). Dans notre cas, nos formes vont s’afficher successivement en passant par des étapes intermédiaires. Cela donnera ce qu’on appelle un morphing.
Dans la piste, sélectionnez toutes les images clés puis faites un clic droit et choisissez Interpolation de forme, que l’on retrouve aussi tout en bas de l’interface dans l’onglet des Propriétés.
Lire l’animation :
► appuyez sur la touche Entrée pour lancer la lecture ou utilisez les touches Ctrl + Alt + Entrée pour une prévisualisation rapide
Exporter l’animation :
► utilisez le menu ou les touches Ctrl + Maj + Alt + S
Télécharger le fichier source :
Vous pouvez télécharger le fichier source, morphing-geometrique.fla
Télécharger : Flash morphing géométriqueTéléchargé 566 fois – 4,92 Ko
Ce tutoriel a été réécrit avec l’autorisation de son auteur.
Ce tutoriel est la propriété du site Photoshoplus. Toute reproduction, exploitation ou diffusion du présent document est interdite.
Photoshoplus ©