Introduction à Action Script 1

Voici un tutoriel d'initiation à Action Script.
A la fin du tuto, vous aurez une animation semblable à celle ci : Voir ici

Je ne vais pas vous donner toute la solution mais je vais vous guider un peu et c'est à vous de terminer l'animation

Si vous avez consulté l'animation, vous pouvez remarquer que les trois boutons ainsi que les trois animations qui s'affichent en pointant sur les boutons sont réalisées selon le même principe. Je vais considérer donc que l'animation comporte un seul bouton et une seule animation qui s'affiche lorsqu'on passe la souris sur le bouton.

• Tout d'abord, créer un nouveau document.
  
• Renommer le calque en "boutons".
  
• Créer une zone de texte "Accueil" en utilisant l'outil "Texte" de la boite à outils.
  
• Aligner la zone de texte à gauche horizontalement et au milieu verticalement.
  
• Convertir le texte en bouton : Menu contextuel de la zone de texte > Convertir en symbole : vous aurez la boite de dialogue ci-dessous :
  
  
  
  
  
  
• Saisir le nom du symbole en sélectionnant le type "bouton" > OK.
  
• Dans la fenêtre "propriétés" du bouton, saisir le nom de l'instance du symbole. C'est le nom attribué à l'objet bouton et c'est ce nom d'instance qui va être utilisé par la suite en Action Script et non pas le nom du symbole (même si vous choisissez le même nom).
  
  
  
  
  
  
• Double cliquer sur le bouton (dans la scène) : vous aurez là le scénario du bouton (Haut, Dessus, Abaissé et Cliqué).
  
• Dans l'état "Dessus" du scénario du bouton, insérer une image clé : sélectionner l'image dans le scénario ou plutôt la ligne de temps (time line) > F6.
  
  
  
  
  
  Maintenant, on va créer une animation dans l'état "Dessus" du bouton, c'est-à-dire que ça sera l'animation appliquée au bouton lorsque on passe par-dessus le pointeur de la souris.
  
  
• Sélectionner le texte "Accueil" dans la scène et le convertir en clip : Menu contextuel > Convertir en symbole > sélectionner le type "clip" et donner le nom du symbole par exemple "accueil_anim" > OK : le texte dans la scène n'est plus une zone de texte mais plutôt un clip.
  
• Double cliquer sur le clip "accueil_anim" dans la scène.
  
• Dans le scénario du clip, créer un deuxième calque.
  
• Sélectionner l'outil "pinceau"
  
• Choisir une taille (pas trop importante) du pinceau (dans la boite à outils):
  
  
  
  
  
  
• Essayer d'écrire "Accueil" avec le pinceau en suivant le texte "Accueil" se trouvant sur la scène (en réalité c'est la zone texte du calque 1). Ce n'est pas important si les lignes et tracés dessinés avec le pinceau ne sont pas identiques avec le texte du calque1. C'est le but de la manipulation : c'est ce qui va constituer les effets de l'animation par la suite.
  
  
  
  
  
  
• Déplacer l'image clé 1 de la time line du calque 1 vers l'image suivante (c'est-à-dire n° 2) de la time line. Après le déplacement de l'image, votre scénario doit ressembler à ceci :
  
  
  
  
  
  
• Insérer maintenant une image clé vide dans l'image 2 de la time line du calque 2.
  
• Essayer de nouveau d'écrire "Accueil" en suivant le texte "Accueil" du calque 1 et en utilisant l'outil pinceau (comme précédemment).
  
• Refaites les 3 précédentes étapes à deux reprises (déplacer l'image clé du calque 1 vers l'image suivante de la time line, insérer une image clé vide dans le calque 2 dans l'image du même rang que l'image clé du calque 1 dans la time line et à l'aide du pinceau, écrire "Accueil") : vous devez avoir enfin 4 images clés dans le calque 2.
  
• Supprimer maintenant le calque1.
  
• Retourner au scénario du bouton en cliquant sur le nom du bouton au scénario comme ceci :
  
  
  
  
  
  
• Insérer une image clé dans l'état "Cliqué" du scénario, puis sélectionner l'outil "rectangle" de la boite à outils et tracer un rectangle qui couvre le texte "Accueil" sur la scène (tout en sélectionnant l'état "Cliqué" dans le scénario car la surface du rectangle sera en fait la surface cliquable du bouton "Accueil").
  
• Retourner à la séquence 1 (cliquer sur "Séquence 1 en haut du scénario : voir la figure précédente).
  
• Ajouter un nouveau calque et nommer le "Anim_accueil" : ce calque va servir à contenir l'animation qui sera affichée lorsqu'on pointe avec la souris sur le bouton "Accueil".
  
• Verrouiller les autres calques.
  
• Sélectionner de nouveau le calque "Anim_accueil".
  
• On va maintenant créer un clip et le sauvegarder dans la bibliothèque : Menu Insertion > Nouveau symbole > donner un nom au clip par exemple "Anim_accueil", sélectionner le type "clip" > OK.
  
• Tracer, dans la scène et en utilisant l'outil "Ligne" de la boite à outils, un dessin représentant l'icône "home" que vous trouvez souvent sur le net. Voici un exemple :
  
  
  
  
  
  
• Ensuite, vous pouvez refaire les mêmes étapes qu'on a fait pour créer les effets de l'animation du bouton "Accueil" étant donné que c'est le même principe et le même style d'animation, mais vous pouvez aussi suivre cette seconde méthode que je considère plus simple : Ajouter une image clé vide dans l'image 2 de la time line du calque du scénario > là l'image 1 du calque disparaît et c'est tout à fait logique puisque la tête de lecture est actuellement sur l'image 2 mais le problème c'est qu'on veut l'afficher pour suivre ses tracés en utilisant le pinceau comme on l'a déjà fait précédemment pour le bouton, donc cliquer sur le bouton "Pelure d'oignons" en bas du scénario :
  
  
  
  
  
  
• Là, l'image 1 apparaît et vous pouvez tracer en utilisant le pinceau le dessin du "home" (on s'en fout si ça déborde un peu : d'ailleurs c'est l'intérêt de la manipulation).
  
• Refaites les mêmes étapes (insertion d'une image clé vide dans l'image suivante disponible dans la time line et traçage du dessin) jusqu'à avoir 5 images clés dans le scénario.
  
• Maintenant, sélectionner l'image n° 1 du calque et supprimer là : Menu contextuel > Supprimer les images.
  
• Retourner à la séquence 1.
  
• Sélectionner l'image 1 du calque "Anim_accueil" et faites glisser le clip qu'on vient de créer sur la scène (positionner le à droite de la scène en face du bouton "Accueil").
  
• Sélectionner ce dernier clip et saisir son nom d'instance "accueil_mc" (mc veut dire movie clip et concernant btn ça veut dire bouton).
  
• Maintenant, insérer un nouveau calque, nommer-le "actions".
  
• Sélectionner l'image 1 du calque "actions" et afficher le panneau "Actions"
  
• Saisir ce code Action script :

Code:

accueil_mc._visible = false;

accueil_btn.onRollOver = function ()
{
   accueil_mc._visible = true;
}

accueil_btn.onRollOut = function ()
{
   accueil_mc._visible = false;
}


• "accueil_mc._visible = false;" : signifie qu'on a mis la propriété "_visible" de l'instance "accueil_mc" à false. Ca veut dire qu'au lancement de l'animation, le clip "accueil_mc" ne sera pas affiché.

• "accueil_btn.onRollOver = function ()
  {
  accueil_mc._visible = true;
  }"
  signifie qu'au moment du passage du pointeur de la souris sur le bouton "accueil_btn.onRollOver", on affichera le clip "accueil_mc".

• "accueil_btn.onRollOut = function ()
  {
  accueil_mc._visible = false;
  }"
  signifie qu'au moment de l'éloignement de la souris du bouton, on masque le clip "accueil_mc".

J'espère que c'est clair et que vous avez compris le principe de l'animation. Maintenant, c'est à vous de la compléter et de rédiger l'Action Script correspondant. Si vous avez bien compris le tutoriel, il ne vous sera pas difficile de compléter l'animation et d'avoir une semblable à celle présentée au tout début du tutoriel.