Exemples et Tutoriaux Animation Flash avec swishmax Menus déroulants xml

Menu déroulant xml

On se propose de créer des menus déroulants uniquement par script, à partir d'un fichier xml.

(les liens dans l'exemple sont bidons ⇒ inutile de cliquer)

Les différentes étapes vont être décrites maintenant.

Création du fichier xml

Avec un éditeur de texte, entrez le texte suivant :

<?xml version="1.0" encoding="ISO-8859-1" ?>
    <menu name="Menu1">
        <item label="SwishMax2" url="https://koi29.info/swish/index2.php" />
        <item label="Automatique" url="https://koi29.info/automatique/index.php" />
        <item label="Mecanique" url="https://koi29.info/mecanique/index.php" />
        <item label="Technologie" url="https://koi29.info/techno/index.php" />
        <item label="RdM" url="https://koi29.info/rdm/index.php" />
        <item label="Matlab" url="https://koi29.info/matlab/index.php" />
    </menu>

Sauvegardez sous le nom menu.xml

Le noeud parent est <menu> avec l'attribut name. Chaque noeud enfant item a pour attributs label et url

Création de l'animation principale

Définissez les dimensions 640x480. Frame rate = 30. Couleur de fond #336600.

Script

Ce script nécessite une bonne compréhension de la programmation orientée objet bien qu'ici celà n'aille pas trés loin du fait des limitations actuelles de Swishmax.
Vous allez retrouver dans ce script la même méthode que celle du menu déroulant classique avec quelques aménagements.

Dans Scene_1, entrez :

onSelfEvent (load)
{
     // Construit un objet XML contenant la réponse du serveur
    xml_menu = new XML();
     // les noeuds de texte qui ne contiennent que des espaces vierges sont supprimés au cours de l’analyse
    xml_menu.ignoreWhite = true;
     // cette fonction se déclenche quand un paquet XML est reçu du serveur.
    xml_menu.onLoad = function(success : Boolean)
    {
    	if(success)       drawMenu(this);
    	else   javascript('alert("ERREUR: pas de données XML.");');
    };
     // télécharge le code XML depuis une URL et le place dans un objet xml
    xml_menu.load("menu.xml");
    
     // constantes utilisées dans l'animation
    const menu_width : Number = 100;
    const menu_height : Number = 25;
    const menu_bgcolor : Number = 0x996600;
    const menu_highlightcolor : Number = 0x00FF00;
    const menu_txtcolor : Number = 0xFFFF00;
    const menu_bordercolor : Number = 0x333300;
    const menu_hover : Number = 0xCCFF99;
    
    const font_size : Number = 12;
    
    const thickness : Number = 3;
  
/*-----------------------------------------------------------
    object menuItem
    entrées :
    x, y : coordonnées coin haut gauche
    xtitle : titre
    xurl : url
    hasBorder :  booléen  (true = bordure tracée)    
-----------------------------------------------------------*/  
MovieClip.prototype.menuItem = function(x:Number , y:Number, xtitle:String, xurl:String, hasBorder:Boolean ) 
{
    hasBorder ? ep = 0 : ep = undefined;

/*------------------------------------------------------
    fonction drawMenuShadow
tracé d'une ombre sous le menu
-------------------------------------------------------*/
function drawMenuShadow(x:Number, y:Number, nbre:Number)
{
    var menu_shadow_mc = createEmptyMovieClip("menu_shadow_mc", getNextHighestDepth() );
    with (menu_shadow_mc)
    {
            lineStyle(0, menu_bordercolor);
            beginFill(menu_bordercolor, 100);
            moveTo(x, y);
            lineTo(x+menu_width, y);
            lineTo(x+menu_width, y + nbre*menu_height);
            lineTo(x, y + nbre*menu_height);                  
            lineTo(x, y);
            endFill();    
    }   
} 
//-----------------------------------------------------           
function drawMenu(xmlObjet)
{
    var labels = new  Array;
    var urls = new Array;
     // fait référence au premier enfant dans la liste des enfants du nœud parent.
    var menuNode = xmlObjet.firstChild; 
     // childNodes : tableau des enfants de l'objet XML.
    for( i=0; i < menuNode.childNodes.length; i++)   // length : nbre éléments du tableau
    {
        var itemNode = menuNode.childNodes[i];        
        labels[i] = itemNode.attributes.label;   // récupère l'attribut label          
        urls[i] = itemNode.attributes.url;  // récupère l'attribut url
    }
           
    var m : menu = menu( 0 , 0,  labels, urls, false);
}

Et voilà! A vous d'adapter et d'améliorer.

Page de Jean-Paul Molina

Matières

Ressources

Conception assistée

Langages

Flash

Systèmes

Réseaux sociaux

Menu déroulant xml