Boite à Onglets.

 On se propose de montrer par script une boite à onglets.
  
 C'est essentiellement de l'actionscript et une bonne compréhension de programmation est nécessaire.
 La méthode swapdepths sera utilisée pour passer d'un onglet à un autre.
 Le test ne peut pas se faire dans SwishMax mais dans le Player ( CTRL T )

 
 Cliquez ici pour voir  l'animation.

Script SwishMax.

 Voici le script général de Scene_1
onLoad () 
{
    maxLevel = 10;   // 10 onglets - 10 tabs   maxi
    
    R = 5;
    W = 600;
    H = 450;
    dx = 20;
    dy = 15;
    h_tab = dy;
    w_tab = W / maxLevel;
    x0 = dx;
    y0 = dy;
       
    maroon = 0x800000;
    goldenrod= 0xDAA520;
    burlywood = 0xDEB888;
    whitesmoke= 0xF5F5F5;
    
    colors = [goldenrod, maroon];
    alphas = [100, 100];
    ratios = [0, 250];
    matrix = {matrixType:"box", x:0, y:0, w: W, h: H, r:45};
    
    // profondeur maxi - max depth
    _level0.highest = "9";     
    // dessine les 10 onglets - draw 10 tabs
    for ( i=0; i<maxLevel; i++)  onglet(i); 
}
/*-------------------------------------
     crée onglet Tab0,Tab1, ....
     en profondeur 0, 1, ...
      build tab Tab0,Tab1, ....
      at depth 0, 1, ...
---------------------------------------*/
function onglet(x)
{
    createEmptyMovieClip("Tab"+x, x);  
    var mc:MovieClip = eval("Tab" + x);
    drawTab(mc, x);   
}
/*------------------------------------
    paramêtres - settings
--------------------------------------*/
function drawTab(clip, xx)
{
    clip.beginGradientFill("linear", colors, alphas, ratios, matrix);
    clip.lineStyle(2, maroon  , 100 );
    clip.moveTo(x0,y0+h_tab);
    clip.lineTo(x0,y0+H-R);
    clip.curveTo(x0,y0+H,x0+R,y0+H);
    clip.lineTo(x0+W-R, y0+H);
    clip.curveTo(x0+W,y0+H,x0+W,y0+H-R);
    if (xx==maxLevel-1) clip.lineTo(x0+W,y0+R);
    else
    {
      clip.lineTo(x0+W,y0+h_tab);  
      clip.lineTo(x0+(xx+1)*w_tab+R , y0+h_tab );
      clip.curveTo(x0+(xx+1)*w_tab,y0+h_tab,x0+(xx+1)*w_tab,y0+h_tab-R);
      clip.lineTo(x0+(xx+1)*w_tab , y0+R );
    }
    clip.curveTo(x0+(xx+1)*w_tab,y0,x0+(xx+1)*w_tab-R,y0);
    clip.lineTo(x0+xx*w_tab+R , y0 );
    clip.curveTo(x0+xx*w_tab,y0,x0+xx*w_tab,y0+R);
    if ( xx!=0) 
    {
       clip.lineTo(x0+xx*w_tab , y0+h_tab-R );
       clip.curveTo(x0+xx*w_tab,y0+h_tab,x0+xx*w_tab-R,y0+h_tab);
    }
    clip.lineTo(x0 , y0+h_tab );
    
    clip.endFill();
     // définit le titre de l'onglet
     // set up title for every tab     
    var fmt:TextFormat = new TextFormat();
    fmt.bold = true;
    fmt.font = "Arial";
    fmt.size = 10;   
    
    x = x0+xx*w_tab+ fmt.size/2;
    y = y0-2;
    clip.createTextField("label", xx, x, y, w_tab, h_tab);
    
    clip.label.setNewTextFormat(fmt);
    clip.label.text = "onglet "+ clip.getDepth();  //=xx;   
    
    // A partir d'ici vous ajoutez votre code ( texte?)
    // Here you might add your own code ( to display text?)
    
    
    
    
    // pour passer d'un onglet à un autre
    // handle tabs with a mouse click
    clip.onPress = function()
    {
        this.swapDepths("_level0.Tab"+_level0.highest);
         // 4 car le chiffre est en 4ème position : Tab0, Tab1,....
         // we get the number which stands in 4th position	
        _level0.highest = substring(this._name, 4, 1);
    }
}


  Et voilà, c'est fini.

Dernière Modification : Lun 29 Avril 2013 19:47
Copyright © 1999-2013 Jean-Paul Molina Tous droits réservés.