Exemples Exercices Tutoriaux Tutorials Animations Flash avec SwishMax

Carrousel par script

 On se propose de montrer un carrousel de rectangles avec des tailles variables et des
 alphas variables pour donner un effet 3D.
 Ce n'est que de l'ActionScript. Vous ne pourrez pas tester dans SwishMax mais seulement
 dans FlashPlayer et dans un navigateur ( Export / SWF+HTML )

 J'avais déjà vu ce genre d'exemple (aucun fichier source donné) et il comportait un sprite
 et du script. Ici, c'est entièrement par script.

Cliquez ici pour voir l'animation finale



Partie 1 : Création des Objets.

 Définissez les dimensions générales 640x480 ainsi que la couleur du fond #999966.
 Prenez un Frame Rate égal à 30 ou une autre valeur suivant le résultat.

Partie 2 : Script
Dans Outline, sélectionnez la scéne, passez en Mode Expert.
Entrez le script suivant :
onLoad () 
{
        // centre ellipse= milieu scène
    xc = 320;
    yc = 240;
        
        // ellipse = trajectoire
    a = 200;    b = 65;
        // rectangle
    largeur = 80;    hauteur = 50;
    
     whitesmoke = 0xF5F5F5;
     maroon = 0x800000;
     goldenrod= 0xDAA520;
     burlywood = 0xDEB888;
          
    colors = [ maroon , goldenrod, burlywood ];
    alphas = [100, 100, 100];
    ratios = [1, 120, 1 ];  
    
    // autant de points de départ que de sprites
    xd = new Array();   yd = new Array();
    angd = new Array(); // angles départ
    // initialise et équirépartit les rectangles sur l'ellipse
    for (j = 0; j < 8; j++) 
    {
        createEmptyMovieClip("base"+j, j );
        angd[j] = 45*j - 90;
        xd[j] = xc + a * Math.cosdeg( angd[j] );
        yd[j] = yc - b * Math.sindeg( angd[j] );
    }   
}
/*-------------------------------------------
   drawbase
   objectif : dessine un rectangel dynamique de
   longueur et de hauteur variable
   entrées : 
       xx, yy : coordonnées pt ellipse= centre rectangle
       lequel  : numéro du rectangle
---------------------------------------------
function drawbase( xx , yy , lequel)
{    
     coeff1 = scale( angd[lequel] , 0.6 );    // réduction
     wx = largeur * coeff1;    // largeur
     hx = hauteur * coeff1;   // hauteur

     matrix = {matrixType:"box", x:xx, y:yy, w: wx, h: hx, r:0};
     ("base"+lequel).beginGradientFill("linear", colors, alphas, ratios, matrix);
     ("base"+lequel).lineStyle(1, maroon  , 50 );
     ("base"+lequel).moveTo( xx - wx/2, yy - hx/2 );
     ("base"+lequel).lineTo( xx + wx/2, yy - hx/2 );
     ("base"+lequel).lineTo( xx + wx/2, yy + hx/2 );
     ("base"+lequel).lineTo( xx - wx/2, yy + hx/2 );
     ("base"+lequel).lineTo( xx - wx/2, yy - hx/2 );
     ("base"+lequel).endFill();   
             // alpha variable
     ("base"+lequel)._alpha = 100*scale( angd[lequel] , 0.5 );    
}
onFrame (1) 
{       // trace les 8 rectangles en position
	// à une échelle et un alpha donnés.
    for (i = 0; i < 8; i++)     drawbase( xd[i], yd[i], i);
}
onFrame (2)
{   
    incteta = 2;   // incrément angulaire

    for (k = 0; k < 8; k++) 
    {
        ("base"+k).clear();   // efface
        // on augmente l'angle pour mettre le rectangle
        // plus loin sur l'ellipse
        angd[k] += incteta;   
        // on a fait un tour , on réinitialise
        if (angd[k] >= 270) angd[k] = -90;
        
        xd[k] = xc + a * Math.cosdeg( angd[k] );
        yd[k] = yc - b * Math.sindeg( angd[k] );
        
    }
    // retourne en arrière pour retracer
     prevFrameAndPlay(); 
}
/*-------------------------------------
  calcule echelle variable
  angle =-90    sc = 1;
  angle = 90    sc = 1-delta
  
  0.6 pour rectangle,   0.5 pour alpha
--------------------------------------*/
function scale( angle , delta)
{
    if ( angle > 90 ) angle = 180 - angle; // symétrie
    
    a1 = -delta / 180;
    b1 = 1 - delta/2;
    return (a1*angle + b1);
}


Voilà, cet exemple est terminé. Modifiez avec prudence.
On pourrait mettre des images à la place des rectangles; à vous de voir.
Retour MENU