Exemples et Tutoriaux Animation Flash avec swishmax Triangle rotatif gradient couleurs

Triangle rotatif avec gradient de couleurs

On se propose de montrer entièrement par script comment animer un triangle autour d'un axe vertical pour donner un effet 3D.

⇒ animation ⇐

Principe

2 points du triangle vont être astreints à décrire une ellipse, ces 2 points étant symétriques par rapport au centre.
On utilisera un timer.
Les différentes étapes vont être décrites maintenant.

Création des Objets

Définissez les dimensions générales 400x300. Couleur de fond : 3399CC. Frame rate = 30.

Script

1 - Entrez le script suivant :

onSelfEvent (load) 
{
	_global.a = 100;   // 1/2 grand axe
     	_global.b = 25;    // 1/2  petit axe 
           		// centre ellipse
     	_global.xc = 200;   
    	_global.yc = 200;
          		// sommet triangle = vertex
     	_global.x_vertex = xc;
     	_global.y_vertex = b;   
     	
     	niveau = 1;
     	createEmptyMovieClip("triangle", niveau);  // clip associé au triangle
     			// increment 
     	n = 100;
     	_global.dt = 2*Math.PI / n;     // incrément 2PI/n
     			// pt de depart
    	_global.xxx = 0;   	// init
     	_global._x1 = xc + xe(xxx);   
    	_global._y1 = yc + ye(xxx);
     	_global._x2 = xc - xe(xxx);   // pt symétrique sur ellipse
     	_global._y2 = yc - ye(xxx);
     	drawTriangle( _x1, _y1, _x2, _y2 );    
}
// tracé du triangle / drawing
function drawTriangle( x1, y1, x2, y2 )
{
	with ( triangle )
    	{
        	lineStyle(2, black, 100 );
        	colors = [0x3F0000, 0xFF0000 ];
        	alphas = [100,0];
        	ratios = [0,255];
        	matrix = {matrixType:"box", x:x1, y:y1, w:Math.abs(x1-x2), h:yc+b-y_vertex, r:2};  // aussi r : 5
        	beginGradientFill ("linear", colors, alphas, ratios, matrix);
       
        	moveTo(x_vertex,y_vertex);   // depart du sommet  / from vertex
        	lineTo(x1,y1);
        	lineTo(x2,y2);
        	lineTo(x_vertex,y_vertex);
        	endFill();
    	}
}
	// coord param ellipse
function xe( i )
{    	return a * Math.cos( i * dt );    } 
function ye( i )
{  	return b * Math.sin( i * dt );     }
function new_position()
{
	xxx++;
   	if ( xxx == n ) xxx = 0;
   	_x1 = xc + xe(xxx);
   	_y1 = yc + ye(xxx);     
   	_x2 = xc - xe(xxx);  
   	_y2 = yc - ye(xxx); 
   	triangle.clear();    // efface le précédent
   	drawTriangle( _x1, _y1, _x2, _y2 );  // retrace / redraw
}
onFrame (1) 
{
	timer = setInterval( new_position, 10 ); // toutes les 10ms  / every 10ms
    	new_position();    
}

Sauvegardez et exportez sous le nom triangle. Testez !

Page de Jean-Paul Molina

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Triangle rotatif avec gradient de couleurs