Ce tutoriel est écrit avec Flash CS 6.
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. |
|
Trace des droites et se paramètre de la même manière que l’outil Crayon (épaisseur du trait, pointillé, brouillon…) |
|
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. |
Ovale
Ligne
Transformation
Créer un portfolio animé :
Nouveau document :
► créer un nouveau document par le menu ou les touches Ctrl + N
Dans la fenêtre 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
survoler l’image pour la voir en grand
Pour afficher le panneau Propriétés s’il n’est pas ouvert,
► utiliser le menu 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 :
cliquer sur les images pour les voir en grand
► utiliser le menu 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
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…
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
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 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
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 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 :
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
Vous pouvez également utiliser le menu 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
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 :
Tester les boutons :
► choisir le menu 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 ou les touches Ctrl + S
Aperçu :
Lancer un aperçu du document,
► utiliser le menu 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 ou les touches Ctrl + Alt + Maj + S pour enregistrer au format .swf
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 ©
