Voir le Shockwave à cette étape
Voir le Flash à cette étape
Voir le DHTML à cette étape
(cliquer)

Télécharger le .dir à cette étape
Télécharger le .fla à cette étape
Télécharger le .htm à cette étape
(bouton droit —> enregistrer la cible sous...)

Premier exercice : les balles —1^ère étape :
Si la boule a déjà disparu ci-contre, cliquez avec le bouton droit (ctrl+clic sur Mac) sur l'animation pour la redémarrer (valable aussi dans les fenêtres Lingo et ActionScript), ou recharger la page (touche F5) pour redémarrer l'animation de la fenêtre Javascript (valable dans la fenêtre Javascript).

On ne s'est occupé, pour l'instant que de mettre la boule en marche, et horizontalement.

Comment l'exprimer ?
"la position horizontale de la boule devient la position horizontale de la boule auparavant + un petit chouïa (ici 1 pixel)"

ou encore :
"la position horizontale de la boule = la position horizontale de la boule + 1"

Dans un langage informatique, on écrira plus volontiers :
"boule.positionHorizontale = boule.positionHorizontale + 1"

Nous allons voir que la manière d'accéder à la propriété "positionHorizontale" de l'objet boule diffère dans les langages, mais que le principe général qui consiste à changer une propriété pour obtenir un résultat visible reste le même.

Du fait que ces deux événements sont système, il n'y a pas lieu de lancer les actions une première fois comme en Javascript. Du fait que l'animation existe et fonctionne, les événements de tête de lecture ont lieu et font avancer la balle de manière répétitive de 1 pixel.
Le pseudo-code écrit plus haut se suffit à lui même :
quand un certain événement répétitif survient
balle.positionHorizontale = balle.positionHorizontale + 1
fin des actions liées à un certain événement répétitif

Néanmoins, nous allons voir que ces événements ne se situent pas "au même endroit" dans l'architecture de l'animation en Lingo et en ActionScript.

  Javascript  

En Javascript, il n'y a pas de notion de tête de lecture, et nous allons devoir recourir à autre chose pour obtenir la répétitivité.

  Lingo 

Les sources des éléments de médias sont stockées dans le fichier de l'animation (il est aussi possible de les stocker à l'extérieur : nous verrons cela dans des techniques plus avancées).
L'interface du logiciel Director est ainsi faite que ces sources sont présentées dans un "réservoir", que Director appelle une distribution.
Les éléments de médias qui s'y trouvent sont appelés, eux des acteurs.
Lorsqu'on met un acteur sur la scène, il prend place dans un sprite. C'est ce sprite qui est son conteneur.
Le sprite peut être qualifié de conteneur universel, plastique et polymorphe, en ce sens que :
- C'est lui qui possède la majeure partie des propriétés qu'il faudra modifier pour manipuler un élément de l'animation,
- Ces propriétés sont constituées d'une collection "permanente" (applicable au sprite quel que soit le type de média qu'il contient — c'est le cas par exemple de la position), et d'une collection qui va varier en fonction du type de média que le sprite contient.
Nous verrons cela en détail à mesure que nous aurons le cas à traiter dans ce cours.

Le sprite est le seul objet disponible sur la scène, il est manipulable à loisir, en position et en déformation et autres.

Le sprite contient un élément de média unitaire (un bitmap, un texte, une forme vectorielle...) mais on ne peut pas mettre un sprite dans un autre sprite.

Les sprites sont appelés, référencés, par leur numéro d'ordre (à partir de MX2004, il est possible de nommer les sprites.). Pour les manipuler, nous n'avons donc qu'à connaître les numéros des sprites que nous créons.

ATTENTION :
Les scénarios ne sont que des outils d'interface.
Dans Director, le scénario n'est qu'une représentation alternative de la scène. Les objets que sont les sprites sont identifiés par leur numéro, et chacun de ces sprites apparaît sous forme d'une piste du scénario.
Les pistes NE SONT PAS des calques.
Chacune des pistes EST un objet sprite, dont l'aspect visuel réel est représenté sur la scène. Il n'y a JAMAIS plusieurs sprites sur la même piste.
C'est n'est pas le cas dans Flash (voir ci-contre).

  ActionScript  

Les sources des éléments de médias sont stockées dans le fichier de l'animation (il est aussi possible de les stocker à l'extérieur : nous verrons cela dans des techniques plus avancées).
L'interface du logiciel Flash est ainsi faite que ces sources sont présentées dans un réservoir que Flash appelle une bibliothèque.
Les éléments qui s'y trouvent sont appelés, eux, des symboles, et ces symboles peuvent être de différents type. Pour l'instant, nous n'utiliserons que le type MovieClip.
Lorsqu'on met un symbole de MovieClip sur la scène, il prend place dans une occurence de clip.
Les occurences de clip peuvent également être créées par code.

Les occurences de clip sont un des objets disponibles sur la scène de Flash, manipulables en position et en déformation et d'autres choses.

Une caractéristique importante de Flash est qu'un symbole de MovieClip peut à son tour contenir d'autres occurences de clip.
Les clips sont ainsi emboitables à l'infini.
Ce qui pose le problème de les appeler, de les référencer.

Les occurences de clip sont appelées par des noms qu'on leur donne quand on les créé. Ce nom est le nom qu'ils portent à l'intérieur du clip qui les contient et lorsqu'on appelle un clip, le chemin complet de ses clips contenants à la manière des poupées russes doit être indiqué.
Dans un premier temps, nous n'imbriquerons pas les clips et nous nous contenterons de faire référence à celui qui les contient tous : la scène, c'est à dire l'animation elle-même, que Flash appelle _root.

ATTENTION :
Les scénarios ne sont que des outils d'interface.
Contrairement à Director, le scénario de Flash n'est pas une représentation de la scène et plusieurs occurences peuvent très bien coexister sur le même calque.
Le calque n'est pas un objet manipulable dans flash et ce n'est surtout pas une représentation d'occurence. Les calques permettent de séparer les éléments lors de la conception, permettent aussi à Flash de calculer ses interpolations si on utilise cette méthode.
Je ne connais pas de moyen de manipuler les calques par code, et du reste, ceux-ci n'existent plus dans le fichiers swf publié : vous pouvez faire auttant de calques que vous le souhaitez, la taille du .swf n'augmente pas.
Enfin, vous constaterez que lorsqu'on créé une occurence par code (avec attachMovie() ou createEmptyMovieClip() ) on ne fait nullement référence à un quelconque calque.

  Lingo  

En lingo, une animation qui n'est pas explicitement bouclée s'arrête à la dernière image rencontrée par la tête de lecture. Comme ici, nous n'avons qu'une seule image, nous devons écrire explicitement de retourner à l'image 1 dès qu'on en sort. Accessoirement, c'est cela qui rend l'événement exitFrame répétitif.
Les trois lignes de code suivantes sont écrites dans la première image du scénario, une fois pour toutes. Nous ne reviendrons jamais dans ce script.
Nous écrirons systématiquement le même dans chaque nouvelle animation que nous ferons en Lingo. Dès qu'on ouvre une nouvelle animation, c'est la première chose à écrire.

on exitFrame me
go to the frame
end

Puis, associé au sprite (bouton droit sur le sprite —> script), nous écrivons ces trois lignes, strictement conformes au pseudo-code écrit plus haut.
on exitFrame me
sprite(1).locH = sprite(1).locH + 1
end

Quelques remarques :
- Le script que nous associons à l'image du scénario et au sprite apparaissent comme deux nouveaux acteurs dans la distribution. Ce n'est qu'une disposition de l'interface : les différents scripts sont accessibles via la distribution. Il n'en demeure pas moins que le premier est associé à l'image 1 du scénario, et que le deuxième est associé au sprite.
- La syntaxe Lingo "sprite(1).locH = sprite(1).locH + 1" n'est qu'un problème trivial de notation : les concepteurs du langage ayant choisi de nommer la position horizontale d'un sprite "locH". Mais ils auraient pu aussi bien l'appeler "mauricette".
- C'est bien le "sprite" dont nous manipulons la propriété pour obtenir l'effet désiré. L'objet n'est surtout pas l'acteur, bien que celui-ci soit aussi traité comme un objet en interne avec ses propriétés à lui.
Mais l'acteur sera TOUJOURS lui-même une propriété de sprite, et JAMAIS l'inverse.
Cette notion devrait s'éclaricir à mesure qu'on avancera dans la compréhension des animations.
- Ci-dessus, l'événement est bien un exitFrame. Il est pris en charge par on, mot-clé qui indique le début du gestionnaire prenant en charge l'événement. Remarquons donc tout de suite la structure du bloc : il y a un marqueur de début, on, et un marqueur de fin, end. Entre les deux, on trouve les instructions à exécuter. C'est une bonne habitude à prendre que d'écrire tout de suite end trois lignes plus bas dès qu'on a écrit on.
D'autres remarques importantes sur les structures dans un script sont données dans les étapes suivantes.
- Enfin, Lingo n'est pas sensible à la casse et on exitFrame est considéré comme identique à On Exitframe. Cependant ActionScript et Javascript le sont ainsi que de nombreux autres langages. C'est une bonne habitude que de respecter la manière d'écrire les choses, en utilisant toujours les mêmes règles. (voir règles pour le nommage des variables... sur ce site).

  ActionScript  

La particularité de Flash est que chaque MovieClip possède lui-même son propre scénario. Les scénarios de MovieClip bouclent automatiquement dès qu'ils ont atteint leur dernière image. L'animation principale, _root, elle, s'arrête lorsqu'elle atteint sa dernière image, mais la tête de lecture y reste alors stationnaire sans arrêter toute l'animation (au contraire de Director). On peut donc écrire un stop() dans la première image de la scène mais ce n'est pas obligatoire.
Les scripts des MovieClip, eux, n'apparaissent pas dans la bibliothèque. Ils sont écrits sur la première image (ou d'autres images si on utilise le scénario en animation, mais ici, nous serons toujours sur une seule image) du scénario DU MovieClip. On y accède en double cliquant sur l'occurence ou en double-cliquant sur le symbole dans la bibliothèque.
Voici donc ce que nous écrivons sur la première image du scénario de notre MovieClip :

this.onEnterFrame=function(){
this._x += 1;
}

Il n'y a pas grand chose à en dire sinon que :
- alors qu'en lingo, le gestionnaire d'évenement est lui-même une fonction, il faut en ActionScript définir une fonction (ce qui est fait ici par le mot-clé function() ) et dire que cette fonction est celle qui doit être exécutée chaque fois que l'événement onEnterFrame survient.
Le code ci-dessus pourrait être écrit de la façon suivante :
function avancer(){
this._x += 1;
}
Puis, en dessous :
this.onEnterFrame=avancer;

Cela reviendrait au même : on définit un objet fonction qui contient des instructions et on la nomme avancer(), puis on dit que l'événement onEnterFrame est associé à cette fonction. La première forme est simplement plus concise : on affecte la fonction à onEnterFrame au moment de sa création, cela économise une ligne de code.
- le mot-clé this indique au MovieClip qu'il est question de lui-même. Le code pourrait s'énoncer ainsi en français : quand mon événement onEnterFrame à moi survient, ma propriété _x à moi augmente de 1.
On a dit plus haut que les occurences devaient être nommées pour pouvoir être appelées. C'est vrai et on verra dans le .fla téléchargeable que je l'ai nommée "b". On pourrait donc écrire le code de la manière suivante :
_root.b.onEnterFrame=function(){
_root.b._x += 1;
}
et cela pourrait être écrit tant sur la première image de la scène que sur la première image du MovieClip (puisque le nom est un nom absolu : l'occurence "b" qui appartient à la scène _root est toujours qualifié).
Mais ce ne serait pas une bonne idée : si nous changeons l'emplacement de notre MovieClip dans la hiérarchie de manière que par exemple notre clip "b" se trouve dans le clip "ba" qui lui-même se trouverait dans le clip "bal" qui lui-même serait sur la scène, il faudrait changer le nom pour écrire "_root.bal.ba.b._x, et ceci partout ou ce chemin est employé. et si nous avons plusieurs clip, il faudra changer pour tout le monde.
En utilisant this, le MovieClip sait qu'il s'agit de lui-même, quel que soit l'emplacement de la hiérarchie de l'animation dans lequel il se trouve.
- Là où les développeurs de Lingo ont appelé la propriété de position horizontale d'un sprite locH, ceux d'ActionScript ont appelé la propriété de position horizontale d'une occurence _x (le "underscore" _ fait partie du nom de la propriété).
- l'ActionScript (comme le Javascript du reste) dispose d'un opératuer concis pour l'incrémentation d'une valeur : machin += 1 est équivalent à machin = machin + 1. C'est un raccourci précieux qui fait gagner beaucoup de temps lorsque les valeurs à incrémenter ont une expression assez longue. Lingo n'en dispose pas. Dans Director MX2004, on dispose de cet opérateur si on utilise la syntaxe dite Javascript.
- enfin, remarquer que les marqueurs de début et de fin de bloc sont également présents : ils sont notés par les accolades ouvrantes et fermantes { et }. Quant aux parenthèses à la fin du mot function(), elles sont obligatoires pour indiquer que ce qui suit est un objet fonction et pas un nom de variable.
Le Code
this.onEnterFrame=function(){
this._x += 1;
}
peut donc s'énoncer ainsi en français (c'est le MovieClip qui parle) :
"quand mon événement onEnterFrame à moi survient, il faut exécuter la fonction qui contient l'instruction suivante 'augmenter de 1 ma propriété position horizontale à moi' ".
- Pour finir, noter le point-virgule qui termine la ligne d'instruction à l'intérieur de la fonction : c'est uniquement la syntaxe pour indiquer la fin d'une ligne d'instruction. Il n'est pas obligatoire mais il est fortement recommandé de le mettre pour des questions de normalisation. Ce point-virgule existe aussi en Javascript, et dans la syntaxe Javascript de Director.

  Javascript  

Comme annoncé plus haut, en Javascript, la fonction s'écrit telle quelle dans la section <head> de la page HTML (il n'y a pas de de notion de tête de lecture donc pas de "enterFrame" en Javascript).
Elle se déclare avec le mot-clé function suivi d'un nom qu'on donne à la fonction (ici bougerBalle() ). Le nom est suivi de parenthèses pour indiquer qu'il s'agit d'un objet fonction.
Puis, plus bas, cette fonction est appelée (exécutée) une première fois par la survenance de l'événement onLoad de la page. ensuite la fonction se rappelle elle-même.

<head>
...
<script language="JavaScript">
function bougerBalle(){
var posH = parseInt(document.getElementById("b").style.left );
posH += 1;
document.getElementById("b").style.left = posH+"px";
setTimeout("bougerBalle()", 40);
}
</script>
</head>

<body onLoad="bougerBalle()">

Quelques remarques sur ce code, déjà plus touffu qu'en ActionScript et en Lingo :
- on ne peut pas directement écrire l'incrémentation sur la propriété de position horizontale comme on le fait en ActionScript et en Lingo. La raison est la suivante.
La position est donnée, dans le HTML, par le paramètre left de l'attribut style de la balise <div> :
<div id="b" style="position:absolute; left:147px; top:101px; width:8px; height:8px; z-index:1"> ... </div>
on récupère ce paramètre comme suit : document.getElementById("b").style.left qui peut se dire en français "le paramètre left de l'attribut style de l'élément portant l'id 'b' dans le document".
On voit que cette position est exprimée sous la forme NNNpx, où NNN est un nombre et "px" un suffixe qui indique que l'unité est le pixel (cette notation est imposée par les recommandations du W3C, qui édicte les normes en matière de HTML). Dans l'exemple left:147px.
Donc, lorsqu'on lit cette propriété à l'aide de la syntaxe document.getElementById("b").style.left, on récupère une chaîne de caractères composée d'une valeur numérique et d'un suffixe (ici "147px").
C'est une chaîne de caractère : on a donc une erreur si on essaye de faire une opération arithmétique dessus comme de lui ajouter 1.
Il faut donc d'abord extraire la valeur numérique (ici 147) à l'aide de la fonction intégrée de Javascript parseInt().
Cette valeur numérique, stockée dans une variable locale posH est ensuite incrémentée de 1, avant d'être réaffectée au paramètre left de la propriété style de la balise <div>. Le même opérateur condensé += qu'en ActionScript existe.
Comme on le voit c'est un peu lourd d'autant que, avant de réinjecter cette valeur dans le paramètre, il faut lui rajouter le suffixe "px" par concaténation(* / **).
On pourrait penser à écrire de manière plus ramassée en regroupant les instructions : document.getElementById("b").style.left = ((parseInt(document.getElementById("b").style.left ))++)+"px"; mais ceci NE FONCTIONNE PAS. Il FAUT décomposer en extrayant d'abord la valeur numérique, puis en incrémentant cette valeur, puis en la réaffectant au paramètre (l'opérateur ++ incrémente une valeur de 1 : nous verrons cela plus tard).
- A la dernière ligne de la fonction, on trouve l'objet de temporisation setTimeout("bougerBalle()", 40), qui relance bougerBalle() au bout de 40 millisecondes.

(*) concaténation : mise bout à bout de deux chaînes de caractères. L'opérateur pour cela est + comme pour l'addition de deux nombres. C'est le contexte qui indique comment se fait l'opération. Entre deux valeurs numériques, on fait une addition, entre deux chaînes, on fait une concaténation, entre une chaîne et un nombre, l'opérateur convertit d'abord le nombre en chaîne, puis fait une concaténation.

(**) Il semblerait qu'on ne soit pas toujours obligé de rajouter le suffixe "px" à la valeur avant de la réinjecter dans le paramètre. Si, sous Internet Explorer, cela marche toujours si on ne le rajoute pas (le suffixe doit etre rajouté en interne dans le navigateur), il semble que sous Firefox, il faille le mettre parfois (parfois, cela marche sans qu'on mette le préfixe, et parfois pas, sans que j'aie trouvé d'explication rationnelle à cela). Dans le doute, je préfère le mettre toujours, pour me tenir à l'abri des surprises.