Exemples et Tutoriaux Animation Flash avec swishmax1 Carrousel script

Carrousel (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.

⇒ animation ⇐

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.

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.

Page de Jean-Paul Molina

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Carrousel (script)