occurrence

Comment programmer en flash:

La programmation consiste à placer des commandes (des mots) dans un ordre bien défini aux endroits précis (sur

l'une des images d'une animation, sur un bouton* ou sur un movie clip*) d'une animation afin d'obtenir de

l'interactivité.

* (L'occurrence d'un bouton ou d'un movie clip)

Les puristes du C++ et autres langages sauteront au plafond en lisant cette "pseudo-définition" mais il faut comprendre que cette

explication s'adresse à des débutants en programmation qui veulent faire leurs premiers pas.

Essayons cette métaphore : Le dessin animé est à la télévision ce que l'animation est à Flash, alors que les jeux vidéos sont à la

télé ce que les animations interactives sont à Flash. Les animations sont interactives grâce à la programmation.

Pour être plus précis, définissons les termes officiels utilisés en programmation :

La commande est un mot (généralement un verbe) qui définit une "action" à faire

(Ex. : Déplacer ou agrandir un symbole sur la scène, changer le contenu d'un texte sur la scène...)

La propriété est un mot (généralement un qualificatif) qui indique une caractéristique

Une instruction est une ligne de commandes

Un script est un ensemble de lignes d'instructions

Flash était à l'origine un logiciel d'animation mais il s'est doté peu à peu de fonctions de "programmation". Comprenez le terme

"fonction" par "possibilité" et celui de "programmation" par "interactivité". Pour être plus précis, les animations peuvent être

interactives si l'utilisateur clique sur des boutons de l'animation, fait certains choix dans le déroulement de l'animation. etc. Au

fur et à mesure des différentes versions de Flash, des fonctionnalités ont été ajoutées. Aujourd'hui, Flash 5 permet une très

grande interactivité. Celle-ci est possible grâce à de la programmation placé sur des boutons, des movie clips et sur des images.

Les scripts sont plus ou moins longs. Voyons à présent quelques exemples :

Script : Voici des exemples de scripts.

stop ();

temps=12;

on (press) {

gotoAndStop (2);

}

on (press) {

for ( val=0; val<=4; val++ ) {

setProperty ( "forme"+(val+1), _x, oux[val] );

setProperty ( "forme"+(val+1), _y, ouy[val] );

}

}

On pourra parler de la fenêtre des scripts, sous entendu, la fenêtre des actions où on place des scripts.

ATTENTION : On ne peut pas placer un script sur un symbole, il est obligatoirement placé sur l'occurrence d'un

symbole. Sur l'occurrence d'un bouton ou l'occurrence d'un movie clip.

Actions : Ce terme est utilisé au pluriel principalement dans Flash pour définir la "programmation". Lorsqu'on parle d'une

action, on parle alors d'une commande en programmation classique. "SetProperty" est une action. Mais on peut aussi parler d'une

action lorsqu'on parle d'un groupe d'actions faisant une tache précise. Il faut reconnaître que tout ceci est quelque peu ambigu

mais cela est dû au fait que dès le départ, pour simplifier la programmation dans Flash, les créateurs de ce logiciels ont utilisé un

vocabulaire plus parlant mais moins technique. Donc, pour résumer, voici un tableau récapitulatif.

Action (une) > Peut être compris comme un "Ensemble d'actions" > Ensemble d'instructions

Actions (Les) > Peut être compris comme l'ensemble des actions disponibles dans Flash > L'ensemble des

commandes, propriétés, mots clés, etc disponibles dans Flash

Actions (Des) > Peut être compris comme des lignes d'instructions

Script (Un ou le) > Peut être compris comme l'ensemble des instructions placées sur une image ou un bouton.

A présent, pour programmer dans Flash, deux modes sont possibles. En effet, selon votre niveau en programmation, vous pouvez

utiliser une méthode relativement intuitive ou bien taper le code vous même (il faut comprendre par "code" le mot "scripts"). Les

deux méthodes vous sont présentées aux chapitres ci-dessous :

- Le mode Expert

- Le mode Normal

CONSEIL : MEME SI VOUS ETES DEBUTANT EN PROGRAMMATION, IL EST FORTEMENT CONSEILLE DE

PROGRAMMER EN MODE EXPERT ET NON EN MODE NORMAL AFIN DE PRENDRE DE BONNES HABITUDES.

Où placer les actions ?

Nous devrions commencer par nous poser la question suivante : Que veux-je faire ?

En effet, en fonction du mode de déclenchement de l'action que vous souhaitez réaliser, l'emplacement diffère. On fait la

différence entre le mode manuel (l'utilisateur doit cliquer ou appuyer sur une touche du clavier) et le mode automatique

(l'utilisateur n'a rien à faire. Seul le déplacement de la tête de lecture déclenche l'action).

Sur une image : La timeline que vous voyez est celle d'une animation et non celle d'un symbole. Il serait néanmoins possible de

placer cette action sur l'image d'un movie clip. Dans l'exemple ci-dessous, une variable intitulée "tempo" est initialisée à 1 et une

occurrence de type movie clip intitulée "coche" est masquée.

Sur un bouton : Le bouton suivant déplacera la tête de lecture sur l'image 15 de la timeline de l'animation dès que l'utilisateur

Il faut reconnaître qu'il existe une certaine ambiguïté relative au movie clip par rapport au bouton. Vous pourrez constater que

dans certains cas, cela revient presque au même de placer une action sur un bouton ou un movie clip. Seule la programmation

change. En effet, vous pourriez vous dire "mais quelle différence entre les deux exemple ci-dessus ?" Permettez-nous de vous le

rappeler. Il y a plusieurs timeline dans une animation. Celle de l'animation elle-même et celle des movie clips. Donc, dans le cas

du bouton, l'action "gotoAndStop (15);" aura pour effet de déplacer la tête de lecture à l'image 15 de la timeline de l'animation.

Dans le cas du movie clip, même si le movie clip est placé sur la scène, même si ce script est placé sur l'occurrence, l'instruction

"gotoAndStop (15);" aura pour effet de d'afficher l'image 15 de la timeline du movie clip sans que la tête de lecture de

l'animation ne bouge.

En clair, si vous démarrez avec Flash, il est fortement déconseillé d'utiliser "on clipevent". Utilisez plutôt l'action "tell target".

Elle est plus limitée mais plus facile à comprendre.

Lorsque le code est placé sur un bouton ou un movie clip, les actions peuvent se déclencher à différents moments. Ces moments

s'ont appelés des événements. Il faut donc une syntaxe qui permet de gérer ces événements avant d'exécuter les instructions. On

appelle alors cela des "Gestionnaires d'événements".Mode Débutant :

Programme facile :

Afin que tout le monde puisse accéder à la programmation dans Flash, le logiciel dispose d'un mode de programmation simplifié.

La fenêtre de scripts est alors divisée en 3 parties :

Dans la partie gauche de la fenêtre, vous pouvez sélectionner une commande. Celle-ci vient se placer automatiquement dans la

partie supérieure droite de la fenêtre. Si vous avez besoin d'effectuer certains réglages, ils se feront via la zone de dialogue située

en bas de la fenêtre.

Exemple 1 : Placer un stop sur une image.

Clic sur l'image clé de votre choix 1.

Clic sur le bouton "+" et sélectionner la commande "Stop" via la commande "Actions Basiques" (Basic

actions)

2. 

ou

Clic sur l'image clé de votre choix 1.

Maintenez la touche "Esc" ou "Echapp" et taper les lettres "s" et "t" l'une derrière l'autre. 2.

ou

Clic sur l'image clé de votre choix 1.

Cliquer sur la rubrique "Actions Basiques" (Basic actions) 2.

Double-cliquer sur la commande "Stop" ou la faire glisser sur la partie droite de la fenêtre des scripts. 3.

Fonctions intermédiaires > telltarget >

A quoi ça sert :

- Cette commande permet de contrôler la tête de lecture d'un movie clip.

- Cette commande est obsolète, il est préférable d'utiliser la syntaxe pointée.

Comment l'utiliser ?

Comme vous venez de le lire ci-dessus, cette utilisation du "Tell target" est obsolète dans Flash 5, même si la commande

fonctionne. Voici tout de même le code :

on (press) {

tellTarget ("ici") {

gotoAndStop (2);

}

}

Analysons la structure :

Ligne 1 : TellTarget ("ici") la commande prévient Flash que les instructions qui vont suivre s'adressent au movie

clip nommé "ici". Les guillemets sont indispensables. N'oubliez pas non plus l'ouverture de l'accolade.

Ligne 2 : Vous placez les commandes (sur plusieurs lignes si nécessaire pour plusieurs commandes).

Ligne 3 : Vous fermez l'accolade que vous avez ouverte sur la première ligne.

Si nous devions utiliser la syntaxe pointée, voici le code ci-dessous :

on (press) {

ici.gotoAndStop (2);

}

Outre une syntaxe plus courte, elle est surtout plus simple mais vous pouvez comprendre son fonctionnement au chapitre sur la

syntaxe pointée.

Syntaxe pointée

Comment programmer ?

Flash 5 aura été un tournant dans l'histoire du logiciel. En effet, les langages de programmation les plus avancés utilisent une

syntaxe qualifiée de pointée. Elle compose "ses phrases" appelées des "instructions" à partir d'objets, de movie clips, de

méthodes, de propriétés et de variables. Les variables peuvent se trouver au même emplacement que les méthodes et propriétés.

Ce sont des mots séparés par des points, d'où le nom de syntaxe pointée. Il est évident que si vous lisez ces termes pour la

première fois, cela ne vous avancera pas. Lorsque vous aurez compris le mécanisme et aurez fait la différence entre ces termes

là, vous comprendrez ce que vous venez de lire. En attendant, simplifions les explications et commençons par quelques exemples

:

objet.méthode

lamain.setRGB(0xCCFF66);

Dans cet exemple, "lamain" est un objet couleur. Une occurrence de type movie clip sur la scène, est contrôlée par

cet objet. "setRGB..." est une méthode de l'objet "lamain". Cette méthode consiste notamment dans ce cas à changer

la couleur de l'occurrence contrôlée par l'objet "lamain".

movieclip.méthode

diapo.gotoAndStop(2);

Dans cet exemple, "diapo" est le nom d'une occurrence de type movie clip. "gotoAndStop" est une méthode du

movie clip "diapo" qui consiste a lui ordonner de placer sa tête de lecture sur l'image 2 (sur la timeline interne du

movie clip).

movieclip.propriété

diapo._x=15

Dans cet exemple, "diapo" est le nom d'une occurrence de type movie clip. "_x" est une propriété du movie clip

"diapo". Cette propriété lit et change la position horizontale (par rapport au bord gauche de la scène) du movie clip

"diapo". Dans l'exemple ci-dessus, l'occurrence de type movie clip intitulé "diapo" via la palette des occurrences, est

placée à 15 pixels du bord gauche de la scène.

Lorsque vous placez des actions dans vos animations, sur vos boutons et movie clips, vous avez pû constater qu'il existe deux

modes de programmation. Le mode "Normal" et le mode "Expert". Dans ce dernier cas, vous pouvez taper votre code de deux

façons. Voyons l'exemple suivant :

on (press) {

tellTarget ("ici") {

gotoAndStop (2);

}

}

Et :

on (press) {

ici.gotoAndStop (2);

}

Nous ne nous étendrons pas sur la première syntaxe qui utilise "tell target". Reportez vous à ce chapitre pour de plus amples

informations. Retenez tout de même que cette syntaxe est obsolète même si elle fonctionne.

Penchons-nous donc plutôt sur la syntaxe pointée :

Le premier mot "ici" est le nom d'une occurrence de type movie clip qui est concerné par "gotoAndStop (2). Le point sépare les

différentes "parties" (animation, objets, movie clips, méthodes, propriétés et variables) qui composent la ligne d'instruction.

"gotoAndStop est appelée "méthode" de l'objet "ici".

Une instructionest, comme nous l'avons vu ci-dessus, composée de plusieurs parties séparées par des points.

xxxxxx.yyyyyy

xxxxxx : Vous pouvez saisir le nom d'un objet ou d'un movie clip.

yyyyyy : Vous pouvez placer le nom d'une méthode ou d'une propriété.

Dans certains cas, yyyyyy pourrait aussi être une variable rattachée à un movie clip.

xxxxxx.yyyyyy.zzzzzz

Dans le cas ci-dessus, cela signifie qu'une imbrication a été effectuée. xxxxxx est un movie clip et yyyyyy un autre qui est

contenu dans le premier. Dans ce cas, zzzzzz est une méthode, une propriété ou une variable rattachée à yyyyyy.

Exemples :

corps.tete.oeil._x=12

"corps" est un movie clip qui contient un autre movie clip "tete" qui en contient lui même un autre, "oeil". C'est ce dernier dont

la propriété "_x" (position horizontale d'un objet sur la scène) est réglée à 12 (pixels).

corps.tete=12

Nous aurions pu aussi avoir un movie clip "corps" qui contient une variable intitulée "tete" qui a pour valeur 12.

Cette méthode de rédaction du code est une méthode universelle utilisée dans de nombreux langages que nous vous invitons

donc à utiliser au détriment d'une syntaxe plus longue et qui devrait être obsolète sur Flash 6 ou 7.

Les gestionnaires d'événements

Qu'est ce que c'est ?

Les actions que vous placez sur un bouton ou un movie clip peuvent se déclencher à différents moments. Pour contrôler ce

moment, vous devez toujours commencer par insérer le code suivant sur un bouton ou un movie clip :

on (event) {

...

}

ou

on clipevent (event) {

...

}

On appelle ces lignes de code, des gestionnaires. Ils gèrent des (v(nements (event(s)). Le mot "on" introduit l'(v(nement qui

suit. Dans le cas d'un bouton, l'(v(nement sera placé entre parenthèses (Premier exemple). Dans le cas d'un movie clip

l'événement doit contenir le mot clipevent (afin de le différencier du bouton) puis l'événement entre parenthèses (Deuxième

exemple). Selon le symbole, "Bouton" ou "Movie clip", les événements diffèrent :

Les événements :

D'un movie clip :

load : au chargement de l'animation

unload : au déchargement de l'animation

enterFrame : lorsque la tête de lecture entre sur une image

mouseDown : lorsque l'utilisateur clique sur l'occurrence

mouseUp : lorsque l'utilisateur relâche le clic de l'occurrence

mouseMove : lorsque l'utilisateur bouge la souris

keyDown : lorsque l'utilisateur enfonce une touche du clavier

keyUp : lorsque l'utilisateur relâche une touche du clavier

(data : lorsque le movie clip reçoit des données) - Au moment où nous écrivons cet article, nus ne sommes pas sûr

du fonctionnement de cet événement.

D'un bouton :

press : lorsque l'utilisateur clique sur l'occurrence

release : lorsque l'utilisateur relâche le clic de l'occurrence

releaseOutside : lorsque l'utilisateur relâche le clic de l'occurrence en dehors de celle-ci

rollOver : lorsque l'utilisateur passe le curseur de la souris au dessus de l'occurrence

rollOut : lorsque l'utilisateur sort le curseur de la souris en dehors de l'occurrence

dragOver : lorsque l'utilisateur déplace et lâche le curseur au dessus d'une occurrence

dragOut : Idem dragOver mais relâche en dehors

keyPress : lorsque l'utilisateur enfonce une touche du clavier