Examples Flash Animation using swishmax 1 Préchargement % : cercles équirépartis

% Preloader : equally disposed circles

The purpose is to set up a percent preloader using 10 tiny circles equally disposed and a script.
I suppose you know well how to create objects, thus I will not insist on.

⇒ See animation ⇐

You could not test in Swishmax, only with Flash Player or Browser.

Creating Objects

1 - Set up Movie size 320x240 (background color #000099). Frame Rate = 35.

2 -Insert a dynamic text as shown below :

Script

In Outline, select Scene_1. Rename it Preloader
Enter the following script :

/*------------------------------
  fonction drawCircle
  entrées :  coordonnées centre
  sortie : void
-------------------------------*/
function drawCircle( x_c , y_c )
{
     n = 30;   // 30 segments
     increment = 2*Math.PI / n;

dot.moveTo( x_c + r_dot , y_c );
     
     for ( j=1; j < n+1; j++)
     {    
       x = x_c + r_dot * Math.cos( increment * j);
       y = y_c - r_dot * Math.sin( increment * j);  
       _root.dot.lineTo( x , y );
     }         
}
/*-------------------------------
   function putColor
   input :  percentage
   output : void
--------------------------------*/
function putColor( nbre ) 
{
     diam = 2*r_dot;       // diameter tiny circle
     lim = Math.floor( nbre / 10 );
     angle = Math.PI / 5;   
     for (k=0; k < lim; k++) 
     {
        x_dot = xc + R * Math.cos(k*angle);
        y_dot = yc - R * Math.sin(k*angle);  
        matrix = {matrixType:"box", x:x_c-r_dot, y:y_c+r_dot, w:diam, h:diam, r:0}; 
        dot.beginGradientFill("radial", colors, alphas, ratios, matrix);  
        drawCircle( x_dot , y_dot , 0);   
        dot.endFill();
     }  
}

onLoad () 
{ 
  lavender = 0xE6E6FA;
  rouge = 0xFF0000;

colors = [rouge];
  alphas = [100];
  ratios = [255];

// init
    R = 50;   r_dot = 5;
    xc = _root._width / 2;
    yc = _root._height / 2;  
   
    createEmptyMovieClip("dot", 1 );   // tiny circle named  dot
    dot.lineStyle(1, lavender , 100 );   // linestyle
    angle = Math.PI / 5;   //   = 2 PI / 10
    for ( i=0; i < 10; i++) 
     {     //  coord dot center
        x_dot = xc + R * Math.cos(i*angle);
        y_dot = yc - R * Math.sin(i*angle);            
        drawCircle( x_dot , y_dot );   // draw dot
     }
}
//----------------------------------------
onFrame (1,afterPlacedObjectEvents) 
{
    rapport = _root.getBytesLoaded() / _root.getBytesTotal();
    percent = Math.floor( rapport * 100 );
          // set colors in some circles
    putcolor( percent );    
          // dynamic text
    txtX = String( percent );
    txtdyn = txtX + " %";
     if (rapport == 1) 
    { 
	dot.removeSprite();
	nextSceneAndPlay();  
    }
}
/* if rapport != 1 then get to frame 2
    which gets back, therefore  reckon 
    percent  again                            */

onFrame (2,afterPlacedObjectEvents) 
{
    prevFrameAndPlay();
}

I have tested it and it works good. If it doesn't work for you, check out with the images above ( target toggled, anchor center, ...)
You might set up many colours for the gradient as you want, but don't forget colors, alphas, ratios arrays MUST have the same numbers of items.
Don't work when Export Option has been set on Flash8. BUG ?!

Page de Jean-Paul Molina

Subjects

Resources

C.A.D.

Langages

Flash

Systems

Social Networks

% Preloader : equally disposed circles