Exemples et Tutoriaux Animation Flash avec swishmax Effet moiré

Effet de moiré

On se propose de montrer entièrement par script comment réaliser un effet de moiré.

Principe

On crée d'abord un groupe de cercles concentriques fixes.
On crée ensuite le même groupe, à un autre endroit de la scène, que l'on translatera progressivement vers les cercles fixes de façon à les recouvrir totalement.
Ce qui crée un effet visuel de moiré. On utilisera un timer.
Les différentes étapes vont être décrites maintenant.

Création des Objets

Définissez les dimensions générales 440x220. Couleur de fond : FFFFFF.
Frame rate = 200.
Créez 4 lignes de couleur noire qui serviront de contour à la scène.

Script

Entrez le script suivant :

// coordonnées d'un point du cercle
function x (t) 
{     
    xpos = xcen + r * Math.cos(t);
    return ( xpos );    
    
}
function y (t) 
{     
    ypos = H / 2 - r * Math.sin(t)
    return ( ypos );  
}
// tracé d'un cercle
function drawCircle( xd , yd )
{
    lineStyle(1 , 0x000000, 100);
    // pt de départ
    moveTo( xd, yd );
    for (i=1; i < n+1; i++)     lineTo(x(i*dt) , y(i*dt));    
}
// fonction de tracé des cercles fixes, le plus grand en premier
function drawFixedCircles( )
{
    while ( r > 0 )
    {
        drawCircle( x(0) , y(0) );
        r = r - 4;
    } 
}
// fonction de tracé des cercles mobiles
function drawMovedCircles( )
{
    j = 0; // initialisation
   // on trace d'abord le plus grand cercle puis on diminue le rayon
    while ( r > 0 )
    {
        j++;
        mc[j] = createEmptyMovieClip("circ"+j, j);   
        with (mc[j])   
        {// tracé d'un cercle
            lineStyle(1 , 0x000000, 100);
            // pt de départ
            moveTo(  x(0) , y(0) );
            for (i=1; i < n+1; i++)     lineTo(x(i*dt) , y(i*dt));  
        }
        r = r - 4;       // on diminue le rayon de 4px
    } 
    return j;// retourne le nombre de cercles créés
}
// fonction d'effacement du groupe de cercles mobiles tracés
function erase( dernier )
{
    for (i = 1; i < dernier+1 ; i++)         mc[i].clear();  
}

onSelfEvent (load) 
{
    // hauteur largeur scene
    H = int(_root._height);
    W = int(_root._width);   
     // nombre de points d'un cercle
    n = 500;  
    // incrément angulaire
    dt = 2 * Math.PI / n;
    // tracé groupe cercles fixes
    var r = 100;// rayon initial
    var xcen = 3 * W / 4;  // centre commun
    drawFixedCircles();
    
    // tracé groupe cercles mobiles au départ
    mc = new Array();
    r = 100;// rayon initial
    xcen = W / 4;// centre commun
    last = drawMovedCircles();  
}

// fonction appelée par le timer pour effacer puis tracer un autre groupe de cercles
function new_position()
{
    xcen += 2;// déplace l'abscisse du centre de 2px
    if (last) erase(last);// si des cercles mobiles ont été tracés alors effacement de ceux-ci
    // on ne doit pas aller plus loin que la position du groupe fixe,
    // alors on stoppe l'appel de la fonction
    if (xcen >(3*W/4)) clearInterval( timer );
   // tracé nouveau groupe cercles mobiles
    r = 100;
    last = drawMovedCircles();      
}

onFrame (1) 
{      // on définit un appel de la fonction new_position toutes les 5ms
            var timer = setInterval( new_position, 5 ); 
            new_position();     
}

Sauvegardez et exportez sous le nom moire. Testez !

Page de Jean-Paul Molina

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Effet de moiré