Exemples et Tutoriaux Animation Flash avec swishmax1 Transformation formes (Script)

Transformation de formes (Script)

On se propose de montrer un exemple de transformation de formes.
C'est essentiellement du script et une bonne compréhension de programmation est nécessaire.

⇒ animation ⇐

La transformation démarre automatiquement. Cliquez ensuite sur la scène pour passer à la déformation suivante.

On part d'un cercle pour passer à une astroïde, puis à une autre courbe, puis à une cardioïde.
Il vaut mieux attendre un peu avant de passer à une autre transformation pour apprécier pleinement l'effet.

Flash permet de faire de l'interpolation de forme à partir de son propre environnement de conception.
SwishMax ne le permet pas.

Les différentes étapes vont être décrites maintenant.

Création des Objets

Définissez les dimensions générales 640x480. Couleur de fond : 0000FF. Frame rate = 150.

Script SwishMax

Voici le script général de Scene_1

onLoad () 
{
    n = 1000;  // 1000 segments
    R = 100;    // rayon du cercle
    increment = 2*Math.PI / n;
    compteur=1;       // pour compter les clics souris
    		// centre de la scène
    xc = Stage.width/2;
    yc = Stage.height/2;
    		// tableaux pour coordonnées des 4 courbes
    x1 = new Array;
    y1 = new Array;
    form1();	// calcule les coordonnées courbe 1
    x2 = new Array;    y2 = new Array;
    form2();	// calcule les coordonnées courbe 2
    x3 = new Array;    y3 = new Array;
    form3();	// calcule les coordonnées courbe 3
    x4 = new Array;    y4 = new Array;
    form4();	// calcule les coordonnées courbe 4
    /*------------------------------------------------------
     calcule la distance maxi à parcourir en x et y
    pour que tous les pts arrivent en même temps au final 
    -------------------------------------------------------*/
    dx21 = dx_maxi(x2,x1); dy21 = dy_maxi(y2,y1);
    dx32 = dx_maxi(x3,x2); dy32 = dy_maxi(y3,y2); 
    dx43 = dx_maxi(x4,x3); dy43 = dy_maxi(y4,y3);
    // décoration
    whitesmoke= 0xF5F5F5;
    darkslateblue= 0x483D8B;
    navy = 0x000080;
    darkblue = 0x00008B;
    		// crée un clip niveau 0
    createEmptyMovieClip("base", 0 );
    colors = [whitesmoke, darkslateblue , navy, darkblue ];
    alphas = [100, 100, 100, 100];
    ratios = [0, 150, 200, 50];
    matrix = {matrixType:"box", x:xc-2.2*R, y:yc-2.2*R, w:3.7*R, h:3.7*R, r:0  };
    base.lineStyle(1, darkslateblue, 100 );	// contour
    drawForm(x1,y1);	// trace la courbe 1
}
/*---------------------------------------------
  calcule les positions une fois pour toutes
  en x et en y et remplit les tableaux
 ---------------------------------------------*/
function form1()
{       
     for ( i=0; i< n; i++)
     {    // demarre du haut puis sens trigo
       x1[i] = xc - R * Math.sin( increment * i);
       y1[i] = yc - R * Math.cos( increment * i);  
     }         
}
// astroïde
function form2()
{       
     for ( i=0; i< n; i++)
     {    // demarre du haut puis sens trigo
       xx = Math.sin( increment * i);
       yy = Math.cos( increment * i);
       x2[i] = xc - R * xx * xx * xx;
       y2[i] = yc - R * yy * yy * yy;  
     }         
}
function form3()
{       
     for ( i=0; i< n; i++)
     {    
       xx = Math.sin( increment * i);     
       x3[i] = xc - (R * xx * xx)/(2 + xx);
       y3[i] = yc - R * Math.cos( increment * i);  
     }         
}
// cardioïde
function form4()
{       
     for ( i=0; i< n; i++)
     {      
       x4[i] = xc - 0.5*R * Math.cos( increment * i) + 0.25 * R * Math.cos( 2*increment * i);
       y4[i] = yc - 0.5*R * Math.sin( increment * i) + 0.25 * R * Math.sin( 2*increment * i);  
     }         
}
/*--------------------------------------------------
		Fonction de tracé d'une courbe
	On utilise un gradient radial de couleurs
--------------------------------------------------*/
function drawForm(x,y)
{
     base.beginGradientFill("radial", colors, alphas, ratios, matrix);
     base.moveTo( x[0], y[0] );
     for ( j=1; j< n; j++)     base.lineTo( x[j] , y[j] );  
     base.endFill();       
}
// calcule distance maxi à parcourir en x
function dx_maxi(xx2 , xx1)
{
   maxi = 0;
   for ( ii=0; ii<n; ii++)
   {
       delta = Math.abs(xx2[ii] - xx1[ii]);
       if (delta > maxi)  maxi = delta;
   }  
   return maxi; 
}
// calcule distance maxi à parcourir en y
function dy_maxi(yy2 , yy1)
{
   maxi = 0;
   for ( ii=0; ii<n; ii++)
   {
       delta = Math.abs(yy2[ii] - yy1[ii]);
       if (delta > maxi)  maxi = delta;
   }  
   return maxi; 
}
/*-------------------------------------------------------------
  calcule l'ensemble des nouvelles positions intermédiaires
  Fonction qui sera appelée de façon récurrente
 ---------------------------------------------------------------
function speed(xd, yd, xf, yf, dxmax, dymax)
{
    for ( k=1; k < n; k++)
    {
        ddx = xf[k]-xd[k];
        dx = ddx / dxmax;	// définit incrément en x
        xd[k] += dx; 
        
        ddy = yf[k]-yd[k];
        dy = ddy / dymax;	// définit incrément en y
        yd[k] += dy; 
    }
}
// réinitialise les tableaux 
function reset(){ form1(); form2(); form3(); }
/*--------------------------------------------------
   fonction qui aiguille vers une transformation
   en fonction d'un clic de souris sur la scène.
---------------------------------------------------*/
function go( f )
{
   switch( f)
   {
     case 1 :
        speed( x1, y1, x2, y2, dx21, dy21 );
        base.clear();
        drawForm(x1,y1);
     break; 
     case 2 :
        speed( x2, y2, x3, y3, dx32, dy32 );
        base.clear();
        drawForm(x2,y2);
     break; 
     case 3 :
        speed( x3, y3, x4, y4, dx43, dy43 );
        base.clear();
        drawForm(x3,y3);
     break; 
   } 
}
// en Frame1 on lance la 1ère transformation
onFrame(1)
{    go(compteur); }
// lance la récurrence
onFrame(2)
{   prevFrameAndPlay();   }
/*-----------------------------------------------------------
	La scène est un bouton virtuel
	A chaque clic, une nouvelle transformation démarre
	Il vaut mieux attendre un peu entre chaque clic
	pour que la transformation précédente soit achevée.
-----------------------------------------------------------*/
on (press) 
{
    compteur++;  
    if (compteur==4)   // 4 courbes seulement , alors on revient au départ
    {
         compteur=1; 
         reset();
    }
}

Bon, c'est juste une élucubration de ce qui me sert de cortex cérébral.
Je verrai bien une application aux pages d'un livre qui tourneraient.
Ceci n'a pas été fait par interpolation de formes ... pour l'instant.

Page de Jean-Paul Molina

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Transformation de formes (Script)