Accueil > Cours > Flash : > Utilisation de Flash 8

Utilisation de Flash 8

Pour commencer, nous allons voir les bases de Flash, les utilisations possibles et des scripts simples.

J’ai choisi de mettre mes tutos en ActionScript2 (AS2), car je ne maîtrise pas encore l’AS3 (qui est sorti il n’y a pas encore un an). Nous allons commencer par les toutes premières bases.

Flash sert principalement à deux choses :

  1. Faire des animations type dessins animés, bandeaux publicitaires, des animations ’simples’ qui ne neccessitent pas de code trop important, qui sont pour la plupart linéaires
  2. Faire des ’vraies’ animations, avec du script à gogo, qui appellent des pages externes, qui se connectent sur des bases de données, qui affichent des images de façon automatique, qui changent en fonction de l’action de l’utilisateur...

Dans un premier temps, je vais vous expliquer comment se servir simplement de Flash pour vos animations simples : découverte de Flash, des composants, de la timeline, des calques, gestions des clips et des couleurs, codes simples, des objets.

Mon deuxième tuto sera sur les scripts plus complexes, l’utilisation du code de façon plus persistente, la gestion des fonctions, l’interaction utilisateur, l’interaction avec des fichiers externes, les script indispensables.

Je mettrais aussi au fur et à mesure des scripts ’tout faits’ de ma création, qui pourront être facilement repris et adaptés pour vos envies, commentés à 100% pour que vous puissiez comprendre la moindre ligne. (et oui, utiliser Flash pour de l’animation, c’est bien, mais très long, je me suis largement orienté coté script, qui donne des résultats qui correspondent plus aux attentes générales, et qui sont ré-adaptables sur d’autres projets)

 

Ce tuto est uniquement destiné à apprendre à se servir de Flash, pour voir le fonctionnement, j’en ferais d’autres plus adpatés (et aussi parce que le texte à rallonge, personne n’aime ça !!)

 

Un petit tour des expressions que vous allez souvent rencontrer dans Flash, si vous ne comprenez pas tout maintenant, pas de soucis, ça sera surement expliqué plus en détails en dessous !!

  • Un clip : c’est un élément (souvent graphique) qui peut contenir des images, d’autres clips, du code... c’est la base d’une animation. Il permettent de controler l’animation facilement. Chaque clip porte un nom, ce qui permet de le retrouver facilement dans la bibliothèque.
  • La bibliothèque : c’est le contenu de votre animation Flash, de tout ce qui la compose : les clips, les images, les vidéos, les polices de caractères, les composants... Je vais la décrire plus bas.
  • La timeline : c’est l’élément de temps dans Flash, c’est ce qui permet à votre animation de changer dans le temps, de switcher entre plusieurs elements, car elle contient les calques.
  • Les calques : ce sont des éléments qui s’empilent, qui permettent de dire quel élément sera au dessus ou en dessous d’un autr. ils définissent donc l’affichage de votre animation.
  • Les scripts : ils permettent de naviguer dans l’animation dans un premier temps, mais aussi de faire des échanges avec d’autres fichiers, et de manière plus générale, une fois un minimum de maitrise, de gérer entièrement toute l’animation de A à Z, sur tous les points de vue possible.
  • La scène : c’est votre animation !! C’est la que vous pouvez prévisualiser tout ce que vous faites, c’est l’aperçu de votre création.

 

Començons par le début. Ouvrez Flash (que ce soit Flash 8 ou Flash CS3, toutes les manipulations sont similaires, les boutons sont placés au même endroit). Faites un nouveau fichier en AS2.

Voici une petite description rapide des différents éléments que vous pourrez trouver dans l’application :

La palette des outils

Elle est indispensable, car on ne peut rien faire si elle n’est pas la.

Palette des outils

Voici les boutons qui la composent, de haut en bas, et de gauche à droite :

  • La flèche noire : elle sert à selectionner des clips, à les éditer, sélectionner tous les éléments présents sur la scène. C’est l’outil à tout faire, ou presque. Le raccourci clavier pour PC est ’V’
  • La flèche blanche : elle sert à sélectionner les parties vectorielles des éléments de la scène. Elle permet de supprimer, rajouter ou modifier des points d’ancrage qui forment une figure ou une ligne (raccourci ’A)
  • L’Outil transformation libre : Il permet de déformer les clips. C’est le deuxième outil le plus utilisé. Il permet de gérer les tailles des clips, donner des effets d’inclinaison, de rotation, etc... (raccourci ’Q’)
  • L’Outil transformation de dégradé : il permet de transformer un dégradé linéaire, de changer l’orientation, la longueur du dégradé, la zone d’application, etc... (raccourci ’F’)
  • L’Outil ligne : Il permet de tracer une ligne vectorielle sur la scène. (raccourci ’N’)
  • Le lasso : Il permet de sélectionner plusieurs clips sur la scène de façon simplifiée (raccourci ’L’)
  • La plume : Elle permet de dessiner des formes vectorielles sur la scène (raccourci ’P’)
  • L’Outil texte : Il permet de faire des champs texte sur la scène, ou de les éditer (raccourci ’T’)
  • L’Outil ellipse:Il permet de dessiner des ellipses ou des ronds sur la scène, de manière vectorielle (raccourci ’O’)
  • L’Outil rectangle/polygone:Il permet de dessiner des rectangles sur la scène. Quand on reste cliqué sur le bouton, on passe au polygone, ou on choisit soit même le nombre de coté de ce dernier. (raccourci ’R’)
  • Le crayon : comme partout, il sert à dessiner, de façon vectorielle sur la scène. Il corrige un peu la trajectoireen lissant le trajet effectué. (raccourci ’Y’)
  • Le pinceau : Toujours identique sur tous les logiciels, il sert à dessiner de la même façon que le crayon, mais avec un diamètre plus gros, et toujous en vectoriel. (raccourci ’B’)
  • L’encrier : Très peu utilisé, il permet de changer la couleur d’un trait vectoriel, ou d’un contour dans le cas d’une forme. (raccourci ’S’)
  • Le pot de peinture : Lui aussi peu utilisé, il permet de remplir la couleur d’une forme ou d’un trait vectoriel. (raccourci ’K’)
  • La pipette : Elle permet de prélever la couleur d’un élément sur la scène. Elle est capable de donner la couleur d’un élément vectoriel, ou bitmap (image) (raccourci ’I’)
  • La gomme : Très peu utilisée, elle permet d’effacer un élément vectoriel sur la scène. (raccourci ’E’)
  • La main : Elle permet de déplacer la scène afin de voir un élément en particulier, ou de zoomer sur un endroit précis. (raccourci ’H’)
  • Le zoom : Il permet de zoomer/dézoomer sur la scène afin de grossir ou diminuer la taille de l’affichage pour une meilleure précision. (raccourci ’M, Z’)
  • Première couleur : Couleur du contour de l’élément vectoriel à dessiner.
  • Deuxième couleur : Couleur du contenu de l’élément vectoriel à dessiner.
  • Les trois petites icones en dessous : mettre la couleur en N&B,ne pas mettre de couleur, ou permuter les deux couleurs.
  • L’aimant : Il permet d’activer ou pas l’accrochage magnétique.C’est à dire l’accrochage automatique aux bords. quand vous dessinez ou déplacez un objet, celui vient se coller tout seul sur les bords du premier clip/objet qu’il rencontre. Cela simplifie le positionnement dans certains cas, mais le complique dans d’autres cas. 

 

La bibliothèque : 

 Dans celle-ci j’ai mis les principaux composants que vous pouvez y trouver. Normalement elle est vide lorsqu’on commence un nouveau document.

Bibliothèque

En cliquant sur le petit symbole en haut à droite, vous avez accès au menu, qui permet de la gérer correctement : ajouter des éléments, les supprimer, voir les options possibles...

Les petits boutons en bas parlent d’eux même, pas besoin de décrire leur fonctionnalité. 

 

La timeline

 C’est l’élément de temps de votre animation, chaque petit carré représente une unité de temps.

Timeline

 Selon le nombre d’images par secondes que vous avez défini dans votre document, le nombre de carrés pour une seconde peut varier.

Par défaut, l’animation est à 12 images/seconde, soit 12 carré = 1 seconde. Ceci est plutôt faible, je vous conseille vivement de le passer à 25 images/secondes (équivalent de la TV) pour éviter d’avoir des trainées trop longues sur l’écran.

Le carré avec un rond blanc signifie que l’on peut metre du contenu sur l’image, quand le carré est gris, cela signifie qu’il y a quelquechose dessus, quand il y a un ’a’, cela veut dire qu’il y a du code source, quand c’est un drapeau rouge, cela signifie que l’image porte un nom. Cela ne vous peut être rien pour le moment, mais vous allez comprendre de vous même quand vous commencerez à utiliser Flash, ne vous inquitez pas !!

Pour faire un nouveau calque, cliquer sur la petite icone en bas à gauche (la première).
Le deuxième bouton sert à faire un masque (c’est à dire cacher une partie du calque du dessous avec le calque du dessus)
L’icone du dossier sert à trier ses calques par dossier.
La corbeille sert à supprimer un ou plusieurs calques.

Les petites icones un peu plus à droite ne nous intéressent pas pour le moment.

Le premier chiffre que vous rencontrez (toujours en bas de la timeline) est le numéro de l’image sur laquelle vous vous trouvez.
Juste à coté est écrit le nombre d’images/secondes de votre animation
Encore après se trouve le temps de l’animation écoulé depuis le début.Par exemple, si vous êtes sur la première image (comme c’est le cas), le temps sera à Os. Si vous êtes sur 12, le temps passé sera de 1s.

 

 La scène

Pas besoin d’image pour deviner ce que c’est : l’aperçu de l’animation. C’est la dessus que vous pouvez gérer tout les détails graphiques, c’est le coeur de l’animation. Evidement, elle est située au centre de l’écran, c’est le rectangle blanc que vous aviez en face vous quand vous avez ouvert Flash.

 

La zone de code

Fenêtre de code

 La voici, je l’ai reduite pour n’avoir que les boutons, mais bien évidement vous pouver lui donner la taille que vous voulez !!

C’est une partie essentielle de Flash (surtout pour le développement en ActionScript), mais même pour l’animation. Elle permet de contrôler la totalité de l’naimation.

Voici les boutons, de gauche à droite :

  • Le bouton + : il permet d’avoir accès à toutes les fonctions existant dans Flash, ou cas ou vous seriez pris d’un trou de mémoire. Tout est classé par catégorie afin de meiux s’y retrouver.
  • La loupe : Elle permet de rechercher une expression dans le code affiché.
  • La cible : Elle permet de cibler un clip précis automatiquement, à condition que celui-ci soit sur la scène. Elle insère le code pour y arriver. (le chemin vers le clip en fait)
  • Le ’check’ : Il permet de vérifier que le code tapé ne contient aucune erreur. Si il y en a, il vous les affiche dans le panneau de sortie, avec le problème rencontré et la ligne qui pose problème.
  • Le texte : Il permet de ’restructurer’ le code que vous avez tapé, par exemple :
    if(i==0)gotoAndStop(2) donnera
    if(i==0){
       gotoAndStop(2);
    }
  • La parenthès : Elle peut vous donner des conseils de code, mais elle est souvent inutilisée, car ils s’affichent souvent d’eux mêmes.
  • Le stethoscope : Il vous permet de définir des points de débuggage sur l’animation.
  • L’assistant de script : Très utile quand on débute, puis très énervant quand on progresse, il permet de générer du script tout seul. Principalement utilisé pour des animations très simples, car il devient très vite obsolète.