Examples Flash Animation using swishmax Portfolio fichier xml

Portfolio from an xml file

The goal is to create a portfolio reading informations from an xml file.

Converting animation into video was not successful.

I also have built a more completed animation (F and GB) : Camping Les beauxreves.
See photo album : row of 20 pictures displayed at a time.
When you move the mouse over an item, its color changes and a thumbail appears underneath.
When the mouse leaves, the thumbnail disappears.
When you click an item the true picture is been displayed with a legend underneath.

We gonna describe the different stages right now.

the xml file

In that example, it has been named portfolio.xml. Here's an excerpt :

<?xml version="1.0" encoding="UTF-8" ?>
<portfolio>
      <slide>
      <thumbnail url="zlin-savage-cruiser-thumb.jpg" />
      <diapo url="zlin-savage-cruiser.jpg" />
      <legende>Le bon moyen de se d�placer dans les grands espaces du Canada.</legende>
     </slide>
etc....
     <slide>
          <thumbnail url="ka50-thumb.jpg" />
          <diapo url="ka50.jpg" />
          <legende>Un gros insecte russe : le KA50.</legende>
     </slide>
</portfolio>

You could insert an absolute url to different sites as well.
Warning :
- If you need to display some special characters (as French language has go), do think converting your xml file (when finished) from Unicode ANSI to UTF-8.
If you don't, you could get some strange characters or truncated words.
- Export as SWF9, otherwise item numbers 'd be displayed.

Creating objects

The following only concerns the example.
As I don't give the pictures, it 'll be up to you to change settings.
The script 'd be always fine.

1 - General settings 640x640. Background color #333333.
Frame rate = 25.

2 - Create a dynamic text to display legend , at the bottom. ( variable : txtdyn )

Script animation

In Scene_1 , enter :

onSelfEvent (load) 
{   // main container for thumbnails ( level 1 )
    createEmptyMovieClip("small_container", 1);   
    _global.th = new Array;    // storing array for thumbnails containers.
    
    //   ---- xml -----------------
    var pfolio_xml:XML = new XML();
    pfolio_xml.ignoreWhite = true;
   
    pfolio_xml.onLoad = function(success : Boolean)
    {
        if(success)       
        {
            parseXMLfile(this);   //  parsing the xml file
            // separated loops because of levels ( see internal code inside each function )
            for ( var i:Number = 0; i < _global.n_slides; i++ )      
                th[i] = thumbnail ( i );  // storing
            for ( var j:Number = 0; j < _global.n_slides; j++ )      
                 new etiquette( j ) ;   // labels               
        }
        else   javascript('alert("ERROR: no XML data.");');
    };
    
    pfolio_xml.load("portfolio.xml");
    
    //----------------------------------------------
    const bgcolor : Number = 0x333333;
    const label_color : Number = 0xFFFF00;
    const label_highlightcolor : Number = 0xFF0000;
    const font_size : Number = 12;
    const h : Number = 20;
    const y : Number = 10;
    const w : Number = 20;
    
         // returns a thumbnail container
    MovieClip.prototype.thumbnail = function( i : Number )
    {
        small_container.createEmptyMovieClip("sm_cont"+i, i+2);  
        with (small_container["sm_cont"+i]) 
        {	// first in level 2
            createEmptyMovieClip("thmb", 3);   // thumbnail in this container
            var x : Number;
            var num : Number = i + 1;
            ( num < 11 ) ? x = 20*num : x = 20*num + 5;   // same position like item number
            	// set position
            thmb._x = x;
            thmb._y = y + h;
            	// loading with listener
            var mcLoader_thmb:MovieClipLoader = new MovieClipLoader();
            var listener_thmb:Object = new Object();
            listener_thmb.onLoadInit = function() { };
            mcLoader_thmb.addListener(listener_thmb);
            mcLoader_thmb.loadClip(  thumbnails[i] , thmb );
        	//--------------------      
            _visible = false;       //  hide it
        }       
        return small_container["sm_cont"+i];
    };
    
    // setting a label
    MovieClip.prototype.etiquette = function( n : Number  )
    {                      
        var x : Number;
        var num : Number = n + 1;
        ( num < 11 ) ? x = 20*num : x = 20*num + 5;  // change space between numbers when 2 digits
        
        	// rectangular control zone
        var label_mc = createEmptyMovieClip("label_mc", getNextHighestDepth() );
        with (label_mc)
        {         // drawing zone
            beginFill(bgcolor, 100);
            moveTo(x, y);
            lineTo(x, y+h);
            lineTo(x+w, y+h);
            lineTo(x+w, y);                      
            lineTo(x, y);
            endFill();                
        }                    
        	// text labels
        var label = label_mc.createTextField("Numero", getNextHighestDepth() ,x,y,w,h);
        var title : TextFormat = new TextFormat();
        title.type = "static";
        title.color = label_color;
        title.align = "left";
        title.font = "Georgia";
        title.size = font_size;
        title.bold = false;
        title.italic = false;
    
        label.setNewTextFormat(title);
     
        label.text = num.toString();    // text from number
                       
        label_mc.onRollOver = function () 
        { 
            title.color = label_highlightcolor;
            label.setNewTextFormat(title);
            label.text = num.toString();          
                       
            _global.th[n]._visible = true;    //  let's see thumbnail  
        };      
        label_mc.onRollOut = function () 
        {
            title.color = label_color; 
            label.setNewTextFormat(title);
            label.text = num.toString(); 
            
            _global.th[n]._visible = false;   // let's hide thumbnail            
        };   
        label_mc.onPress = function () 
        { 
            _global.th[n]._visible = false;    // let's hide thumbnail 
            
            // container of real picture
            createEmptyMovieClip("slide", 200);
            var mcLoader:MovieClipLoader = new MovieClipLoader();
            var listener:Object = new Object();
            mcLoader.addListener(listener);
            mcLoader.loadClip( diapos[ n ], slide );
            listener.onLoadInit = function() 
            {   // The only way to get image sizes to center it !!!
                slide._x = (Stage.width - slide._width) / 2;
                slide._y = 100;
            };           
           	// affiche la l�gende
            _root.txtdyn = legendes[ n ]; 
        };                         
    };     
}
/*---------------------------------------------
   	function parseXMLfile
   	input  :  xml filename
   	output : void
----------------------------------------------*/
function parseXMLfile(xmlObjet)
{
    	// arrays to store informations
    _global.thumbnails = new  Array;
    _global.diapos = new Array;
    _global.legendes = new Array;
    
    // get firstchild in list
    var pfolioNode = xmlObjet.firstChild; 
    _global.n_slides =  pfolioNode.childNodes.length;  // length : nbre �l�ments dans le noeud (portfolio)
    
    // childNodes : array of XML items.
    
    for( var i:Number=0; i < _global.n_slides; i++)  
    {
        var itemNode = pfolioNode.childNodes[i];  // returns  every <slide> ... </slide>>
          	// get url of thumbnail
        thumbnails[i] = itemNode.firstChild.attributes.url;  
        	// next node (diapo) in parent node (slide)
        itemNode = itemNode.firstChild.nextSibling;    
        diapos[i] = itemNode.attributes.url;      //  get url of thumbnail
        
        itemNode = itemNode.nextSibling;    // next node (legende) 
        legendes[i] = itemNode.firstChild.nodeValue;  // get legend text
    }
}

Et voil�, that's all !
We could have used only real images with a 10% scale as thumbnails in thumbnail definition code.
We could have only displayed a sequence of 10 pictures, but adding 2 buttons to get the 10 next/previous pictures.
We could have added a timer to get a slide show.

Page de Jean-Paul Molina

Subjects

Resources

C.A.D.

Langages

Flash

Systems

Social Networks

Portfolio from an xml file