Faire scintiller des étoiles

 

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.

Pot de peinture

Rempli d’une couleur unie ou d’un dégradé, l’intérieur d’une ou plusieurs zones ou formes sélectionnées.

Transformation de dégradé

Permet d’effectuer des modifications d’échelle, de rotations, de biseau qui s’appliquent uniquement à un ou à des dégradés (remplissages).

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.

 

Des étoiles qui scintillent :

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.

Le rectangle de dégradé :

Pour cet exemple nous allons commencer par créer un ciel en dégradé avec l’outil Rectangle, de la taille exacte du document c’est à dire 800 x 600 pixels.

Ciel en dégradé

Afin d’être extrêmement précis, on peut écrire directement dans les champs de hauteur, largeur, position X et Y dans le panneau Infos à droite de l’interface.

Transformation de dégradé :

L’outil Transformation de dégradé permet de modifier un dégradé, ses couleurs, sa position, sa transparence et cela à l’intérieur de la forme.

choisir l’outil de Transformation de dégradé

Transformation de dégradé

Symbole Clip :

Nous allons ajouter un calque au dessus du dégradé afin d’y disposer nos étoiles. Celles-ci seront dessinées avec l’outil Ovale sans contour et remplies d’un dégradé Radial (rond).

Pour le moment dessiner une étoile le mieux possible et la copier plusieurs fois est plus rapide.

Dessiner étoile

Maintenant que notre étoile est terminée et notre dégradé bien paramétré, nous allons Convertir en symbole cette étoile, la conversion en symbole est obligatoire pour faire une animation.

sélectionner l’étoile puis utiliser le menu Modification / Convertir en symbole ou faire un clic du bouton droit sur l’étoile sélectionnée puis choisir Convertir en symbole

Dans les deux cas le raccourcis clavier est F8. Choisir Clip dans la fenêtre puis nommer étoile. Le panneau Bibliothèque contient maintenant le clip étoile.

Pour plus d’information sur le le symbole et l’interpolation, voir le tutoriel ► Flash, animer une boule (interpolation mouvement)

Clip et interpolation de formes :

Nous allons maintenant animer notre étoile. Depuis la scène principale,
faire un double-clic sur l’étoile et nous voici dans le container du clip étoile

Nous allons utiliser le principe d’interpolation de forme qui est assez différent de l’interpolation de mouvement. L’interpolation de mouvement anime un objet alors que l’interpolation de forme anime les composants d’un objet (points, traits, couleur, dégradé).

Le principe d’interpolation entre deux clés reste le même, en revanche les éléments à animer ne sont plus des clips mais des éléments de l’objet.

Animation du dégradé :

Pour animer le dégradé,

  1. depuis la scène principale, faire un double-clic sur le symbole clip étoile ce qui nous envoie dans le container symbole, c’est à dire un niveau en dessous.
  2. animer le dégradé en créant une clé à l’image 1 et une clé à l’image 30. Utiliser la touche F6 pour créer des clés (ou par le menu Insertion / Scénario / Image clé ou faire un clic droit sur la frame et choisir Insérer une image clé
  3. déclarer l’interpolation de forme puis modifier la position des curseurs de paramétrage du dégradé à la clé 30
  4. revenir à la scène principale en cliquant sur séquence 1 placé sous la timeline (piste d’images) à gauche ou utiliser les touches Ctrl + E

Lancer une animation pour voir comment un clip étoile qui contient une animation (interpolation de forme à l’intérieur du clip) se joue en boucle à raison de 30 images secondes (c’est le temps de l’animation de l’interpolation de forme). Si l’animation de l’interpolation de forme dure 10 frames, la boucle sera plus rapide.

Interpolation de forme

Modifier des clés :

Bien entendu les clés d’une piste peuvent être copiées, déplacées, supprimées…

Nous allons donc réduire l’interpolation de forme à 10 frames. Pour cela,
depuis la scène principale, faire un double-clic sur le symbole étoile puis dans l’interpolation de forme, déplacez la dernière clé (frame 30) vers la frame 10

puis en faisant un cliquer/glisser, sélectionner les frames de 11 à 30 puis faire un clic droit et choisir Effacer les images ou utiliser les touches Maj + F5

Cliquer/glisser

Effacer les images

Notre boucle dure à présent 10 frames.

lancer une animation pour voir comment le clip étoile qui contient une animation (interpolation de forme à l’intérieur du clip) se joue en boucle à raison de 10 images secondes (c’est le temps de l’animation de l’interpolation de forme). La boucle est plus rapide.

Multiplier les étoiles :

Maintenant que nous avons notre modèle d’étoile animé, le plus simple est de multiplier celui-ci, les copies peuvent être agrandies, diminuées en taille, le clip est toujours le même (plus grand, plus petit, déplacé) l’animation elle, reste la même.

Il y a deux manières de cloner un objet :

  • En faisant un copier/coller : sélectionner l’objet puis choisir le menu Modifier / Copier ou les touches Ctrl + C puis le menu Modifier / Coller ou les touches Ctrl + V
  • Le clonage par déplacement avec la touche Alt. Et oui dès que l’on déplace un objet en maintenant la touche Alt enfoncée, on crée une copie de cet objet, d’ailleurs une icône + apparaît instantanément

Pour modifier la taille des copies, utilisez l’outil Transformation de formes.

Exporter l’animation :

choisir le menu Fichier / Exporter / Exporter l’animation ou utiliser les touches Ctrl + Maj + Alt + S

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 :