Examples Flash Animation using swishmax 1 Préchargement % : ruban

% preloader: ribbon

The purpose is to having a classical ribbon which shows the percentage of loading as displayed hereafter :

I suppose you got the basis of drawing and I 'll not insist anymore.

- Set up a new movie 640x480 for instance.

- Create a scene with a presentation.

- Create a new scene named Preloader :

- Draw a rectangle bordered with a line, in the middle of the scene ( size 500x70 ). Name it Cadre

cadre

- Now create a rectangle with same size. Name it Ruban

cadre

As this object gonna change, toggle Target.

- Draw a void dynamic text. Name it txtdyn

texte dynamique

This object is about to display the percentage of loading..
Remark : If you put Name : txt and you use Advanced mode, then put txtdyn in the variable name field and Target must be toggled.

You 'd yield something like :

outline

At last, here is the script !

onLoad () 
{
    largeur = 500;      // final ribbon width
    x0  = 70;		// X coordinate left center of ribbon = (640-500)/2
    ruban._Y = 240;	// Y coordinate of center of ribbon = (480 / 2)
    ruban._width = 0;	// initial width
}
/* you could replace the line rapport = ..... with 
    rapport = _root.getPercentLoaded();
             ( Flash ActionScript )                      */
onFrame (1) 
{
	// ratio of what has been loaded / total to load
    rapport = _root.getBytesLoaded() / _root.getBytesTotal();
        // percentage between 0 et 100 (integer)    
    percent = Math.floor( rapport * 100 );  // between 0 et 100
        // current width         
    ruban._width = Math.floor( largeur * rapport );

/* the following line of code does concern tha option CENTER
	 of the ribbon
	 comment out the line if you use CENTER LEFT option for the ribbon */
    ruban._X = x0 + 0.5*ruban._width;    // X coordinate center of ribbon

// dynamic text : name txtdyn     Target toggled if it's advanced mode
    txtX = String( percent );	// number converted to string 
    txtdyn = txtX + " %";   // what to display	
    // If 100% go to the main scene
    if (rapport == 1) nextSceneAndPlay();
}
onFrame (2) 
{
  /* If we still are in Frame 2, 100% Loading hasn't been achieved
     so let's get back; the ratio 'll be established again.    */
    prevFrameAndPlay();
}

Remark :
Be careful, when you built a scene (named Scene_1 for instance) and, in your scripts, you wrote some gotoAndPlay(...), you could notice, right after having placed Preloader scener, some animations run badly and even not at all ! Replace simply with gotoAndPlay("Scene_1", ...)

Page de Jean-Paul Molina

Subjects

Resources

C.A.D.

Langages

Flash

Systems

Social Networks

% preloader: ribbon