[flash] Action Script - La commande SetInterval()
- Auteur :tony Mise à jour :06-01-2007
Vous maitrisez les fonctions mais desormais vous souhaitez leur faire
prendre une part active dans votre animation. Je vais vous pr?senter
ici comment et pourquoi utiliser la commande setInterval() et son homologue
clearInterval().
// Pourquoi setInterval()
est plus rapide qu'aucune autre m?thode ...
Et comme ? chaque fois, un exemple sera vraiment plus parlant.
Imaginez que vous souhaitez afficher ? l'?cran l'incr?mentation
d'un nombre. Sans la commande setInterval(), le principe le plus simple
pour faire afficher cette incr?mentation est de faire 2 images,
l'une contenant le code d'incr?mentation et la seconde, renvoyant
? la premi?re, pour faire une boucle. La vitesse d'incrementation
est donc d?pendante de la vitesse de lecture de l'animation ( donc
24 images par seconde pour une animation normale ). Autant dire que c'est
peu... br>
A-La m?thode Simple
R?alisons ensemble cette animation :
Pour cela, on va cr?ee une sc?ne contenant 2 calques:
- Le premier calque "Boutons" contient les boutons "Go"
et "Stop" ( dont le principe semble relativement compr?hensible
) et l'affichage de la variable incr?ment?e "_root.Increment".
-Le second calque nomm? "Incr?mentation" contiendra
le code ActionScript.
Voici la partie code :
>Premier Calque : Bouton >>Code du bouton Go : on (release) { gotoAndPlay(2); >>Code du bouton Stop : on (release) { stop();}
>Second Calque : Incr?mentation >>Code Image 1 : _root.Increment = 0; //Mise ? z?ro de la variable >>Code Image 2: _root.Increment ++; //Incr?mentation de la variable >>Code Image 3: gotoAndPlay(2); //renvoi ? l'image 2 |
Et voici le r?sultat :
Comme vous pourrez le constater, cela est assez rapide, mais au niveau
de la programmation, cela ressemble plus ? de la bidouille, qu'?
un vrai code. On reste d?pendant du syst?me d'animation
de Flash, autant dire que cela limite grandement les possibilit?s.
B-La m?thode setInterval()
La commande setInterval permet de r?p?ter l'?xecution
d'une fonction ? intervalles r?guliers. Il est donc indispensable
de connaitre les fonctionnements des fonctions pour esp?rer utiliser
setInterval().
Reprenons la syntaxe de d?claration des fonctions :
function nom_de_la_fonction ( parametres ) corps de la fonction } |
Une fois d?clar?e, cette fonction peut ?tre utilis?e
avec setInterval(), voici la syntaxe d'utilisation:
setInterval (nom_de_la_fonction , fr?quence |
La fr?quence est exprim?e en millisecondes. En la r?glant
? 1, on obtient donc 1000 r?p?titons ? la
seconde, comparez donc avec les malheureuses 24 r?p?titions
que l'on obtenait auparavant !
Une fois cette commande lanc?e, il convient de pouvoir arr?ter
son execution, cela se fera par sa commande d'arr?t : clearInterval().
Voici l'utilisation optimale et TRES fortement conseill?e de ces
2 commandes:
D?claration :
| var NomInterval; NomInterval = setInterval( nom_de_fonction , frequence , parametre1, parametre2 ... ); |
Arr?t :
| clearInterval(NomInterval); |
On s'attaque donc maintenant ? modifier notre pr?cedente
animation, pour la rendre plus efficace.
On va donc supprimer la pr?c?dente partie d'incr?mentation
et y d?clarer notre fonction d'incr?mentation. Les commandes
setInterval() et clearInterval() seront lanc?es respectivement
par les boutons "Go" et "Stop".
Comme vous le voyez, la fonction Incrementation est simplissime, c'est
bien entedu toujours le cas des tutoriaux. Vos cr?ations comporteront
des fonctions largement plus complexes.
Attaquons nous maintenant aux boutons :
>Le bouton Go :
Le code est ? nouveau tr?s simple, on d?clare
cet Interval au nom de IncrementationInterval, ce qui nous permettra
de le d?signer lorsque l'on appuiera sur le bouton Stop.
>Le bouton Stop:
Cela devrait se passer de commentaires ! Voyons tout de
suite le r?sultat :
// Conclusions
Interm?diaires
Les 2 m?thodes ont leurs avantages et leurs inconv?nients.
La m?thode A est nettement plus en harmonie avec
Flash, elle ?vitera nombre de probl?me de synchronisation.
Cependant on deplorera sa lenteur, et les complications de sa mise en
oeuvre ( nombreuses images entre autres ...).
La m?thode B qua t ? elle, est ? coup
sur celle qui ressemble vraiment ? de la programmation et permet
une structure nettement plus ordonn?e, et une mise en oeuvre ultra
simple. Par contre, le manque de synchronisation avec l'affichage de l'animation
demande une grande vigilance lors de la d?finition de la fr?quence
et le r?sultat varie d'une machine ? l'autre ( enfin, il
me semble ).
// Pour
aller plus loin dans l'utilisation de setInterval()
Si vous avez tout compris ? ce que j'ai tent?
de vous expliquer auparavant, je vais pousser les explications encore
plus loin.
A- L'arret conditionnel
Lors de l'utilisation de setInterval() on peut avoir besoin
de faire stopper la commande ? un certain moment. En reprenant
notre exemple d'incr?mentation, imaginons que nous ayons besoin
de stopper l'incr?mentation ? 1000. Le seul moyen pour faire
arr?ter la commande au moment o? la variable est ?
1000 est qu'au moment de l'incr?mentation, on teste sa valeur et
qu'on en d?duise si elle peut continuer ou non.
Si vous ?tes astucieux, vous penserez ? modifier
la fonction r?p?t?e par setInterval pour qu'?
1000, l'incr?mentation se stoppe. C'est certes une possibilit?,
mais cela n'est ni adaptable, ni optimis?, car la commande setInterval
continuerait de tourner en fond, monopolisant des ressources.
La bonne m?thode consiste ? lancer en parall?le
une autre commande setInterval() qui tester a la valeur de la variable
selon la m?me fr?quence que la commande qui l'incr?mente.
Si la variable est ? 1000, alors on provoquera l'arrete de la commande
d'incr?mentation, puis celle du test qui n'as plu lieu d'?tre.
Avant d'arriver ? l'exemple qui clarifiera tout,
attardons-nous quelques instants sur le point suivant...
B- L'utilisation unique
La syntaxe de d?claration de la commande setInterval()
impose la pr?sence d'une fonction, comme vous l'avez remarqu?.
Un peu plus haut dans ce tutorial, je vous ai donn? une syntaxe
de d?claration fausse. Oui j'avoue , j'ai menti ! En fait vous
avez aussi la possibilit? de lancer une fonction sans nom ?
usage unique.
Je sais , ?a ne rime pas ? grand chose, mais
laissez moi vous expliquer. Vous avez bien vu que la fonction d'incr?mentation
?tait ridiculement simple. Nous aurions tout a fait pu nous passer
de la d?clarer au d?but de l'animation, car vraisemblablement,
elle ne sera utiliser que dans le cadre de l'appui sur le bouton "Go".
Dans ce cas, on aurait pu tout simplement d?clar? les choses
de la sorte lors de l'appui sur ce bouton :
Au lieu d'avoir donn? le nom d'une fonction deja
d?clar?e auparavant, on a donc d?clar? une
fonction directement ? l'interieur de la commande setInterval.
L'avantage notoire est que vous n'allez embrouillez votre
code avec des fonctions dont vous n'allez vous servir qu'une fois. Ce
qui est le cas parfait pour les fonctions d'arret conditionnel dont
j'ai parl? au paragraphe pr?c?dent.
C-Une pierre, deux coups !
Utilisons d?sormais ces 2 nouvelles notions pour
decider de faire arr?ter l'incr?mentation pass?
1000.
On va simplement modifi? le code du bouton Go :
Et voici le fameux r?sultat :
// Conclusion
Vous voil? donc enrichi de nouvelles connaissances
en programmation. La commande setInterval() est une vraie b?n?diction
pour la programmation ActionScript, en particulier pour les effets graphiques.
N'h?sitez pas ? la tester de diverses mani?res, en
commencant simplement, comme dans la premi?re partie, pour terminer
sur des effets complexes d'affichage.
Dans mes tutoriaux suivants, je serais amen? ?
l'utiliser ?normement, c'est donc indispensable de bien en comprendre
le fonctionnement. Si vous avez des questions , n'h?sitez pas ?
les poser sur le forum Flash, et consultez les sources des trois animations
pr?sent?e...
Voici les Sources :
- Source
1
- Source
2
- Source
3
Scriptement, votre devou? serviteur, Monsieur Max