Notre dernière réalisation est en ligne sur http://www.exceldor.ca/.  C’est un petit module flash qui s’appel le « concocteur de soirée » permettant aux usagers de se bâtir un souper idéal.

Ce projet à été réalisé pour l’agence Saint-Jacques Vallée young & Rubicam.

Le NavigationManager de QuatreCentQuatre est une enveloppe ou un Proxy qui sert à titre d’interface à la classe SWFAddress de Asual afin de mieux contrôler son comportement et d’en étendre les fonctionnalités.

SWFAddress d'Asual

SWFAddress est une combinaison de techniques permettant, à travers des classes Javascript et Actionscript, le deep-linking (la possibilité d’accéder à des sections ou des pages directement à partir de la barre d’adresse du fureteur) dans des sites programmés en Flash. Cette technique, en plus de permettre l’utilisation de signets et des boutons Suivant et Précédent du fureteur, est une des meilleures solutions afin d’optimiser son site pour les moteurs de recherche.

Afin d’utiliser SWFAddress, il suffit d’intégrer l’outil dans le HTML de la façon suivante :

<script type="text/javascript" src="library/swfobject.js"></script>
<script type="text/javascript" src="library/swfaddress.js"></script>
<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {id:"flashMovie"};
	swfobject.embedSWF("navigationExample.swf", "alternateContent", "100%", "100%", "9.0.124", false, flashvars, params, attributes);
</script>
 

UTILISATION DE SWFADDRESS

L’intégration dans Flash s’effectue ensuite comme suit :

private function init() :void{
	SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange, false, 0, true);
 
	//Exemple de changement de page, mais une page ‘’/’’ est reçue par défaut au départ de l’application
	SWFAddress.setValue(‘’page1’’);
}
 
private function handleChange(evt:SWFAddressEvent):void{
	var laSection:String = evt.value; 
 
	//La seule information obtenue est un string, une condition doit donc être programmée
	switch(laSection){
		case ‘’X’’ :
			//opération afin de changer de section
			//Changer le titre de la page (défini manuellement)
			//Vérifier si c’est la section demandée n’existe pas, etc…
	}
}
 

SWFAddress présente aussi plusieurs outils pour, par exemple :

• Ouvrir des liens externes
• Reculer dans l’historique
• Monter de niveau hiérarchique (section1/section1-1 vers section1/)
• Changer le titre de la page (dans quel cas SWFAddress doit être déclaré sous la balise dans le html.

Note : SWFAddress, quand il est utilisé adéquatement, remplace et surclasse le moteur d’indexation des fichiers swf des moteurs de recherche populaires tels que Google, c’est pourquoi il est important d’inclure un fichier robots.txt afin d’empêcher ceux-ci d’indexer automatiquement les fichiers gérés par SWFAddress ou le NavigationManager.
Exemple de fichier robots.txt :

Sitemap: http://www.asual.com/sitemap.xml
User-agent: *
Disallow: /*.swf*
 

 
 
NAVIGATIONMANGER

Le mandat de SWFAddress est de permettre le deep-linking et cet objectif est atteint. Toutefois, des mécanismes personnalisés doivent être mis en place afin d’en régir le fonctionnement ainsi que les cas d’exception. Que faites-vous si vous voulez que la description des sections soit chargée à l’externe, passer à la section suivante, assigner des descriptions aux sections, obtenir les infos de son parent ou encore que vous désirez savoir à quel niveau hiérarchique se trouve la section courante? Vous devrez programmer vos propres mécanismes ou utiliser le NavigationManager.

Propriétés et méthodes publiques

 
 
Étant donné que le NavigationManager est une enveloppe à SWFAddress, les classes de ce dernier seront requises et l’intégration Javascript s’effectuera de la même façon.
 
 

 
<script type="text/javascript" src="library/swfobject.js"></script>
<script type="text/javascript" src="library/swfaddress.js"></script>
<script type="text/javascript">
	var flashvars = {};
	var params = {};
	var attributes = {id:"flashMovie"};
	swfobject.embedSWF("navigationExample.swf", "alternateContent", "100%", "100%", "9.0.124", false, flashvars, params, attributes);
</script>
 

Le NavigationManager fonctionne selon un schéma XML qui peut être défini manuellement ou chargé à l’externe, voici un exemple de la structure du XML requis.

 
<response>
	<header>
	</header>
	<body>
<page>
			<item type="default">
				<description>Section 1</description>
				<tag>section1</tag>
				<ressource>sectionclasses.Section1</ressource>
				<subitems>
					<item type="normal">
						<description>Ceci est la section 1.1</description>
						<tag>section1-1</tag>
						<ressource>sectionclasses.Section1_1</ressource>
					</item>
					<item type="normal">
						<description>Ceci est la section 1.2</description>
						<tag>section1-2</tag>
						<ressource>sectionclasses.Section1_2</ressource>
					</item>
				</subitems>
			</item>
			< item type="notfound">
				<description>Section  not found</description>
				<tag>sectionnotfound</tag>
				<ressource>sectionclasses.Section1</ressource>
			</ item>
		</page>
	</body>
</response>
 

Les informations d’une section doivent se retrouver à l’intérieur d’une balise <item> et doivent se situer à l’intérieur du node <page> qui sert de conteneur aux informations de la navigation.

Les informations à retrouver sont les suivantes :

• L’attribut type qui peut valoir normal au default. Une valeur default indique que cette section est celle qui sera chargée par défaut lors de l’initialisation du système (au lieu de « / »)
• La balise tag, qui sera utilisée comme identifiant dans la barre d’addresse et pour google analytics.
• La balise description, qui est une valeur qui peut servir, par exemple, à nommer le bouton qui mènera à la section ou encore au titre de la page si la propriété useDescriptionAsTitle a une valeur de true.
• La balise ressource, que vous pourrez utiliser afin de spécifier à quelle ressource (classe, fichier swf ou lien externe) la section est liée.
• Une balise subitems optionnelle qui contiendra des nodes items qui seront considérés les enfants de l’item courant.

Notez qu’un deuxième node de structure similaire mais d’un type notfound peut être placé à la racine de l’arbre afin de régir la section utilisée lorsqu’une page reçue n’est pas définie dans le XML. Si ce node facultatif n’est pas défini, la page par défaut sera utilisée.

UTILISATION DU NAVIGATION MANAGER

L’intégration dans Flash est simple :

 
private function init() :void{
	NavigationManager.instance.addEventListener(NavigationManagerEvent.SECTION_CHANGED, handleSectionChanged, false, 0, true);
	NavigationManager.instance.addEventListener(NavigationManagerEvent.MENU_XML_LOAD_COMPLETE,
		handleMenuLoadComplete, false, 0, true);
	NavigationManager.instance.loadMenuXML(new URLRequest(‘’menu.xml’’));
}
 
private function handleSectionChanged (evt: NavigationManagerEvent):void{
	//Référence vers la section courante
	var laSection:SectionData = evt.section;
	//ou
	var laSection2:SectionData =NavigationManager.instance.getCurrentSection();
	//On pourrait créer une section à partir de la ressource :
	var sectionClass:Class = getDefinitionByName(e.section.ressource) as Class;
	var currentSection <img src='http://blog.quatrecentquatre.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> isplayObject = new sectionClass() as SectionObject
	addChild(currentSection);
} 
 
private function handleMenuLoadComplete (evt: NavigationManagerEvent):void{
	//Effectue les operations afin de créer le menu
	var iterator:ISubSectionIterator = NavigationManager.instance.sectionsList;
	var length:int = iterator.numSubSections;
	for (var i:int = 0; i < length; i++) {
		var laSection:SectionData = iterator.getSubSectionAt(i);
	}
}
 

Comme on peut le constater, il peut être pratique d’écouter sur l’événement MENU_XML_LOAD_COMPLETE afin de savoir si le XML est chargé alors que l’événement SECTION_CHANGED est utile afin de savoir quand une section a changé. Notez que l’événement SECTION_CHANGED ne sera jamais diffusé avant que la fin du chargement du XML externe ou avant l’assignation manuelle du XML à travers la fonction NavigationManager.instance. sectionsList. setMenuStructure().


PRATIQUES À ADOPTER

• Dans les items associée à une section (un bouton de menu par exemple) implémentez une propriété qui entreposera une référence vers le SectionData de la section qu’ils représentent afin de faciliter l’utilisation du système. En plus, l’espace mémoire requis sera plus petit qu’une valeur textuelle de son chemin enregistrée dans un String.
• Si vous avez plus d’un menu pour la navigation, vous pouvez les englober dans des nodes à la racine du groupe qui serviront ni plus ni moins de conteneurs aux sous-sections qu’ils contiendront. Pour y accéder individuellement lors de la création dynamique des menus, vous pouvez utiliser la fonction NavigationManager.instance.sectionsList.getSectionByTag(‘’conteneur X’’) à partir duquel vous pourrez accéder à ses enfants. De plus, la structure dans Google Analytics n’en sera que plus claire étant donné que la section sera identifée comme suit : conteneurX/sectionY

 
 
BIBLIOGRAPHIE
SWFAddress Bad Practices
http://www.asual.com/blog/swfaddress/2007/05/18/swfaddress-bad-practices.html
SWFAddress and robots.txt
http://www.asual.com/blog/swfaddress/2008/11/25/swfaddress-and-robots-txt.html

Télécharger la version 1.0 du NavigationManager:
LIEN

La problématique des productions Flash multi fichiers

Lors du développement d’un site Flash à fichiers multiples, une problématique apparait très rapidement dans le processus de développement : La réutilisation des même éléments (graphiques, classes, composants) dans plusieurs des fichiers du site. Le problème vient entre autre du fait que chaque fichier  SWF a une librairie de graphique, composant, et classes unique. De ce fait, si on veut utiliser le même graphique dans deux fichiers SWF, ont doit donc recopier les mêmes éléments qu’on désire réutilisable dans toutes les librairies nécessaires. Cela implique une redondance des éléments et donc une multiplication du poids des fichiers.

Avant  l’arrivé de Flash CS4 et de l’ActionScript 3, il n’y avait pas beaucoup de solution pour contourner le problème. Ont pouvait utiliser un fichier exclude.xml au même endroit que notre fichier FLA pour définir les classes qui ne devait pas être compilé  dans le fichier SWF. Ainsi on pouvait exclure les classes qui étaient dupliqué à travers plusieurs fichiers SWF de l’application. Le problème était qu’on devait quand même recopier les éléments graphiques dans chacun des ces fichiers FLA pour ne pas avoir des erreurs de compilation sur des éléments inexistant dans la librairie.

Les modules

Depuis la sortie de la suite CS4, il est maintenant possible d’intégrer des librairies externes pour la compilation directement à partir de l’IDE de Flash. Il est donc maintenant possible de créer une librairie d’élément (graphique, composant, classes) qu’on désirer partager à travers plusieurs fichiers mais qui ne seront pas compiler (injecter) dans le fichier final d’un SWF donné. L’arrivée des modules élimine donc la redondance de poids avec la réplication des éléments partagés dans plusieurs librairies des fichiers FLA.

Pour créer une application multi fichiers avec module, ont doit donc commencer par créer le module en tant que tel et ensuite ce module est charger en premier par le fichier principal (celui qui s’occupe du chargement des fichiers subséquents) et ensuite procède au chargement des sections ou sous-section de l’application. Dès que le module est chargé, les sections et sous-sections ont directement accès aux ressources de celui-ci. Le module doit cependant être chargé de façon à ce que « l’Application Domain » soit le même que le fichier principale pour que les ressources soient accessible.

Création d’un module
Le module se crée en deux étapes. En premier lieu, on crée un fichier FLA et on y place tous les éléments réutilisables que nous voulons partager à travers les différents fichiers SWF du site ou de l’application. Ensuite, nous exportons le tout en format SWC (fichier SWF compressé par ZIP) et SWF. À partir de cet instant, le module est donc terminer et prêt à être utiliser directement dans les autres fichiers.

Exemple de création

• On crée un fichier “module.fla” dans lequel on inclut tout les éléments (graphiques, composants, classes, etc...) à partager
• On exporte ce fichier en “module.swc”
• On compile ce fichier en ”module.swf”
• Pour tous les fichiers FLA qui doivent utiliser ces éléments, inclure le SWC dans les paramètres de publication sous l’onglet “External Library Path”
• Dans votre fichier principal, charger le fichier “module.swf” en premier lieu, et ensuite procéder au chargement des sections et sous-section selon le besoin

En mode développement, on peut bien tester les sections et sous-sections en chargeant directement le module dans ces fichiers avant toute exécution du code pour pouvoir bien tester les fonctionnalités. Lors de la mise en ligne, on retire tout simplement le chargement du module dans les sections et sous-sections. C'est présentement la meilleure solution pour le travail en multi fichiers.