Accueil | Tutoriaux

Tutoriaux : Clignotement d'un clip
 

1. Introduction
 

Tout commence par un courrier électronique que j'ai reçu il y a quelques jours... Voici le problème qui m'a été soumis :

"Bonjour,
tout d'abord je vous remercie pour les tutoriaux de votre site qui donnent une nouvelle dimensions aux mathématiques !
Je recherche une petite fonction pour faire osciller une valeur entre 0 et 100, le but est de faire "clignoter" un clip mais de façon douce, en faisant varier l'alpha. J'ai donc pensé à la fonction sinus et à force de tâtonnement j'ai fait
ceci :
  
dt = 1/25;
t = 0;
 
alpha = function(t) {
return 100*Math.sin(Math.PI*t);
}
 
onEnterFrame = function() {
monClip._alpha = alpha(t);
t += dt;
if(t >= 1) {t = 1; dt *= -1;} 
else {if (t <= 0) {t = 0; dt *= -1;}}
}
 

Mon problème c'est que les sommets de la courbe de cette fonction sont aplatis, le clignotement n'est donc pas régulier :-( Je cherche une fonction "en dent de scie" mais j'avoue n'avoir pas trouvé grand chose pour l'instant. Donc voici ma question : connaissez-vous le moyen de faire osciller, de façon régulière, une valeur entre 0 et 100 ?
Merci, Pierre-Louis.
 
2. Commentaires sur ce message
 
Je tiens à remercier Pierre-Louis pour ses compliments sur mon site. Cela me fait toujours plaisir lorsque quelqu'un dit du bien de mon travail et augmente fortement la probabilité que je réponde au courrier : je cède facilement aux flatteries ! Ensuite, la demande de Pierre-Louis est extrêmement claire ce qui n'est pas toujours le cas... Je compte publier les courriers les plus drôles dans lesquels certains visiteurs partent dans des explications délirantes qui rendent la demande d'information totalement incompréhensible. Pour obtenir le clignotement désiré il est très naturel de penser à une fonction trigonométrique. Avec le code ci-dessus, en plaçant sur la scène un simple clip rectangulaire dont le nom d'occurrence est monClip on obtient une animation semblable à celle de droite. Ce clignotement peut convenir à certains projets mais Pierre-Louis veut quelque chose de plus régulier, en "dents de scie". Et bien c'est ce qu'on appelle en termes mathématiques une fonction affine par morceaux et dans ce cas il ne s'agira plus vraiment d'une oscillation mais d'une interpolation. Nous allons dans les lignes suivantes réaliser une interpolation de mouvement à l'aide d'ActionScript ce qui offrira une plus grande facilité de contrôle du résultat.
 
3. Sur la scène principale
 

Sur la scène principale, placez un clip quelconque (dans les exemples de ce tutoriel il s'agit d'un vulgaire rectangle : je ne me suis pas donné beaucoup de mal...). A l'aide du panneau propriétés, nommez cette occurrence "monClip". Désormais vous êtes prêt(e) : passons à la programmation. Nous voulons faire varier la propriété alpha de ce clip de 0 à 100 de manière linéaire, puis de 100 à 0 et ainsi de suite afin d'obtenir un clignotement. Nous voulons pouvoir faire varier la vitesse (ou la fréquence) de ce clignotement... Réglez la cadence de l'animation à 25 images par seconde. Je vous propose de placer 3 champs de texte dynamiques, nommés respectivement texte0, texte1, texte2 : ceci est facultatif mais vous permettra lors de la publication de l'animation de voir les valeurs de certains paramètres.
 
3. Le code et l'animation obtenue
 

Dans le panneau action de votre animation, placez le code ci-dessous :

  

dt = 1/25;
t = 0; v0 = 0;
v1 = 100;
v2 = 0;
 
alpha = function(t) {
if(t < 0.5) 
return 2*(v1 - v0)*t + v0
else 
return 2*(v2 - v1)*(t - 0.5) + v1
}
 
texte0.text = "v0 = " + v0;
texte1.text = "v1 = " + v1;
texte2.text = "v2 = " + v2;
 
onEnterFrame = function() {
monClip._alpha = alpha(t);
t += dt;
if(t >= 1) {t = 1; dt *= -1;} 
else {if (t <= 0) {t = 0; dt *= -1;}}
}
 
4. Le code avec ses commentaires
 

La différence entre les deux clignotements est très subtile et peut paraître négligeable pour certains d'entre vous. Cependant lorsqu'on cherche un effet précis, il est parfois indispensable de considérer ces petites différences... Au niveau de la programmation toute la nuance réside dans la définition de la fonction alpha... Cette fonction prend un paramètre t qui varie entre 0 et 1 et renvoie des valeurs comprise entre 0 et 100. Des calculs assez simples (pour un prof de maths) montrent que :

alpha(0) = v0
alpha(0,5) = v1
alpha(1) = v2

Étudions le code ligne par ligne :
 
On définit une variable dt qui représente la variation de la variable t entre chaque image. Si dt est grand, le clignotement sera rapide. Pour dt=0, le clignotement sera inexistant.
dt = 1/25;
 
La variable t est initialisée à zéro au début de l'animation. Au cours de l'animation elle prendra des valeurs comprises entre 0 et 1.
t = 0;
 
Nous définissons trois variables que nous pourrons faire varier par la suite pour modifier le clignotement : lire le dernier paragraphe de ce tutoriel.
v0 = 0;
v1 = 100;
v2 = 0;
 
On définit une fonction numérique nommée alpha : la représentation graphique de cette fonction passe par les points de coordonnées (0 ; v0), (0,5 ; v1) et (1 ; v2). Il ne s'agit pas d'une coïncidence... Sur les deux intervalles [0 ; 0,5] et [0 ; 1] cette fonction est affine.
alpha = function(t) {
if(t < 0.5)
return 2*(v1 - v0)*t + v0
else
return 2*(v2 - v1)*(t - 0.5) + v1
}
 
On affiche dans les trois champs de texte les valeurs de v0, v1 et v2 (que vous pourrez faire varier par la suite).
texte0.text = "v0 = " + v0;
texte1.text = "v1 = " + v1;
texte2.text = "v2 = " + v2;
 
On définit une fonction qui sera exécutée à chaque image.
onEnterFrame = function() {
 
On règle la transparence de l'occurrence monClip en lui donnant la valeur alpha(t).
monClip._alpha = alpha(t);
 
On ajoute la valeur de dt à la variable t.
t += dt;
 
Si t dépasse la valeur 1, on donne à t la valeur 1 et on change le signe de dt.
if(t >= 1) {t = 1; dt *= -1;}
 
sinon, si t devient plus petit que 0, on donne à t la valeur 0 et on change le signe de dt. Ces lignes de code nous garantissent que la variable t reste toujours comprise entre 0 et 1.
else {if (t <= 0) {t = 0; dt *= -1;}}
 
Fin de la fonction onEnterFrame...
}
 
5. Pour aller plus loin...
 

Pourquoi définir ces variables v0, v1 et v2 en début de script ? Parce qu'il est alors possible de les faire varier et de modifier ainsi l'allure du clignotement... Sur l'animation ci-contre vous pouvez déplacer les points bleus à l'aide votre souris afin de faire varier les paramètres v0, v1 et v2. La glissière permet de modifier la fréquence du clignotement en faisant varier la valeur de dt.

Je ne sais pas si ce tutoriel peut vous servir à quelque chose... j'attends des commentaires. En revanche, j'utilise souvent des fonctions affines par morceaux (comme la fonction alpha de ce tutoriel) pour gérer le déplacement d'un clip sur la scène ou faire une interpolation linéaire entre plusieurs valeurs numériques.
 
Accueil | Tutoriaux