Créer un portfolio animé

 

Ce tutoriel est écrit avec Flash CS 6.

 

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.

Ligne

Trace des droites et se paramètre de la même manière que l’outil Crayon (épaisseur du trait, pointillé, brouillon…)

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.

 

Créer un portfolio animé :

Nouveau document :

créer un nouveau document par le menu Fichier / Nouveau ou les touches Ctrl + N

Dans la fenêtre Nouveau document :

Nouveau document
survoler l’image pour la voir en grand

cocher ActionScript 2.0, le langage de programmation de Flash
puis dans la partie droite de la fenêtre, entrer Largeur 800 px et Hauteur 600 px, Unité de la règle Pixels et mettre la cadence d’image à 25,00 ips
si vous voulez, vous pouvez cocher la case Etablir comme valeur par défaut, de façon à mémoriser ces dimensions
valider la fenêtre par OK

Une fois le document créé, vous pouvez encore modifier vos choix, dans le panneau Propriétés à droite de l’interface
il suffit de cliquer sur l’icône en forme de clé, pour afficher à nouveau la fenêtre

Modifier le document
survoler l’image pour la voir en grand

Pour afficher le panneau Propriétés s’il n’est pas ouvert,
utiliser le menu Fenêtre / Propriétés ou les touches Ctrl + F3

Nous avons donc un document de 800 x 600 pixels, fond blanc, débit de 25 images par secondes.

Importer les images :

Vous pouvez télécharger ces images d’exemples :

Exemple   Exemple 2   Exemple 3   Exemple 4
cliquer sur les images pour les voir en grand

 

utiliser le menu Fichier / Importer / Importer dans la scène… ou utiliser les touches Ctrl + R
dans l’Explorateur de Windows, sélectionner la 1ère image et valider la fenêtre par OK

Flash affiche un message qui demande s’il s’agit d’une séquence animée, car il détecte que les 4 images portent un Nom identique (sauf le numéro 01, 02, 03 et 04).

cliquer sur le bouton Oui pour valider l’importation

Importer une séquence

Les 4 images importées apparaissent dans la Scène et également dans le panneau Bibliothèque.
Elles sont placées une image par frame, ce qui est plus pratique pour la suite de notre fichier animé.
Chaque image se trouve au même endroit mais à des frames différentes. Elle sont placées au même endroit mais pas en même temps.

appuyer sur la touche Entrée, pour voir défiler les images, sur la Scène et également dans le panneau Scénario

Vous pouvez également déplacer la tête de lecture manuellement (avec la souris) ou cliquer sur chaque frame du panneau Scénario. La frame 1 contient l’image 1, la frame 2 contient l’image2, etc…

Une image par frame

Aligner les images dans la scène :

Nous allons centrer toutes nos images en une seule manipulation.

dans la Scène, avec l’outil Sélection ou touche V, cliquer sur l’image

dans le panneau Scénario, tout en bas, cliquer sur l’icône Modifier plusieurs images

Sélectionner toutes les images

Cela sélectionne les 4 images, dans les 4 frames. On peut également utiliser les touches Ctrl + A (Tout sélectionner) pour être certain de ne pas oublier d’image.

afficher le panneau Aligner, soit en cliquant sur son icône à droite de l’interface, soit par le menu Fenêtre / Aligner ou les touches Ctrl + K
cocher la case Aligner vers la scène,
cliquer sur les icônes d’alignement Vertical et Horizontal pour centrer toutes les images au centre de la scène

Centrer toutes les images

Une fois les images alignées,
dans le panneau Scénario, cliquer à nouveau sur l’icône Modifier plusieurs images pour les désélectionner

La disposition des images est maintenant prête pour créer notre Portfolio animé.

Actions d’images :

Outre le fait que l’on peut programmer des lignes de codes pour commander des objets (clips, boutons…) on peut aussi écrire du code dans les images clés de la Ligne de temps (ou Piste de lecture ou Timeline). Par exemple, si au milieu de la piste, on écrit le mot Stop dans une image clé, la lecture de l’animation s’arrêterait dès la lecture du Stop, au milieu de la piste.

Dans notre cas c’est au début qu’il faut mettre un stop, sinon en lançant l’animation les images défileront sans cesse. En effet tant que la tête de lecture ne reçoit pas d’instruction d’arrêt (stop), elle lit sans interruption et en boucle. C’est à dire qu’arrivée à la fin de l’animation, sans indication particulière, la tête de lecture reviendra au début et répètera sa lecture sans fin.

Pour placer un Stop sur la Ligne de temps à l’étape 1 :
cliquer sur l’étape 1 (frame 1) pour la sélectionner

afficher le panneau Actions soit par un clic droit et choisir Actions, soit en utilisant le menu Fenêtre / Actions images ou la touche F9

cliquer sur le menu avec le signe + puis
sélectionner Fonctions globales / Contrôle du scénario / stop

ou écrire directement le code :

Actions stop

Vous pouvez fermer le panneau Actions.

Lancer l’animation en appuyant sur la touche Entrée. Vous constatez que la lecture s’arrête instantanément à la première image.

Ajouter des boutons de navigation :

Nous allons maintenant créer 2 boutons pour la navigation entre les images. Un bouton pour aller à l’image précédente et l’autre à l’image suivante.

Dans le panneau Scénario,
ajouter un nouveau calque, en cliquant sur l’icône Nouveau calque en bas à gauche du panneau

nommer ce calque boutons, en faisant un double-clic sur son nom (et valider avec la touche Entrée)

dans le document, dessiner un bouton

Vous pouvez soit prendre un outil de dessin, comme par exemple l’outil PolyEtoile ou utiliser un signe de l’outil Texte.

Pour cet exemple j’ai simplement écrit un signe avec l’outil Texte.

prendre l’outil Texte ou touche T
cliquer dans le document et entrer le signe < pour le bouton Précédent
modifier la position du bouton soit avec les touches Flèches soit avec l’outil Sélection
pour redimensionner la taille du bouton, utiliser l’outil Transformation libre ou touche Q

Créer le bouton précédent

Vous pouvez également utiliser le menu Texte pour configurer le texte (police, taille, couleur, etc…).

sélectionner le bouton avec l’outil Sélection ou touche V
faire un clic droit et choisir Convertir en symbole ou utiliser la touche F8dans la fenêtre qui s’affiche, entrer Nom precedent (sans accent) et sélectionner bouton dans Type

Le bouton apparaît dans le panneau Bibliothèque à droite de l’interface.

Configurer le bouton :

C’est facultatif mais vous pouvez configurer le bouton (le modifier), pour lui donner par exemple des couleurs différentes, au survol ou lorsque l’on clique dessus.

Pour modifier le bouton :
faire un double-clic soit sur le bouton dans le document, soit dans le panneau Bibliothèque (ou faire un clic droit et choisir Modifier)

Le panneau Scénario change et affiche 4 étapes pour le bouton, Haut, Dessus, Abaisser et Cliqué.

En sélectionnant chaque étape successivement, vous pouvez attribuer une couleur différente à l’aide du panneau Couleur.

Pour des explications détaillées, vous pouvez consulter le tutoriel ► Horloge (contrôles du temps) – Paramétrer le bouton Lecture

Créer le bouton Suivant :

Notre bouton précédent est dans la Bibliothèque, nous allons nous en servir pour créer le bouton suivant, il suffit de le dupliquer et de l’inverser horizontalement.

À partir du panneau Bibliothèque,
faites un glisser/déposer avec la souris, du bouton dans la Scène

ensuite positionner ce second bouton à l’aide des touches Flèches ou de l’outil Sélection, donc à droite des images, de façon symétrique à l’autre bouton
puis effectuer une transformation de symétrie horizontale (effet miroir) à l’aide du menu Modification / Transformer / Retourner horizontalement

Placer et inverser le bouton

Configurer les boutons :

Il faut maintenant configurer les actions des boutons Précédent et Suivant, de façon à ce qu’ils fassent apparaitre les différentes images.

sélectionner le bouton Précédent et appuyer sur la touche F9 pour afficher le panneau Actions

dans le panneau Actions, entrer directement le code :

sélectionner ensuite le bouton Suivant et dans le panneau Actions entrer le code :

Configurer les actions des boutons

Tester les boutons :

choisir le menu Contrôle / Activer les boutons simples ou les touches Ctrl + Alt + B

Le pointeur se transforme en Main au survol des boutons
cliquer sur les boutons pour les faire fonctionner

Lancer une preview :

utiliser les touches Ctrl + Alt + Entrée pour une pré-visualisation rapide

Enregistrer :

enregistrer votre fichier de travail, en .fla, avec le menu Fichier / Enregistrer ou les touches Ctrl + S

Aperçu :

Lancer un aperçu du document,
utiliser le menu Contrôle / Tester la séquence ou les touches Ctrl + Alt + Entrée

Le bouton Suivant fait apparaître les images suivantes et le bouton Précédent permet de remonter vers les images précédentes.

Exporter l’animation :

utiliser le menu Fichier / Exporter / Exporter l’animation… ou les touches Ctrl + Alt + Maj + S pour enregistrer au format .swf

 

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.