Sujets sur : framework AS3

Cours ActionScript 3 ‘framework AS3’

Comment créer des animations avec les tweens en pure AS3 ?

Ecrit le 26 juillet par Matthieu
Publié dans le(s) sujet(s) Cours AS3

Vous êtes de plus en plus à l’aise avec la programmation actionscript 3.

Mais vous ne connaissez pas suffisamment le logiciel Adobe Flash pour créer des animations sympa. J’avais le même problème que vous.

Les possibilités d’Adobe Flash sont immenses, il est compliqué de trouver les fonctionnalités utiles au début !

Savez-vous qu’il est possible d’animation vos interface graphiques simplement en pure AS3 ?

Je vais tout vous expliquer dans ce cours vidéos.

Voici ce je vais vous apprendre :

Comment animer vos applications flash en pure AS3 ?
Quelles classes / framework utiliser ?
Et comment l’implémenter dans n’importe quelle application ou jeu flash ?
Comment enchainer plusieurs effets sur chaque éléments ?
La technique pour écouter la fin d’une animation et lancer une demande à votre visiteur.
La solution pour lancer vos effets avec un décalage, un délai de quelques secondes (c’est vous qui le déterminez).
Comment choisir le type d’effet : Elastic, Bounce…
Et la majorité des fonctionnalités utilisées pour optimiser vos Tweens.

A la fin de cette formation, vous serez à même d’animer vos applications flash sans utiliser le logiciel Adobe Flash.

Les Tweens en AS3

Version démonstration

Ci-dessous, le résultat dans de l’application avec Eaze Tween.

Cliquez sur l’écran pour relancer les effets de Tween.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/eaze-tween.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/eaze-tween.swf

Télécharger le code source Tween

Vous trouverez l’ensemble du code source commenté pour vous aider dans l’intégration de cette fonctionnalité dans vos applications flash.

Télécharger “Eaze Tween”

ex-eaze-tween.zip – Téléchargé 365 fois – 337,82 Ko

Le site officiel : Eaze Tween

Ci-dessous, une partie de la classe Main modifiée.

[codesyntax lang= »actionscript3″ title= »Eaze Tween » bookmarkname= »Eaze Tween »]

/**

  The Initial Developer of the Original Code is
  Matthieu  - https://www.actionscript-facile.com
  Portions created by the Initial Developer are Copyright (C) 2010
  the Initial Developer. All Rights Reserved.

  Contributor(s) :

*/
package
{

	import aze.motion.easing.Expo;
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;
	import flash.display.Bitmap;
	import flash.events.Event;
	import flash.display.Sprite;

	import aze.motion.easing.Bounce;
	import aze.motion.easing.Elastic;
	import aze.motion.EazeTween;
	import aze.motion.eaze;

	import com.demonsters.debugger.MonsterDebugger;

	public class Main extends Sprite
	{
		private var oLogo : Bitmap;
		private var oLogo3 : Bitmap;

		/**
		 * Constructeur.
		 *
		 */
		public function Main()
		{
			// attend la fin de l'initialisation de la scène
			this.addEventListener(Event.ADDED_TO_STAGE, onReady, false, 0, true);
		}

		/**
		 * Démarrage de l'application.
		 * définit le nombre d'images par secondes dans les paramètres de compilation
		 * -default-frame-rate 40
		 *
		 */
		private function onReady(event : Event) : void
		{
			this.removeEventListener(Event.ADDED_TO_STAGE, onReady);

			// Init De MonsterDebugger
            MonsterDebugger.initialize(this);
            MonsterDebugger.trace(this, "Start Application");

			this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onReloadEffect);

			// instanciation de l'objet graphique
			var oFirefox : Logo = new Logo();
			oLogo = new Bitmap( oFirefox );
			oLogo.smoothing = true;// pour lisser le rendu de l'image
			addChild( oLogo );

			var oFirefox3 : Logo = new Logo();
			oLogo3 = new Bitmap( oFirefox3 );
			oLogo3.x = 233;
			oLogo3.smoothing = true;// pour lisser le rendu de l'image
			addChild( oLogo3 );

			startEffect(true);
		}

		/**
		 * Lancement des effets.
		 * @param bFirst : si c'est le premier lancement, effet différent (à true).
		 *
		 */
		private function startEffect(bFirst:Boolean = false) : void
		{
			// click sur l'écran
			if(!bFirst)
			{
				oLogo.x = oLogo.y = 0;
				oLogo.width = 256;
				oLogo.height = 256;

				eaze(oLogo3).to(3,{width:256, height:256, x:233, y:0, alpha:100})
				.easing(Bounce.easeInOut)
				.chain(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0})
				.easing(Expo.easeInOut)
				.chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween
				.onComplete(newEffect, oLogo)
				;// en s
			}
			else
			{
				eaze(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0})
				.easing(Bounce.easeInOut)// le type d'effet à utiliser
				.chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween
				.onComplete(newEffect, oLogo)// à la fin des tween, appel de cette fonction avec les paramètres
				;// en s
			}

		}

		/**
		 * Enchainement d'une deuxième effet après le premier.
		 *
		 */
		private function newEffect(oDisplay:DisplayObject):void
		{
			eaze(oDisplay).from(3, {width:330, height:330, x:30, y:30 })// à partir de cette configuration
			.easing(Elastic.easeInOut)
			.colorMatrix(0.2, 0, -1); // brightness, contrast, saturation, hue.
		}

		/**
		 * Click sur l'écran par l'utilisateur.
		 * Relance tous les effets.
		 *
		 */
		private function onReloadEffect(event : MouseEvent) : void
		{
			MonsterDebugger.trace(this, "click sur l'écran");
			EazeTween.killAllTweens(); // arrête immédiatement toutes les tweens en cours.
			startEffect();
		}

	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

/**

The Initial Developer of the Original Code is

Matthieu - https://www.actionscript-facile.com

Contributor(s) :

package

{

import aze.motion.easing.Expo;

import flash.display.DisplayObject;

import flash.events.MouseEvent;

import flash.display.Bitmap;

import flash.events.Event;

import flash.display.Sprite;

import aze.motion.easing.Bounce;

import aze.motion.easing.Elastic;

import aze.motion.EazeTween;

import aze.motion.eaze;

import com.demonsters.debugger.MonsterDebugger;

public class Main extends Sprite

{

private var oLogo : Bitmap;

private var oLogo3 : Bitmap;

/**

* Constructeur.

public function Main()

{

// attend la fin de l'initialisation de la scène

this.addEventListener(Event.ADDED_TO_STAGE, onReady, false, 0, true);

}

/**

* Démarrage de l'application.

* définit le nombre d'images par secondes dans les paramètres de compilation

* -default-frame-rate 40

private function onReady(event : Event) : void

{

this.removeEventListener(Event.ADDED_TO_STAGE, onReady);

// Init De MonsterDebugger

MonsterDebugger.initialize(this);

MonsterDebugger.trace(this, "Start Application");

this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onReloadEffect);

// instanciation de l'objet graphique

var oFirefox : Logo = new Logo();

oLogo = new Bitmap( oFirefox );

oLogo.smoothing = true;// pour lisser le rendu de l'image

addChild( oLogo );

var oFirefox3 : Logo = new Logo();

oLogo3 = new Bitmap( oFirefox3 );

oLogo3.x = 233;

oLogo3.smoothing = true;// pour lisser le rendu de l'image

addChild( oLogo3 );

startEffect(true);

}

/**

* Lancement des effets.

* @param bFirst : si c'est le premier lancement, effet différent (à true).

private function startEffect(bFirst:Boolean = false) : void

{

// click sur l'écran

if(!bFirst)

{

oLogo.x = oLogo.y = 0;

oLogo.width = 256;

oLogo.height = 256;

eaze(oLogo3).to(3,{width:256, height:256, x:233, y:0, alpha:100})

.easing(Bounce.easeInOut)

.chain(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0})

.easing(Expo.easeInOut)

.chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween

.onComplete(newEffect, oLogo)

;// en s

}

else

{

eaze(oLogo3).to(5,{width:33, height:33, x:360, y:260, alpha:0})

.easing(Bounce.easeInOut)// le type d'effet à utiliser

.chain(oLogo).to(3, {width:33, height:33, x:450, y:350 })// enchainement d'une deuxième Tween

.onComplete(newEffect, oLogo)// à la fin des tween, appel de cette fonction avec les paramètres

;// en s

}

/**

* Enchainement d'une deuxième effet après le premier.

private function newEffect(oDisplay:DisplayObject):void

{

eaze(oDisplay).from(3, {width:330, height:330, x:30, y:30 })// à partir de cette configuration

.easing(Elastic.easeInOut)

.colorMatrix(0.2, 0, -1); // brightness, contrast, saturation, hue.

}

/**

* Click sur l'écran par l'utilisateur.

* Relance tous les effets.

private function onReloadEffect(event : MouseEvent) : void

{

MonsterDebugger.trace(this, "click sur l'écran");

EazeTween.killAllTweens(); // arrête immédiatement toutes les tweens en cours.

startEffect();

}

[/codesyntax]

Et vous, quelles libraires utilisez-vous pour créer vos animations / Tweens ?

Ou peut être préférez-vous les interpolations avec Adobe Flash ?

Partagez vos astuces dans les commentaires ci-dessous.

Charger dynamiquement les graphismes du Player Audio AS3 Formation [partie 3]

Commentaires fermés sur Charger dynamiquement les graphismes du Player Audio AS3 Formation [partie 3]

Ecrit le 8 juin par Matthieu
Publié dans le(s) sujet(s) Framework AS3 |Pixlib

Dans la troisième partie de ce tutoriel vidéo, vous allez apprendre à charger dynamiquement les graphismes du Player AS3 Formation, sans recompiler le swf !

De plus, je vais vous expliquer l’implémentation des différentes fonctionnalités de cette version.

Et vous saurez pourquoi l’évènement Event.ENTER_FRAME n’est pas toujours l’idéal pour lancer des calculs sur l’affichage de vos interfaces. Et surtout comment le remplacer par une fonction moins gourmandes en ressources processeurs !

Et voici le résultat dans un swf :

https://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/audio-player.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/audio-player.swf

Téléchargez le code source du Player AS3 Formation

Renseignez votre email pour télécharger le code source complet du Player AS3 Formation.
Les classes sont commentées pour vous aider au maximum.

Découvrir les Artistes de l’Album écouté

L’album que vous écoutez provient du site jamendo.fr.

Écoutez et téléchargez l’album Saturnine Song

Dites-moi : quels tutoriels souhaitez-vous à propos du Framework Pixlib ?

Voulez-vous que j’aborde des fonctionnalités particulières de Pixlib ?

Avez-vous des questions sur ce cours ?

Posez-les dans les commentaires ci-dessous.

Je rédigerais les prochains tutoriels pour répondre à toutes vos questions.

Découvrez Pixlib Flash Plateform Framework.

Développer un player audio Flash avec Pixlib [partie 2]

Commentaires fermés sur Développer un player audio Flash avec Pixlib [partie 2]

Ecrit le 11 avril par Matthieu
Publié dans le(s) sujet(s) Framework AS3 |Pixlib

Dans la deuxième partie de ce tutoriel vidéo, vous allez découvrir les classes importantes de Pixlib.

Cet exemple de Player Audio basé sur Pixlib regroupe quelques unes des fonctionnalités utilisées les plus souvent.

Et voici le résultat dans un swf :

https://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/audio-player.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/06/audio-player.swf

Téléchargez le code source complet de l’exemple

Renseignez votre email pour télécharger le code source complet de l’exemple.
Les classes sont commentées pour vous aider au maximum.

Découvrir les Artistes de l’Album écouté

L’album que vous écoutez provient du site jamendo.fr.

Écoutez et téléchargez l’album Saturnine Song

Avez-vous besoin d’informations supplémentaires sur Pixlib 3 ?

Si vous avez d’autres questions sur Pixlib, posez-les dans les commentaires ci-dessous.

Je rédigerais un nouveau tutoriel pour répondre à toutes vos questions.

Découvrez Pixlib Flash Plateform Framework.

Je tiens à remercier Michael Barbero pour toutes ses explications et ses conseils avisés. Visitez son site : http://www.deja-vue.net/blog/

Les 5 bonnes raisons d’utiliser un Framework ActionScript Flash

Commentaires fermés sur Les 5 bonnes raisons d’utiliser un Framework ActionScript Flash

Ecrit le 31 mars par Matthieu
Publié dans le(s) sujet(s) Framework AS2 |Framework AS3

Tout d’abord, un framework c’est quoi ? Quel est son utilité ?

Un framework est un outil qui permet de structurer et d’architecturer un projet flash.

Il apporte également des facilités de programmation avec des fonctionnalités pré-intégrées, prêtes à être utilisées.

Les 5 bonnes raisons d’utiliser un Framework ActionScript

N°5

Un framework, digne de ce nom, impose une architecture efficace avec une approche MVC (ou IOC) , une arborescence des fichiers type et une manière de penser l’application.

N°4

Un Framework donne une organisation pour structurer correctement une application. Avec un gain de temps très important dans le développement (inutile de recoder certaines fonctionnalités). Il donne également des conventions de nommage des fichiers ainsi que des conventions de nommage du code.

N°3

Un framework fournit tout un panel d’outils pour répondre aux besoins récurrents d’un projet.

Par exemple, le Framework Pixlib intègre nativement :

Le pattern MVC, plus particulièrement MVFC (Modèle, Vue, Front, Controller).
Le pattern IOC (Inversion Of Control).
Le chargement des swf, graphismes, animations, polices de caractères…
Le chargement et le décodage des fichiers xml (structure sous forme d’objects).
Des raccourcis de fonction, implémentation automatique des fonctionnalités récurrentes (flashvars, variables dans l’url – GET -, etc…).
Et plein d’autres classes facilitant la vie du développeur ActionScript.

N°2

En s’appuyant sur un framework, le développeur peut se concentrer sur l’architecture de son application, l’analyse, les fonctionnalités…

Tout le reste sera géré par le framework (les chargements, organisation du code…).

La sécurité est gérée nativement, les classes de manipulation des données sont générée à la volée, l’architecture MVC est déjà prête à être utilisée…

Le framework permet donc de démarrer tout de suite. Et surtout, sans réinventer la roue à chaque fois puisque le framework fournit des outils prêts à l’emploi.

Une application qui s’appuie sur framework possède une maintenabilité et évolutivité beaucoup plus aisée. La pérénité de l’application flash est donc assurée.

N°1

Le plus grand avantage d’un framework : c’est qu’il permet à une équipe de développement de travailler facilement sur le même projet.

En effet, le framework impose une architecture bien définie donc tous les développeurs sont hébitués aux mêmes mêmes règles.

Donc ils sauront tous comment se répérer dans le projet, savoir comment il fonctionne, où ils doivent trouver tel ou tel bout de code…

Pour un prestataire professionnel, c’est d’autant plus un avantage car si son équipe travaille sur un framework donné et qu’il cherche à recruter un nouveau développeur, alors il pourra en trouver facilement sur le marché, et il sera prêt à démarrer sur les projets de l’entreprise car il connaîtra déjà le fonctionnement interne du framework.

L’utilisation d’un Framework

Utiliser un framework pour ses projets flash apporte surtout beaucoup de plaisir à développer.

En effet, il est possible de se concentrer directement sur les fonctionnalités de l’application à développer sans avoir à se soucier à redévelopper des fonctions fastidieuses comme le remoting, l’analyse xml…

Le but d’un framework, c’est aussi de pouvoir se faire plaisir en développant.

Retrouvez les frameworks que j’utilise quotidiennement dans mes développements AS3 et AS2.

Et vous, préférez-vous recoder à chaque fois l’ensemble du code de votre application ?

Ou alors, peut être utilisez-vous des frameworks personnels ?

Partagez les via les commentaires ci-dessous. J’aimerais bien les tester dans un projet flash.

Comment accélérer votre programmation ActionScript Flash ?

6 questions

Ecrit le 3 mars par Matthieu
Publié dans le(s) sujet(s) Framework AS2 |Framework AS3

Dans cet article, nous allons découvrir quelques unes des stratégies utilisées pour accélérer votre développement d’applications flash.

Découverte des Frameworks ActionScript

Tout d’abord, quel est l‘utilité d’un Framework ActionScript ?

Que contient-il ? A quoi sert-il ?

Un Framework ActionScript simplifie la vie du développeur, dans le sens, où il contient des fonctionnalités prêtes à l’emploi.

C’est à dire qu’un ensemble de classes s’occupent de telle ou telle fonctionnalité. Ainsi, vous n’avez pas besoin de la recoder à chaque fois. En instanciant les classes, avec les paramètres adéquats, vous implémentez la fonctionnalité dans votre code ActionScript.

Par exemple, Google Analytics For Flash permet très simplement d’ajouter le tracking de vos visiteurs dans une application flash.

D’autres Frameworks ActionScript, beaucoup plus complets, accélère grandement le développement d’une application flash complexe.

En effet plusieurs Framework ActionScript intègrent un ou plusieurs modèles de conception afin de faciliter l’utilisation de ceux-ci dans vos projets flash.

Notamment, le Framework PureMVC qui possèdent plusieurs modèles de conception, facilement utilisable pour construire une application.

Les Frameworks ActionScript à connaitre

Plusieurs Développeurs ActionScript talentueux partagent avec la Communauté Adobe Flash leurs Frameworks. Ils utilisent quotidiennement ces Frameworks pour leurs projets flash.

Les Frameworks que je vous présentent possèdent un support très réactif et sont régulièrement mis à jour, pour :

intégrer des nouvelles fonctionnalités.
l’amélioration des performances.
intégrer les « features » des nouvelles versions du Player Flash.
implémenter les demandes des utilisateurs.

Ci-dessous, la liste des Frameworks que j’utilise en fonction des projets flash sur lesquels je suis amené à travailler.

Pixlib 3.0 Flash Plateform Framework

C’est mon framework préféré. En ce moment, j’apprends à l’utiliser pour en comprendre le fonctionnement et les subtilités.

S’il n’y avait qu’un seul framework AS3 à choisir, ce serait celui ci !

Il est très complet et développé par une équipe d’experts Adobe Flash très talentueux.

Les prochains tutoriel vidéo seront accès sur la découverte et l’utilisation des fonctionnalités de Pixlib 3.0.

Lisez l’article consacré à la présentation de Pixlib 3.0 pour en savoir plus.

PureMVC

Un framework très accessible pour les débutants. PureMVC est une implémentation du pattern Modèle Vue Contrôleur.

L’objectif du Framework PureMVC est de vous aider à séparer votre application en trois parties bien distinctess :

le modèle.
la vue.
le contrôleur.

Cette séparation, ainsi que le degré et le sens de couplage employé pour les faire collaborer est indispensable pour construire et maintenir des applications évolutives.

Lisez la présentation du Framework PureMVC, accompagné d’un exemple ActionScript pour découvrir son utilisation.

Vegas AS2 / AS3

Un framework que j’ai découvert en même temps que l’AS3.

Vegas est un Framework très complet, il contient tout un panel de classes permettant de développer des applications flash très complexes. Avec ces extensions LunAS, PEGAS, KronOS, ASGard et CalistA, l’auteur Ekameleon a réalisé un travail formidable pour faciliter le développement Flash.

Le framework Vegas est compatible AS3 et AS2 !

Voici un tutoriel pour installer la dernière version de Vegas. Voici le lien direct vers le répertoire SVN de Google Code.

Ekameleon a rédigé plusieurs tutoriels pour apprendre à utiliser Vegas.

Le support en français est assuré sur le Google Group Vegas.

Voici la liste, non exhaustive, des fonctionnalités implémentées dans Vegas :

ADT (Abstract Data Type) libraries (queue, map, collections, stack, bag, iterator, etc.)
Gestion avancée du modèle évènementiel basé sur Dom2/3 avec l’implémentation du design pattern FrontController.
Implémentation du pattern IoC (Inversion Of Control).
Gestion de la localisation et des interfaces multi-langues.
Implémentation des design pattern MVC, Visitor, Command, Observer, etc.
Gestion avancée du debug ‘logging’.
Des outils de dessins, couleurs, géométrie.
Gestion avancée avec un moteur de tâches, processus, séquences, batch etc.
Ajout d’un moteur complet de Transition (tweens, etc.)
Des outils pour les interfaces utilisateurs.
Gestion avancée du réseau et des outils remoting.

La documentation en ligne est très pratique pour utiliser les fonctionnalités de Vegas.

Le framework Vegas est complété de plusieurs extensions. Celles-ci peuvent s’avèrer très utiles en fonction de vos projets flash.

LunAS

L’extension LunAS est un framework intégre des composants pour construire des interfaces graphiques :

La gestion des textes : label, input, textarea.
Tous les types de boutons.
Plusieurs types de container.
Des scrollbars.
etc…

Pour avoir une meilleurs idée des possiblités de LunAS , je vous conseille d’installer les sources LunAS via SVN. Il ya plusieurs exemples pratiques pour apprendre à utiliser cette extension.

CalistA

Cette extension contient plusieurs classes de cryptage Action Script. Attention, certaines classes sont en cours de développement dans la version AS3 (cryptage TEA).

Possiblités de cryptage offertes par CalistA :

MD5.
SHA1.
TEA (en cours de portage AS3).
Base64.
Base8.
LZW : compression / décompression des chaines de caractères.

Il y a également les extensions AST’r et NinjAS à découvrir.

Pixlib AS2

Pour l’AS2, Pixlib est le premier framework actionscript que j’ai découvert. Ma programmation AS2 a fait un bond en avant gigantesque grâce à l’utilisation de Pixlib.

Le framework Pixlib est conçu pour apporter à votre programmation AS2 :

gestion des évènements poussés.
gestion du logging.
chargements des données de tout type.
gestion des objets vidéos et sons.
possibilité d’effectuer des transitions.
gestion de la structure des données. Analyse simplifiée et rapide des fichiers XML.
implémentation de plusieurs Design Pattern (Model View Controler, Singleton, Observer…).

La mailing-list contient une mine d’informations pour apprendre à utiliser ce framework.

Vous pouvez télécharger la dernière version de Pixlib AS2 sur le répertoire SVN. Note : le répertoire SVN étant hors service, j’ai rajouté en téléchargement Pixlib version AS2 ci-dessous.

Télécharger “Pixlib version AS2”

Pixlib-AS2.zip – Téléchargé 353 fois – 480,57 Ko

La documentation de l’ensemble des classes est disponible sur le site Geturl.

Le site Geturl contient également plusieurs tutoriels très utiles pour appréhender les subtilités de Pixlib. Et un autre tutoriel qui permet de comprendre les bases du framework Pixlib.

PixIoC AS2

Vous serez surement intéressés par PixIoC qui est une extension de Pixlib AS2.

Cette extension est basée sur le design pattern Inversion Of Control. Elle permet de construire votre application à partir d’un fichier xml. Ce fichier xml contient les classes à instancier, les méthodes à utiliser… tout pour créer votre application flash.

Vous pouvez télécharger la dernière version de PixIoC.

Conclusion

Je vous encourage vivement à prendre le temps d’apprendre à utiliser ces Frameworks ActionScript. Votre programmation flash s’en ressentira. Et vous serez plus à même de concevoir des projets flash de plus en plus robustes et évolutifs.

Pour vous aider, je vais publier des tutoriels en vidéos accompagnés d’exemples d’implémentation pour chacun de ces frameworks.

Et vous, quel est le framework que vous utilisez le plus en souvent en AS3, AS2 ?

En AS2, j’utilise Pixlib et en AS3 Vegas et depuis peu Pixlib 3.0.

Sur quel framework souhaitez-vous des tutoriels en priorité ?

Dites moi cela via les commentaires ci-dessous. Merci.

Pixlib 3.0 Flash Platform Framework

9 questions

Ecrit le 27 février par Matthieu
Publié dans le(s) sujet(s) Framework AS3 |Pixlib

Qu’est ce donc Pixlib 3.0 ?

Présentation du Framework Pixlib 3.0

C’est un framework ActionScript 3 pour Flash Player 10 très très performant. Pixlib permet de concevoir des applications flash avec des outils très pratiques.

Etant un fervent utilisateur de Pixlib pour AS2, je vous conseille fortement d’apprendre à utiliser Pixlib 3.0.

Cette version dispose d’une nouvelle architecture / noyau. Elle fonctionne avec un système d’extensions.

Et elle est plus rapide et robuste ainsi que complètement documentée !

Romain Ecarnot a repris les rênes du projet Pixlib pour vous proposer cette nouvelle version.

Sur le site officiel, vous pourrez télécharger :

le framework complet et des extensiosns.
son code source.
accéder à la Team Pixlib pour un support.
des tutoriels.
et consulter la documentation.

Fonctionnalités du Framework Pixlib 3.0

MVC+FC, PixLib est basée sur le pattern Model View Controler avec un FrontController.
Logging, Les logs / debug de vos projets pourront s’interfacer avec la plupart des sytèmes de logging (avec l’extensiob PixLogger).
Abstraction et couplage faible permettant d’avoir une base générique et d’implémenter par la suite des comportements très concrets (par exemple pour le remoting avec le package net.pixlib.services et son extension PixService).

L’utilisation de Command, soit au sein d’un MVC, soit dans un cadre plus générique, avec des séquenceurs ou autres managers.
Une Loading API permettant de charger tout type d’élément avec une abstraction totale.
La gestion du pattern IOC avec l’extension PixIOC.

Conclusion

La Team Pixlib propose des services de consulting, formations et développement.

De mon côté, je m’attaque à la programmation AS3 en utilisant ce fabuleux Framework Pixlib 3.0.

Dans quelques temps, je vous présenterais mes applications conçues avec Pixlib. Et également accompagnées de tutoriels vidéos.

Et vous, que pensez-vous de Pixlib 3.0?

Est ce que vous l’utilisez pour la création de vos projets flash ?

Ou utilisez vous un autre framework ? Lequel ?

Sinon, le votre, fait maison ?

Utiliser l’historique du navigateur dans Flash avec les boutons précédent / suivant

18 questions

Ecrit le 13 décembre par Matthieu
Publié dans le(s) sujet(s) Adobe Flash

Nous allons apprendre comment utiliser les boutons suivant / précédents de votre navigateur (Firefox, Internet Explorer…) dans vos applications Flash.

Le script SwfAddress gère l’utilisation des boutons suivant / précédent de votre navigateur (Firefox) avec votre application Flash.

Il permet également d’accéder directement à une page de votre application avec une url. C’est très pratique pour donner le lien direct d’une page (ou interface) de votre site flash.

Les fonctionnalités de SWFAddress

SWFAddress est librairie Open Source sous forme de plugin à SWFObject.

SWFAddress offre les possibilités suivantes :

Les boutons suivant, précédant et rafraichir du navigateur sont pris en compte par votre application flash.
Un meilleur référencement de votre site flash avec une prise en compte SEO des moteurs de recherche.
Vous avez un accès direct aux différentes interfaces de votre site flash, avec une url du type
Vous pouvez également modifier le titre de la page du navigateur directement à partir de votre application flash. Cela permet d’optimiser le référencement.

Utilisation de SWFAddress

Pour utiliser SWFAddress, votre contenu Flash doit être ajouter dans votre page web (html ou php) avec le script SWFObject. Pour cela, consultez le tutoriel : Afficher du Flash avec SWFObject.

Ensuite, téléchargez la dernière version du script SWFAddress depuis le site de l’Auteur (Download SWFAddress 2.4).

Détails des fonctions possibles

SWFAddress.getValue()

Cette méthode renvoie le paramètre situé dans la barre d’adresse du navigateur de votre internaute. Ce paramètre correspond au contenu placé après le symbole #

Avec votre code ActionScript, SWFAddress.getValue() renvoie la dernière valeur donnée par SWFAddress.setValue(param:String).

SWFAddress.setValue(param:String)

Cette méthode met à jour l’url de votre navigateur. Elle conserve également une reférence dans votre application Flash qui peut ètre récupérée avec SWFAddress.getValue().

SWFAddress.setTitle(param:String)

Cette méthode permet de mettre à jour le titre de la page actuelle du navigateur de votre internaute.

SWFAddress.getTitle() permet de récupérer le titre de la page actuelle, à tout moment dans votre application Flash.

SWFAddress.setStatus(param:String)

Cette méthode modifie le texte qui apparait dans la barre de statut du navigateur de votre internaute.

SWFAddress.resetStatus() efface le texte de la barre de statut du navigateur.

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress)

En ActionScript 3, SWFAddress permet d’écouter les évènements diffusés à chaque changement page. C’est à dire, à chaque fois que votre application Flash change de page ou appelle SWFAddress.setValue(param:String), l’évènement SWFAddressEvent.CHANGE est diffusé.

Améliorer son référencement avec SWFAddress

En utilisant les fonctionnalités de SWFAddress, vous pouvez paramétrer l’adresse, le titre et l’historique du navigateur à chaque changement de page. Ainsi, votre application Flash affiche le nom de la page courante où se situe l’utilisateur.

De plus, il est possible d’accéder directement à une page du site Flash via son URL statique. En tapant par exemple , l’utilisateur est redirigé directement sur la page « interface1 » du site. Cette méthode est très pratique pour mettre une page du site Flash directement dans les Favoris.

En utilisant cette méthode pour créer un fichier sitemap.xml (lisez cet article sur le référencement d’un site Flash),vous pouvez ajouter toutes les urls menant aux différentes interfaces de votre site Flash.

Vous améliorez significativement le référencement de votre site Flash, puisque toutes les adresses (interfaces) sont disponibles dans l’index des moteurs de recherches et renverront directement sur la page concernée avec son nom affiché dans la barre d’adresse.

Exemple AS3 avec SWFAddress

Vous avez téléchargé le fichier zip SWFAddress contenant l’ensemble du code source, des exemples et de la documentation. Dans mon tutoriel, je reprends l’exemple SEO pour vous montrer les améliorations possibles du référencement de vos Applications Flash.

Création du fichier .htaccess

A l’aide de votre client FTP (FileZilla par exemple), modifiez le fichier .htaccess à la racine de votre site.

Renseignez les informations suivantes :

le répertoire de base contenant le fichier qui lance votre application flash. En règle général, c’est / ou /site.
le nom du fichier qui lance votre application Flash. Dans la majorité des cas, c’est le fichier index.php.

[codesyntax lang= »apache » title= »htaccess » bookmarkname= »htaccess »]

# Sets the base folder pour SWFAddress
RewriteBase  /ressources

RewriteCond  %{REQUEST_FILENAME}    !-f
RewriteCond  %{REQUEST_FILENAME}    !-d
RewriteRule  .*                     swfaddress_exemple.php

# Sets the base folder pour SWFAddress

RewriteBase /ressources

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule .* swfaddress_exemple.php

[/codesyntax]

Création du fichier datasource.php

Ce fichier contient la version HTML de votre site Flash. Si un internaute ne possède pas le plugin flash installé sur son navigateur web, une version HTML de votre site Flash est alors affichée.

Renseignez dans les case : tous les noms des pages de votre site Flash. Ce sont les mêmes noms utilisés dans votre code ActionScript 3.

[codesyntax lang= »php » title= »datasource.php » bookmarkname= »datasource.php »]

&lt;?php

    header('Content-Type: text/xml;charset=utf-8');
    $swfaddress = preg_replace('/^(.+)\/$/', '$1', $_GET['swfaddress']);
    $base = strtolower(substr($_SERVER['SERVER_PROTOCOL'], 0, strrpos($_SERVER['SERVER_PROTOCOL'], '/'))) . '://' . $_SERVER['SERVER_NAME'] . substr($_SERVER['PHP_SELF'], 0, strrpos($_SERVER['PHP_SELF'], '/'));

    switch($swfaddress) {
        case '/':
            echo('&lt;p&gt;Quisque libero mauris, ornare in, faucibus ut, facilisis nec, quam. Mauris quis felis ac nisl laoreet adipiscing. Nunc libero.&lt;/p&gt;');
            break;
        case '/a-propos':
            echo('&lt;p&gt;Suspendisse vitae nibh.&lt;/p&gt;');
            break;
        case '/demo':
            echo('&lt;p&gt;Fusce at ipsum vel diam ullamcorper convallis. Morbi aliquet cursus lacus. Nunc nisi ligula, accumsan sit amet, condimentum nec, ullamcorper a, lectus. Vestibulum ut lectus.&lt;/p&gt;');
            break;
        case '/demo/1':
            echo('&lt;p&gt;&lt;img src="' . $base . '/images/1.png" alt="Portfolio 1" width="400" height="300" /&gt;&lt;br /&gt;');
            echo((isset($_GET['desc']) &amp;&amp; $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar&lt;br /&gt;' : '');
            echo((isset($_GET['year']) &amp;&amp; $_GET['year'] != '') ? $_GET['year'] . '&lt;br /&gt;' : '');
            echo('&lt;br /&gt;&lt;a href="http://www.sergeevstudio.com"&gt;Photos by Lyubomir Sergeev&lt;/a&gt;&lt;/p&gt;');
            break;
        case '/demo/2':
            echo('&lt;p&gt;&lt;img src="' . $base . '/images/2.png" alt="Portfolio 2" width="400" height="300" /&gt;&lt;br /&gt;');
            echo((isset($_GET['desc']) &amp;&amp; $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar&lt;br /&gt;' : '');
            echo((isset($_GET['year']) &amp;&amp; $_GET['year'] != '') ? $_GET['year'] . '&lt;br /&gt;' : '');
            echo('&lt;br /&gt;&lt;a href="http://www.sergeevstudio.com"&gt;Photos by Lyubomir Sergeev&lt;/a&gt;&lt;/p&gt;');
            break;
        case '/demo/3':
            echo('&lt;p&gt;&lt;img src="' . $base . '/images/3.png" alt="Portfolio 3" width="400" height="300" /&gt;&lt;br /&gt;');
            echo((isset($_GET['desc']) &amp;&amp; $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar&lt;br /&gt;' : '');
            echo((isset($_GET['year']) &amp;&amp; $_GET['year'] != '') ? $_GET['year'] . '&lt;br /&gt;' : '');
            echo('&lt;br /&gt;&lt;a href="http://www.sergeevstudio.com"&gt;Photos by Lyubomir Sergeev&lt;/a&gt;&lt;/p&gt;');
            break;
        case '/editeur-AS3-FDT':
            echo('&lt;p&gt;Nulla nec nunc id urna mollis molestie. Suspendisse potenti. Aliquam vitae dui. In semper ante eu massa. Praesent quis nunc. Vestibulum tristique tortor.&lt;/p&gt;');
            break;
        default:
            echo('&lt;p&gt;&lt;!-- Status(404 Not Found) --&gt;Page not found.&lt;/p&gt;');
            break;
    }
?&gt;

<?php

header('Content-Type: text/xml;charset=utf-8');

$swfaddress = preg_replace('/^(.+)\/$/', '$1', $_GET['swfaddress']);

$base = strtolower(substr($_SERVER['SERVER_PROTOCOL'], 0, strrpos($_SERVER['SERVER_PROTOCOL'], '/'))) . '://' . $_SERVER['SERVER_NAME'] . substr($_SERVER['PHP_SELF'], 0, strrpos($_SERVER['PHP_SELF'], '/'));

switch($swfaddress) {

case '/':

echo('Quisque libero mauris, ornare in, faucibus ut, facilisis nec, quam. Mauris quis felis ac nisl laoreet adipiscing. Nunc libero.');

break;

case '/a-propos':

echo('Suspendisse vitae nibh.');

break;

case '/demo':

echo('Fusce at ipsum vel diam ullamcorper convallis. Morbi aliquet cursus lacus. Nunc nisi ligula, accumsan sit amet, condimentum nec, ullamcorper a, lectus. Vestibulum ut lectus.');

break;

case '/demo/1':

echo('<img src="' . $base . '/images/1.png" alt="Portfolio 1" width="400" height="300" /> ');

echo((isset($_GET['desc']) && $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar ' : '');

echo((isset($_GET['year']) && $_GET['year'] != '') ? $_GET['year'] . ' ' : '');

echo(' <a href="http://www.sergeevstudio.com">Photos by Lyubomir Sergeev</a>');

break;

case '/demo/2':

echo('<img src="' . $base . '/images/2.png" alt="Portfolio 2" width="400" height="300" /> ');

echo((isset($_GET['desc']) && $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar ' : '');

echo((isset($_GET['year']) && $_GET['year'] != '') ? $_GET['year'] . ' ' : '');

echo(' <a href="http://www.sergeevstudio.com">Photos by Lyubomir Sergeev</a>');

break;

case '/demo/3':

echo('<img src="' . $base . '/images/3.png" alt="Portfolio 3" width="400" height="300" /> ');

echo((isset($_GET['desc']) && $_GET['desc'] == 'true') ? 'Atlantic Hit Mix Calendar ' : '');

echo((isset($_GET['year']) && $_GET['year'] != '') ? $_GET['year'] . ' ' : '');

echo(' <a href="http://www.sergeevstudio.com">Photos by Lyubomir Sergeev</a>');

break;

case '/editeur-AS3-FDT':

echo('Nulla nec nunc id urna mollis molestie. Suspendisse potenti. Aliquam vitae dui. In semper ante eu massa. Praesent quis nunc. Vestibulum tristique tortor.');

break;

default:

echo('Page not found.');

break;

}

[/codesyntax]

Création du fichier index.php

Dans mon exemple, j’ai appelé ce fichier swfaddress_exemple.php.

Il vous suffit de copier-coller l’ensemble du code php ci-dessous dans votre fichier.

[codesyntax lang= »php » title= »index.php » bookmarkname= »index.php »]

&lt;?php

    // SWFAddress code fully compatible with Apache HTTPD

    $swfaddress_value = '/';
    $swfaddress_path = '/';
    $swfaddress_parameters = array();
    $swfaddress_content = '';

    function is_msie() {
        return strstr(strtoupper($_SERVER['HTTP_USER_AGENT']), 'MSIE');
    }

    function swfaddress() {

        global $swfaddress_value, $swfaddress_path, $swfaddress_parameters, $swfaddress_content;

        $base = swfaddress_base();

        session_start();

        if ('application/x-swfaddress' == (isset($_SERVER['CONTENT_TYPE']) ? $_SERVER['CONTENT_TYPE'] :
            (isset($_SERVER['HTTP_CONTENT_TYPE']) ? $_SERVER['HTTP_CONTENT_TYPE'] : ''))) {
            $swfaddress_value = preg_replace('/&amp;hash=(.*)$/', '#$1', $_SERVER['QUERY_STRING']);
            $_SESSION['swfaddress'] = $swfaddress_value;
            echo('location.replace("' . $base . '/#' . $swfaddress_value . '")');
            exit();
        }

        if (isset($_SESSION['swfaddress'])) {
            $swfaddress_value = $_SESSION['swfaddress'];
            unset($_SESSION['swfaddress']);
        } else {
            $page = substr($_SERVER['PHP_SELF'], strrpos($_SERVER['PHP_SELF'], '/') + 1);
            $swfaddress_value = str_replace($base, '', (strpos($page, '.php') &amp;&amp; $page != 'index.php') ? $_SERVER['REQUEST_URI'] : str_replace($page, '', $_SERVER['REQUEST_URI']));
        }

        $query_string = (strpos($swfaddress_value, '?')) ? substr($swfaddress_value, strpos($swfaddress_value, '?') + 1, strlen($swfaddress_value)) : '';

        if ($query_string != '') {
            $swfaddress_path = substr($swfaddress_value, 0, strpos($swfaddress_value, '?'));
            $params = explode('&amp;', str_replace($swfaddress_path . '?', '', $swfaddress_value));
            for ($i = 0; $i &lt; count($params); $i++) {
                $pair = explode('=', $params[$i]);
                $swfaddress_parameters[$pair[0]] = $pair[1];
            }
        } else {
            $swfaddress_path = $swfaddress_value;
        }

        $url = strtolower(array_shift(explode('/', $_SERVER['SERVER_PROTOCOL']))) . '://';
        $url .= $_SERVER['SERVER_NAME'];
        $url .= swfaddress_base() . '/datasource.php?swfaddress=' . $swfaddress_path;
        $url .= (strpos($swfaddress_value, '?')) ? '&amp;' . substr($swfaddress_value, strpos($swfaddress_value, '?') + 1, strlen($swfaddress_value)) : '';

        $fh = fopen($url, 'r');
        while (!feof($fh)) {
            $swfaddress_content .= fgets($fh, 4096);
        }
        fclose($fh);

        if (strstr($swfaddress_content, 'Status(')) {
            $begin = strpos($swfaddress_content, 'Status(', 0);
            $end = strpos($swfaddress_content, ')', $begin);
            $status = substr($swfaddress_content, $begin + 7, $end - $begin - 7);
            if (php_sapi_name() == 'cgi') {
                header('Status: ' . $status);
            } else {
                header('HTTP/1.1 ' . $status);
            }
        }

        if (is_msie()) {

            $if_modified_since = isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ?
                preg_replace('/;.*$/', '', $_SERVER['HTTP_IF_MODIFIED_SINCE']) : '';

            $file_last_modified = filemtime($_SERVER['SCRIPT_FILENAME']);
            $gmdate_modified = gmdate('D, d M Y H:i:s', $file_last_modified) . ' GMT';

            if ($if_modified_since == $gmdate_modified) {
                if (php_sapi_name() == 'cgi') {
                    header('Status: 304 Not Modified');
                } else {
                    header('HTTP/1.1 304 Not Modified');
                }
                exit();
            }

            header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
            header('Last-Modified: ' . $gmdate_modified);
            header('Cache-control: max-age=' . 86400);
        }
     }

    function swfaddress_base() {
        return substr($_SERVER['PHP_SELF'], 0, strrpos($_SERVER['PHP_SELF'], '/'));
    }

    function swfaddress_title($title) {
        if (!is_msie()) {
            $names = swfaddress_path_names();
            for ($i = 0; $i &lt; count($names); $i++) {
                $title .= ' / ' . strtoupper(substr($names[$i], 0, 1)) . substr($names[$i], 1);
            }
        }
        echo($title);
    }

    function swfaddress_resource($resource) {
        echo(swfaddress_base() . $resource);
    }

    function swfaddress_link($link) {
        echo(swfaddress_base() . $link);
    }

    function swfaddress_content() {
        global $swfaddress_content;
        echo($swfaddress_content);
    }

    function swfaddress_path() {
        global $swfaddress_path;
        return $swfaddress_path;
    }

    function swfaddress_path_names() {
        global $swfaddress_path;
        $names = explode('/', $swfaddress_path);
        if (substr($swfaddress_path, 0, 1) == '/')
            array_splice($names, 0, 1);
        if (substr($swfaddress_path, count($swfaddress_path) - 1, 1) == '/')
            array_splice($names, count($names) - 1, 1);
        return $names;
    }

    function swfaddress_optimizer($resource) {
        global $swfaddress_value;
        $base = swfaddress_base();
        echo($base . $resource . (strstr($resource, '?') ? '&amp;amp;' : '?') . 'swfaddress=' . urlencode($swfaddress_value) . '&amp;amp;base=' . urlencode($base));
    }

    swfaddress();

?&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<?php

// SWFAddress code fully compatible with Apache HTTPD

$swfaddress_value = '/';

$swfaddress_path = '/';

$swfaddress_parameters = array();

$swfaddress_content = '';

function is_msie() {

return strstr(strtoupper($_SERVER['HTTP_USER_AGENT']), 'MSIE');

}

function swfaddress() {

global $swfaddress_value, $swfaddress_path, $swfaddress_parameters, $swfaddress_content;

$base = swfaddress_base();

session_start();

if ('application/x-swfaddress' == (isset($_SERVER['CONTENT_TYPE']) ? $_SERVER['CONTENT_TYPE'] :

(isset($_SERVER['HTTP_CONTENT_TYPE']) ? $_SERVER['HTTP_CONTENT_TYPE'] : ''))) {

$swfaddress_value = preg_replace('/&hash=(.*)$/', '#$1', $_SERVER['QUERY_STRING']);

$_SESSION['swfaddress'] = $swfaddress_value;

echo('location.replace("' . $base . '/#' . $swfaddress_value . '")');

exit();

}

if (isset($_SESSION['swfaddress'])) {

$swfaddress_value = $_SESSION['swfaddress'];

unset($_SESSION['swfaddress']);

} else {

$page = substr($_SERVER['PHP_SELF'], strrpos($_SERVER['PHP_SELF'], '/') + 1);

$swfaddress_value = str_replace($base, '', (strpos($page, '.php') && $page != 'index.php') ? $_SERVER['REQUEST_URI'] : str_replace($page, '', $_SERVER['REQUEST_URI']));

}

$query_string = (strpos($swfaddress_value, '?')) ? substr($swfaddress_value, strpos($swfaddress_value, '?') + 1, strlen($swfaddress_value)) : '';

if ($query_string != '') {

$swfaddress_path = substr($swfaddress_value, 0, strpos($swfaddress_value, '?'));

$params = explode('&', str_replace($swfaddress_path . '?', '', $swfaddress_value));

for ($i = 0; $i < count($params); $i++) {

$pair = explode('=', $params[$i]);

$swfaddress_parameters[$pair[0]] = $pair[1];

}

} else {

$swfaddress_path = $swfaddress_value;

}

$url = strtolower(array_shift(explode('/', $_SERVER['SERVER_PROTOCOL']))) . '://';

$url .= $_SERVER['SERVER_NAME'];

$url .= swfaddress_base() . '/datasource.php?swfaddress=' . $swfaddress_path;

$url .= (strpos($swfaddress_value, '?')) ? '&' . substr($swfaddress_value, strpos($swfaddress_value, '?') + 1, strlen($swfaddress_value)) : '';

$fh = fopen($url, 'r');

while (!feof($fh)) {

$swfaddress_content .= fgets($fh, 4096);

}

fclose($fh);

if (strstr($swfaddress_content, 'Status(')) {

$begin = strpos($swfaddress_content, 'Status(', 0);

$end = strpos($swfaddress_content, ')', $begin);

$status = substr($swfaddress_content, $begin + 7, $end - $begin - 7);

if (php_sapi_name() == 'cgi') {

header('Status: ' . $status);

} else {

header('HTTP/1.1 ' . $status);

}

if (is_msie()) {

$if_modified_since = isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) ?

preg_replace('/;.*$/', '', $_SERVER['HTTP_IF_MODIFIED_SINCE']) : '';

$file_last_modified = filemtime($_SERVER['SCRIPT_FILENAME']);

$gmdate_modified = gmdate('D, d M Y H:i:s', $file_last_modified) . ' GMT';

if ($if_modified_since == $gmdate_modified) {

if (php_sapi_name() == 'cgi') {

header('Status: 304 Not Modified');

} else {

header('HTTP/1.1 304 Not Modified');

}

exit();

}

header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');

header('Last-Modified: ' . $gmdate_modified);

header('Cache-control: max-age=' . 86400);

}

function swfaddress_base() {

return substr($_SERVER['PHP_SELF'], 0, strrpos($_SERVER['PHP_SELF'], '/'));

}

function swfaddress_title($title) {

if (!is_msie()) {

$names = swfaddress_path_names();

for ($i = 0; $i < count($names); $i++) {

$title .= ' / ' . strtoupper(substr($names[$i], 0, 1)) . substr($names[$i], 1);

}

echo($title);

}

function swfaddress_resource($resource) {

echo(swfaddress_base() . $resource);

}

function swfaddress_link($link) {

echo(swfaddress_base() . $link);

}

function swfaddress_content() {

global $swfaddress_content;

echo($swfaddress_content);

}

function swfaddress_path() {

global $swfaddress_path;

return $swfaddress_path;

}

function swfaddress_path_names() {

global $swfaddress_path;

$names = explode('/', $swfaddress_path);

if (substr($swfaddress_path, 0, 1) == '/')

array_splice($names, 0, 1);

if (substr($swfaddress_path, count($swfaddress_path) - 1, 1) == '/')

array_splice($names, count($names) - 1, 1);

return $names;

}

function swfaddress_optimizer($resource) {

global $swfaddress_value;

$base = swfaddress_base();

echo($base . $resource . (strstr($resource, '?') ? '&amp;' : '?') . 'swfaddress=' . urlencode($swfaddress_value) . '&amp;base=' . urlencode($base));

}

swfaddress();

[/codesyntax]

A la suite de code, vous appelez les 3 fichiers javascript, avec une fonction php, pour configurer le fonctionnement de votre application flash.

Pensez à modifier les chemins d’accès javascript en fonction de leur emplacement sur votre serveur web (/js/ dans mon exemple).

[codesyntax lang= »php » title= »swfaddress » bookmarkname= »swfaddress »]

&lt;script type="text/javascript" src="&lt;?php swfaddress_optimizer('/js/swfaddress-optimizer.js?flash=8'); ?&gt;"&gt;&lt;/script&gt;

&lt;title&gt;&lt;?php swfaddress_title('AS3 facile'); ?&gt;&lt;/title&gt;

&lt;script type="text/javascript" src="&lt;?php swfaddress_resource('/js/swfobject.js'); ?&gt;"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="&lt;?php swfaddress_resource('/js/swfaddress.js'); ?&gt;"&gt;&lt;/script&gt;

[/codesyntax]

Ensuite, il vous reste à afficher votre application flash avec SWFObject.

[codesyntax lang= »php » title= »SWFObject » bookmarkname= »SWFObject »]

	&lt;script type="text/javascript"&gt;
		var flashvars = {
		};
		var params = {
			menu: "false",
			scale: "noScale",
			allowFullscreen: "true",
			allowScriptAccess: "always",
			bgcolor: "#F8F8FF"
		};
		var attributes = {
			id:"AS3facileSWFAddress"
		};
		swfobject.embedSWF("swfaddress_exemple.swf", "altContent", "550", "400", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
	&lt;/script&gt;

var flashvars = {

};

var params = {

menu: "false",

scale: "noScale",

allowFullscreen: "true",

allowScriptAccess: "always",

bgcolor: "#F8F8FF"

};

var attributes = {

id:"AS3facileSWFAddress"

};

swfobject.embedSWF("swfaddress_exemple.swf", "altContent", "550", "400", "10.0.0", "expressInstall.swf", flashvars, params, attributes);

</script>

[/codesyntax]

Création du code source AS3

Une fois l’initialisation de votre application effectuée, vous ajoutez un écouteur sur les évènements diffusés par SWFAddress.

Cela permet à votre application Flash de se mettre à jour automatiquement en fonction des évènements reçus par SWFAddress (en javascript ou flash).

Dans notre exemple, la fonction handleSWFAddress sera appelée à chaque évènement reçu.

[codesyntax lang= »actionscript3″ title= »SWFAddress.as » bookmarkname= »SWFAddress.as »]

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

1	SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

[/codesyntax]

C’est la fonction handleSWFAddrress qui, en fonction du paramètre reçu dans e.value, affiche l’interface choisi par votre internaute.

[codesyntax lang= »actionscript3″ title= »SWFAddress.as » bookmarkname= »SWFAddress.as »]

		/**
		 * Fonction servant à écouter le changement de page avec SWFAddress.
		 * On appelle la fonction permettant de créer l'interface appelée par l'utilisateur
		 *
		 * @param	e	Evenement de type SWFAddressEvent
		 */
		function handleSWFAddress(e:SWFAddressEvent) : void
		{
			Logger.debug("Appel de handleSWFAddress : "+e.value);

			clearAllScreen();

			try
			{
				if (e.value == '/' || e.value == A_PROPOS)
				{
					buildAProposScreen();
				}
				else if (e.value == DEMO)
				{
					buildDemoScreen();
				}
				else if (e.value == DEMO_1)
				{
					buildDemo1Screen();
				}
				else if (e.value == DEMO_2)
				{
					buildDemo2Screen();
				}
				else if (e.value == DEMO_3)
				{
					buildDemo3Screen();
				}
				else if (e.value == EDITEUR)
				{
					buildEditeurScreen();
				}
			}
			catch(err:Object)
			{
				//gotoAndStop('$/error/');
			}

			var title:String = 'ActionScript-Facile.com';
			for (var i:Number = 0; i &lt; e.pathNames.length; i++)
			{
				title += ' / ' + e.pathNames[i].substr(0,1).toUpperCase() + e.pathNames[i].substr(1);
			}
			SWFAddress.setTitle(title);
			SWFAddress.setStatus(title);
			Logger.debug("title de SWFAddress : "+title);
		}

/**

* Fonction servant à écouter le changement de page avec SWFAddress.

* On appelle la fonction permettant de créer l'interface appelée par l'utilisateur

* @param e Evenement de type SWFAddressEvent

function handleSWFAddress(e:SWFAddressEvent) : void

{

Logger.debug("Appel de handleSWFAddress : "+e.value);

clearAllScreen();

try

{

if (e.value == '/' || e.value == A_PROPOS)

{

buildAProposScreen();

}

else if (e.value == DEMO)

{

buildDemoScreen();

}

else if (e.value == DEMO_1)

{

buildDemo1Screen();

}

else if (e.value == DEMO_2)

{

buildDemo2Screen();

}

else if (e.value == DEMO_3)

{

buildDemo3Screen();

}

else if (e.value == EDITEUR)

{

buildEditeurScreen();

}

catch(err:Object)

{

//gotoAndStop('$/error/');

}

var title:String = 'ActionScript-Facile.com';

for (var i:Number = 0; i < e.pathNames.length; i++)

{

title += ' / ' + e.pathNames[i].substr(0,1).toUpperCase() + e.pathNames[i].substr(1);

}

SWFAddress.setTitle(title);

SWFAddress.setStatus(title);

Logger.debug("title de SWFAddress : "+title);

}

[/codesyntax]

Récupération des paramètres de l’url

Avec SWFAddress, il est possible de récupérer les variables transmises dans l’url du navigateur. Cela est très pratique pour transmettre des valeurs à votre application Flash.

J’ai ajouté un exemple de code AS3 dans la fonction handleSWFAddress qui écoute tous les évènements.

[codesyntax lang= »actionscript3″ title= »paramètres de l’url » bookmarkname= »paramètres de l’url »]

// pour récupérer les paramètres transmis dans l'url du navigateur
			var parameters:String = '';
			var name:String;
			var valueParam:String;
			for (var p in SWFAddress.getParameterNames()) // parcours le tableau de tous les paramètres
			{
				name = SWFAddress.getParameterNames()[p];// le nom du paramètre
				valueParam = SWFAddress.getParameter(SWFAddress.getParameterNames()[p]) as String; // la valeur du paramètre
				parameters += '&amp;' + name + '=' + valueParam;
				Logger.debug("parameters "+name+" de SWFAddress : "+valueParam );
			}
			Logger.debug("parameters de SWFAddress : "+parameters);

// pour récupérer les paramètres transmis dans l'url du navigateur

var parameters:String = '';

var name:String;

var valueParam:String;

for (var p in SWFAddress.getParameterNames()) // parcours le tableau de tous les paramètres

{

name = SWFAddress.getParameterNames()[p];// le nom du paramètre

valueParam = SWFAddress.getParameter(SWFAddress.getParameterNames()[p]) as String; // la valeur du paramètre

parameters += '&' + name + '=' + valueParam;

Logger.debug("parameters "+name+" de SWFAddress : "+valueParam );

}

Logger.debug("parameters de SWFAddress : "+parameters);

[/codesyntax]

Téléchargement code source AS3 de SWFAddress

Vous trouverez ci-dessous un exemple complet avec SWFAddress et le Framework de Composants AS3 Facile.

Télécharger “SWFAddress Exemple”

swfaddress_framework_actionscript-facile.zip – Téléchargé 485 fois – 93,74 Ko

Testez l’Application Flash de notre tutoriel.

Naviguez et regardez la barre d’adresse, de statut et le titre de la page.

Essayer les boutons précédent / suivant de votre navigateur.

Cliquez sur une des url ci-dessous pour afficher directement une interface précise :

Interface Démonstration 3

Interface Éditeur AS3

Code source AS3 commenté de notre exemple avec SWFAddress

SWFAddressExample.as

[codesyntax lang= »actionscript3″ title= »SWFAddressExample.as » bookmarkname= »SWFAddressExample.as »]

package
{
	import com.asual.swfaddress.SWFAddress;
	import com.asual.swfaddress.SWFAddressEvent;

	import com.as3facileexemple.skin.classic.DefaultButtonSkin2;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin;

	import org.osflash.thunderbolt.Logger;

	import flash.events.MouseEvent;
	import flash.display.Sprite;

	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.ui.text.UITextField;

	/**
	 * Exemple d'utilisation des fonctionnalités de SWFAddress avec des Composants du Framework AS3 ActionScript-Facile.
	 *
	 * @author Matthieu
	 */
	public class SWFAddressExample extends Sprite
	{
		private var oTextApropos:UITextField;
		private var oTextDemo : UITextField;

		/** listes des url vers les différentes pages **/
		static private const A_PROPOS:String = "/a-propos/";
		static private const DEMO:String = "/demo/";
		static private const DEMO_1:String = "/demo/1/?desc=yes&amp;label=Button1";
		static private const DEMO_2:String = "/demo/2/?desc=no&amp;label=Button2";
		static private const DEMO_3:String = "/demo/3/?desc=order&amp;label=Button3";
		static private const EDITEUR : String = "/editeur-AS3-FDT/";

		private var buttonDemo1 : Button;
		private var buttonDemo2 : Button;
		private var buttonDemo3 : Button;

		public function SWFAddressExample()
		{
			// construction du menu
			var buttonAbout:Button = new Button();

			buttonAbout.label = 'A Propos';
			buttonAbout.applySkin( new DefaultButtonSkin2() );

			// on écoute les changements qui interviennent sur le bouton
			buttonAbout.addEventListener(MouseEvent.CLICK, showApropos );
			buttonAbout.resize( 120, 30 );
			buttonAbout.x = 10;
			buttonAbout.y = 10;

			addChild( buttonAbout );
			// acccès au composant de type UITextField (labelField)
			buttonAbout.labelField.alignCenter(); // centre le texte
			buttonAbout.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte
			buttonAbout.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonAbout.labelField.changeFormat("font", "Arial");// changement de la police du texte

			var buttonDemo:Button = new Button();

			buttonDemo.label = 'Exemples';
			buttonDemo.applySkin( new DefaultButtonSkin2() );

			// on écoute les changements qui interviennent sur le bouton
			buttonDemo.addEventListener(MouseEvent.CLICK, showDemo );
			buttonDemo.resize( 120, 30 );
			buttonDemo.x = buttonAbout.x + buttonAbout.width + 10;
			buttonDemo.y = 10;

			addChild( buttonDemo );
			// acccès au composant de type UITextField (labelField)
			buttonDemo.labelField.alignCenter(); // centre le texte
			buttonDemo.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte
			buttonDemo.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonDemo.labelField.changeFormat("font", "Arial");// changement de la police du texte

			var buttonEditeur:Button = new Button();

			buttonEditeur.label = 'Éditeur AS3';
			buttonEditeur.applySkin( new DefaultButtonSkin2() );

			// on écoute les changements qui interviennent sur le bouton
			buttonEditeur.addEventListener(MouseEvent.CLICK, showEditeur );
			buttonEditeur.resize( 120, 30 );
			buttonEditeur.x = buttonDemo.x + buttonDemo.width + 10;
			buttonEditeur.y = 10;

			addChild( buttonEditeur );
			// acccès au composant de type UITextField (labelField)
			buttonEditeur.labelField.alignCenter(); // centre le texte
			buttonEditeur.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte
			buttonEditeur.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonEditeur.labelField.changeFormat("font", "Arial");// changement de la police du texte
			/*
			 *  ATTENTION : dans une application flash robuste et optimisée, nous n'utiliserons pas cette méthode.
			 *  Plutôt le Design Pattern Modèle Vue Controller avec PureMVC par exemple.
			 *
			 *  Les pages ou interfaces seraient (en fonction de la taille de l'application flash) :
			 *  	soient chargées en mémoire mais non affichées dans la display list.
			 *  	soient créées à chaque appel.
			 *
			 *  Nous verrons cela dans un prochain article.
			 */
			// lance la construction de toutes les pages
			buildAllScreen();

			// initialisation de SWFAddress
			SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);
		}

		/**
		 * Construit toutes les interfaces, sans les afficher dans la display list
		 */
		private function buildAllScreen() : void
		{
			// Page A Propos
			oTextApropos = new UITextField();

			oTextApropos.x = 5;
			oTextApropos.y = 70;
			oTextApropos.width = oTextApropos.maxWidth = 500;
			oTextApropos.height  = oTextApropos.maxHeight = 350;

			oTextApropos.selectable = false;
			oTextApropos.multiline = true; // pour la balises html &lt;br /&gt;
			oTextApropos.changeFormat("font", "Arial");// changement de la taille de la police du texte
			oTextApropos.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
			oTextApropos.wordWrap = true;// retour à la ligne automatique
			addChild(oTextApropos);

			// Page Demo
			oTextDemo = new UITextField();

			oTextDemo.x = 5;
			oTextDemo.y = 70;
			oTextDemo.width = oTextApropos.maxWidth = 500;
			oTextDemo.height  = oTextApropos.maxHeight = 350;

			oTextDemo.selectable = false;
			oTextDemo.multiline = true; // pour la balises html &lt;br /&gt;
			oTextDemo.changeFormat("font", "Arial");// changement de la taille de la police du texte
			oTextDemo.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
			oTextDemo.wordWrap = true;// retour à la ligne automatique
			addChild( oTextDemo );

			// Création des bouttons Demo 1, Demo 2 et Demo 3
			// boutton demo1
			buttonDemo1 = new Button();
			buttonDemo1.label = '1';
			buttonDemo1.applySkin( new DefaultButtonSkin() );
			// on écoute les changements qui interviennent sur le bouton
			buttonDemo1.addEventListener(MouseEvent.CLICK, showDemo1 );
			buttonDemo1.resize( 25, 25 );
			buttonDemo1.x = 155;
			buttonDemo1.y = 40;
			addChild( buttonDemo1 );
			// acccès au composant de type UITextField (labelField)
			buttonDemo1.labelField.alignCenter(); // centre le texte
			buttonDemo1.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte
			buttonDemo1.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonDemo1.labelField.changeFormat("font", "Arial");// changement de la police du texte
			buttonDemo1.visible = false;

			// boutton demo2
			buttonDemo2 = new Button();
			buttonDemo2.label = '2';
			buttonDemo2.applySkin( new DefaultButtonSkin() );
			// on écoute les changements qui interviennent sur le bouton
			buttonDemo2.addEventListener(MouseEvent.CLICK, showDemo2 );
			buttonDemo2.resize( 25, 25 );
			buttonDemo2.x = buttonDemo1.x + buttonDemo1.width + 5;
			buttonDemo2.y = 40;
			addChild( buttonDemo2 );
			// acccès au composant de type UITextField (labelField)
			buttonDemo2.labelField.alignCenter(); // centre le texte
			buttonDemo2.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte
			buttonDemo2.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonDemo2.labelField.changeFormat("font", "Arial");// changement de la police du texte
			buttonDemo2.visible = false;

			// boutton demo3
			buttonDemo3 = new Button();
			buttonDemo3.label = '3';
			buttonDemo3.applySkin( new DefaultButtonSkin() );
			// on écoute les changements qui interviennent sur le bouton
			buttonDemo3.addEventListener(MouseEvent.CLICK, showDemo3 );
			buttonDemo3.resize( 25, 25 );
			buttonDemo3.x = buttonDemo2.x + buttonDemo2.width + 5;
			buttonDemo3.y = 40;
			addChild( buttonDemo3 );
			// acccès au composant de type UITextField (labelField)
			buttonDemo3.labelField.alignCenter(); // centre le texte
			buttonDemo3.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte
			buttonDemo3.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			buttonDemo3.labelField.changeFormat("font", "Arial");// changement de la police du texte
			buttonDemo3.visible = false;
		}

		/**
		 * Fonction servant à écouter le changement de page avec SWFAddress.
		 * On appelle la fonction permettant de créer l'interface appelée par l'utilisateur
		 *
		 * @param	e	Evenement de type SWFAddressEvent
		 */
		private function handleSWFAddress(e:SWFAddressEvent) : void
		{
			Logger.debug("Appel de handleSWFAddress : "+e.value);

			clearAllScreen();

			// en fonction de la valeur reçu dans l'évènement, nous affichons l'interface demandée par l'utilisateur
			try
			{
				if (e.value == '/' || e.value == A_PROPOS)
				{
					buildAProposScreen();
				}
				else if (e.value == DEMO)
				{
					buildDemoScreen();
				}
				else if (e.value == DEMO_1)
				{
					buildDemo1Screen();
				}
				else if (e.value == DEMO_2)
				{
					buildDemo2Screen();
				}
				else if (e.value == DEMO_3)
				{
					buildDemo3Screen();
				}
				else if (e.value == EDITEUR)
				{
					buildEditeurScreen();
				}
			}
			catch(err:Object)
			{
				// il est possible d'afficher un message d'erreur à l'internaute
				//gotoAndStop('$/error/');
			}

			// configure le titre de la page dans votre navigateur
			var title:String = 'ActionScript-Facile.com';
			for (var i:Number = 0; i &lt; e.pathNames.length; i++)
			{
				title += ' / ' + e.pathNames[i].substr(0,1).toUpperCase() + e.pathNames[i].substr(1);
			}
			SWFAddress.setTitle(title);
			SWFAddress.setStatus(title);
			Logger.debug("title de SWFAddress : "+title);

			/*
			 * Permet de récupérer l'url de l'interface appelée
			 */
			var path:String = e.path;
			if (path.substr(path.length - 1) != '/')
			{
				path = path + '/';
			}
			Logger.debug("path de SWFAddress : "+path);

			// pour récupérer les paramètres transmis dans l'url du navigateur
			var parameters:String = '';
			var name:String;
			var valueParam:String;
			for (var p:String in SWFAddress.getParameterNames()) // parcours le tableau de tous les paramètres
			{
				name = SWFAddress.getParameterNames()[p];// le nom du paramètre
				valueParam = SWFAddress.getParameter(SWFAddress.getParameterNames()[p]) as String; // la valeur du paramètre
				parameters += '&amp;' + name + '=' + valueParam;
				Logger.debug("parameters "+name+" de SWFAddress : "+valueParam );
			}
			Logger.debug("parameters de SWFAddress : "+parameters);
			// SWFAddress.popup('http://www.sergeevstudio.com','lyubomirsergeev', '"toolbar=0,location=0,status=0,menubar=0,scrollbars=0,resizable=1,width=960,height=620,left=" + (screen.width - 960)/2 + ",top=" + (screen.height - 620)/2', 'popup.focus();');
		}

		private function buildEditeurScreen() : void
		{
			oTextApropos.htmlText = "&lt;font color='#ff0000' face='arial, time' size='22'&gt;&lt;b&gt;Comment utiliser le plus " +
			"abouti des Éditeurs ActionScript en moins de minutes ?&lt;/b&gt;&lt;/font&gt;&lt;br /&gt;&lt;br /&gt;" +
			"Avec un Éditeur ActionScript performant, il est possible de se simplifier énormément la" +
			" programmation en ActionScript Flash." +
			"&lt;br /&gt;&lt;br /&gt;" +
			"Le logiciel FDT permet de développer des applications ActionScript (AS3, AS2, MXML, Flex et haXe) avec beaucoup plus de rapidité." +
			"&lt;br /&gt;&lt;br /&gt;&lt;font color='#0000FF' face='arial, time' size='18'&gt;" +
			"&lt;a href='http://bonus.actionscript-facile.com/comment-developper-facilement-en-actionscript' target='_blank'&gt;" +
			"Téléchargez gratuitement votre exemplaire du &lt;b&gt;guide Éditeur ActionScript FDT PowerFlasher&lt;/b&gt;&lt;/a&gt;&lt;/font&gt;";
			oTextApropos.visible = true;
		}

		private function buildDemo3Screen() : void
		{
			buttonDemo1.visible = true;
			buttonDemo2.visible = true;
			buttonDemo3.visible = true;

			oTextDemo.htmlText = "&lt;img src='https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/list_exemple.swf' " +
			"hspace='3' height='200' width='450' id='idimag' align='left'/&gt;";
			oTextDemo.visible = true;
		}

		private function buildDemo2Screen() : void
		{
			buttonDemo1.visible = true;
			buttonDemo2.visible = true;
			buttonDemo3.visible = true;

			oTextDemo.htmlText = "&lt;img src='https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/button_exemple.swf' " +
			"hspace='3' height='250' width='250' id='idimag' align='left'/&gt;";
			oTextDemo.visible = true;
		}

		private function buildDemo1Screen() : void
		{
			buttonDemo1.visible = true;
			buttonDemo2.visible = true;
			buttonDemo3.visible = true;

			oTextDemo.htmlText = "&lt;img src='https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/tooltip_exemple.swf' " +
			"hspace='3' height='200' width='450' id='idimag' align='left'/&gt;";
			oTextDemo.visible = true;
		}

		private function clearAllScreen() : void
		{
			oTextDemo.visible = false;
			oTextApropos.visible = false;

			buttonDemo1.visible = false;
			buttonDemo2.visible = false;
			buttonDemo3.visible = false;
		}

		private function buildDemoScreen() : void
		{
			buttonDemo1.visible = true;
			buttonDemo2.visible = true;
			buttonDemo3.visible = true;

			oTextDemo.htmlText = "&lt;font color='#ff0000' face='arial, time' size='22'&gt;&lt;b&gt;Des exemples de swf" +
			" utilisant le Framework de Composants AS3 Facile" +
			" simplement et avec efficacité.&lt;/b&gt;&lt;/font&gt;&lt;br /&gt;&lt;br /&gt;" +
			"Choisissez le composant que vous souhaitez visualiser avec les boutons 1, 2 et 3 du menu.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;" +
			"&lt;font color='#0000FF' face='arial, time' size='10'&gt;Pour le composant du Bouton N°1, merci de patienter quelques secondes," +
			" le temps d'initilisation du composant.&lt;/font&gt;";
			oTextDemo.visible = true;
		}

		/**
		 * Construit l'interface A Propos
		 *
		 */
		private function buildAProposScreen() : void
		{
			oTextApropos.htmlText = "&lt;font color='#ff0000' face='arial, time' size='22'&gt;&lt;b&gt;Avec le Framework de Composants AS3 Facile, programmez en ActionScript" +
			" simplement et avec efficacité.&lt;/b&gt;&lt;/font&gt;&lt;br /&gt;&lt;br /&gt;" +
			"Le &lt;b&gt;Framework ActionScript-Facile&lt;/b&gt; est développé en pure AS3.&lt;br /&gt;&lt;br /&gt;" +
			"Vous pouvez créer et utiliser les composants suivants : &lt;br /&gt;" +
			"	&lt;b&gt;Un Button&lt;/b&gt; : comme son nom l’indique – un bouton.&lt;br /&gt;" +
			"	&lt;b&gt;Une ScrollBar Verticale &lt;/b&gt;: la classique barre de défilement.&lt;br /&gt;" +
			"	&lt;b&gt;Une List &lt;/b&gt;: la fameuse liste d’éléments.&lt;br /&gt;" +
			"	&lt;b&gt;Une ComboBox&lt;/b&gt; : une liste déroulante.&lt;br /&gt;" +
			"	&lt;b&gt;Un TextField &lt;/b&gt;: gestion facilité du Texte dans Flash.&lt;br /&gt;" +
			"	&lt;b&gt;Un ToolTip &lt;/b&gt;: une infos bulle ou bulle d’information.&lt;br /&gt;" +
			"	&lt;b&gt;Un changement de skin en « live » &lt;/b&gt;: tout l’intérêt de Flash avec un changement à la volée du graphisme!" +
			"&lt;br /&gt;&lt;br /&gt;" +
			"&lt;font color='#0000FF' face='arial, time' size='18'&gt;" +
			"&lt;a href='http://bonus.actionscript-facile.com/bibliotheque-flash-de-composants-as3-facile' target='_blank'&gt;" +
			"&lt;b&gt;Téléchargez gratuitement la dernière version du Framework AS3 Facile&lt;/b&gt;&lt;/a&gt;&lt;/font&gt;";
			oTextApropos.visible = true;
		}

		/**
		 * Fonction servant à écouter les click de l'utilisateur sur le boutton A Propos du menu.
		 * Définit la valeur de SWFAddress pour générer un évènement et construire l'interface à propriée.
		 *
		 * @param	e	Evenement de type MouseEvent.CLICK
		 */
		 private function showApropos(e:MouseEvent) : void
		{
			Logger.debug("Intéraction sur le menu : "+e.target.label);// récupère l'objet Button cliqué par l'internaute
			SWFAddress.setValue(A_PROPOS);// créé un évènement dans SWFAddress pour afficher l'interface demandée par l'internaute
		}

		private function showDemo(e:MouseEvent) : void
		{
			// Récupère l'objet Button et ses propriétés (label, le texte du bouton)
			Logger.debug("Intéraction sur le menu : " + e.target.label);
			SWFAddress.setValue(DEMO);
		}

		private function showDemo1(event : MouseEvent) : void
		{
			SWFAddress.setValue(DEMO_1);
		}

		private function showDemo2(event : MouseEvent) : void
		{
			SWFAddress.setValue(DEMO_2);
		}

		private function showDemo3(event : MouseEvent) : void
		{
			SWFAddress.setValue(DEMO_3);
		}

		private function showEditeur(event : MouseEvent) : void
		{
			SWFAddress.setValue(EDITEUR);
		}
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

package

{

import com.asual.swfaddress.SWFAddress;

import com.asual.swfaddress.SWFAddressEvent;

import com.as3facileexemple.skin.classic.DefaultButtonSkin2;

import com.as3facileexemple.skin.classic.DefaultButtonSkin;

import org.osflash.thunderbolt.Logger;

import flash.events.MouseEvent;

import flash.display.Sprite;

import com.actionscriptfacile.ui.button.Button;

import com.actionscriptfacile.ui.text.UITextField;

/**

* Exemple d'utilisation des fonctionnalités de SWFAddress avec des Composants du Framework AS3 ActionScript-Facile.

* @author Matthieu

public class SWFAddressExample extends Sprite

{

private var oTextApropos:UITextField;

private var oTextDemo : UITextField;

/** listes des url vers les différentes pages **/

static private const A_PROPOS:String = "/a-propos/";

static private const DEMO:String = "/demo/";

static private const DEMO_1:String = "/demo/1/?desc=yes&label=Button1";

static private const DEMO_2:String = "/demo/2/?desc=no&label=Button2";

static private const DEMO_3:String = "/demo/3/?desc=order&label=Button3";

static private const EDITEUR : String = "/editeur-AS3-FDT/";

private var buttonDemo1 : Button;

private var buttonDemo2 : Button;

private var buttonDemo3 : Button;

public function SWFAddressExample()

{

// construction du menu

var buttonAbout:Button = new Button();

buttonAbout.label = 'A Propos';

buttonAbout.applySkin( new DefaultButtonSkin2() );

// on écoute les changements qui interviennent sur le bouton

buttonAbout.addEventListener(MouseEvent.CLICK, showApropos );

buttonAbout.resize( 120, 30 );

buttonAbout.x = 10;

buttonAbout.y = 10;

addChild( buttonAbout );

// acccès au composant de type UITextField (labelField)

buttonAbout.labelField.alignCenter(); // centre le texte

buttonAbout.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte

buttonAbout.labelField.changeFormat("size", 14);// changement de la taille de la police du texte

buttonAbout.labelField.changeFormat("font", "Arial");// changement de la police du texte

var buttonDemo:Button = new Button();

buttonDemo.label = 'Exemples';

buttonDemo.applySkin( new DefaultButtonSkin2() );

// on écoute les changements qui interviennent sur le bouton

buttonDemo.addEventListener(MouseEvent.CLICK, showDemo );

buttonDemo.resize( 120, 30 );

buttonDemo.x = buttonAbout.x + buttonAbout.width + 10;

buttonDemo.y = 10;

addChild( buttonDemo );

// acccès au composant de type UITextField (labelField)

buttonDemo.labelField.alignCenter(); // centre le texte

buttonDemo.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte

buttonDemo.labelField.changeFormat("size", 14);// changement de la taille de la police du texte

buttonDemo.labelField.changeFormat("font", "Arial");// changement de la police du texte

var buttonEditeur:Button = new Button();

buttonEditeur.label = 'Éditeur AS3';

buttonEditeur.applySkin( new DefaultButtonSkin2() );

// on écoute les changements qui interviennent sur le bouton

buttonEditeur.addEventListener(MouseEvent.CLICK, showEditeur );

buttonEditeur.resize( 120, 30 );

buttonEditeur.x = buttonDemo.x + buttonDemo.width + 10;

buttonEditeur.y = 10;

addChild( buttonEditeur );

// acccès au composant de type UITextField (labelField)

buttonEditeur.labelField.alignCenter(); // centre le texte

buttonEditeur.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte

buttonEditeur.labelField.changeFormat("size", 14);// changement de la taille de la police du texte

buttonEditeur.labelField.changeFormat("font", "Arial");// changement de la police du texte

* ATTENTION : dans une application flash robuste et optimisée, nous n'utiliserons pas cette méthode.

* Plutôt le Design Pattern Modèle Vue Controller avec PureMVC par exemple.

* Les pages ou interfaces seraient (en fonction de la taille de l'application flash) :

* soient chargées en mémoire mais non affichées dans la display list.

* soient créées à chaque appel.

* Nous verrons cela dans un prochain article.

// lance la construction de toutes les pages

buildAllScreen();

// initialisation de SWFAddress

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress);

}

/**

* Construit toutes les interfaces, sans les afficher dans la display list

private function buildAllScreen() : void

{

// Page A Propos

oTextApropos = new UITextField();

oTextApropos.x = 5;

oTextApropos.y = 70;

oTextApropos.width = oTextApropos.maxWidth = 500;

oTextApropos.height = oTextApropos.maxHeight = 350;

oTextApropos.selectable = false;

oTextApropos.multiline = true; // pour la balises html

oTextApropos.changeFormat("font", "Arial");// changement de la taille de la police du texte

oTextApropos.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur

oTextApropos.wordWrap = true;// retour à la ligne automatique

addChild(oTextApropos);

// Page Demo

oTextDemo = new UITextField();

oTextDemo.x = 5;

oTextDemo.y = 70;

oTextDemo.width = oTextApropos.maxWidth = 500;

oTextDemo.height = oTextApropos.maxHeight = 350;

oTextDemo.selectable = false;

oTextDemo.multiline = true; // pour la balises html

oTextDemo.changeFormat("font", "Arial");// changement de la taille de la police du texte

oTextDemo.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur

oTextDemo.wordWrap = true;// retour à la ligne automatique

addChild( oTextDemo );

// Création des bouttons Demo 1, Demo 2 et Demo 3

// boutton demo1

buttonDemo1 = new Button();

buttonDemo1.label = '1';

buttonDemo1.applySkin( new DefaultButtonSkin() );

// on écoute les changements qui interviennent sur le bouton

buttonDemo1.addEventListener(MouseEvent.CLICK, showDemo1 );

buttonDemo1.resize( 25, 25 );

buttonDemo1.x = 155;

buttonDemo1.y = 40;

addChild( buttonDemo1 );

// acccès au composant de type UITextField (labelField)

buttonDemo1.labelField.alignCenter(); // centre le texte

buttonDemo1.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte

buttonDemo1.labelField.changeFormat("size", 14);// changement de la taille de la police du texte

buttonDemo1.labelField.changeFormat("font", "Arial");// changement de la police du texte

buttonDemo1.visible = false;

// boutton demo2

buttonDemo2 = new Button();

buttonDemo2.label = '2';

buttonDemo2.applySkin( new DefaultButtonSkin() );

// on écoute les changements qui interviennent sur le bouton

buttonDemo2.addEventListener(MouseEvent.CLICK, showDemo2 );

buttonDemo2.resize( 25, 25 );

buttonDemo2.x = buttonDemo1.x + buttonDemo1.width + 5;

buttonDemo2.y = 40;

addChild( buttonDemo2 );

// acccès au composant de type UITextField (labelField)

buttonDemo2.labelField.alignCenter(); // centre le texte

buttonDemo2.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte

buttonDemo2.labelField.changeFormat("size", 14);// changement de la taille de la police du texte

buttonDemo2.labelField.changeFormat("font", "Arial");// changement de la police du texte

buttonDemo2.visible = false;

// boutton demo3

buttonDemo3 = new Button();

buttonDemo3.label = '3';

buttonDemo3.applySkin( new DefaultButtonSkin() );

// on écoute les changements qui interviennent sur le bouton

buttonDemo3.addEventListener(MouseEvent.CLICK, showDemo3 );

buttonDemo3.resize( 25, 25 );

buttonDemo3.x = buttonDemo2.x + buttonDemo2.width + 5;

buttonDemo3.y = 40;

addChild( buttonDemo3 );

// acccès au composant de type UITextField (labelField)

buttonDemo3.labelField.alignCenter(); // centre le texte

buttonDemo3.labelField.changeFormat("color", 0x000000);// changement de la couleur du texte

buttonDemo3.labelField.changeFormat("size", 14);// changement de la taille de la police du texte

buttonDemo3.labelField.changeFormat("font", "Arial");// changement de la police du texte

buttonDemo3.visible = false;

}

/**

* Fonction servant à écouter le changement de page avec SWFAddress.

* On appelle la fonction permettant de créer l'interface appelée par l'utilisateur

* @param e Evenement de type SWFAddressEvent

private function handleSWFAddress(e:SWFAddressEvent) : void

{

Logger.debug("Appel de handleSWFAddress : "+e.value);

clearAllScreen();

// en fonction de la valeur reçu dans l'évènement, nous affichons l'interface demandée par l'utilisateur

try

{

if (e.value == '/' || e.value == A_PROPOS)

{

buildAProposScreen();

}

else if (e.value == DEMO)

{

buildDemoScreen();

}

else if (e.value == DEMO_1)

{

buildDemo1Screen();

}

else if (e.value == DEMO_2)

{

buildDemo2Screen();

}

else if (e.value == DEMO_3)

{

buildDemo3Screen();

}

else if (e.value == EDITEUR)

{

buildEditeurScreen();

}

catch(err:Object)

{

// il est possible d'afficher un message d'erreur à l'internaute

//gotoAndStop('$/error/');

}

// configure le titre de la page dans votre navigateur

var title:String = 'ActionScript-Facile.com';

for (var i:Number = 0; i < e.pathNames.length; i++)

{

title += ' / ' + e.pathNames[i].substr(0,1).toUpperCase() + e.pathNames[i].substr(1);

}

SWFAddress.setTitle(title);

SWFAddress.setStatus(title);

Logger.debug("title de SWFAddress : "+title);

* Permet de récupérer l'url de l'interface appelée

var path:String = e.path;

if (path.substr(path.length - 1) != '/')

{

path = path + '/';

}

Logger.debug("path de SWFAddress : "+path);

// pour récupérer les paramètres transmis dans l'url du navigateur

var parameters:String = '';

var name:String;

var valueParam:String;

for (var p:String in SWFAddress.getParameterNames()) // parcours le tableau de tous les paramètres

{

name = SWFAddress.getParameterNames()[p];// le nom du paramètre

valueParam = SWFAddress.getParameter(SWFAddress.getParameterNames()[p]) as String; // la valeur du paramètre

parameters += '&' + name + '=' + valueParam;

Logger.debug("parameters "+name+" de SWFAddress : "+valueParam );

}

Logger.debug("parameters de SWFAddress : "+parameters);

// SWFAddress.popup('http://www.sergeevstudio.com','lyubomirsergeev', '"toolbar=0,location=0,status=0,menubar=0,scrollbars=0,resizable=1,width=960,height=620,left=" + (screen.width - 960)/2 + ",top=" + (screen.height - 620)/2', 'popup.focus();');

}

private function buildEditeurScreen() : void

{

oTextApropos.htmlText = "Comment utiliser le plus " +

"abouti des Éditeurs ActionScript en moins de minutes ? " +

"Avec un Éditeur ActionScript performant, il est possible de se simplifier énormément la" +

" programmation en ActionScript Flash." +

" " +

"Le logiciel FDT permet de développer des applications ActionScript (AS3, AS2, MXML, Flex et haXe) avec beaucoup plus de rapidité." +

" " +

"<a href='http://bonus.actionscript-facile.com/comment-developper-facilement-en-actionscript' target='_blank'>" +

"Téléchargez gratuitement votre exemplaire du guide Éditeur ActionScript FDT PowerFlasher</a>";

oTextApropos.visible = true;

}

private function buildDemo3Screen() : void

{

buttonDemo1.visible = true;

buttonDemo2.visible = true;

buttonDemo3.visible = true;

oTextDemo.htmlText = "<img src='https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/list_exemple.swf' " +

"hspace='3' height='200' width='450' id='idimag' align='left'/>";

oTextDemo.visible = true;

}

private function buildDemo2Screen() : void

{

buttonDemo1.visible = true;

buttonDemo2.visible = true;

buttonDemo3.visible = true;

oTextDemo.htmlText = "<img src='https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/button_exemple.swf' " +

"hspace='3' height='250' width='250' id='idimag' align='left'/>";

oTextDemo.visible = true;

}

private function buildDemo1Screen() : void

{

buttonDemo1.visible = true;

buttonDemo2.visible = true;

buttonDemo3.visible = true;

oTextDemo.htmlText = "<img src='https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/tooltip_exemple.swf' " +

"hspace='3' height='200' width='450' id='idimag' align='left'/>";

oTextDemo.visible = true;

}

private function clearAllScreen() : void

{

oTextDemo.visible = false;

oTextApropos.visible = false;

buttonDemo1.visible = false;

buttonDemo2.visible = false;

buttonDemo3.visible = false;

}

private function buildDemoScreen() : void

{

buttonDemo1.visible = true;

buttonDemo2.visible = true;

buttonDemo3.visible = true;

oTextDemo.htmlText = "Des exemples de swf" +

" utilisant le Framework de Composants AS3 Facile" +

" simplement et avec efficacité. " +

"Choisissez le composant que vous souhaitez visualiser avec les boutons 1, 2 et 3 du menu. " +

"Pour le composant du Bouton N°1, merci de patienter quelques secondes," +

" le temps d'initilisation du composant.";

oTextDemo.visible = true;

}

/**

* Construit l'interface A Propos

private function buildAProposScreen() : void

{

oTextApropos.htmlText = "Avec le Framework de Composants AS3 Facile, programmez en ActionScript" +

" simplement et avec efficacité. " +

"Le Framework ActionScript-Facile est développé en pure AS3. " +

"Vous pouvez créer et utiliser les composants suivants : " +

" Un Button : comme son nom l’indique – un bouton. " +

" Une ScrollBar Verticale : la classique barre de défilement. " +

" Une List : la fameuse liste d’éléments. " +

" Une ComboBox : une liste déroulante. " +

" Un TextField : gestion facilité du Texte dans Flash. " +

" Un ToolTip : une infos bulle ou bulle d’information. " +

" Un changement de skin en « live » : tout l’intérêt de Flash avec un changement à la volée du graphisme!" +

" " +

"" +

"<a href='http://bonus.actionscript-facile.com/bibliotheque-flash-de-composants-as3-facile' target='_blank'>" +

"Téléchargez gratuitement la dernière version du Framework AS3 Facile</a>";

oTextApropos.visible = true;

}

/**

* Fonction servant à écouter les click de l'utilisateur sur le boutton A Propos du menu.

* Définit la valeur de SWFAddress pour générer un évènement et construire l'interface à propriée.

* @param e Evenement de type MouseEvent.CLICK

private function showApropos(e:MouseEvent) : void

{

Logger.debug("Intéraction sur le menu : "+e.target.label);// récupère l'objet Button cliqué par l'internaute

SWFAddress.setValue(A_PROPOS);// créé un évènement dans SWFAddress pour afficher l'interface demandée par l'internaute

}

private function showDemo(e:MouseEvent) : void

{

// Récupère l'objet Button et ses propriétés (label, le texte du bouton)

Logger.debug("Intéraction sur le menu : " + e.target.label);

SWFAddress.setValue(DEMO);

}

private function showDemo1(event : MouseEvent) : void

{

SWFAddress.setValue(DEMO_1);

}

private function showDemo2(event : MouseEvent) : void

{

SWFAddress.setValue(DEMO_2);

}

private function showDemo3(event : MouseEvent) : void

{

SWFAddress.setValue(DEMO_3);

}

private function showEditeur(event : MouseEvent) : void

{

SWFAddress.setValue(EDITEUR);

}

[/codesyntax]

Montrez moi vos applications flash utilisant SWFAddress

Ou peut être utilisez-vous une autre technique plus simple ?

Partagez votre technique dans les commentaires ci-dessous.

Comment créer une ComboBox en AS3 ?

1 question

Ecrit le 19 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

En route pour la création de notre 4ème Composant ActionScript : la fameuse ComboBox ou Liste Déroulante.

Dans ce tutoriel, nous verrons comment définir les fonctionnalités du Composants AS3 ComboBox. Ainsi que les méthodes simplifiant son utilisation dans Flash.

I – Cahier Des Charges Fonctionnel d’une ComboBox

Un composant de type ComboBox est en fait une liste déroulante. Il y a en sur la majorité des sites internet. Elle se compose d’un bouton et d’un composant de type List. La valeur du bouton change suivant l’élément qui est sélectionné dans la Liste.

Une fois n’est pas coutume, nous allons illustrer notre description :

Ici nous pouvons reconnaître deux composants que nous avons déjà développé :

le Button ( la partie qui contient le texte “Times New Roman” )
la List ( le rectangle qui contient une liste de polices de caractères et qui peut être scrollée ).

La rédaction du CDCF (Cahier Des Charges Fonctionnel) est donc quasiment terminé.

Nous allons juste ajouter une petite contrainte :

Tous les éléments du composant List ont tous la même hauteur et le même style. Nous conservons ce comportement graphique cohérent.

II – Cahier Des Charges Techniques d’une ComboBox

Traduisons en terme technique le CDCF (les spécifications fonctionnelles) du composant ComboBox. C’est parti pour la rédaction du CDCT (Cahier Des Charges Techniques).

Un composant de type ComboBox est une liste déroulante comme vous pouvez en voir sur n’importe quel site internet. Elle se compose d’un bouton et d’un composant de type List.

La classe ComboBoxButton

Le bouton représente le titre de la ComboBox. Pour cela nous développons une classe ComboBoxButton.

Aucun problème pour le bouton, nous avons déjà développé auparavant les composants graphiques nécessaires.

La valeur du bouton change suivant l’élément qui est sélectionné dans la List.

Nous écouterons donc l’évènement MOUSE_CLICK de type flash.events.MouseEvent sur le composant List.

La classe ComboBoxButton reprend les fonctionnalités de la classe Button en ajoutant les suivantes :

un getter / setter permettant de récupérer la valeur (un objet) d’un ComboBoxButton.
la gestion du skin graphique propre à ComboBoxButton.

La classe ComboBoxElement

Tous les éléments du composant List possèdent une hauteur et un style identique, nous devons conserver ce comportement graphique cohérent.

Pour cela, nous créons une classe ComboBoxElement qui reprend les fonctionnalités de la classe Button.

Par extension, elle héritera également des fonctionnalités de la classe de base UIComponent.

Ainsi, tous les éléments qui seront ajoutés dans notre List seront du même type et possèderont tous une apparence identique.

Les éléments de la List de la ComboBox sont bien évidemment personnalisables graphiquement avec 3 états différents :

Normal : L’élément est « au repos », il n’est ni survolé, ni cliqué.
Survol : L’utilisateur passe et laisse sa souris au dessus de l’élément sans toutefois cliquer dessus.
Cliqué ou clic maintenu : L’utilisateur réalise un clic gauche et laisse le bouton de sa souris maintenu sur l’élément.

Conclusion

Voilà, c’est terminé, toutes mes félicitations pour avoir suivi et appliqué l’ensemble des Tutoriels AS3. Vous venez de créer une Bibliothèque AS3 de Composants Graphiques ou plus communément appelé un Framework de Composants AS3.

La ComboBox est le dernier composant graphique que nous avions à développer et qui nécessitait tant d’efforts.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/combobox_exemple.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/combobox_exemple.swf

Les prochains tutoriels seront des bonus.

C’est ma façon de vous remercier et de vous encourager à développer vos propres composants graphiques. Soit en apportant des améliorations au Framework AS3 Facile ou en développant votre propre Framework de Composants.

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 ComboBox, voici quelques exemples de fonctionnalités supplémentaires à implémenter.

Allez, maintenant, c’est à vous de coder 🙂

Méthode resizeListOnly

Je vous propose d’ajouter la méthode resizeListOnly() à notre composant ComboBox.

resizeListOnly ajoute la fonctionnalité suivante :

permet de déterminer les dimensions de la List indépendamment du Titre ( ComboBoxButton ). En quelque sorte, la liste déroulante qui apparait sous la ComboBox peut être plus large que son titre. Pensez également à redimensionner les éléments de la List!

Création d’un menu en Flash

Avec le composant ComboBox et la méthode resizeListOnly, vous pouvez créer un menu de navigation tout simple. Une des solutions (il y a en plusieurs) consiste à utiliser plusieurs ComboBox, positionnées les unes à côté des autres et interagissant entre elles.

Si vous concevez souvent des menus pour vos applications Flash, je vous conseille de créer un composant Menu.

Sources commentées

com.actionscriptfacile.ui.combo.element.ComboBoxElement
com.actionscriptfacile.ui.combo.element.ComboBoxButton
com.actionscriptfacile.ui.combo.ComboBox
ComboExample.as
com.as3facileexemple.skin.classic.DefaultComboBoxSkin.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Composant ComboBox du Framework AS3 Facile”

component_combobox_framework_actionscript-facile.zip – Téléchargé 910 fois – 68,76 Ko

Et vous, comment avez-vous utilisé ce Composant AS3 ComboBox ?

Postez vos exemples de ComboBox (des liens vers vos réalisations) dans les commentaires juste en dessous.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.combo.element.ComboBoxElement.as » bookmarkname= »com.actionscriptfacile.ui.combo.element.ComboBoxElement.as »]

package com.actionscriptfacile.ui.combo.element
{
	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.skin.ISkin;

	/**
	 * Définition d'un élément ajouté dans la liste de la ComboBox.
	 * Chaque élément est de type Button.
	 *
	 * @author Matthieu
	 */
	public class ComboBoxElement extends Button
	{

		/**
		 * On définit de nouvelles constantes pour le skin afin de ne pas les confondre
		 * avec celle d'un composant Button classique, sémantiquement parlant, c'est plus propre
		 * d'agir de la sorte.
		 */
		public static const COMBOBOX_ELEMENT_OVER_SKIN:String = 'COMBOBOX_ELEMENT_OVER_SKIN';
		public static const COMBOBOX_ELEMENT_UP_SKIN:String = 'COMBOBOX_ELEMENT_UP_SKIN';
		public static const COMBOBOX_ELEMENT_DOWN_SKIN:String = 'COMBOBOX_ELEMENT_DOWN_SKIN';

		protected var m_value:Object; // la valeur courante

		public function ComboBoxElement( p_value:Object, p_label:String )
		{
			super();
			m_value = p_value;
			label = p_label;
		}

		/**
		 * Getter / Setter
		 *
		 * Permet de récupérer / définir la propriété value d'un objet de type ComboBoxElement.
		 */
		public function get value():Object { return m_value; }
		public function set value(value:Object):void { m_value = value; }

		/**
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin(p_skin:ISkin):void
		{

			/**
			 * On procède exactement de la même façon qu'avec le composant Button à la différence près
			 * que l'on n'utilise pas les mêmes constantes.
			 */
			var definition:Class;

			definition = p_skin.getSkin( COMBOBOX_ELEMENT_OVER_SKIN ) as Class;

			if ( definition != null )
				m_overStyle = new definition();

			definition = p_skin.getSkin( COMBOBOX_ELEMENT_DOWN_SKIN ) as Class;

			if ( definition != null )
				m_downStyle = new definition();

			definition = p_skin.getSkin( COMBOBOX_ELEMENT_UP_SKIN ) as Class;

			if ( definition != null )
				m_upStyle = new definition();

			addChild( m_upStyle );
			addChild( m_downStyle );
			addChild( m_overStyle );

			setState ( UP_STATE );
		}

		/**
		 * Tue proprement Un objet de type ComboBoxElement
		 */
		override public function destroy():void
		{
			m_value = null;
			super.destroy();
		}

	}

}

package com.actionscriptfacile.ui.combo.element

{

import com.actionscriptfacile.ui.button.Button;

import com.actionscriptfacile.skin.ISkin;

/**

* Définition d'un élément ajouté dans la liste de la ComboBox.

* Chaque élément est de type Button.

* @author Matthieu

public class ComboBoxElement extends Button

{

/**

* On définit de nouvelles constantes pour le skin afin de ne pas les confondre

* avec celle d'un composant Button classique, sémantiquement parlant, c'est plus propre

* d'agir de la sorte.

public static const COMBOBOX_ELEMENT_OVER_SKIN:String = 'COMBOBOX_ELEMENT_OVER_SKIN';

public static const COMBOBOX_ELEMENT_UP_SKIN:String = 'COMBOBOX_ELEMENT_UP_SKIN';

public static const COMBOBOX_ELEMENT_DOWN_SKIN:String = 'COMBOBOX_ELEMENT_DOWN_SKIN';

protected var m_value:Object; // la valeur courante

public function ComboBoxElement( p_value:Object, p_label:String )

{

super();

m_value = p_value;

label = p_label;

}

/**

* Getter / Setter

* Permet de récupérer / définir la propriété value d'un objet de type ComboBoxElement.

public function get value():Object { return m_value; }

public function set value(value:Object):void { m_value = value; }

/**

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin(p_skin:ISkin):void

{

/**

* On procède exactement de la même façon qu'avec le composant Button à la différence près

* que l'on n'utilise pas les mêmes constantes.

var definition:Class;

definition = p_skin.getSkin( COMBOBOX_ELEMENT_OVER_SKIN ) as Class;

if ( definition != null )

m_overStyle = new definition();

definition = p_skin.getSkin( COMBOBOX_ELEMENT_DOWN_SKIN ) as Class;

if ( definition != null )

m_downStyle = new definition();

definition = p_skin.getSkin( COMBOBOX_ELEMENT_UP_SKIN ) as Class;

if ( definition != null )

m_upStyle = new definition();

addChild( m_upStyle );

addChild( m_downStyle );

addChild( m_overStyle );

setState ( UP_STATE );

}

/**

* Tue proprement Un objet de type ComboBoxElement

override public function destroy():void

{

m_value = null;

super.destroy();

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.combo.element.ComboBoxButton.as » bookmarkname= »com.actionscriptfacile.ui.combo.element.ComboBoxButton.as »]

package com.actionscriptfacile.ui.combo.element
{
	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.skin.ISkin;

	/**
	 * Définition de l'élément courant sélectionné dans la liste déroulante.
	 * Le titre de la ComboBox.
	 * Cet élément est de type Button.
	 *
	 * @author Matthieu
	 */
	public class ComboBoxButton extends Button
	{

		/**
		 * On définit les constantes pour le skin
		 */

		public static const COMBOBOX_BUTTON_OVER_SKIN:String = 'COMBOBOX_BUTTON_OVER_SKIN';
		public static const COMBOBOX_BUTTON_UP_SKIN:String = 'COMBOBOX_BUTTON_UP_SKIN';
		public static const COMBOBOX_BUTTON_DOWN_SKIN:String = 'COMBOBOX_BUTTON_DOWN_SKIN';

		// variable qui va nous servir à stocker la valeur de l'objet ComboBoxButton
		protected var m_value:Object;

		public function ComboBoxButton( p_value:Object, p_label:String )
		{
			super();

			m_value = p_value;
			label = p_label;
		}

		/**
		 * Définit / récupère définit la valeur de l'objet comboboxbutton
		 */
		public function get value():Object { return m_value; }
		public function set value(value:Object):void { m_value = value; }

		/**
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin(p_skin:ISkin):void
		{

			/**
			 * Même procédé que pour les autres composants
			 */
			var definition:Class;

			// over skin
			definition = p_skin.getSkin( COMBOBOX_BUTTON_OVER_SKIN ) as Class;

			if ( definition != null )
				m_overStyle = new definition();

			// down skin
			definition = p_skin.getSkin( COMBOBOX_BUTTON_DOWN_SKIN ) as Class;

			if ( definition != null )
				m_downStyle = new definition();

			// up skin
			definition = p_skin.getSkin( COMBOBOX_BUTTON_UP_SKIN ) as Class;

			if ( definition != null )
				m_upStyle = new definition();

			// on ajoute les styles à la display list
			addChild( m_upStyle );
			addChild( m_downStyle );
			addChild( m_overStyle );

			setState ( UP_STATE );
		}

		/**
		 * Fonction servant à détruire proprement un objet de type ComboBoxButton
		 */
		override public function destroy():void
		{
			m_value = null;
			super.destroy();
		}

	}

}

package com.actionscriptfacile.ui.combo.element

{

import com.actionscriptfacile.ui.button.Button;

import com.actionscriptfacile.skin.ISkin;

/**

* Définition de l'élément courant sélectionné dans la liste déroulante.

* Le titre de la ComboBox.

* Cet élément est de type Button.

* @author Matthieu

public class ComboBoxButton extends Button

{

/**

* On définit les constantes pour le skin

public static const COMBOBOX_BUTTON_OVER_SKIN:String = 'COMBOBOX_BUTTON_OVER_SKIN';

public static const COMBOBOX_BUTTON_UP_SKIN:String = 'COMBOBOX_BUTTON_UP_SKIN';

public static const COMBOBOX_BUTTON_DOWN_SKIN:String = 'COMBOBOX_BUTTON_DOWN_SKIN';

// variable qui va nous servir à stocker la valeur de l'objet ComboBoxButton

protected var m_value:Object;

public function ComboBoxButton( p_value:Object, p_label:String )

{

super();

m_value = p_value;

label = p_label;

}

/**

* Définit / récupère définit la valeur de l'objet comboboxbutton

public function get value():Object { return m_value; }

public function set value(value:Object):void { m_value = value; }

/**

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin(p_skin:ISkin):void

{

/**

* Même procédé que pour les autres composants

var definition:Class;

// over skin

definition = p_skin.getSkin( COMBOBOX_BUTTON_OVER_SKIN ) as Class;

if ( definition != null )

m_overStyle = new definition();

// down skin

definition = p_skin.getSkin( COMBOBOX_BUTTON_DOWN_SKIN ) as Class;

if ( definition != null )

m_downStyle = new definition();

// up skin

definition = p_skin.getSkin( COMBOBOX_BUTTON_UP_SKIN ) as Class;

if ( definition != null )

m_upStyle = new definition();

// on ajoute les styles à la display list

addChild( m_upStyle );

addChild( m_downStyle );

addChild( m_overStyle );

setState ( UP_STATE );

}

/**

* Fonction servant à détruire proprement un objet de type ComboBoxButton

override public function destroy():void

{

m_value = null;

super.destroy();

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.combo.ComboBox.as » bookmarkname= »com.actionscriptfacile.ui.combo.ComboBox.as »]

package com.actionscriptfacile.ui.combo
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.combo.element.ComboBoxButton;
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.list.List;
	import com.actionscriptfacile.ui.UIComponent;
	import com.actionscriptfacile.ui.utils.UIMargins;

	import flash.events.MouseEvent;

	/**
	 * Composant ComboBox
	 * @author Matthieu
	 */
	public class ComboBox extends UIComponent
	{
		private var m_skin : ISkin; // objet implémentant l'interface ISkin

		/**
		 * On définit les constantes de skin
		 */
		public static const COMBOBOX_BUTTON_OVER_SKIN : String = 'COMBOBOX_BUTTON_OVER_SKIN';
		public static const COMBOBOX_BUTTON_UP_SKIN : String = 'COMBOBOX_BUTTON_UP_SKIN';
		public static const COMBOBOX_BUTTON_DOWN_SKIN : String = 'COMBOBOX_BUTTON_DOWN_SKIN';
		public static const COMBOBOX_ELEMENT_OVER_SKIN : String = 'COMBOBOX_ELEMENT_OVER_SKIN';
		public static const COMBOBOX_ELEMENT_UP_SKIN : String = 'COMBOBOX_ELEMENT_UP_SKIN';
		public static const COMBOBOX_ELEMENT_DOWN_SKIN : String = 'COMBOBOX_ELEMENT_DOWN_SKIN';
		// le currentElement est celui qui apparaîtra même lorsque le composant List sera caché
		private var m_currentElement : ComboBoxButton;
		//composant List
		private var m_list : List;
		// tableau des éléments
		private var m_elements : Array;
		// hauteur des éléments
		protected var m_componentsHeight : Number;

		public function ComboBox()
		{
			init();
		}

		/**
		 * Fonction interne servant à initialiser un composant de type ComboBox
		 */
		private function init() : void
		{
			// on définit une taille d'élément par défaut
			m_componentsHeight = 30;

			// l'objet skin est null
			m_skin = null;

			// le currentElement est crée
			m_currentElement = new ComboBoxButton(null, '');

			// le composant List aussi
			m_list = new List();

			// le tableau d'éléments est crée
			m_elements = new Array();

			// on ajoute à la displayList l'élément courant et le composant List
			addChild(m_currentElement);
			addChild(m_list);

			// on positionne la liste juste en dessous de l'élément courant
			m_list.y = m_currentElement.height;

			// et on passe son visible à false
			m_list.visible = false;

			// on écoute les click sur la liste, comme ça on sait quel élément est cliqué
			m_list.addEventListener(MouseEvent.CLICK, chooseHandler, true);

			// on écoute les rollOut comme ça dès que l'on quitte les limites de notre composant, on peut cacher la List
			addEventListener(MouseEvent.ROLL_OUT, toggleListAppearHandler, false);

			// si on clique sur l'élément courant on fait apparaître la List
			m_currentElement.addEventListener(MouseEvent.CLICK, toggleListAppearHandler, false);
		}

		/**
		 * Fonction interne gérant l'apparition / disparition du composant List
		 * @param	e	Evenement de type MouseEvent
		 */
		private function toggleListAppearHandler(e : MouseEvent) : void
		{
			// si on a cliqué sur l'élément courant alors on affiche la List sinon on ne l'affiche pas
			m_list.visible = ( e.type == MouseEvent.CLICK );
		}

		/**
		 *
		 * Fonction interne gérant le choix d'un élément dans la List
		 * @param	e	Evenement de type MouseEvent
		 */
		private function chooseHandler(e : MouseEvent) : void
		{
			// si l'origine du click ne provient pas d'un élement de la liste on ne fait rien
			if ( !( e.target is ComboBoxElement ) )
				return;

			// sinon on récupère cet élément
			var element : ComboBoxElement = e.target as ComboBoxElement;

			// et on affecte les valeurs de cet élément à l'élément courant
			m_currentElement.value = element.value;
			m_currentElement.label = element.label;

			// et cache la List
			m_list.visible = false;
		}

		/**
		 *
		 * Ajoute un élément à la liste déroulante et renvoit l'élément de la liste ainsi crée.
		 *
		 * @param	p_label	Le label ( texte ) qui sera affiché à l'utilisateur pour l'élément crée
		 * @param	p_value La valeur de l'élément crée
		 * @return	L'élément de la liste nouvellement crée de type ComboBoxElement
		 */
		public function addElement( p_label : String, p_value : Object ) : ComboBoxElement
		{
			// on ajoute un nouvel élément à la liste auquel on attribue les valeurs passées en paramètre
			var element : ComboBoxElement = m_list.addElement(new ComboBoxElement(p_value, p_label)) as ComboBoxElement;

			// Si la skin courante est définie on l'applique à l'élément
			if ( m_skin != null )
				element.applySkin(m_skin);

			// on redimensionne l'élément puis on l'ajoute au tableau d'éléments
			element.resize(m_currentElement.width, m_componentsHeight);
			m_elements.push(element);

			// la valeur de l'élément courant est null ou vide on prend les valeurs du premier élément de la liste
			if ( m_currentElement.value == null &amp;&amp; m_currentElement.label == '' )
			{
				m_currentElement.value = ComboBoxElement(m_elements[ 0 ]).value;
				m_currentElement.label = ComboBoxElement(m_elements[ 0 ]).label;
			}

			// on retourne l'élément ainsi crée
			return element;
		}

		/**
		 *
		 * Enlève un élément de la liste déroulante et le retourne
		 *
		 * @param	p_element	Objet de type ComboBoxElement
		 * @return	l'élément supprimé de la List
		 */
		public function removeElement( p_element : ComboBoxElement ) : ComboBoxElement
		{
			var element : ComboBoxElement = m_list.removeElement(p_element) as ComboBoxElement;
			m_elements.splice(element);
			return element;
		}

		/**
		 *
		 * Retourne un objet de type ComboBoxElement dont la propriété p_prop a pour valeur p_value
		 *
		 * @param	p_prop	Nom de la propriété
		 * @param	p_value	Valeur de la propriété
		 * @return	Un objet de type ComboBoxElement
		 */
		public function getElementByProperty( p_prop : String, p_value : Object ) : ComboBoxElement
		{
			var max : int = m_elements.length;
			var i : int = 0;

			for ( ;i &lt; max;i++)
			{
				if ( ComboBoxElement(m_elements[ i ]).hasOwnProperty(p_prop) &amp;&amp; ComboBoxElement(m_elements[ i ])[ p_prop ] == p_value )
				{
					return m_elements[ i ] as ComboBoxElement;
				}
			}

			return null;
		}

		/**
		 * Définit / récupère la valeur courante
		 */
		public function set currentValue( p_value : Object ) : void
		{
			m_currentElement.value = p_value;
		}

		public function get currentValue() : Object
		{
			return m_currentElement.value;
		}

		/**
		 * Définit / récupère le label courant
		 */
		public function set currentLabel( p_label : String ) : void
		{
			m_currentElement.label = p_label;
		}

		public function get currentLabel() : String
		{
			return m_currentElement.label;
		}

		/**
		 * Définit / récupère les marges de la liste déroulante
		 */
		public function set margins( p_margins : UIMargins ) : void
		{
			m_list.margins = p_margins;
		}

		public function get margins() : UIMargins
		{
			return m_list.margins;
		}

		/**
		 * Retourne le tableau d'éléments
		 */
		public function get elements() : Array
		{
			return m_elements;
		}

		/**
		 * Définit / récupère la hauteur des éléments de la liste déroulante
		 */
		public function get componentsHeight() : Number
		{
			return m_componentsHeight;
		}

		public function set componentsHeight(value : Number) : void
		{
			m_componentsHeight = value;
			resize(width, height);
		}

		/**
		 *
		 * Fonction permettant de gérer la customisation des différents éléments
		 * graphiques d'un objet de type ComboBox
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin( p_skin : ISkin ) : void
		{

			/**
			 * On applique la skin au ComboBoxButton ( l'élément courant ), à la scrollBar, à la List, et à tout les éléments
			 * de la List
			 */
			m_skin = p_skin;

			m_currentElement.applySkin(p_skin);
			m_list.applySkin(p_skin);
			m_list.scrollBar.applySkin(p_skin);

			var i : int = 0;
			var max : int = m_elements.length;

			for ( ;i &lt; max;i++ )
			{
				ComboBoxElement(m_elements[i]).applySkin(p_skin);
			}

			// puis on redimensionne
			resize(m_currentElement.width, 100);
		}

		/**
		 *
		 * Fonction permettant de gérer intelligemment le redimensionnement
		 * d'un objet de type ComboBox
		 *
		 * @param	p_width		la nouvelle largeur ( en pixels ) du composant
		 * @param	p_height	la nouvelle hauteur ( en pixels ) du composant
		 */
		override public function resize( p_width : Number, p_height : Number ) : void
		{

			var i : int = 0;
			var max : int = m_elements.length;

			// on redimensionne la List
			m_list.resize(p_width, p_height);

			// on redimensionne l'élémen courant
			m_currentElement.resize(p_width, m_componentsHeight);

			// ... ainsi que tous les éléments de la liste
			for ( ;i &lt; max;i++ )
			{
				ComboBoxElement(m_elements[ i]).resize(p_width, m_componentsHeight);
			}

			// on repositionne la liste
			m_list.y = m_currentElement.height;
		}

		/**
		 * Tue proprement un objet de type ComboBox
		 */
		override public function destroy() : void
		{
			/**
			 * On tue tous les event listeners
			 */
			m_list.addEventListener(MouseEvent.CLICK, chooseHandler, true);
			removeEventListener(MouseEvent.MOUSE_OUT, toggleListAppearHandler, false);
			m_currentElement.removeEventListener(MouseEvent.CLICK, toggleListAppearHandler, false);

			// puis on détruit l'élément courant, la List et le tableau d'éléments
			m_currentElement.destroy();
			m_list.destroy();
			m_elements = null;

			// on appelle la fonction destructrice parente
			super.destroy();
		}
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

package com.actionscriptfacile.ui.combo

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.combo.element.ComboBoxButton;

import com.actionscriptfacile.ui.combo.element.ComboBoxElement;

import com.actionscriptfacile.ui.list.List;

import com.actionscriptfacile.ui.UIComponent;

import com.actionscriptfacile.ui.utils.UIMargins;

import flash.events.MouseEvent;

/**

* Composant ComboBox

* @author Matthieu

public class ComboBox extends UIComponent

{

private var m_skin : ISkin; // objet implémentant l'interface ISkin

/**

* On définit les constantes de skin

public static const COMBOBOX_BUTTON_OVER_SKIN : String = 'COMBOBOX_BUTTON_OVER_SKIN';

public static const COMBOBOX_BUTTON_UP_SKIN : String = 'COMBOBOX_BUTTON_UP_SKIN';

public static const COMBOBOX_BUTTON_DOWN_SKIN : String = 'COMBOBOX_BUTTON_DOWN_SKIN';

public static const COMBOBOX_ELEMENT_OVER_SKIN : String = 'COMBOBOX_ELEMENT_OVER_SKIN';

public static const COMBOBOX_ELEMENT_UP_SKIN : String = 'COMBOBOX_ELEMENT_UP_SKIN';

public static const COMBOBOX_ELEMENT_DOWN_SKIN : String = 'COMBOBOX_ELEMENT_DOWN_SKIN';

// le currentElement est celui qui apparaîtra même lorsque le composant List sera caché

private var m_currentElement : ComboBoxButton;

//composant List

private var m_list : List;

// tableau des éléments

private var m_elements : Array;

// hauteur des éléments

protected var m_componentsHeight : Number;

public function ComboBox()

{

init();

}

/**

* Fonction interne servant à initialiser un composant de type ComboBox

private function init() : void

{

// on définit une taille d'élément par défaut

m_componentsHeight = 30;

// l'objet skin est null

m_skin = null;

// le currentElement est crée

m_currentElement = new ComboBoxButton(null, '');

// le composant List aussi

m_list = new List();

// le tableau d'éléments est crée

m_elements = new Array();

// on ajoute à la displayList l'élément courant et le composant List

addChild(m_currentElement);

addChild(m_list);

// on positionne la liste juste en dessous de l'élément courant

m_list.y = m_currentElement.height;

// et on passe son visible à false

m_list.visible = false;

// on écoute les click sur la liste, comme ça on sait quel élément est cliqué

m_list.addEventListener(MouseEvent.CLICK, chooseHandler, true);

// on écoute les rollOut comme ça dès que l'on quitte les limites de notre composant, on peut cacher la List

addEventListener(MouseEvent.ROLL_OUT, toggleListAppearHandler, false);

// si on clique sur l'élément courant on fait apparaître la List

m_currentElement.addEventListener(MouseEvent.CLICK, toggleListAppearHandler, false);

}

/**

* Fonction interne gérant l'apparition / disparition du composant List

* @param e Evenement de type MouseEvent

private function toggleListAppearHandler(e : MouseEvent) : void

{

// si on a cliqué sur l'élément courant alors on affiche la List sinon on ne l'affiche pas

m_list.visible = ( e.type == MouseEvent.CLICK );

}

/**

* Fonction interne gérant le choix d'un élément dans la List

* @param e Evenement de type MouseEvent

private function chooseHandler(e : MouseEvent) : void

{

// si l'origine du click ne provient pas d'un élement de la liste on ne fait rien

if ( !( e.target is ComboBoxElement ) )

return;

// sinon on récupère cet élément

var element : ComboBoxElement = e.target as ComboBoxElement;

// et on affecte les valeurs de cet élément à l'élément courant

m_currentElement.value = element.value;

m_currentElement.label = element.label;

// et cache la List

m_list.visible = false;

}

/**

* Ajoute un élément à la liste déroulante et renvoit l'élément de la liste ainsi crée.

* @param p_label Le label ( texte ) qui sera affiché à l'utilisateur pour l'élément crée

* @param p_value La valeur de l'élément crée

* @return L'élément de la liste nouvellement crée de type ComboBoxElement

public function addElement( p_label : String, p_value : Object ) : ComboBoxElement

{

// on ajoute un nouvel élément à la liste auquel on attribue les valeurs passées en paramètre

var element : ComboBoxElement = m_list.addElement(new ComboBoxElement(p_value, p_label)) as ComboBoxElement;

// Si la skin courante est définie on l'applique à l'élément

if ( m_skin != null )

element.applySkin(m_skin);

// on redimensionne l'élément puis on l'ajoute au tableau d'éléments

element.resize(m_currentElement.width, m_componentsHeight);

m_elements.push(element);

// la valeur de l'élément courant est null ou vide on prend les valeurs du premier élément de la liste

if ( m_currentElement.value == null && m_currentElement.label == '' )

{

m_currentElement.value = ComboBoxElement(m_elements[ 0 ]).value;

m_currentElement.label = ComboBoxElement(m_elements[ 0 ]).label;

}

// on retourne l'élément ainsi crée

return element;

}

/**

* Enlève un élément de la liste déroulante et le retourne

* @param p_element Objet de type ComboBoxElement

* @return l'élément supprimé de la List

public function removeElement( p_element : ComboBoxElement ) : ComboBoxElement

{

var element : ComboBoxElement = m_list.removeElement(p_element) as ComboBoxElement;

m_elements.splice(element);

return element;

}

/**

* Retourne un objet de type ComboBoxElement dont la propriété p_prop a pour valeur p_value

* @param p_prop Nom de la propriété

* @param p_value Valeur de la propriété

* @return Un objet de type ComboBoxElement

public function getElementByProperty( p_prop : String, p_value : Object ) : ComboBoxElement

{

var max : int = m_elements.length;

var i : int = 0;

for ( ;i < max;i++)

{

if ( ComboBoxElement(m_elements[ i ]).hasOwnProperty(p_prop) && ComboBoxElement(m_elements[ i ])[ p_prop ] == p_value )

{

return m_elements[ i ] as ComboBoxElement;

}

return null;

}

/**

* Définit / récupère la valeur courante

public function set currentValue( p_value : Object ) : void

{

m_currentElement.value = p_value;

}

public function get currentValue() : Object

{

return m_currentElement.value;

}

/**

* Définit / récupère le label courant

public function set currentLabel( p_label : String ) : void

{

m_currentElement.label = p_label;

}

public function get currentLabel() : String

{

return m_currentElement.label;

}

/**

* Définit / récupère les marges de la liste déroulante

public function set margins( p_margins : UIMargins ) : void

{

m_list.margins = p_margins;

}

public function get margins() : UIMargins

{

return m_list.margins;

}

/**

* Retourne le tableau d'éléments

public function get elements() : Array

{

return m_elements;

}

/**

* Définit / récupère la hauteur des éléments de la liste déroulante

public function get componentsHeight() : Number

{

return m_componentsHeight;

}

public function set componentsHeight(value : Number) : void

{

m_componentsHeight = value;

resize(width, height);

}

/**

* Fonction permettant de gérer la customisation des différents éléments

* graphiques d'un objet de type ComboBox

* @param p_skin Objet implémentant l'interface ISkin

override public function applySkin( p_skin : ISkin ) : void

{

/**

* On applique la skin au ComboBoxButton ( l'élément courant ), à la scrollBar, à la List, et à tout les éléments

* de la List

m_skin = p_skin;

m_currentElement.applySkin(p_skin);

m_list.applySkin(p_skin);

m_list.scrollBar.applySkin(p_skin);

var i : int = 0;

var max : int = m_elements.length;

for ( ;i < max;i++ )

{

ComboBoxElement(m_elements[i]).applySkin(p_skin);

}

// puis on redimensionne

resize(m_currentElement.width, 100);

}

/**

* Fonction permettant de gérer intelligemment le redimensionnement

* d'un objet de type ComboBox

* @param p_width la nouvelle largeur ( en pixels ) du composant

* @param p_height la nouvelle hauteur ( en pixels ) du composant

override public function resize( p_width : Number, p_height : Number ) : void

{

var i : int = 0;

var max : int = m_elements.length;

// on redimensionne la List

m_list.resize(p_width, p_height);

// on redimensionne l'élémen courant

m_currentElement.resize(p_width, m_componentsHeight);

// ... ainsi que tous les éléments de la liste

for ( ;i < max;i++ )

{

ComboBoxElement(m_elements[ i]).resize(p_width, m_componentsHeight);

}

// on repositionne la liste

m_list.y = m_currentElement.height;

}

/**

* Tue proprement un objet de type ComboBox

override public function destroy() : void

{

/**

* On tue tous les event listeners

m_list.addEventListener(MouseEvent.CLICK, chooseHandler, true);

removeEventListener(MouseEvent.MOUSE_OUT, toggleListAppearHandler, false);

m_currentElement.removeEventListener(MouseEvent.CLICK, toggleListAppearHandler, false);

// puis on détruit l'élément courant, la List et le tableau d'éléments

m_currentElement.destroy();

m_list.destroy();

m_elements = null;

// on appelle la fonction destructrice parente

super.destroy();

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »ComboExample.as » bookmarkname= »ComboExample.as »]

package
{
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;

	import com.actionscriptfacile.ui.utils.UIMargins;
	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;// import du skin de la ComboBox
	import com.actionscriptfacile.ui.combo.ComboBox;
	import flash.display.Sprite;

	/**
	 * Exemple d'utilisation du composant ComboBox.
	 * @author Matthieu
	 */
	public class ComboExample extends Sprite
	{
		public function ComboExample()
		{
			// création d'une combobox
			var box:ComboBox = new ComboBox();

			// on lui applique la skin par défaut
			box.applySkin( new DefaultComboBoxSkin() );

			var boxElement:ComboBoxElement;
			// ajout des éléments
			for ( var i:int = 0; i &lt; 35; i++ )
			{
				boxElement = box.addElement( "Élément "+ new String( i ), i );
				// acccès au composant de type UITextField (labelField)
				boxElement.labelField.alignCenter(); // centre le texte
				boxElement.labelField.changeFormat("color", 0xff33ff);// changement de la couleur du texte
				boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
				boxElement.labelField.changeFormat("font", "Arial");// changement de la police du texte
			}

			// définition de la taille de la combobox
			box.resize( 230, 120 );

			// détermination de la position de la List
			box.x = 30;
			box.y = 30;

			// ajout des marges au contenu de la liste
			box.margins = new UIMargins( 5, 5, 5, 5 );

			// affichage - ajout à la displaylist
			addChild( box );
		}

	}

}

package

{

import com.actionscriptfacile.ui.combo.element.ComboBoxElement;

import com.actionscriptfacile.ui.utils.UIMargins;

import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;// import du skin de la ComboBox

import com.actionscriptfacile.ui.combo.ComboBox;

import flash.display.Sprite;

/**

* Exemple d'utilisation du composant ComboBox.

* @author Matthieu

public class ComboExample extends Sprite

{

public function ComboExample()

{

// création d'une combobox

var box:ComboBox = new ComboBox();

// on lui applique la skin par défaut

box.applySkin( new DefaultComboBoxSkin() );

var boxElement:ComboBoxElement;

// ajout des éléments

for ( var i:int = 0; i < 35; i++ )

{

boxElement = box.addElement( "Élément "+ new String( i ), i );

// acccès au composant de type UITextField (labelField)

boxElement.labelField.alignCenter(); // centre le texte

boxElement.labelField.changeFormat("color", 0xff33ff);// changement de la couleur du texte

boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte

boxElement.labelField.changeFormat("font", "Arial");// changement de la police du texte

}

// définition de la taille de la combobox

box.resize( 230, 120 );

// détermination de la position de la List

box.x = 30;

box.y = 30;

// ajout des marges au contenu de la liste

box.margins = new UIMargins( 5, 5, 5, 5 );

// affichage - ajout à la displaylist

addChild( box );

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultComboBoxSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultComboBoxSkin.as »]

package com.as3facileexemple.skin.classic
{
	// Import des classes gérant la partie graphique du composant dans le fla (movieclip)
	// Provient de ui.swc (créé avec la compilation de UI.fla)
	import com.as3facile.skin.combo.ComboBoxButtonDownSkin;
	import com.as3facile.skin.combo.ComboBoxButtonOverSkin;
	import com.as3facile.skin.combo.ComboBoxButtonSkin;
	import com.as3facile.skin.combo.ComboBoxElementDownSkin;
	import com.as3facile.skin.combo.ComboBoxElementOverSkin;
	import com.as3facile.skin.combo.ComboBoxElementSkin;
	import com.as3facile.skin.list.ListBackgroundSkin;
	import com.as3facile.skin.scroll.ScrollBarBackgroundSkin;
	import com.as3facile.skin.scroll.ScrollBottomButtonSkin;
	import com.as3facile.skin.scroll.ScrollerButtonSkin;
	import com.as3facile.skin.scroll.ScrollUpButtonSkin;

	import com.actionscriptfacile.skin.Skin;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.list.List;
	import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;

	/**
	 * Définition du skin utilisé pour un composant ComboBox
	 *
	 * @author Matthieu
	 */
	public class DefaultComboBoxSkin extends Skin
	{

		public function DefaultComboBoxSkin()
		{
			setSkin( ComboBox.COMBOBOX_BUTTON_DOWN_SKIN , ComboBoxButtonDownSkin );
			setSkin( ComboBox.COMBOBOX_BUTTON_OVER_SKIN, ComboBoxButtonOverSkin );
			setSkin( ComboBox.COMBOBOX_BUTTON_UP_SKIN , ComboBoxButtonSkin );

			setSkin( ComboBox.COMBOBOX_ELEMENT_DOWN_SKIN , ComboBoxElementDownSkin );
			setSkin( ComboBox.COMBOBOX_ELEMENT_OVER_SKIN, ComboBoxElementOverSkin );
			setSkin( ComboBox.COMBOBOX_ELEMENT_UP_SKIN , ComboBoxElementSkin );

			setSkin( List.LIST_BACKGROUND_SKIN, ListBackgroundSkin  );

			setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_BOTTOM_SKIN, ScrollBottomButtonSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_UP_SKIN, ScrollUpButtonSkin );
			setSkin( VerticalScrollBar.SCROLL_VERTICAL_SCROLLER_SKIN, ScrollerButtonSkin );

		}

	}

}

package com.as3facileexemple.skin.classic

{

// Import des classes gérant la partie graphique du composant dans le fla (movieclip)

// Provient de ui.swc (créé avec la compilation de UI.fla)

import com.as3facile.skin.combo.ComboBoxButtonDownSkin;

import com.as3facile.skin.combo.ComboBoxButtonOverSkin;

import com.as3facile.skin.combo.ComboBoxButtonSkin;

import com.as3facile.skin.combo.ComboBoxElementDownSkin;

import com.as3facile.skin.combo.ComboBoxElementOverSkin;

import com.as3facile.skin.combo.ComboBoxElementSkin;

import com.as3facile.skin.list.ListBackgroundSkin;

import com.as3facile.skin.scroll.ScrollBarBackgroundSkin;

import com.as3facile.skin.scroll.ScrollBottomButtonSkin;

import com.as3facile.skin.scroll.ScrollerButtonSkin;

import com.as3facile.skin.scroll.ScrollUpButtonSkin;

import com.actionscriptfacile.skin.Skin;

import com.actionscriptfacile.ui.combo.ComboBox;

import com.actionscriptfacile.ui.list.List;

import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar;

/**

* Définition du skin utilisé pour un composant ComboBox

* @author Matthieu

public class DefaultComboBoxSkin extends Skin

{

public function DefaultComboBoxSkin()

{

setSkin( ComboBox.COMBOBOX_BUTTON_DOWN_SKIN , ComboBoxButtonDownSkin );

setSkin( ComboBox.COMBOBOX_BUTTON_OVER_SKIN, ComboBoxButtonOverSkin );

setSkin( ComboBox.COMBOBOX_BUTTON_UP_SKIN , ComboBoxButtonSkin );

setSkin( ComboBox.COMBOBOX_ELEMENT_DOWN_SKIN , ComboBoxElementDownSkin );

setSkin( ComboBox.COMBOBOX_ELEMENT_OVER_SKIN, ComboBoxElementOverSkin );

setSkin( ComboBox.COMBOBOX_ELEMENT_UP_SKIN , ComboBoxElementSkin );

setSkin( List.LIST_BACKGROUND_SKIN, ListBackgroundSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_BOTTOM_SKIN, ScrollBottomButtonSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_UP_SKIN, ScrollUpButtonSkin );

setSkin( VerticalScrollBar.SCROLL_VERTICAL_SCROLLER_SKIN, ScrollerButtonSkin );

}

[/codesyntax]

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : framework AS3

Cours ActionScript 3 ‘framework AS3’

Les Tweens en AS3

Version démonstration

Télécharger le code source Tween

Et vous, quelles libraires utilisez-vous pour créer vos animations / Tweens ?

Téléchargez le code source du Player AS3 Formation

Découvrir les Artistes de l’Album écouté

Dites-moi : quels tutoriels souhaitez-vous à propos du Framework Pixlib ?

Téléchargez le code source complet de l’exemple

Découvrir les Artistes de l’Album écouté

Avez-vous besoin d’informations supplémentaires sur Pixlib 3 ?

Tout d’abord, un framework c’est quoi ? Quel est son utilité ?

Les 5 bonnes raisons d’utiliser un Framework ActionScript

N°5

N°4

N°3

N°2

N°1

L’utilisation d’un Framework

Et vous, préférez-vous recoder à chaque fois l’ensemble du code de votre application ?

Découverte des Frameworks ActionScript

Les Frameworks ActionScript à connaitre

Pixlib 3.0 Flash Plateform Framework

PureMVC

Vegas AS2 / AS3

LunAS

CalistA

Pixlib AS2

PixIoC AS2

Conclusion

Et vous, quel est le framework que vous utilisez le plus en souvent en AS3, AS2 ?

Sur quel framework souhaitez-vous des tutoriels en priorité ?

Présentation du Framework Pixlib 3.0

Fonctionnalités du Framework Pixlib 3.0

Conclusion

Et vous, que pensez-vous de Pixlib 3.0?

Les fonctionnalités de SWFAddress

Utilisation de SWFAddress

Détails des fonctions possibles

SWFAddress.getValue()

SWFAddress.setValue(param:String)

SWFAddress.setTitle(param:String)

SWFAddress.setStatus(param:String)

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleSWFAddress)

Améliorer son référencement avec SWFAddress

Exemple AS3 avec SWFAddress

Création du fichier .htaccess

Création du fichier datasource.php

Création du fichier index.php

Création du code source AS3

Récupération des paramètres de l’url

Téléchargement code source AS3 de SWFAddress

Code source AS3 commenté de notre exemple avec SWFAddress

Montrez moi vos applications flash utilisant SWFAddress

I – Cahier Des Charges Fonctionnel d’une ComboBox

II – Cahier Des Charges Techniques d’une ComboBox

La classe ComboBoxButton

La classe ComboBoxElement

Conclusion

Évolutions des fonctionnalités

Méthode resizeListOnly

Création d’un menu en Flash

Sources commentées

Et vous, comment avez-vous utilisé ce Composant AS3 ComboBox ?

Cours Récents

Liens / Partenaires