[Flash] MovieClip.curveTo

Vous avez vu ou vous verrez avec M. Kuhnel comment faire des dessins sous flash. Ce que vous verrez n'est quasiment rien. Je vous ai déjà montrez comment on utilisait les outils lineTo() et sous différentes manières (bien sur pour ceux qui ont regardé et se sont entrainé).

Cette fois ci je vous montre un autre outils, l'outils curveTo(). Il marche de la même manière que lineTo() : création d'un clip vide, mise en places des caractéristiques du trait, mise en place d'un point d'ancrage de départ.
La chose qui différencie par la suite est qu'il faut relier la ligne à un autre point d'ancrage et surtout qu'il y a en plus un point de controle pour déterminer l'allure de la courbe.

Vous pouvez bouger les rond, ce sont des clips draguable. Vous pourrez voir l'utilité de chaque points.

Voici le code vous permettant de recréer le swf de dessus. Il ne vous manquera plus qu'à créer un clip du nom de "rond" et a le lier. Sinon le code mettra tout en place.

Code:: // importation de la classe tween de [url]http//www.laco.wz.cz/tween[/url]
#include "lmc_tween.as"

//boucle permettant de créer les 3 clips sur scène
for(i=0;i<3;i++){
clip=this.createEmptyMovieClip("rond"+i,this.getNextHighestDepth());
clip.attachMovie("rond","rond"+i,this.getNextHighestDepth());
}

//disposition des clips sur scène
rond0._x=50;
rond0._y=50;
rond1._x=350;
rond1._y=350;
rond2._x=50;
rond2._y=350;

//changement de couleur du rond servant au contrôle
rond2.colorTo(0x8D7821);

//création d'un clip vide qui contiendra le trait
this.createEmptyMovieClip("courbe_mc",-1);

//fonction onEnterFrame utilisé pour rafraichir la courbe à la vitesse de l'animation
onEnterFrame=function(){
//on vide le clip courbe_mc
courbe_mc.clear();
//on donne les caractéristiques des traits
courbe_mc.lineStyle(1,0xDAC263);
//on donne le poitn de départ du trait
courbe_mc.moveTo(rond0._x,rond0._y);
//on commence par donner les coordonnées du point de contrôle puis ceux
//du deuxième point d'ancrage
courbe_mc.curveTo(rond2._x,rond2._y,rond1._x,rond1._y);
}

//mise en place de la dragabilité des clips
rond0.onPress=function(){
this.startDrag();
}
rond0.onRelease=rond0.onReleaseOutside=function(){
this.stopDrag();
}

rond1.onPress=function(){
this.startDrag();
}
rond1.onRelease=rond0.onReleaseOutside=function(){
this.stopDrag();
}

rond2.onPress=function(){
this.startDrag();
}
rond2.onRelease=rond0.onReleaseOutside=function(){
this.stopDrag();
}

NB : N'oubliez pas d'installer la classe tween dont je vous ai parlé, je l'utilise ici pour changer les couleurs via le code. Sinon ça ne marchera pas et vous aurez des messages d'erreur.

Cette fois ci je corse un peu les choses (voir beaucoup pour certains). Là j'utilise les propriétés de barycentre pour faire naviguer un rond sur la courbe que nous avons créé.

Code:: #include "lmc_tween.as"

mvt = 0;
dt = 0.02;

for(i=0;i<4;i++){
clip=this.createEmptyMovieClip("rond"+i,this.getNextHighestDepth());
clip.attachMovie("rond","rond"+i,this.getNextHighestDepth());
}
rond0._x=50;
rond0._y=50;
rond1._x=350;
rond1._y=350;
rond2._x=50;
rond2._y=350;
rond3._x = barycentre(rond0._x, rond2._x, rond1._x, mvt);
rond3._y = barycentre(rond0._y, rond2._y, rond1._y, mvt);

rond2.colorTo(0x8D7821);
rond3.colorTo(0xFF0000);

//ceci est la fonction permettant le calcul de barycentre.
function barycentre(a, b, c, t) {
return (1-t)*(1-t)*a + 2*(1-t)*t*b + t*t*c;
}

this.createEmptyMovieClip("courbe_mc",-1);
onEnterFrame=function(){
//on incrémente la variable mvt par dt à chaque cycle.
mvt += dt;
//maintenant on donne les valeurs de position x et y au rond rouge
rond3._x = barycentre(rond0._x, rond2._x, rond1._x, mvt);
rond3._y = barycentre(rond0._y, rond2._y, rond1._y, mvt);
//ces conditions permettent de changer le sens de mouvement du
//rond rouge quand il arrive aux extrémités
if(mvt >= 1) {
   mvt = 1; dt *= - 1;
}
else {
   if(mvt <=0) {
      mvt = 0; dt *= -1;
   }
}
courbe_mc.clear();
courbe_mc.lineStyle(1,0xDAC263);
courbe_mc.moveTo(rond0._x,rond0._y);
courbe_mc.curveTo(rond2._x,rond2._y,rond1._x,rond1._y);
}

rond0.onPress=function(){
this.startDrag();
}
rond0.onRelease=rond0.onReleaseOutside=function(){
this.stopDrag();
}

rond1.onPress=function(){
this.startDrag();
}
rond1.onRelease=rond0.onReleaseOutside=function(){
this.stopDrag();
}

rond2.onPress=function(){
this.startDrag();
}
rond2.onRelease=rond0.onReleaseOutside=function(){
this.stopDrag();
}

» [Flash] SONDAGE - Quel est votre version de flash?
» [Flash] Playlist
» [Flash] Interpolations
» [Flash] Random