Morphing géométrique

 

Ce tutoriel est écrit avec Flash CS 3.

 

Outils utilisés :

Ovale

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.

Rectangle

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.

Transformation

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 Fichier / Nouveau ou les touches Ctrl + N

Nouveau fichier

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 Fenêtre, 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)

Paramétrer et enregistrer par défaut
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.

Dessiner un carré rouge

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é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

Dessiner les formes

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.

Interpolation forme

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 Fichier / Exporter / Exporter l’animation 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é 203 fois –

 

L’image finale se trouve au début du tutoriel ▲

 

Ce tutoriel a été créé par ---/// F®K Design ///---. Photoshoplus en a créé une nouvelle version, avec son autorisation.
Toute reproduction, exploitation ou diffusion du présent document est interdite.

Articles similaires :