Exemples Tutoriaux Animation Flash swishmax1 Tourne page arrondie

Tourne page arrondie

On se propose de réaliser un tourne page arrondie par script.
Cet exemple, basé sur 2 images, n'est pas trés facile à réaliser.
On utilisera beginGradientFill et des sprites.

⇒ animation ⇐

Tout d'abord, téléchargez les images

Bases mathématiques

Voici la trame du tourne page dans le coin bas gauche de la scène.

tourne page

Les variables de base sont :
     R : rayon du cercle.
     xc : abscisse du centre du cercle.
Les paramêtres calculés sont :
     - le point de tangence T.
      angle θ = 45°
     - le point A
      distance = xT + yT

Création des Objets

1 - Définissez les dimensions générales 240x320 (couleur du fond quelconque).
Prenez un Frame Rate égal à 100.

2 - Insérez l'image organp1.jpg au centre de la scène. ( Menu Insert / Image )

3 - Insérez l'image organp2.jpg au centre de la scène. ( Menu Insert / Image )
Cochez Target. Nommez image2. Convertissez en Sprite.
Outline doit ressembler à

tourne page

Script

Méthodologie :
     - Au début, définition de constantes hexadécimales pour les couleurs.
     - création d'un clip nommé coin : CreateEmptyMovieClip
     - définition de matrices qui doivent toutes avoir le même
          nombre d'éléments : couleurs, alphas, ratios.
     - définition des limites du gradient par une matrice.
     - remplissage : beginGradientFill
     - tracé du contour.
     - fin du remplissage.

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

onLoad () 
{
    niveau = 1;		
    	// couleurs
    jaune = 0xFFFF00;  
    violet = 0xEE82EE;
    noir = 0x000000;
    lightslategrey= 0x778899;
    dimgray = 0x696969;
    darkslategray= 0x2F4F4F;
    whitesmoke= 0xF5F5F5;
	// dimensions scene
     H_scene = _root._height;
     W_scene = _root._width;
	// intialise alpha image2 à 0
     _root.image2._alpha = 0;
	// initialise l'abscisse du centre du cercle et le rayon      
     R = 5;    xc = 20;
	// crée le clip 'coin'
     _root.createEmptyMovieClip("coin", niveau);
     _root.coin.lineStyle(1, dimgray , 100 );
      colors = [dimgray ,lightslategrey , whitesmoke, lightslategrey,  dimgray ];
      alphas = [100, 100, 100, 100, 100];
      ratios = [5, 145, 255, 75, 0];
}
onFrame (1) 
{      // voir la définition plus loin
   draw( dimgray );
}
onFrame(2) 
{
    _root.coin.clear();    // efface
    R++;	// incrémente le rayon du cercle
    xc += 4;   // déplace le centre de 4 pixels vers la droite
	// on retarde l'apparition de l'image2  
    if ( xc > W_scene )  _root.image2._alpha += 1;   // incrémente de 1%
     
    if ( yA > -W_scene )     prevFrameAndPlay();      // si le coin n'est pas sorti du champ
    else 
    { 		// on revient au départ
       _root.image2._alpha = 0;
        R = 5;    xc = 20;   // ou activer stop
       // stop();
    }
}
/*-------------------------------------------
    fonction de tracé
	entrée : couleur hexa.
	sortie :  void.         
---------------------------------------------*/
function draw( xcolor )
{          // ordonnée centre du cercle
      yc = H_scene-R; 
           // point de tangence
      xT = xc - R*Math.SQRT1_2;
      yT = H_scene - R + R*Math.SQRT1_2;
           // point bord gauche A
      d = xT + R - R*Math.SQRT1_2;
      yA = H_scene - d;  // segment à 45°
     
      matrix = {matrixType:"box", x:0, y:H_scene, w:xc, h:-d, r:Math.radians(52)};
      _root.coin.beginGradientFill("linear", colors, alphas, ratios, matrix);
      _root.coin.lineStyle(1, xcolor , 100 );
     
      	// point bas du cercle
     _root.coin.moveTo( xc, H_scene );
     
    	  // trace 1/2 cercle
     n = 100;
     increment = Math.PI / n;  
     for ( i=1; i< n; i++)
     {    
         x = xc - R * Math.sin( increment * i);
         y = H_scene - R* (1- Math.cos(increment * i));  
         _root.coin.lineTo( x , y );
     }

// tangentes
     _root.coin.lineTo( 0 , yA );
     _root.coin.LineTo( xT, yT );    
     _root.coin.endFill();    
    
           // ombre interne
      colors = [darkslategray ,lightslategrey , whitesmoke, lightslategrey,  dimgray ];
      ratios = [15, 55, 235, 75, 0];
      matrix = {matrixType:"box", x:xc, y:H_scene, w:-R, h:-2*R, r:Math.radians(110)};
     _root.coin.beginGradientFill("linear", colors, alphas, ratios, matrix);

// point bas du cercle
     _root.coin.moveTo( xc, H_scene );
     
	   // tracé d'un arc de cercle
     teta = increment;
     i= 1;
     while (teta <= Math.radians(90) )
     {    
         x = xc - R * Math.sin( teta );
         y = H_scene - R* (1- Math.cos(teta));  
         _root.coin.lineTo( x , y );
         i++;
         teta = increment * i;
     }
     _root.coin.lineTo( xc , H_scene );
     _root.coin.endFill();      
}

Et voilà, c'est terminé.
Bien sûr, cet exemple est basique. Vous pouvez l'adapter à plusieurs images, mais çà va se compliquer.

Ah oui, j'oubliais. J'ai pris ces photos en Arizona prés de la frontière mexicaine ( Organ Pipes Cactus Nat. Mon.)

Page de Jean-Paul Molina....

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Tourne page arrondie