[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