3
Indiquez l’intérêt que vous portez à cette question
1

Tutoriel Creer un Menu Flash (ActionScript 3) et Spip

Charlie

Bonjour,
Je constate qu’il est difficile de trouver de la documentation sur cette petite prouesse : Comment realiser un menu Flash avec Spip.
Debutant en SPIP et en Flash, je propose une petite documentation, loin d’etre parfaite, aux utilisateurs.

Le secret est la combinaison SPIP=> XML => ActionScript.

Premiere etape : Creer son SPIP

Le site qui nous interesse est compose de 4 article places a la racine du SPIP. Le tuto montre pour l’instant comment afficher les titres des articles dans un menu.

2eme Etape : Creer le XML

La synthaxe de SPIP permet de generer simplement du XML. Voici un squellette spip generant un XML simple

[(#HTTP_HEADER{Content-type: text/xml[; charset=(#CHARSET)]})]<?xml version="1.0"[ encoding="(#CHARSET)"]?>
<menu>
	<BOUCLE_rubriques(RUBRIQUES){id_secteur!=12}{id_parent=0}{par titre}{par titre}>
		<articles>
        	<titre>[(#TITRE|supprimer_numero|texte_backend)]</titre>
        	<BOUCLE_articles(ARTICLES){id_rubrique}{0,1}>
              <texte>#TEXTE</texte>
            </BOUCLE_articles>
         </articles> 
 	</BOUCLE_rubriques>
</menu>

Ce squellete est a enregistrer au format HTML dans le dossier Squelettes. Le nom peux etre xml_rubriques.html

Etape 3 : Charger le XML depuis Flash

On utilise pour cela un class chargements XML, comme celle de Theo
Dans le Fichier Flash, on apelle cette classe en lui passant en parametre l’adresse du fichier XML generer par notre squellete soit ;
spip.php ?page=xml_rubriques.

Ce qui donne :

var loadxml = new XMLLoader("http://127.0.0.1/Spip/spip.php?page=xml_rubriques");

La class XMLLoader renvoit un fichier XML.

Etape 4 : Utiliser le XML pour generer un menu.

Cette phase necessite de connaitre la programmation AS bien sur.
On recupere le XML parse par Flash et on lance notre class creant le Menu lorsque le XML est charge :

loadxml.addEventListener(Event.COMPLETE,loadMenu);
function loadMenu(e:Event) {
	var xml:XML = e.currentTarget.getXML;
	var myMenu = new MainMenu(xml);
	addChild(myMenu);
}

Et voila. Maintenant voici les Class AS3 utilisees.
Les classe doivent etre enregistre dans des fichier portant le nom de la class .as dans le meme dossier que le SWF

Le xml Loader :
XMLLoader.as

	/** 
  	* ... 
 	* @author Théo Stocchetti pour www.blueacacia.com 
   	* @since 2008 
   	* @version 0.1 
   	* @usage Permet de charger un fichier XML dynamique ou dur 
    */

package {
	import flash.events.EventDispatcher;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;

	public class XMLLoader extends EventDispatcher {
		private var _objet:XML;
		private var _fichier:String;
		private var _url_charge:URLLoader;
		private var _url:URLRequest;


		/** 
		      *  
		        * @param fichier 
		       *  
		          */
		public function XMLLoader(fichier:String):void {
			this._fichier = fichier;
			this.$charge_xml();
		}
		private function $charge_xml():void {
			this._url_charge = new URLLoader();
			this._url = new URLRequest(this._fichier);
			this._url_charge.addEventListener(Event.COMPLETE,$voir_xml);
			this._url_charge.load(this._url);
		}
		private function $voir_xml(e:Event):void {
			this._objet = new XML(e.target.data);
			this.dispatchEvent(new Event(Event.COMPLETE));
		}
		public function get getXML():XML {
			return XML(this._objet);
		}
	}
}

Le menu :
MainMenu.as

package {
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.display.*;
	import flash.display.Sprite;

	import flash.text.TextFormat;
	import flash.text.TextField;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;


	public class MainMenu extends Sprite {
		private var menu:MovieClip;
		private var xmlList:XMLList;
		private var xmlLength:int;
		private var bouton:MovieClip;
		private var nomBouton:TextField;
		private var textFormat:TextFormat;

		public function MainMenu(xml:XML) {

			menu = new MovieClip();
			menu.graphics.beginFill(0x0000FF);
			menu.graphics.drawRect(0, 0, 100, 200);

			textFormat = new TextFormat();
			textFormat.font = "Helvetica";
			textFormat.color = 0xFFFFFF;


			xmlList = new XMLList( xml.articles);
			xmlLength = xmlList.length();
			for (var i:int = 0; i < xmlLength; i++) {
				bouton = new MovieClip();
				bouton.x = 5;// on déplace tout le bouton sinon le texte ne suit pas  
				bouton.y = i*30;// idem 
				bouton.graphics.beginFill( 0xFFBBBB);
				bouton.graphics.drawRect( 0, 0, 90, 25 );
				bouton.graphics.endFill();
				nomBouton = new TextField();
				nomBouton.defaultTextFormat = textFormat;
				nomBouton.text = xmlList.titre[i];
				bouton.addChild(nomBouton);
				menu.addChild(bouton);
			}
			addChild(menu);

		}
	}
}

Le fichier FLA :
MonMenuSpipAs.fla

var loadxml = new XMLLoader("http://127.0.0.1/Spip/spip.php?page=xml_rubriques");
loadxml.addEventListener(Event.COMPLETE,loadMenu);
function loadMenu(e:Event) {
	var xml:XML = e.currentTarget.getXML;
	var myMenu = new MainMenu(xml);
	addChild(myMenu);
}

Que pensez vous de ce petit tuto ? Merci de m’aider a l’ameliorer.