Creare menu dinamici in Flash CS3 con XML

Immagini

di Fabio Bernardi

Una delle utilità dell’uso di Actionscript 3.0 all’interno di applicazioni Flash (o Flex), è la possibilità di caricare e/o gestire elementi grafici del sito in maniera del tutto dinamica.

In questo tutorial vedremo come gestire un menu di navigazione tramite XML ed Actionscript 3.0 Per prima cosa creiamo un file XML all’interno del quale inseriremo tutti i dati necessari alla sua posizione, distribuzione orizzontale o verticale, offset di rollover o rollout, ecc.

Qui di seguito vi scriviamo il codice del file:

<?xml version=”1.0” encoding=”UTF-8”?>
<menu posizione=”v” offset=”1” window=”new” typeLink=”external” posX=”0” posY=”0” offsetRollOver=”6”>
	<voce labelText=”Faber04” labelUrl=”http://www.faber04.com” posX=”” posY=”” />
	<voce labelText=”AUGItaly” labelUrl=”http://www.augitaly.com”  posX=”” posY=”” />
	<voce labelText=”Google” labelUrl=”http://www.google.it”  posX=”” posY=”” />
	<voce labelText=”AUGItaly” labelUrl=”http://www.augitaly.com”  posX=”” posY=”” />
	<voce labelText=”Google” labelUrl=”http://www.google.it”  posX=”” posY=”” />
</menu>

Come potete leggere si tratta di una struttura molto semplice. I vari nodi “voce” gestiscono le varie voci di menu, con i loro attributi: labelText per le label del pulsante, labelUrl per l’indirizzo, e così via.

Nel nodo “menu” invece abbiamo inserito tutte le informazioni riguardanti il menu: attributo “posizione” per la distribuzione verticale od orizzontale, “offeset” per gestire la spaziatura tra le diverse voci, “window” per controllare l’apertura della nuova finestra e, nel caso di link esterni, “typeLink” per indicare a Flash se il link è un collegamento esterno oppure un caricamento di SWF esterni. “PosX” e “PosY” indicano le posizione del menu sullo stage. Da ultimo “offsetRollOver” regola la quantità di pixel di rollover dei pulsanti. Salviamo ora questo file come “menu.xml” nella cartella che preferite. L’importante è che sia la stessa dove salverete anche il file FLA quindi l’SWF.
Apriamo Flash CS3 e creiamo un nuovo file Fla con Actionscript 3.0.
Creiamo una MovieClip contenente un forma rettangolare, e un campo di testo dinamico, di nome “did_txt”. (Immagine 1)

Una volta creata, possiamo tranquillamente eliminare l’istanza presente sullo stage.

Apriamo la libreria e concateniamo questo oggetto: clicchiamo con il tasto destro sull’oggetto in libreria e diamo un nome alla classe che verrà creata relativamente a questo elemento. Il nome sarà: MenuLabel (Immagine 2)

Ora clicchiamo sul primo fotogramma della linea temporale di Flash, ed apriamo il pannello delle azioni.
Anzitutto inseriamo tutte le variabili di cui abbiamo bisogno, per segnarci i percorsi dei link, la posizione del menu e altri parametri.

var xmlData:XML=new XML();
var urlReq:URLRequest=new URLRequest(“menu.xml”);
var urlLoad:URLLoader=new URLLoader();
var menu:Array=new Array();
var posizioneMenu:String=new String();
var offset:Number=new Number();
var offsetRollOver:Number=new Number();
var window:String=new String();
var windowLink:String=new String();
var linktype:String=new String();
var posXmenu:Number=new Number();
var posYmenu:Number=new Number();
var rollMe:Boolean=new Boolean();

Dato aver indicato che le informazioni provengono da un file XML, carichiamo i dati dal file creato poco fa:

urlLoad.load(urlReq);
urlLoad.addEventListener(Event.COMPLETE, leggiXML);
 
function leggiXML(e:Event)
{
	xmlData=XML(urlLoad.data);
	showMenu();
}

Iniziamo ora con la funzione showMenu() che assolverà all’esecuzione del corpo principale dell’applicazione:

function showMenu():void
{
	posizioneMenu=xmlData.@posizione;
	offset=xmlData.@offset;
	window=xmlData.@win;
	linktype=xmlData.@typeLink;
	posXmenu=Number(xmlData.@posX);
	posYmenu=Number(xmlData.@posY);
	offsetRollOver=Number(xmlData.@offsetRollOver);
	for each(var prop:XML in xmlData.voce)
	{
		menu.push({labelMenu:prop.@labelText, labelUrl:prop.@labelUrl, labelX:prop.@posX, labelY:prop.@posY});
	}
	putLabel();
}

NOTA: Poichè le informazioni si trovano all’interno di proprietà del nodo “voce”, le relative proprietà della variabile “xmlData” antepongono il simbolo “@” prima del nome dell’attributo.

Proseguiamo con lafunzione “putLabel()”.

function putLabel():void
{
	for(var i:Number=0; i<menu.length; i++){
		var menuVoice:MenuLabel=new MenuLabel();
		menuVoice.did_txt.text=menu[i].labelMenu;
		menuVoice.link=menu[i].labelUrl;
		addChild(menuVoice);
		switch(posizioneMenu){
			case “v”:
			menuVoice.y=(menuVoice.height+offset)*i;
			rollMe=true;
			break;
			case “h”:
			menuVoice.x=(menuVoice.width+offset)*i;
			rollMe=false;
			break;
			default:
			trace(“dato di posizionamento sbagliato”);
			break;
		}		
		menuVoice.addEventListener(MouseEvent.CLICK, linkMe);
		menuVoice.addEventListener(MouseEvent.MOUSE_OVER, overMe);
		menuVoice.addEventListener(MouseEvent.MOUSE_OUT, outMe);
}

In questa funzione, come noterete, all’interno del ciclo “for” richiamiamo un’istanza della classe MenuLabel, che altro non è che il nostro pulsante in libreria. La clip in questione verrà ripresa dalla libreria e posizionata sullo stage una volta per quante sono le voci di menu caricate dal file XML. La condizione “switch” controllerà la variabile “posizioneMenu”, in funzione di questo il menu verrà posizionato in orizzontale piuttosto che in verticale.

Per ogni pulsante dobbiamo assegnare i tre listener principali: roll-over, roll-out e click.

Non resta che visualizzare le 3 funzioni:

function overMe(e:MouseEvent)
	{
		if(rollMe){
			e.currentTarget.x+=offsetRollOver;
		}else{
			e.currentTarget.y+=offsetRollOver;
		}
	}	
	function outMe(e:MouseEvent)
	{
		if(rollMe){
			e.currentTarget.x-=offsetRollOver;
		}else{
			e.currentTarget.y-=offsetRollOver;
		}
	}

Con queste due funzioni, abbiamo indicato che cosa deve accadere per rollover e rollout, ovvero avanzare sulle X o Y (a seconda che il menu sia orizzontale o verticale ) di tanti pixel quanti sono quelli indicati dalla variabile (offsetRollOver).
Dulcis in fundo:

function linkMe(e:MouseEvent)
	{
		var path:URLRequest=new URLRequest(e.currentTarget.link);
		if(linktype==”external”){
			switch(window){
				case “new”:
				windowLink=”_blank”;
				break;
				case “old”:
				windowLink=”_self”;
				break;
			}
			navigateToURL(path, windowLink);
		}else{
			var loader:Loader=new Loader();
			addChild(loader);
			loader.load(path);	
			if(!menu[e.currentTarget.link].labelX || !menu[e.currentTarget.link].labelY){
				loader.x=0;
				loader.y=0;
			}else{
				loader.x=menu[e.currentTarget.link].labelX;
				loader.y=menu[e.currentTarget.link].labelY;
			}
		}
	}
}

In quest’ultima funzione indichiamo cosa deve accedere nel caso di link “external” cioè che puntano a una pagina HTML esterna.

Nel caso di variabile link “internal” viene creato un’istanza Loader e caricata all’interno del documento. In questa evenienza, nelle ultime righe indichiamo dove deve essere posizionato il nuovo file SWF, se con coordiante 0,0 oppure con quelle indicate nel file XML come proprietà “posX” o “posY” dei singoli nodi “voce” .

Salviamo il tutto e testiamo questo menu. (Immagine 3)

Per cambiare il menu in qualcosa di più personalizzato, basterà entrare nella clip MenuLabel e modificarne la grafica oppure aprire il file XML e cambiare i parametri.

Buon divertimento!

_______________________________________________________________

Fabio Bernardi
bernardifabio@fastwebnet.it
Finito nel Web nel 2002, si è occupato di linguaggi server-side (ASP e ColdFusion), editing audio e video fino ad approdare a Flash e ActionScript. Oggi insegna in diverse scuole di Roma, tiene corsi professionali per HTML.IT e per la Regione Lazio. Attualmente è “Channel Manager” di FlexGALA, usergroup ufficiale di Adobe Flex. Inoltre è certificato ACP (Adobe Certified Professional) in Flash 8.