Jeu vidéo

Créer et importer des movieClips en ActionScript 2

Avant de lire ce tutoriel, vous pourriez apprendre...

Vos premiers mots en ActionScript 2

Créez un modèle

C'est bien beau de créer des machins qui roulent et de tout interpoler... mais voyons, vous avez une superCréature sous la main. Faites-la bosser à votre place. Elle est là pour ça. (D'ailleurs, et sans vouloir vous vexer, elle saura en faire beaucoup plus de choses que vous !)

Non, Flash ne vous fera pas de superbes graphismes à votre place. Demander à Flash d'imaginer, c'est demander à un escargot de danser la polka !

Par contre, demandez-lui de copier cinq cent fois votre superbe graphisme en adaptant leur position et leur taille à l'âge du capitaine et au diamètre de la pleine lune tous les 29 févriers, et vous aurez ce que vous vouliez.

Les grenouilles

La partie créative, le dessin, ça restera donc votre partie du boulot. Tiens, d'ailleurs, allons-y : créez quelque chose (une boule orange, pour ne pas changer) et convertissez-la en movieClip.

Une fois converti en movieClip, votre "quelque chose" est soigneusement rangé dans la bibliothèque, un endroit que vous connaissez bien. Bonne nouvelle ! Flash aussi connaît la bibliothèque. Il va pouvoir venir y puiser des modèles, des moules, pour vous balancer des copies et des copies de ces objets.

Mais Flash ne peut pas aller puiser n'importe quoi dans la bibliothèque. Ce que vous voulez partager avec lui doit porter une étiquette "pour Flash", sinon, il n'y touche pas.

Pour que Flash ait accès à un objet de votre bibliothèque, vous devez donc lui mettre cette étiquette "pour Flash". Cette étiquette s'appelle l'identifiant de liaison. Cela peut se faire dès sa conversion en movieClip. Mais, si vous avez loupé le coche, vous pouvez toujours accéder à la fenêtre qui vous intéresse en faisant un clic droit sur le nom de l'objet dans la bibliothèque, et en choisissant Propriétés.

L' "étiquette" en question se trouve dans la deuxième partie de cette fenêtre. Si vous ne la voyez pas, un petit clic sur le bouton Avancé vous développe la partie inférieure de la fenêtre.

  • Cochez Exporter pour ActionScript pour qu'il soit reconnu par Flash.
  • Par défaut, Flash coche Exporter dans la première image. Laissez-le faire, c'est un bon garçon.
  • Dans la case Identifiant, écrivez le nom que Flash reconnaîtra. En effet, Flash lit ce nom à la place du nom écrit dans la case Nom. Je vous conseille de mettre le même Identifiant que le Nom autant que possible, pour ne pas vous perdre dans une foule de noms.

Apprenez à votre Flash à aller chercher un movieClip

Voici le code qui demande à Flash d'aller chercher un movieClip dans la bibliothèque, et de le placer sur la scène. C'est une méthode dynamique (= automatique). On parle d'appeler dynamiquement un clip sur la scène.

Va chercher !

this.attachMovie ("identifiantDeLiaison", "nomDuClipRenommé", profondeur);

Voyons comment utiliser ce code.

  • this, ça veut dire que le movieClip va être appelé là où le code est inscrit, c'est-à-dire sur la timeline principale. Rappelez-vous le système des poupées russes !
  • attachMovie (); est le mot-clé pour appeler / intégrer un movieClip.
  • "identifiantDeLiaison" doit être remplacé par l'identifiant de liaison (l' "étiquette pour Flash") de votre movieClip. Indiquez le bon identifiant de liaison pour que Flash sache quoi aller chercher. N'oubliez pas les guillemets !
  • "nomDuClipRenommé" est un nom que vous allez donner au clip sur la scène. S'il n'y en a qu'une seule version, vous pouvez garder le même que pour l'identifiant de liaison et le nom dans la bibliothèque. S'il y en a plusieurs, vous pourrez les appeler "rond_orange_1", "rond_orange_2", etc... Il ne doit jamais y avoir deux objets qui ont le même nom. N'oubliez pas les guillemets !
  • profondeur doit être remplacé par un nombre. La profondeur, c'est l'équivalent des calques. Mettez un nombre supérieur ou égal à 1. Par exemple, un objet de profondeur 22 sera placé au-dessus d'un objet de profondeur 21, et ainsi de suite... Attention, on ne peut mettre qu'un seul objet par profondeur !
  • le point-virgule signifie que vous avez fini pour cette instruction. Passez à la ligne avant d'écrire la suivante.

Apprenez à Flash à triturer les paramètres du movieClip

Vous vous rappelez de tous les paramètres que l'on pouvait modifier sur un movieClip en le triturant ? Sa taille, son emplacement, sa rotation, ce genre de choses...? On peut faire exactement la même chose de manière dynamique.

Paramètres

Une fois qu'on connaît le nom d'un paramètre, il suffit d'écrire une petite égalité et hop, voilà le paramètre modifié. A noter, si vous demandez plusieurs modifications, ce sera la dernière demandée qui sera prise en compte.

nomDuClipRenommé.paramètre = VALEUR

En plus - c'est génial ! -, si le nom du paramètre est reconnu par Flash, il s'écrit automatiquement en bleu. Vous pouvez même le sélectionner dans la petite liste déroulante qui apparaît quand vous commencez à taper. Donc, si ça reste en noir, c'est que vous avez fait une faute : orthographe, majuscules, oublis d'espaces... tout est possible.

Que peut-on changer sur un movieClip ?

nomDuClipRenommé._x
// position horizontale du centre du movieClip.
Souvenez-vous de vos mathématiques : le x, ce sont les abscisses. L'abscisse 0 est tout à gauche de votre scène. Quand vous allez vers la droite, l'abscisse (x) augmente.

nomDuClipRenommé._y
// position verticale du centre du movieClip.
Les y sont les ordonnées. Attention, y = 0, c'est en haut de la scène. Et y augmente quand on descend.

nomDuClipRenommé._width
// largeur du movieClip, en pixels.

nomDuClipRenommé._height
// hauteur du movieClip, en pixels.

nomDuClipRenommé._xscale
// largeur du movieClip, en pourcentage par rapport à sa largeur initiale. (_xscale = 200 fait un movieClip deux fois plus large)

nomDuClipRenommé._yscale
// hauteur du movieClip, en pourcentage par rapport à sa largeur initiale. (_xscale = 50 fait un movieClip deux fois plus petit)

nomDuClipRenommé._alpha
// transparence du movieClip, en pourcentage.
Comme pour l'animation, quand nomDuClipRenommé._alpha = 0, cela signifie que le movieClip sera totalement transparent. Si nomDuClipRenommé._alpha = 100, il sera pleinement opaque. Entre les deux, on verra plus ou moins au travers.

nomDuClipRenommé._rotation
// angle du movieClip par rapport à sa position initiale.
Vous savez qu'un tour complet, c'est 360°. Aussi, que vous écriviez nomDuClipRenommé._rotation = -10 ou nomDuClipRenommé._rotation = 350, ce sera la même chose. Flash accepte toutes les valeurs, positives ou négatives, et même supérieures à 360°.

Quelques petits secrets de Flash

Surtout, n'oubliez pas la ponctuation !

  • Le point . sert à entrer dans le movieClip dont vous avez besoin. Plus simplement, il sert nommer ce sur quoi on veut agir. Si vous dites "viens" devant une foule de cinquante personnes (aveugles, en plus), personne ne saura à qui vous vous adressez. Si vous précisez : "Alberto, viens", seul Alberto viendra vers vous. Ah, mais il faut aussi qu'il n'y ait qu'un seul Alberto dans la foule (d'où l'importance d'avoir un nom différent pour chaque movieClip !)
    Chez les movieClips, c'est pareil. Si vous dites juste _x = 100, Flash verra bien qu'il doit envoyer quelque chose à la position horizontale 100, mais quoi ? Et il n'enverra rien. Si vous dites canardFuschia._x = 100, c'est le movieClip appelé canardFuschia qui sera déplacé jusqu'à l'abscisse 100.
  • L'underscore _ qui se trouve devant la plupart des noms de paramètres est là... parce qu'il est là. Pour faire la différence, notamment, entre un paramètre et un pas-paramètre. Si, par exemple, vous étiez assez bête pour appeler un movieClip alpha, Flash saurait ainsi faire la différence entre _alpha (la transparence) et alpha (le movieClip qui s'appelle alpha).
  • Le point virgule ; dit à Flash qu'on a fini d'énoncer une ligne d'instructions. C'est comme le point à la fin des phrases. Si vous oubliez le point-virgule, ce n'est pas trop grave, Flash ne vous en voudra pas trop. Par contre, n'oubliez jamais de passer à la ligne à chaque fin de phrase !
  • Les parenthèses () servent à abriter les paramètres, quand il y a des paramètres à donner. Vous aurez l'occasion d'en rencontrer plus tard.

Il y a d'autres signes de ponctuation, mais vous aurez bien le temps de les rencontrer plus tard. Et si vous alliez plutôt jouer avec Flash ?

S'il y a des erreurs de code qui bloquent Flash, il vous le signalera au moment où vous ferez le rendu. Vous pouvez déclencher vous-même la vérification en cliquant sur l'icône Vérifier en haut de la fenêtre Actions. Flash vous indique les lignes où il pense que se situent les erreurs, mais il peut se tromper dans les lignes ou dans l'identification du problème. Vérifiez soigneusement ce que vous avez fait !

Entraînez-vous !

Créez trois petits cochons alignés côte à côte. Le premier doit être plus gros et le troisième doit être un peu transparent. Pas de tricherie, votre scène doit être vide et vous devez tout importer dynamiquement...!

Comment faire ?

1. Créez un movieClip de cochon. Au moment de le convertir, n'oubliez pas de lui donner un identifiant pour que Flash puisse le récupérer. Mon modèle de cochon s'appellera cochon, aussi bien pour son nom que pour son identifiant.

2. Dans la timeline principale, intégrez un à un chacun des cochons et modifiez leurs paramètres pour avoir le premier plus gros et le dernier transparent.

//Cochon numéro 1
this.attachMovie ("cochon", "cochon_1", 1);
cochon_1._x = 100;
cochon_1._y = 80;
cochon_1._height = 150;
cochon_1._width = 135;

//Cochon numéro 2
this.attachMovie ("cochon", "cochon_2", 2);
cochon_2._x = 220;
cochon_2._y = 80;

//Cochon numéro 3
this.attachMovie ("cochon", "cochon_3", 3);
cochon_3._x = 320;
cochon_3._y = 80;
cochon_3._alpha = 50;

Ces paramètres sont les miens et dépendent de la taille des cochons et de la taille de votre scène. N'hésitez pas à les adapter.

3. Faites extrêmement attention :

  • à avoir la bonne orthographe et la bonne ponctuation (les mots-clés apparaissent automatiquement en bleu)
  • à bien parler de cochon_1 quand il s'agit de cochon_1, de cochon_2 quand il s'agit de cochon_2... un oubli de copier-coller est vite arrivé !
  • à ne pas renommer plusieurs movieClips appelés dynamiquement de la même façon (appelez-les bien cochon_1, cochon_2 et cochon_3)
  • à ne pas mettre plusieurs movieClips à la même profondeur (sinon seul le dernier restera, et tous les autres disparaîtront)

Vous savez importer un movieClip sur la scène. Mais s'il faut les coder un par un, à la main, vous n'y gagnez rien du tout ! Profitez jusqu'au bout d'être le chef, dites à Flash de tout faire.

Liste des tutoriels

Tutoriel suivant

Calculer et comparer avec Flash

Me connecter
ou
Je suis nouveau !

Mot de passe oublié ?

Votre compte sera automatiquement créé lorsque vous posterez votre premier dessin.

Pour participer, cliquez sur le bouton "Répondre" en bas du topic de votre choix. Le topic Bienvenue aux nouveaux est l'endroit idéal pour commencer !

C'est parti !