Exemples et Tutoriaux Animation Flash avec swishmax1 Préchargement % : cercles équirépartis

Préchargement en % : cercles équirépartis

On se propose de mettre en place un préchargement d'animation en mettant en place des petits cercles équirépartis, et qui s'allumeront. Un script complètera le tout.
Je suppose connu les fonctions de création sur lesquelles je n'insisterai pas.

⇒ Voir l'animation ⇐

Ceci ne peut pas être testé dans Swishmax, uniquement dans le Player ou le Navigateur.

Création des Objets

1 - Définissez les dimensions générales 320x240 (couleur du fond #000099). Prenez un Frame Rate égal à 35.

2 - Créez un texte dynamique comme l'indiquent les images.

Script

Dans Outline, sélectionnez Scene_1. Renommez la Preloader
Entrez le script suivant :

/*------------------------------
  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 );
     }         
}
/*-------------------------------
   fonction putColor
   entrée :  pourcentage
   sortie : void
--------------------------------*/
function putColor( nbre ) 
{
     diam = 2*r_dot;       // diametre petit cercle
     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];

// initialise
    R = 50;   r_dot = 5;
    xc = _root._width / 2;
    yc = _root._height / 2;  
   
    createEmptyMovieClip("dot", 1 );   // petit cercle appelé dot
    dot.lineStyle(1, lavender , 100 );   // style de tracé
    angle = Math.PI / 5;   //   = 2 PI / 10
    for ( i=0; i < 10; i++) 
     {     // calcule les coord du centre de dot
        x_dot = xc + R * Math.cos(i*angle);
        y_dot = yc - R * Math.sin(i*angle);            
        drawCircle( x_dot , y_dot );   // trace dot
     }
}
//----------------------------------------
onFrame (1,afterPlacedObjectEvents) 
{
    rapport = _root.getBytesLoaded() / _root.getBytesTotal();
    percent = Math.floor( rapport * 100 );
          // met les couleurs dans les cercles concernés
    putcolor( percent );    
          // texte dynamique
    txtX = String( percent );
    txtdyn = txtX + " %";
     if (rapport == 1) 
    { 
	dot.removeSprite();
	nextSceneAndPlay();  
    }
}
/* si rapport != 1 alors on passe à la frame 2
    qui fait revenir en arrière
    donc on va recalculer percent  */

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

J'ai testé çà fonctionne bien. Si çà ne marche pas pour vous, vérifiez bien avec les images ( target coché, anchor center, ...)
Vous pouvez mettre plusieurs couleurs pour le gradient si çà vous dit, mais n'oubliez pas que le nombre d'éléments doit être identique dans colors, alphas et ratios.
Dernière minute : ne fonctionne pas quand la version d'exportation est Flash 8. BUG !?

Page de Jean-Paul Molina

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Préchargement en % : cercles équirépartis