Sujets sur : bibliothèque composants

Cours ActionScript 3 ‘bibliothèque composants’

Parcourir toutes les classes d’une librairie externe avec SWFExplorer

Ecrit le 20 septembre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Continuons la découverte de classes très utiles dans le développement d’applications et jeux flash : SWFExplorer.

Encore une nouvelle classe développée par Thibault Imbert.

Vous vous demandez peut être à quoi peut servir l’exploration d’un fichier SWF, je m’étais posé la même question au départ.

En fait, cela permet d’instancier dynamiquement des objets (classes, éléments graphiques…) dans notre application flash.

C’est à dire, votre main.swf charge des librairies partagées (assets.swf), des polices de caractères (fonts.swf), etc…

Puis directement dans main.swf et sans connaître à l’avance le nom des classes, vous pouvez les instancier.

SWFExplorer vous permet de récupérer les noms de classes disponibles dans un fichier SWF.

Voici ce que je vais vous apprendre dans ce cours AS3 :

Comment utiliser la classe SWFExplorer.
2 techniques pour charger un fichier SWF contenant des éléments partagés (graphismes, animations, polices de caractères…).
L’intérêt d’utiliser les fonctionnalités de SWFExplorer.

Après avoir visionné ce cours ActionScript, vous serez capable d’utiliser la classe SWFExplorer dans vos applications et jeux flash.

SWFExplorer

Exemple de code AS3 SWFExplorer

Voici la classe Main qui utilise les fonctionnalités de SWFExplorer.

[codesyntax lang= »actionscript3″ title= »Exemple SWFExplorer » bookmarkname= »Exemple SWFExplorer »]

package
{

	import flash.display.Loader;
	import flash.utils.ByteArray;
	import org.bytearray.explorer.SWFExplorer;
	import flash.net.URLRequest;
	import org.bytearray.explorer.events.SWFExplorerEvent;
	import flash.events.Event;
	import flash.display.Sprite;

	import com.demonsters.debugger.MonsterDebugger;

	/**
	 * La classe Main qui étend Sprite.
	 *
	 * définit le nombre d'images par secondes dans les paramètres de compilation
	 * -default-frame-rate 10
	 *
	 * source : http://code.google.com/p/swfexplorer/
	 *
	 */
	public class Main extends Sprite
	{
		private var oSWFexplorer : SWFExplorer;

		/**
		 * 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 10
		 *
		 */
		private function onReady(event : Event) : void
		{
			this.removeEventListener(Event.ADDED_TO_STAGE, onReady);

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

			// chargement d'un SWF à partir d'un objet SWFExplorer
			oSWFexplorer  = new SWFExplorer();
			oSWFexplorer.addEventListener(SWFExplorerEvent.COMPLETE, onLoadAssetsReady);

			//oSWFexplorer.load(new URLRequest("fonts.swf"));
			oSWFexplorer.load(new URLRequest("eaze-tween.swf"));
		}

		/**
		 * Chargement d'un SWF à partir d'un objet Loader.
		 *
		 */
		private function loadSWF() : void
		{
			var _loader:Loader = new Loader();
			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onSWFLoaded );
			var file:URLRequest =  new URLRequest("fonts.swf");
			_loader.load(file);
		}

		/**
		 * SWF chargé.
		 * Récupération des définitions de classes.
		 *
		 */
		private function onSWFLoaded(event : Event) : void
		{
			MonsterDebugger.trace(this, "onSWFLoaded parse some SWF bytes");
			MonsterDebugger.trace(this, event);

			var libraryBytes : ByteArray = event.target.content.loaderInfo.bytes as ByteArray;
			var definitions:Array = oSWFexplorer.parse(libraryBytes);

			MonsterDebugger.trace(this,  "definitions ");
			// renvoie un tableau contenant les définitions des classes
			MonsterDebugger.trace(this,  definitions );

			// renvoie un tableau contenant les définitions des classes
			MonsterDebugger.trace(this,  oSWFexplorer.getDefinitions() );

			// affiche le nombre de classes
			MonsterDebugger.trace(this, oSWFexplorer.getTotalDefinitions());
		}

		/**
		 * SWF chargé par SWFExplorer.
		 * Récupération des définitions de classes.
		 *
		 */
		private function onLoadAssetsReady(e : SWFExplorerEvent) : void
		{
			oSWFexplorer.removeEventListener(SWFExplorerEvent.COMPLETE, onLoadAssetsReady);

			MonsterDebugger.trace(this, "onLoadAssetsReady");
			MonsterDebugger.trace(this, e);

			// renvoie un tableau contenant les définitions des classes
			MonsterDebugger.trace(this, e.definitions);

			// renvoie un tableau contenant les définitions des classes
			MonsterDebugger.trace(this, e.target.getDefinitions());

			// affiche le nombre de classes
			MonsterDebugger.trace(this, e.target.getTotalDefinitions());

			loadSWF();
		}

	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

package

{

import flash.display.Loader;

import flash.utils.ByteArray;

import org.bytearray.explorer.SWFExplorer;

import flash.net.URLRequest;

import org.bytearray.explorer.events.SWFExplorerEvent;

import flash.events.Event;

import flash.display.Sprite;

import com.demonsters.debugger.MonsterDebugger;

/**

* La classe Main qui étend Sprite.

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

* -default-frame-rate 10

* source : http://code.google.com/p/swfexplorer/

public class Main extends Sprite

{

private var oSWFexplorer : SWFExplorer;

/**

* 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 10

private function onReady(event : Event) : void

{

this.removeEventListener(Event.ADDED_TO_STAGE, onReady);

// Init De MonsterDebugger

MonsterDebugger.initialize(this);

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

// chargement d'un SWF à partir d'un objet SWFExplorer

oSWFexplorer = new SWFExplorer();

oSWFexplorer.addEventListener(SWFExplorerEvent.COMPLETE, onLoadAssetsReady);

//oSWFexplorer.load(new URLRequest("fonts.swf"));

oSWFexplorer.load(new URLRequest("eaze-tween.swf"));

}

/**

* Chargement d'un SWF à partir d'un objet Loader.

private function loadSWF() : void

{

var _loader:Loader = new Loader();

_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onSWFLoaded );

var file:URLRequest = new URLRequest("fonts.swf");

_loader.load(file);

}

/**

* SWF chargé.

* Récupération des définitions de classes.

private function onSWFLoaded(event : Event) : void

{

MonsterDebugger.trace(this, "onSWFLoaded parse some SWF bytes");

MonsterDebugger.trace(this, event);

var libraryBytes : ByteArray = event.target.content.loaderInfo.bytes as ByteArray;

var definitions:Array = oSWFexplorer.parse(libraryBytes);

MonsterDebugger.trace(this, "definitions ");

// renvoie un tableau contenant les définitions des classes

MonsterDebugger.trace(this, definitions );

// renvoie un tableau contenant les définitions des classes

MonsterDebugger.trace(this, oSWFexplorer.getDefinitions() );

// affiche le nombre de classes

MonsterDebugger.trace(this, oSWFexplorer.getTotalDefinitions());

}

/**

* SWF chargé par SWFExplorer.

* Récupération des définitions de classes.

private function onLoadAssetsReady(e : SWFExplorerEvent) : void

{

oSWFexplorer.removeEventListener(SWFExplorerEvent.COMPLETE, onLoadAssetsReady);

MonsterDebugger.trace(this, "onLoadAssetsReady");

MonsterDebugger.trace(this, e);

// renvoie un tableau contenant les définitions des classes

MonsterDebugger.trace(this, e.definitions);

// renvoie un tableau contenant les définitions des classes

MonsterDebugger.trace(this, e.target.getDefinitions());

// affiche le nombre de classes

MonsterDebugger.trace(this, e.target.getTotalDefinitions());

loadSWF();

}

[/codesyntax]

Télécharger le code source du cours AS3

Vous trouverez un exemple de code source utilisant SWFExplorer.

Télécharger “SWFExplorer”

SWFExplorer-exemple.zip – Téléchargé 471 fois – 332,03 Ko

Télécharger la dernière version de SWFExplorer.

Connaissez-vous cette classe SWFExplorer ? L’utilisez-vous dans vos projets flash ?

Partagez vos classes utilitaires dans les commentaires ci-dessous.

Comment effectuer une copie d’écran – screenshot – en Actionscript 3 ?

Commentaires fermés sur Comment effectuer une copie d’écran – screenshot – en Actionscript 3 ?

Ecrit le 30 juin par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Dans certaines applications flash, il possible de personnaliser, par exemple sa voiture, une interface de jeu, des lunettes, vêtements. Et de télécharger le résultat sous forme d’une image jpeg.

Vous vous demandez comment cela est-ce possible ? Comment l’ajouter dans mon application ou jeu flash ?

Thibault Imbert a réalisé une classe actionscript 3 permettant d’implémenter cette fonctionnalité « screenshot » très facilement.

Dans la vidéo ci-dessous, apprenez à utiliser la classe jpeg encoder, couplée avec les composants du Framework AS3 Facile.

Nous allons donc, à partir d’une vidéo, en cours de lecture, créer des copies d’écran (ou screenshots).

Pour ensuite, soit les stocker sur le serveur ou pouvoir les télécharger.

Le principe est identique quelque soit l’application (à partir d’une webcam, un jeu, une boutique…).

Jpeg Encoder

Version démonstration

Ci-dessous, le résultat dans un swf.

Appuyez sur le bouton « Play / Pause » pour lancer la vidéo.

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

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

Télécharger le code source jpeg encoder

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 “jpeg encoder video”

ex-jpeg-encoder-video.zip – Téléchargé 812 fois – 552,11 Ko

Le site des créateurs de ce film sur Half Life.

Téléchargez le Framework AS3 Facile.

La classe jpeg encoder sur ByteArray.org

Montrez-moi vos applications flash qui utilisent jpeg encoder

Je suis curieux de voir vos applications mettant en oeuvre cette fonctionnalité bien pratique.

Postez vos liens dans les commentaires ci-dessous.

Comment créer un jeu – Ticket à Gratter – en Actionscript 3 ?

24 questions

Ecrit le 23 juin par Matthieu
Publié dans le(s) sujet(s) Jeux Flash

Ca y est, vous connaissez les bases essentielles en Actionscript 3. Vous arrivez à créer vos premières applications flash.

Mais vous peinez pour concevoir des jeux flash. Vous ne savez pas comment vous y prendre, vous êtes un peu perdu.

J’étais comme vous, Actionscript 3 possède une multitude de fonctions et de possibilités !

Pour créer des jeux flash, 80% des développeurs débutant se lancent tête baissée, en copiant des codes AS3, à droite, à gauche. Et cela ne fonctionne pas !

Les jeux flash ont des bugguent incompréhensibles et difficilement identifiables pour les corriger.

En appliquant la méthode AS3 Formation, je vous propose, pendant plusieurs cours, de vous montrer en vidéo, la conception de jeu flash de A à Z 😉

C’est parti, pour la programmation d’un jeu très simple…

Ticket à gratter

Un cours vidéo à visionner attentivement.

Version démonstration

Ci-dessous, le résultat dans un swf.

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

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

Téléchargez le code source du Ticket à gratter

Vous trouverez l’ensemble du code source commenté pour vous aider dans la création de votre premier jeu flash.

Télécharger “Ticket à gratter”

jeu-flash-ticket-a-gratter.zip – Téléchargé 1625 fois – 254,78 Ko

Vous pouvez aussi télécharger le code source complet et commenté (avec plusieurs exemples pratiques) du Framework AS3 Facile.

Et vous, quel est le premier jeu flash que vous avez programmé ?

Pour ma part, mon premier jeu flash est un ticket à gratter, en AS2 à l’époque !

Comment avez-vous programmé votre ticket à gratter ? Quelles fonctionnalités avez-vous rajouté ?

Comment utiliser un fichier SWC avec Adobe Flash CS5 ?

Commentaires fermés sur Comment utiliser un fichier SWC avec Adobe Flash CS5 ?

Ecrit le 14 avril par Matthieu
Publié dans le(s) sujet(s) Adobe Flash |Framework AS3 Facile

Dans ce cours vidéo, nous allons apprendre à utiliser les fichiers SWC avec Adobe Flash CS5.

Puis la façon d’utiliser les composants du Framework AS3 Facile dans vos applications flash. Et également, comment utiliser Adobe Flash CS5 comme éditeur ActionScript.

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

Télécharger “Fichier SWC Adobe Flash CS5”

ex-fichier-swc-fla-AS3Facile.zip – Téléchargé 878 fois – 97,52 Ko

Utilisez-vous toujours Adobe Flash pour développer des applications flash ?

Ou peut être un éditeur ActionScript spécifique comme FDT PowerFlasher ?

Postez votre logiciel ActionScript préféré dans les commentaires ci-dessous.

Échanger des données entre PHP / MySQL et Flash / AS3

4 questions

Ecrit le 1 novembre par Matthieu
Publié dans le(s) sujet(s) Adobe Flash

Dans cet article, nous allons apprendre Comment échanger des données entre Flash (AS3) et Php / MySQL.

Il y a plusieurs méthodes, la plus simple et efficace consiste à utiliser le Flash Remoting.

Qu’est ce que le Flash Remoting ?

Le Flash Remoting permet des échanges entre un client (flash) et un serveur (php). De plus, il possède un format de données propre : l’AMF pour Action Message Format.

Le format AMF (format binaire) permet, entre autre, d’échanger des variables typées et optimisées. Effectivement, les informations sont sérialisées puis envoyées au serveur (Php).

Pour simplifier : Flash encode les données en AMF et les transmet au serveur. Pour décoder le paquet reçu, le serveur a besoin d’une passerelle remoting.

Installation d’une passerelle Remoting

Dans notre tutoriel nous utiliserons AmfPhp pour dialoguer entre Flash et Php. Téléchargez la dernière version : amfphp 1.9.zip.

Dézippez le contenu sur votre serveur web, dans le dossier ‘www’ par exemple.

Il y a 2 dossiers et 1 fichier important :

browser : permet de tester vos services Php.
services : contient les Services Php ou classes de communication avec une base de données MySQL.
gateway.php : la passerelle à configurer dans votre fichier ActionScript pour lancer la communication de Flash avec Php.

Ensuite, tapez l’url d’accès la passerelle gateway.php, par exemple : http://www.votre-domaine.com/include/remoting/gateway.php

Un message vous indique que l’installation d’Amfphp est réussie.

Puis vous avez la possibilité de :

consulter la documentation sur le site Amfphp.
lancer le Browser pour tester vos services Php.

Création de la connection entre Flash et Php

Dans votre classe AS3, il suffit de renseigner l’url de la passerelle php (gateway.php). Très simple 🙂

[codesyntax lang= »actionscript3″ title= »addRemoting » bookmarkname= »addRemoting »]

		/**
		 * Création de la passerelle de communication avec php
		 */
		private function addRemoting() : void
		{
			// création d'une connection à un service
			oConnection = new NetConnection ();

			// Connection avec la passerelle pour communiquer avec AMFPHP
			// (avec php et une base de données MySQL par exemple)
			oConnection.connect("http://www.votre-domaine.com/include/remoting/gateway.php");

			/**
			 * Création de l'objet qui permet de communiquer avec votre Service AMFPHP
			 *
			 * @param : fonction appelée en cas de succès de connection à la passerelle AMFPHP
			 * @param : fonction appelée en cas d'échec de connection à la passerelle AMFPHP
			 */
			oRetourPhp = new Responder(succesServeurPhp,echecServeur);
			oRetourMySQL = new Responder(succesServeurMysql,echecServeur);
		}

/**

* Création de la passerelle de communication avec php

private function addRemoting() : void

{

// création d'une connection à un service

oConnection = new NetConnection ();

// Connection avec la passerelle pour communiquer avec AMFPHP

// (avec php et une base de données MySQL par exemple)

oConnection.connect("http://www.votre-domaine.com/include/remoting/gateway.php");

/**

* Création de l'objet qui permet de communiquer avec votre Service AMFPHP

* @param : fonction appelée en cas de succès de connection à la passerelle AMFPHP

* @param : fonction appelée en cas d'échec de connection à la passerelle AMFPHP

oRetourPhp = new Responder(succesServeurPhp,echecServeur);

oRetourMySQL = new Responder(succesServeurMysql,echecServeur);

}

[/codesyntax]

Les classes AS3 suivantes sont utilisées :

import flash.net.NetConnection; Permet d’établir la connection de Flash avec PhP.
import flash.net.Responder; Permet de renseigner à Flash, les méthodes AS3 à appeler dès la réception de la réponse de Php.

Échange de données entre Flash et Php

Le fonctionnement est le suivant : le Flash (en AS3) appelle un Service Php (une classe).

Création du Service Php

Sur votre serveur php, dans le répertoire services, créez un fichier php. Dans notre tutoriel, nous l’appellerons FlashRemoting.php.

Dans le constructeur de la classe php FlashRemonting, renseignez le nom des méthodes accessibles depuis flash.

[codesyntax lang= »php » title= »FlashRemonting.php » bookmarkname= »FlashRemoting.php »]

	/**
	 * @brief Constructeur de la classe. Initialise les proprietes.
	 *
	 */
	public function __construct()
	{
		// permet de recuperer le contenu d'une page du flash en fonction du bouton du menu choisi
		$this-&gt;methodTable = array
		(
			"getDate" =&gt; array
			(
				"description" =&gt; "",
				"access" =&gt; "remote",
				"arguments" =&gt; "array",
				"returns" =&gt; "array"
			)
		);
	}

/**

* @brief Constructeur de la classe. Initialise les proprietes.

public function __construct()

{

// permet de recuperer le contenu d'une page du flash en fonction du bouton du menu choisi

$this->methodTable = array

(

"getDate" => array

(

"description" => "",

"access" => "remote",

"arguments" => "array",

"returns" => "array"

)

);

}

[/codesyntax]

Ensuite, il reste à implémenter votre script php dans la méthode getDate().

getDate() interroge le serveur php pour récupérer sa date tout simplement.

[codesyntax lang= »php » title= »FlashRemoting.php getDate() » bookmarkname= »FlashRemoting.php getDate() »]

	/**
	 * @param -
	 * @return -
	 */
	public function getDate($oMsg)
	{
		$nTimestamp = time(); //Affiche le nombre de secondes écoulées depuis le 1er janvier 1970

		$date = date("d-m-Y");
		$heure = date("H:i:s");
		$sDateFr = $date." ".$heure;

		$aResult = array();
		$aResult["timestamp_php"] = $nTimestamp;
		$aResult["date"] = $sDateFr;
		$aResult["message"] = $oMsg;
		return $aResult;
	}

/**

* @param -

* @return -

public function getDate($oMsg)

{

$nTimestamp = time(); //Affiche le nombre de secondes écoulées depuis le 1er janvier 1970

$date = date("d-m-Y");

$heure = date("H:i:s");

$sDateFr = $date." ".$heure;

$aResult = array();

$aResult["timestamp_php"] = $nTimestamp;

$aResult["date"] = $sDateFr;

$aResult["message"] = $oMsg;

return $aResult;

}

[/codesyntax]

Dans la méthode getDate(), vous remarquerez l’ajout d’un paramètre en entrée.

C’est un objet envoyé par Flash, puis Php le retourne à Flash. C’est un exemple pour vous montrer cette possibilité : le contenu de cet objet peut être ajouté dans une base de données par exemple…

Test du service avec le browser

Une fois votre service Php crée, vous pouvez le tester avec le browser d’Amfphp.

Tapez l’url d’accès la passerelle gateway.php, par exemple : http://www.votre-domaine.com/include/remoting/gateway.php

Et cliquez sur Load the service browser.

amfphp browser

Cette interface en Flash vous permet :

de détecter les erreurs de syntaxe PhP.
d’appeler les méthodes de votre service Php.
d’effectuer des tests de performances de votre serveur Php.

Appel de PhP à partir de Flash

En AS3, vous utilisez l’instance de la classe NetConnection pour appeler votre passerelle Php.

[codesyntax lang= »actionscript3″ title= »appelPhp() » bookmarkname= »appelPhp »]

		private function appelPhp(e:MouseEvent) : void
		{
			// création de l'objet transmit en paramètre à php
			var oInfo:Object = new Object();
			oInfo.nom = "ActionScript-Facile.com";
			oInfo.numero = Math.floor( Math.random()*69 );
			oInfo.timestamp_flash = Math.floor(new Date().getTime()/1000);

			m_textField.htmlText = "Communication avec PHP en cours :)";

			/**
			  * Appel d'une méthode de notre classe PHP.
			  * Localisée dans le fichier services\flashremoting\FlashRemoting.php
			  *
			  * @param : chemin complet d'appel de la méthode php
			  * @param : l'objet qui récupère les réponses de php
			  * @param : paramètre à transmettre à la méthode php
			  */
			oConnection.call("flashremoting.FlashRemoting.getDate", oRetourPhp, oInfo);
			// si tous ce passe bien le serveur répond (succesServeurMysql) sinon appel de la méthode echecServeur...
		}

private function appelPhp(e:MouseEvent) : void

{

// création de l'objet transmit en paramètre à php

var oInfo:Object = new Object();

oInfo.nom = "ActionScript-Facile.com";

oInfo.numero = Math.floor( Math.random()*69 );

oInfo.timestamp_flash = Math.floor(new Date().getTime()/1000);

m_textField.htmlText = "Communication avec PHP en cours :)";

/**

* Appel d'une méthode de notre classe PHP.

* Localisée dans le fichier services\flashremoting\FlashRemoting.php

* @param : chemin complet d'appel de la méthode php

* @param : l'objet qui récupère les réponses de php

* @param : paramètre à transmettre à la méthode php

oConnection.call("flashremoting.FlashRemoting.getDate", oRetourPhp, oInfo);

// si tous ce passe bien le serveur répond (succesServeurMysql) sinon appel de la méthode echecServeur...

}

[/codesyntax]

L’instance de la classe Responder indique à Flash les méthodes à appeler en cas de connection réussie ou d’échec.

Vous remarquerez l’ajout du Logger pour afficher du Debug dans Firefox (très pratique)!

La méthode succesServeurPhp reçoit l’objet directement envoyé par la méthode getDate() de la classe Php FlashRemoting.

[codesyntax lang= »actionscript3″ title= »succesServeurPhp() » bookmarkname= »succesServeurPhp() »]

		private function succesServeurPhp(oResult:Object):void
		{
			// affiche des messages de debug dans firefox
			Logger.debug("Connection à la passerelle AMFPHP réussie!");
			Logger.debug("timestamp_flash : " + oResult.message.timestamp_flash);
			Logger.debug("Date reçue de php : " + oResult.date);
			Logger.debug("timestamp_php : " + oResult.timestamp_php);

			m_textField.htmlText = "Sur le serveur php N°&lt;b&gt;"+oResult.message.numero+" - "
			+ oResult.message.nom+ "&lt;/b&gt;, nous sommes le " + oResult.date +
			".\nLe temps écoulé est de " + oResult.timestamp_php +".";
		}

private function succesServeurPhp(oResult:Object):void

{

// affiche des messages de debug dans firefox

Logger.debug("Connection à la passerelle AMFPHP réussie!");

Logger.debug("timestamp_flash : " + oResult.message.timestamp_flash);

Logger.debug("Date reçue de php : " + oResult.date);

Logger.debug("timestamp_php : " + oResult.timestamp_php);

m_textField.htmlText = "Sur le serveur php N°"+oResult.message.numero+" - "

+ oResult.message.nom+ ", nous sommes le " + oResult.date +

".\nLe temps écoulé est de " + oResult.timestamp_php +".";

}

[/codesyntax]

Echanger des données entre flash

et une base de données MySQL

Sur le même principe, Flash peut communiquer avec une base de données, de type MySQL par exemple.

Dans votre service Php, vous implémentez vos requêtes MySQL, c’est aussi simple que cela!

J’ai ajouté à ce tutoriel la classe Mysql.php. Elle possède quelques fonctionnalités bien sympathiques. Je vous laisse les découvrir par vous même.

La classe Mysql.php est commentée, et avec des exemples d’utilisation.

Création d’un compteur de visite en Flash

Nous allons créer un compteur de visites en Flash.

Le Flash va interroger la base de données Mysql via Php pour mettre à jour et afficher le nombre de visiteurs de l’application.

Tout d’abord, renseignez les données de connection à votre base dans la classe Mysql.php

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

	/**
	 * @brief
	 * @param -
	 */
	public function __construct()
	{
		$this-&gt;aConnect 	= array();
		$this-&gt;aConnect['ip']	= "nom_serveur"; // le serveur
		$this-&gt;aConnect['login']= "login"; // le login
		$this-&gt;aConnect['password'] = "mot_passe"; // mot de passe
		$this-&gt;aConnect['database'] = "nom_base"; // nom de la base de donnee
		$this-&gt;aConnect['port'] = "3306";

	 }

/**

* @brief

* @param -

public function __construct()

{

$this->aConnect = array();

$this->aConnect['ip'] = "nom_serveur"; // le serveur

$this->aConnect['login']= "login"; // le login

$this->aConnect['password'] = "mot_passe"; // mot de passe

$this->aConnect['database'] = "nom_base"; // nom de la base de donnee

$this->aConnect['port'] = "3306";

}

[/codesyntax]

Puis exécutez ces requêtes sql sur votre base de données (via phpmyadmin).

[codesyntax lang= »sql » title= »compteur visite » bookmarkname= »compteur visite »]

--
-- Table structure for table <code>compteur_visite
--

CREATE TABLE <code>compteur_visite</code> (
compteur</code> double NOT NULL default '0',
date</code> date NOT NULL default '0000-00-00',
time</code> int(9) NOT NULL default '0',
duree</code> int(9) NOT NULL default '0',
ip</code> varchar(50) NOT NULL default '0',
  PRIMARY KEY  (<code>ip</code>),
  KEY <code>compteur</code> (<code>compteur</code>,<code>date</code>),
  KEY <code>date</code> (<code>date</code>),
  KEY <code>duree</code> (<code>duree</code>),
  KEY <code>time</code> (<code>time</code>)
) ENGINE=MyISAM;

INSERT INTO <code>compteur_visite</code> (
compteur</code> ,
date</code> ,
time</code> ,
duree</code> ,
ip
)
VALUES (
'0', '0000-00-00', '0', '24', 'compteur'
);

-- Table structure for table <code>compteur_visite

CREATE TABLE <code>compteur_visite</code> (

compteur</code> double NOT NULL default '0',

date</code> date NOT NULL default '0000-00-00',

time</code> int(9) NOT NULL default '0',

duree</code> int(9) NOT NULL default '0',

ip</code> varchar(50) NOT NULL default '0',

PRIMARY KEY (<code>ip</code>),

KEY <code>compteur</code> (<code>compteur</code>,<code>date</code>),

KEY <code>date</code> (<code>date</code>),

KEY <code>duree</code> (<code>duree</code>),

KEY <code>time</code> (<code>time</code>)

) ENGINE=MyISAM;

INSERT INTO <code>compteur_visite</code> (

compteur</code> ,

date</code> ,

time</code> ,

duree</code> ,

)

VALUES (

'0', '0000-00-00', '0', '24', 'compteur'

);

[/codesyntax]

Ensuite, ajoutez un nouvel accès dans le constructeur de votre service php. Ainsi que la création de la connection à la base de données.

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

	/**
	 * @brief Constructeur de la classe. Initialise les proprietes.
	 *
	 */
	public function __construct()
	{
		// permet de recuperer le contenu d'une page du flash en fonction du bouton du menu choisi
		$this-&gt;methodTable = array
		(
			"getDate" =&gt; array
			(
				"description" =&gt; "",
				"access" =&gt; "remote",
				"arguments" =&gt; "array",
				"returns" =&gt; "array"
			),

			"getVisitCount" =&gt; array
			(
				"description" =&gt; "",
				"access" =&gt; "remote",
				"arguments" =&gt; "array",
				"returns" =&gt; "array"
			)
		);

		// ajout des classes php
		require_once("Mysql.php");

		// connection à la base de données mysql
		$this-&gt;oSqlConnection = new Mysql();
	}

/**

* @brief Constructeur de la classe. Initialise les proprietes.

public function __construct()

{

// permet de recuperer le contenu d'une page du flash en fonction du bouton du menu choisi

$this->methodTable = array

(

"getDate" => array

(

"description" => "",

"access" => "remote",

"arguments" => "array",

"returns" => "array"

"getVisitCount" => array

(

"description" => "",

"access" => "remote",

"arguments" => "array",

"returns" => "array"

)

);

// ajout des classes php

require_once("Mysql.php");

// connection à la base de données mysql

$this->oSqlConnection = new Mysql();

}

[/codesyntax]

Ensuite, vous implémentez les différentes requêtes sql nécessaires dans votre service Php.

[codesyntax lang= »php » title= »getVisitCount() » bookmarkname= »getVisitCount() »]

	/**
	 * @brief Récupère le nombre de visiteur sur le site actuellement, met à jour le compteur également.
	 * @param -
	 * @return -
	 */
	public function getVisitCount()
	{
		/* init des variables */
		$n_nbVisiteur = 0;
		$n_nbVisiteurToday = 0;
		$n_nbVisiteurNow = 0;

		//on recupere l adresse ip du visiteur
		if($_SERVER)
		{
			if($_SERVER['HTTP_X_FORWARDED_FOR'])
				$sIpAdress = $_SERVER['HTTP_X_FORWARDED_FOR'];
			elseif($_SERVER['HTTP_CLIENT_IP'])
				$sIpAdress = $_SERVER['HTTP_CLIENT_IP'];
			else
				$sIpAdress = $_SERVER['REMOTE_ADDR'];
		}
		else
		{
			if(getenv('HTTP_X_FORWARDED_FOR'))
				$sIpAdress = getenv('HTTP_X_FORWARDED_FOR');
			elseif(getenv('HTTP_CLIENT_IP'))
				$sIpAdress = getenv('HTTP_CLIENT_IP');
			else
				$sIpAdress = getenv('REMOTE_ADDR');
		}

		$sDate = date("Y-m-d");
		//on convertit l heure courante en minute d une journee
		$sTime = (date("H") * 60) + date("i");

		$s_sqlSelect = "SELECT compteur, date, time, duree FROM compteur_visite WHERE ip = 'compteur' LIMIT 1";
		$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlSelect);
		$o_result = $this-&gt;oSqlConnection-&gt;getObject($o_sqlResult);
		$n_nbVisiteur = $o_result-&gt;compteur;

		$iTimeConnexionRef = $o_result-&gt;time; //temps de connexion de reference
		$iDurationRef = $o_result-&gt;duree; //duree de renouvellement de reference
		$sDateBDD = $o_result-&gt;date;

		//on test si on a changé de jour
		if ( $sDate!=$sDateBDD )
		{
			$s_sqlDelete = "DELETE FROM compteur_visite WHERE ip!='compteur'";//on vide toutes les addresses ip enregistrées dans la table lors du changement de jour
			$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlDelete);
			$s_sqlUpdate = "UPDATE compteur_visite SET date='$sDate'";//on met a jour la nouvelle date dans la table
			$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlUpdate);
		}

		//on verifie l adresse ip du visiteur et aussi son heure de passage
		$s_sqlSelect = "SELECT compteur, date, time, duree FROM compteur_visite WHERE ip='$sIpAdress' LIMIT 1";

		// excecute la requete sql
		$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlSelect);
		// recupere le resultat renvoyee par la requete
		$o_result = $this-&gt;oSqlConnection-&gt;getObject($o_sqlResult);

		if( $o_result-&gt;compteur == NULL)
		{
			//on enregistre l adresse ip si elle est inconnu et on incremente le compteur
			$s_sqlInsert = "INSERT INTO compteur_visite (ip,time,duree) VALUES ('$sIpAdress','$sTime','$sTime')";
			$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlInsert);
			$n_nbVisiteur +=1;
			$s_sqlUpdate = "UPDATE compteur_visite SET compteur=$n_nbVisiteur WHERE ip='compteur' LIMIT 1";
			$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlUpdate);
		}
		else
		{
			// si l'adresse ip est connu alors verifie si sa connexion precedente est superieur a la durée
			// de renouvellement et si son heure de passage precedente incremente ou pas les connectés
			$sTimeVisit = $o_result-&gt;time;//on recupere l'heure de sa precedente connexion de notre connecté
			$sDurationVisit = $o_result-&gt;duree;//on recupere l'heure de sa precedente connexion de notre connecté

			// on verifie si sa derniere connexion ne date pas de plus que la duree de reference
			if( $iDurationRef*60 &lt; ( $sTime - ($sDurationVisit) ) )
			{
				//si la duree de reference est depassé alors notre connecté est comptablisé
				//comme nouvelle visite et on met a jour sa nouvelle heure de passage
				$s_sqlUpdate = "UPDATE compteur_visite SET time=$sTime, duree=$sTime WHERE ip='$sIpAdress' LIMIT 1";
				$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlUpdate);

				//on cree une ligne fictive pour pouvoir le comptabiliser dans les connectés de jour
				$sIpAdressV = $sIpAdress.".".$n_nbVisiteur;
				//echo"sIpAdressV : ".$sIpAdressV;

				$s_sqlInsert ="INSERT INTO compteur_visite (ip,time,duree) VALUES ('$sIpAdressV','$sTime','$sTime')";
				$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlInsert);

				//et on increment le compteur de visite
				$n_nbVisiteur +=1;
				$s_sqlUpdate = "UPDATE compteur_visite SET compteur=$n_nbVisiteur WHERE ip='compteur' LIMIT 1";
				$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlUpdate);
			}
			else
			{
				//on met a jour son heure de passage si elle est superieure a t
				if ( $sTime &gt; ( ($sTimeVisit)-$iTimeConnexionRef ) )
				{
					$s_sqlUpdate="UPDATE compteur_visite SET time=$sTime WHERE ip='$sIpAdress' LIMIT 1";
					$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlUpdate);
				}
			}

		}

		// on compte le nb de connecté de la journée
		$s_sqlSelect = "SELECT ip FROM compteur_visite WHERE ip!='compteur'";
		// recupere le resultat de la requete SELECT
		$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlSelect);
		// retourne le nombre d'enregistrement renvoyee par la requete SELECT
		$n_nbVisiteurToday = $this-&gt;oSqlConnection-&gt;getNumRows();

		// on compte le nb de connecté
		$sTimeToday = $sTime - $iTimeConnexionRef;
		$s_sqlSelect = "SELECT ip FROM compteur_visite WHERE time &gt;= $sTimeToday AND ip!='compteur' ";
		// recupere le resultat de la requete SELECT
		$o_sqlResult = $this-&gt;oSqlConnection-&gt;query($s_sqlSelect);
		// retourne le nombre d'enregistrement renvoyee par la requete SELECT
		$n_nbVisiteurNow = $this-&gt;oSqlConnection-&gt;getNumRows();

		$aResult = array();
		$aResult["total"] = $n_nbVisiteur;
		$aResult["today"] = $n_nbVisiteurToday;
		$aResult["now"] = $n_nbVisiteurNow;
		return $aResult;
	}

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

/**

* @brief Récupère le nombre de visiteur sur le site actuellement, met à jour le compteur également.

* @param -

* @return -

public function getVisitCount()

{

/* init des variables */

$n_nbVisiteur = 0;

$n_nbVisiteurToday = 0;

$n_nbVisiteurNow = 0;

//on recupere l adresse ip du visiteur

if($_SERVER)

{

if($_SERVER['HTTP_X_FORWARDED_FOR'])

$sIpAdress = $_SERVER['HTTP_X_FORWARDED_FOR'];

elseif($_SERVER['HTTP_CLIENT_IP'])

$sIpAdress = $_SERVER['HTTP_CLIENT_IP'];

else

$sIpAdress = $_SERVER['REMOTE_ADDR'];

}

else

{

if(getenv('HTTP_X_FORWARDED_FOR'))

$sIpAdress = getenv('HTTP_X_FORWARDED_FOR');

elseif(getenv('HTTP_CLIENT_IP'))

$sIpAdress = getenv('HTTP_CLIENT_IP');

else

$sIpAdress = getenv('REMOTE_ADDR');

}

$sDate = date("Y-m-d");

//on convertit l heure courante en minute d une journee

$sTime = (date("H") * 60) + date("i");

$s_sqlSelect = "SELECT compteur, date, time, duree FROM compteur_visite WHERE ip = 'compteur' LIMIT 1";

$o_sqlResult = $this->oSqlConnection->query($s_sqlSelect);

$o_result = $this->oSqlConnection->getObject($o_sqlResult);

$n_nbVisiteur = $o_result->compteur;

$iTimeConnexionRef = $o_result->time; //temps de connexion de reference

$iDurationRef = $o_result->duree; //duree de renouvellement de reference

$sDateBDD = $o_result->date;

//on test si on a changé de jour

if ( $sDate!=$sDateBDD )

{

$s_sqlDelete = "DELETE FROM compteur_visite WHERE ip!='compteur'";//on vide toutes les addresses ip enregistrées dans la table lors du changement de jour

$o_sqlResult = $this->oSqlConnection->query($s_sqlDelete);

$s_sqlUpdate = "UPDATE compteur_visite SET date='$sDate'";//on met a jour la nouvelle date dans la table

$o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate);

}

//on verifie l adresse ip du visiteur et aussi son heure de passage

$s_sqlSelect = "SELECT compteur, date, time, duree FROM compteur_visite WHERE ip='$sIpAdress' LIMIT 1";

// excecute la requete sql

$o_sqlResult = $this->oSqlConnection->query($s_sqlSelect);

// recupere le resultat renvoyee par la requete

$o_result = $this->oSqlConnection->getObject($o_sqlResult);

if( $o_result->compteur == NULL)

{

//on enregistre l adresse ip si elle est inconnu et on incremente le compteur

$s_sqlInsert = "INSERT INTO compteur_visite (ip,time,duree) VALUES ('$sIpAdress','$sTime','$sTime')";

$o_sqlResult = $this->oSqlConnection->query($s_sqlInsert);

$n_nbVisiteur +=1;

$s_sqlUpdate = "UPDATE compteur_visite SET compteur=$n_nbVisiteur WHERE ip='compteur' LIMIT 1";

$o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate);

}

else

{

// si l'adresse ip est connu alors verifie si sa connexion precedente est superieur a la durée

// de renouvellement et si son heure de passage precedente incremente ou pas les connectés

$sTimeVisit = $o_result->time;//on recupere l'heure de sa precedente connexion de notre connecté

$sDurationVisit = $o_result->duree;//on recupere l'heure de sa precedente connexion de notre connecté

// on verifie si sa derniere connexion ne date pas de plus que la duree de reference

if( $iDurationRef*60 < ( $sTime - ($sDurationVisit) ) )

{

//si la duree de reference est depassé alors notre connecté est comptablisé

//comme nouvelle visite et on met a jour sa nouvelle heure de passage

$s_sqlUpdate = "UPDATE compteur_visite SET time=$sTime, duree=$sTime WHERE ip='$sIpAdress' LIMIT 1";

$o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate);

//on cree une ligne fictive pour pouvoir le comptabiliser dans les connectés de jour

$sIpAdressV = $sIpAdress.".".$n_nbVisiteur;

//echo"sIpAdressV : ".$sIpAdressV;

$s_sqlInsert ="INSERT INTO compteur_visite (ip,time,duree) VALUES ('$sIpAdressV','$sTime','$sTime')";

$o_sqlResult = $this->oSqlConnection->query($s_sqlInsert);

//et on increment le compteur de visite

$n_nbVisiteur +=1;

$s_sqlUpdate = "UPDATE compteur_visite SET compteur=$n_nbVisiteur WHERE ip='compteur' LIMIT 1";

$o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate);

}

else

{

//on met a jour son heure de passage si elle est superieure a t

if ( $sTime > ( ($sTimeVisit)-$iTimeConnexionRef ) )

{

$s_sqlUpdate="UPDATE compteur_visite SET time=$sTime WHERE ip='$sIpAdress' LIMIT 1";

$o_sqlResult = $this->oSqlConnection->query($s_sqlUpdate);

}

// on compte le nb de connecté de la journée

$s_sqlSelect = "SELECT ip FROM compteur_visite WHERE ip!='compteur'";

// recupere le resultat de la requete SELECT

$o_sqlResult = $this->oSqlConnection->query($s_sqlSelect);

// retourne le nombre d'enregistrement renvoyee par la requete SELECT

$n_nbVisiteurToday = $this->oSqlConnection->getNumRows();

// on compte le nb de connecté

$sTimeToday = $sTime - $iTimeConnexionRef;

$s_sqlSelect = "SELECT ip FROM compteur_visite WHERE time >= $sTimeToday AND ip!='compteur' ";

// recupere le resultat de la requete SELECT

$o_sqlResult = $this->oSqlConnection->query($s_sqlSelect);

// retourne le nombre d'enregistrement renvoyee par la requete SELECT

$n_nbVisiteurNow = $this->oSqlConnection->getNumRows();

$aResult = array();

$aResult["total"] = $n_nbVisiteur;

$aResult["today"] = $n_nbVisiteurToday;

$aResult["now"] = $n_nbVisiteurNow;

return $aResult;

}

[/codesyntax]

Voici le code AS3 pour demander à Mysql les informations du compteur de visites.

[codesyntax lang= »actionscript3″ title= »appelMysql() » bookmarkname= »appelMysql() »]

		private function appelMysql(e:MouseEvent) : void
		{
			// création de l'objet transmit en paramètre à php
			var oInfo:Object = new Object();
			oInfo.nom = "ActionScript-Facile.com";
			oInfo.numero = Math.floor( Math.random()*69 );
			oInfo.timestamp_flash = Math.floor(new Date().getTime()/1000);

			m_textField.htmlText = "Communication avec MySQL en cours :)";

			/**
			  * Appel d'une méthode de notre classe PHP.
			  * Localisée dans le fichier services\flashremoting\FlashRemoting.php
			  *
			  * @param : chemin complet d'appel de la méthode php
			  * @param : l'objet qui récupère les réponses de php
			  * @param : paramètre à transmettre à la méthode php
			  */
			oConnection.call("flashremoting.FlashRemoting.getVisitCount", oRetourMySQL, oInfo);
			// si tous ce passe bien le serveur répond (succesServeurMysql) sinon appel de la méthode echecServeur...
		}

private function appelMysql(e:MouseEvent) : void

{

// création de l'objet transmit en paramètre à php

var oInfo:Object = new Object();

oInfo.nom = "ActionScript-Facile.com";

oInfo.numero = Math.floor( Math.random()*69 );

oInfo.timestamp_flash = Math.floor(new Date().getTime()/1000);

m_textField.htmlText = "Communication avec MySQL en cours :)";

/**

* Appel d'une méthode de notre classe PHP.

* Localisée dans le fichier services\flashremoting\FlashRemoting.php

* @param : chemin complet d'appel de la méthode php

* @param : l'objet qui récupère les réponses de php

* @param : paramètre à transmettre à la méthode php

oConnection.call("flashremoting.FlashRemoting.getVisitCount", oRetourMySQL, oInfo);

// si tous ce passe bien le serveur répond (succesServeurMysql) sinon appel de la méthode echecServeur...

}

[/codesyntax]

Et pour terminer, la méthode AS3 appelée par le Php. Nous utilisons les informations de la base de données, à travers un objet envoyé par Php.

[codesyntax lang= »actionscript3″ title= »succesServeurMysql() » bookmarkname= »succesServeurMysql() »]

		/**
		 * Appelée dans le cas d'une communication réussie avec mysql
		 */
		private function succesServeurMysql(oResult:Object):void
		{
			// affiche des messages de debug dans firefox
			Logger.debug("Connection à la passerelle AMFPHP réussie!");
			Logger.debug("Total des visites : &lt;b&gt;"+oResult.now);
			Logger.debug("Nombre de visiteur aujourd'hui : " + oResult.today);
			Logger.debug("Nombre de connectés : " + oResult.now);

			m_textField.htmlText = "Total des visites : &lt;b&gt;"+oResult.total+"&lt;/b&gt;\n" +
			"Nombre de visiteur aujourd'hui : &lt;b&gt;" + oResult.today +
			"&lt;/b&gt;\nNombre de connectés : &lt;b&gt;" + oResult.now +"&lt;/b&gt;.";
		}

/**

* Appelée dans le cas d'une communication réussie avec mysql

private function succesServeurMysql(oResult:Object):void

{

// affiche des messages de debug dans firefox

Logger.debug("Connection à la passerelle AMFPHP réussie!");

Logger.debug("Total des visites : "+oResult.now);

Logger.debug("Nombre de visiteur aujourd'hui : " + oResult.today);

Logger.debug("Nombre de connectés : " + oResult.now);

m_textField.htmlText = "Total des visites : "+oResult.total+"\n" +

"Nombre de visiteur aujourd'hui : " + oResult.today +

"\nNombre de connectés : " + oResult.now +".";

}

[/codesyntax]

Conclusion

Et voici le résultat avec les Composants Button du Framework AS3 Facile.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2010/10/remoting_exemple.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/10/remoting_exemple.swf

Sources Commentées

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

Le fichier zip contient également le logiciel AMFPHP en version 1.9 😉

Vous pouvez télécharger le fichier zip :

Télécharger “Flash Remoting AS3 / Php / MySQL (AMFPHP 1.9 inclus)”

flash_remoting_as3_facile.zip – Téléchargé 1426 fois – 532,83 Ko

Quelle technique préférez-vous utiliser pour échanger des données entre Php et Flash ?

Partagez-les ci-dessous avec l’ensemble des Développeurs ActionScript. Il y a des solutions plus rapides à mettre en place avec les classes AS3 :

URLVariables.
URLRequest.
URLLoader.

Comment créer une infos bulle ou ToolTip en AS3 ?

4 questions

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

Dans ce tutoriel, nous allons découvrir la création ActionScript du Composant AS3 : ToolTip.

Un ToolTip est une bulle d’information, elle apparait généralement au dessus d’un bouton, d’un formulaire…

I – Cahier Des Charges Fonctionnel du ToolTip

Un ToolTip est un UIComponent composé :

d’un background ( arrière-plan )
d’un champ texte de type UITextField.

Comme nous l’avons appris dans les tutoriels précédents, il suffit de passer en paramètre une instance de la classe ToolTip au setter tooltip de la classe de base UIComponent.

La méthode show() (du composant) sera appelée lorsque l’UIComponent en question sera survolé par l’utilisateur.

Le composant ToolTip possède les fonctionnalités suivantes :

Personnalisation du texte ainsi que de son formatage.
Personnalisation de l’arrière-plan de l’infobulle.
Apparition après un délai défini de l’infobulle ( exprimé en millisecondes ).

II – Cahier Des Charges Techniques du ToolTip

Le Cahier Des Charges Technique du composant ToolTip est relativement simple.

Personnalisation du texte ainsi que de son formatage.

Pour cela, nous coderons un getter qui renverra une référence au champ texte de type UITextField.

Personnalisation de l’arrière-plan de l’infobulle.

Comme d’habitude, nous allons overrider la méthode de base applySkin de la classe UIComponent.

Apparition après un délai défini de l’infobulle ( exprimé en millisecondes ).

Nous allons overrider la méthode de base show de la classe UIComponent. Et ensuite, nous lancerons la méthode parente après le délai défini dans un setTimeOut.

Nous laisserons également la possibilité à l’utilisateur de modifier ce délai à tout moment à l’aide d’un getter / setter.

Conclusion

Ce Tutoriel conclut la série vous expliquant la création du Framework de Composants AS3 Facile.

Ci-dessous, le Composant AS3 ToolTip en action.

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

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

Évolutions des fonctionnalités

Je vous propose de laisser vagabonder votre imagination et de créer des Skins pour le composant ToolTip. Étonnez les Développeurs d’ActionScript-Facile.

Vous pouvez également ajouter un effet Tween pour gérer l’apparition du ToolTip, un effet alpha, lui ajouter une ombre…

Sources commentées

ToolTipExample.as
com.actionscriptfacile.ui.tooltip.ToolTip.as
com.as3facileexemple.skin.classic.DefaultToolTipSkin.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 ToolTip Framework AS3 Facile”

component_tooltip_framework_actionscript-facile.zip – Téléchargé 1242 fois – 76,31 Ko

Quels sont les prochains tutoriels que vous souhaitez sur ActionScript-Facile ?

Voulez-vous des exemples d’utilisation des Composants AS3 Facile ? Des fonctionnalités supplémentaires, des nouveaux Composants ?

Dites moi cela tout simplement dans les commentaires juste en dessous.

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

package
{
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.utils.UIMargins;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.text.UITextField;
	import com.actionscriptfacile.ui.tooltip.Tooltip;
	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;
	import com.as3facileexemple.skin.classic.DefaultToolTipSkin;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.Font;

	/**
	 *
	 * On reprend le même exemple que pour l'UITextField en ajoutant simplement
	 * un ToolTip à la combobox
	 *
	 * @author Matthieu
	 */
	public class ToolTipExample extends Sprite
	{

		protected var m_comboFonts:ComboBox;
		protected var m_textField:UITextField;

		public function ToolTipExample()
		{
			/**
			 * On construit la combobox
			 */
			m_comboFonts = new ComboBox();
			m_comboFonts.applySkin( new DefaultComboBoxSkin() );

			// on écoute les changements qui interviennent dans la combobox
			m_comboFonts.addEventListener(Event.CHANGE, changeHandler );
			m_comboFonts.resize( 300, 70 );
			m_comboFonts.componentsHeight = 25;// hauteur des éléments de la CombobBox
			m_comboFonts.margins = new UIMargins( 2, 2, 2, 2 );// ajout des marges au contenu de la liste

			/**
			 * On construit son tooltip
			 */
			m_comboFonts.tooltip = new Tooltip();
			m_comboFonts.tooltip.applySkin( new DefaultToolTipSkin() );

			m_comboFonts.tooltip.label = 'Choisissez une Police de Caractère';
			m_comboFonts.tooltip.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte
			m_comboFonts.tooltip.labelField.changeFormat("size", 12);// changement de la taille de la police du texte
			m_comboFonts.tooltip.labelField.changeFormat("font", "Arial");// changement de la police du texte
			m_comboFonts.tooltip.resize( 210, 30 );

			// on ajoute tous les noms de polices autorisées comme élément de la combobox
			var fonts:Array = Font.enumerateFonts( true );

			var boxElement:ComboBoxElement;

			for each ( var font:Font in fonts )
			{
				boxElement = m_comboFonts.addElement( font.fontName, font.fontName );
				boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte
				boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			}

			/**
			 * Définition du format du Titre de la ComboBox.
			 *
			 * Remarquez l'utilisation du paramètre true pour définir le format par défaut de notre Titre
			 */
			m_comboFonts.currentElement.labelField.changeFormat("font", "Arial",-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF,-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("size", 15,-1,-1,true);
			m_comboFonts.currentElement.labelField.changeFormat("bold", true,-1,-1,true);
			m_comboFonts.currentElement.labelField.alignCenter();

			/**
			 * On construit un UITextField
			 */
			m_textField = new UITextField();
			m_textField.text = 'Enjoy Your Life :)';

			m_textField.x = m_textField.y = 5;
			m_textField.width = m_textField.maxWidth = 300;
			m_textField.height  = m_textField.maxHeight = 30;
			m_textField.changeFormat("size", 20);// changement de la taille de la police du texte
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur

			m_comboFonts.y = m_textField.y + m_textField.height;
			m_comboFonts.x = 20;

			m_comboFonts.tooltip.y = m_comboFonts.y - 55;
			m_comboFonts.tooltip.x = m_comboFonts.x + 200;

			addChild( m_textField );
			addChild( m_comboFonts );
		}

		/**
		 * Fonction servant à écouter le changement de police au sein de la combobox.
		 * On applique la police à l'UITextField que l'on a crée et placé sur la
		 * scène.
		 *
		 * @param	e	Evenement de type Event.CHANGE
		 */
		private function changeHandler(e:Event):void
		{
			m_textField.font = m_comboFonts.currentLabel;
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur
		}
	}

}

100

101

102

103

104

105

106

107

108

109

110

111

112

package

{

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

import com.actionscriptfacile.ui.utils.UIMargins;

import com.actionscriptfacile.ui.combo.ComboBox;

import com.actionscriptfacile.ui.text.UITextField;

import com.actionscriptfacile.ui.tooltip.Tooltip;

import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;

import com.as3facileexemple.skin.classic.DefaultToolTipSkin;

import flash.display.Sprite;

import flash.events.Event;

import flash.text.Font;

/**

* On reprend le même exemple que pour l'UITextField en ajoutant simplement

* un ToolTip à la combobox

* @author Matthieu

public class ToolTipExample extends Sprite

{

protected var m_comboFonts:ComboBox;

protected var m_textField:UITextField;

public function ToolTipExample()

{

/**

* On construit la combobox

m_comboFonts = new ComboBox();

m_comboFonts.applySkin( new DefaultComboBoxSkin() );

// on écoute les changements qui interviennent dans la combobox

m_comboFonts.addEventListener(Event.CHANGE, changeHandler );

m_comboFonts.resize( 300, 70 );

m_comboFonts.componentsHeight = 25;// hauteur des éléments de la CombobBox

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

/**

* On construit son tooltip

m_comboFonts.tooltip = new Tooltip();

m_comboFonts.tooltip.applySkin( new DefaultToolTipSkin() );

m_comboFonts.tooltip.label = 'Choisissez une Police de Caractère';

m_comboFonts.tooltip.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte

m_comboFonts.tooltip.labelField.changeFormat("size", 12);// changement de la taille de la police du texte

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

m_comboFonts.tooltip.resize( 210, 30 );

// on ajoute tous les noms de polices autorisées comme élément de la combobox

var fonts:Array = Font.enumerateFonts( true );

var boxElement:ComboBoxElement;

for each ( var font:Font in fonts )

{

boxElement = m_comboFonts.addElement( font.fontName, font.fontName );

boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte

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

}

/**

* Définition du format du Titre de la ComboBox.

* Remarquez l'utilisation du paramètre true pour définir le format par défaut de notre Titre

m_comboFonts.currentElement.labelField.changeFormat("font", "Arial",-1,-1,true);

m_comboFonts.currentElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF,-1,-1,true);

m_comboFonts.currentElement.labelField.changeFormat("size", 15,-1,-1,true);

m_comboFonts.currentElement.labelField.changeFormat("bold", true,-1,-1,true);

m_comboFonts.currentElement.labelField.alignCenter();

/**

* On construit un UITextField

m_textField = new UITextField();

m_textField.text = 'Enjoy Your Life :)';

m_textField.x = m_textField.y = 5;

m_textField.width = m_textField.maxWidth = 300;

m_textField.height = m_textField.maxHeight = 30;

m_textField.changeFormat("size", 20);// changement de la taille de la police du texte

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

m_comboFonts.y = m_textField.y + m_textField.height;

m_comboFonts.x = 20;

m_comboFonts.tooltip.y = m_comboFonts.y - 55;

m_comboFonts.tooltip.x = m_comboFonts.x + 200;

addChild( m_textField );

addChild( m_comboFonts );

}

/**

* Fonction servant à écouter le changement de police au sein de la combobox.

* On applique la police à l'UITextField que l'on a crée et placé sur la

* scène.

* @param e Evenement de type Event.CHANGE

private function changeHandler(e:Event):void

{

m_textField.font = m_comboFonts.currentLabel;

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

}

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.tooltip.Tooltip.as » bookmarkname= »com.actionscriptfacile.ui.tooltip.Tooltip.as »]

package  com.actionscriptfacile.ui.tooltip
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.text.UITextField;
	import com.actionscriptfacile.ui.UIComponent;

	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.utils.clearTimeout;
	import flash.utils.setTimeout;

	/**
	 * La classe Tooltip est une infobulle comme on peut en voir dans n'importe quel logiciel graphique.
	 * Elle sert à donner une information à l'utilisateur sur la fonction d'un objet graphique.
	 *
	 * @author Matthieu
	 */
	public class Tooltip extends UIComponent
	{

		// constante de skin ( arrière-plan )
		static public const TOOLTIP_BACKGROUND_SKIN:String = 'TOOLTIP_BACKGROUND_SKIN';

		private var m_background:DisplayObject; // l'arrière plan de l'infobulle
		private var m_texte:UITextField; // le champ texte de l'infobulle
		private var m_appearTimeout:Number; // le nombre qui va nous servir à réceptionner le setTimeOut
		private var m_appearTime:Number; // le temps ( en ms ) que va mettre l'infobulle à apparaître

		public function Tooltip()
		{
			/*
			 * on crée une méthode init pour gagner des ressources,
			 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
			 * pas optimisé à la compilation,
			 * on met donc toutes nos instructions dans une méthode privée init
			 *
			 */
			init();
		}

		/**
		 * Initialise proprement les différents éléments du composant
		 *
		 */
		private function init():void
		{
			/**
			 * On définit le temps d'apparition à 1 seconde , on crée l'arrière-plan ( vide par défaut )
			 * ainsi que le champ texte puis on les ajoute à la displayList du composant.
			 */
			m_appearTime = m_appearTimeout = 300;
			mouseChildren = false;// désactive les évènements souris des enfants

			m_background = new Sprite();
			m_texte = new UITextField();
			m_texte.alignCenter();

			addChild( m_background );
			addChild( m_texte );

			// on place le champ texte à 5 pixels histoire de laisser une marge
			m_texte.x = m_texte.y = 5;
		}

		/**
		 * Définit / récupère le texte de l'infobulle
		 */
		public function set label( p_text:String ):void
		{
			// on définit le texte puis on resize avec une marge de 10 pixels en hauteur + 10 pixels en largeur
			m_texte.text = p_text;
			resize( m_texte.textWidth + 10, m_texte.textHeight + 10 );
		}
		public function get label():String { return m_texte.text; }

		// récupère la référence UITextField du champ text de l'infobulle
		public function get labelField():UITextField { return m_texte; }

		/**
		 * Récupère / définit le temps d'apparition de l'infobulle
		 */
		public function get appearTime():Number { return m_appearTime; }
		public function set appearTime(value:Number):void { m_appearTime = (value &lt; 0 ) ? 0 : value; }

		/**
		 * Applique une skin à un composant de type ToolTip
		 *
		 * @param	p_skin	Objet implémentant l'interface ISkin
		 */
		override public function applySkin(p_skin:ISkin):void
		{

			var definition:Class;

			definition = p_skin.getSkin( TOOLTIP_BACKGROUND_SKIN ) as Class;

			// si on a réussi à récupérer une définition pour l'arrière-plan alors ...
			if ( definition != null )
				m_background = new definition(); // on l'applique

			// on rajoute le texte et l'arrière-plan à la displayList
			addChild( m_background );
			addChild( m_texte );
		}

		/**
		 * Redimensionne intelligemment un composant de type ToolTip
		 *
		 * @param	p_width		nouvelle largeur du composant
		 * @param	p_height	nouvelle hauteur du composant
		 */
		override public function resize( p_width:Number, p_height:Number ):void
		{
			// la hauteur maximale du ToolTip est la hauteur - 5 pixels
			m_texte.maxHeight = p_height - 5;

			// même chose pour la largeur, de cette manière on préserve la marge de 5 pixels que l'on s'est laissé.
			m_texte.maxWidth = p_width - 5;

			// la hauteur et la largeur du background sont égales aux dimensions passées en paramètre.
			m_background.width = m_texte.width = p_width;
			m_background.height = m_texte.height = p_height;
		}

		/**
		 * Ajoute le composant à la display list de son lastParent après que le temps d'apparition
		 * soit écoulé
		 */
		override public function show():void
		{
			// on se charge d'appeller le fonction show() parente au bout de m_appearTime ms.
			m_appearTimeout = setTimeout( super.show, m_appearTime );
		}

		/**
		 * Enlève le composant de la displayList de son lastParent
		 */
		override public function hide():void
		{
			// on tue le setTimeOut
			clearTimeout( m_appearTimeout );

			// et on appelle la fonction hide() parente
			super.hide();
		}

		/**
		 * Détruit proprement un composant de type ToolTip
		 */
		override public function destroy():void
		{
			// on tue proprement le timeout
			clearTimeout( m_appearTimeout );

			// on détruit proprement le texte
			m_texte.destroy();

			// on enlève l'arrière-plan de la displayList
			removeChild( m_background );

			// on passe les références à null.
			m_texte = null;
			m_background = null;

			// et on appelle la fonction destroy() 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

package com.actionscriptfacile.ui.tooltip

{

import com.actionscriptfacile.skin.ISkin;

import com.actionscriptfacile.ui.text.UITextField;

import com.actionscriptfacile.ui.UIComponent;

import flash.display.DisplayObject;

import flash.display.Sprite;

import flash.utils.clearTimeout;

import flash.utils.setTimeout;

/**

* La classe Tooltip est une infobulle comme on peut en voir dans n'importe quel logiciel graphique.

* Elle sert à donner une information à l'utilisateur sur la fonction d'un objet graphique.

* @author Matthieu

public class Tooltip extends UIComponent

{

// constante de skin ( arrière-plan )

static public const TOOLTIP_BACKGROUND_SKIN:String = 'TOOLTIP_BACKGROUND_SKIN';

private var m_background:DisplayObject; // l'arrière plan de l'infobulle

private var m_texte:UITextField; // le champ texte de l'infobulle

private var m_appearTimeout:Number; // le nombre qui va nous servir à réceptionner le setTimeOut

private var m_appearTime:Number; // le temps ( en ms ) que va mettre l'infobulle à apparaître

public function Tooltip()

{

* on crée une méthode init pour gagner des ressources,

* en effet en AS3 tout ce qui se trouvre dans le constructeur n'est

* pas optimisé à la compilation,

* on met donc toutes nos instructions dans une méthode privée init

init();

}

/**

* Initialise proprement les différents éléments du composant

private function init():void

{

/**

* On définit le temps d'apparition à 1 seconde , on crée l'arrière-plan ( vide par défaut )

* ainsi que le champ texte puis on les ajoute à la displayList du composant.

m_appearTime = m_appearTimeout = 300;

mouseChildren = false;// désactive les évènements souris des enfants

m_background = new Sprite();

m_texte = new UITextField();

m_texte.alignCenter();

addChild( m_background );

addChild( m_texte );

// on place le champ texte à 5 pixels histoire de laisser une marge

m_texte.x = m_texte.y = 5;

}

/**

* Définit / récupère le texte de l'infobulle

public function set label( p_text:String ):void

{

// on définit le texte puis on resize avec une marge de 10 pixels en hauteur + 10 pixels en largeur

m_texte.text = p_text;

resize( m_texte.textWidth + 10, m_texte.textHeight + 10 );

}

public function get label():String { return m_texte.text; }

// récupère la référence UITextField du champ text de l'infobulle

public function get labelField():UITextField { return m_texte; }

/**

* Récupère / définit le temps d'apparition de l'infobulle

public function get appearTime():Number { return m_appearTime; }

public function set appearTime(value:Number):void { m_appearTime = (value < 0 ) ? 0 : value; }

/**

* Applique une skin à un composant de type ToolTip

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

override public function applySkin(p_skin:ISkin):void

{

var definition:Class;

definition = p_skin.getSkin( TOOLTIP_BACKGROUND_SKIN ) as Class;

// si on a réussi à récupérer une définition pour l'arrière-plan alors ...

if ( definition != null )

m_background = new definition(); // on l'applique

// on rajoute le texte et l'arrière-plan à la displayList

addChild( m_background );

addChild( m_texte );

}

/**

* Redimensionne intelligemment un composant de type ToolTip

* @param p_width nouvelle largeur du composant

* @param p_height nouvelle hauteur du composant

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

{

// la hauteur maximale du ToolTip est la hauteur - 5 pixels

m_texte.maxHeight = p_height - 5;

// même chose pour la largeur, de cette manière on préserve la marge de 5 pixels que l'on s'est laissé.

m_texte.maxWidth = p_width - 5;

// la hauteur et la largeur du background sont égales aux dimensions passées en paramètre.

m_background.width = m_texte.width = p_width;

m_background.height = m_texte.height = p_height;

}

/**

* Ajoute le composant à la display list de son lastParent après que le temps d'apparition

* soit écoulé

override public function show():void

{

// on se charge d'appeller le fonction show() parente au bout de m_appearTime ms.

m_appearTimeout = setTimeout( super.show, m_appearTime );

}

/**

* Enlève le composant de la displayList de son lastParent

override public function hide():void

{

// on tue le setTimeOut

clearTimeout( m_appearTimeout );

// et on appelle la fonction hide() parente

super.hide();

}

/**

* Détruit proprement un composant de type ToolTip

override public function destroy():void

{

// on tue proprement le timeout

clearTimeout( m_appearTimeout );

// on détruit proprement le texte

m_texte.destroy();

// on enlève l'arrière-plan de la displayList

removeChild( m_background );

// on passe les références à null.

m_texte = null;

m_background = null;

// et on appelle la fonction destroy() parente

super.destroy();

}

[/codesyntax]

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

package com.as3facileexemple.skin.classic
{
	import com.actionscriptfacile.skin.Skin;
	import com.actionscriptfacile.ui.tooltip.Tooltip;

	// 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.tooltip.TooltipBackgroundSkin;

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

		public function DefaultToolTipSkin()
		{
			setSkin( Tooltip.TOOLTIP_BACKGROUND_SKIN, TooltipBackgroundSkin );
		}

	}

}

package com.as3facileexemple.skin.classic

{

import com.actionscriptfacile.skin.Skin;

import com.actionscriptfacile.ui.tooltip.Tooltip;

// 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.tooltip.TooltipBackgroundSkin;

/**

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

* @author Matthieu

public class DefaultToolTipSkin extends Skin

{

public function DefaultToolTipSkin()

{

setSkin( Tooltip.TOOLTIP_BACKGROUND_SKIN, TooltipBackgroundSkin );

}

[/codesyntax]

Comment utiliser du texte dynamique en AS3 avec TextField ?

22 questions

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

Pour travailler avec du texte dans Flash, il est nécessaire d‘utiliser une multitude de classes différentes !

En effet, les classes ( TextFieldAutoSize, TextFieldAlign, TextFieldType, TextFormat, Font, TextField etc… sont utiles pour définir la mise en forme d’un champ texte.

Dans ce tutoriel, nous allons créer le Composant AS3 TextField pour simplifier la manipulation d’un champ texte.

Ce composant étendra tout simplement la classe de base TextField et ajoutera des fonctionnalités très intéressantes !

I – Cahier Des Charges Fonctionnel du TextField

Comme d’habitude, nous passons à la rédaction du CDCF (Cahier Des Charges Fonctionnel).

La liste des fonctionnalités pour un champ de type UITextField est déjà disponible de manière native en ActionScript.

La seule chose qui change, c’est la façon de les implémenter.

Nous passons donc directement à la création du Cahier Des Charges Techniques.

II – Cahier Des Charges Techniques du TextField

Pour cela, nous allons créer la classe UITextField. Nous lui ajoutons des méthodes supplémentaires. Celles-ci nous permettront de formater le texte sans passer par la classe TextFormat ni les autres classes annexes.

Voici l’ensemble des méthodes de la classe UITextField :

Méthode changeFormat : elle permet de définir le formatage du texte ou d’un groupe de caractères à l’aide d’une seule et unique méthode.
Méthode changeLetterFormat : cette méthode permet de définir le format d’une seule lettre.
Méthode getLetterFormat : elle permet de récupérer le format d’une seule lettre.
Getter/ Setter appelé font : pour changer et récupérer la police de caractère. L’embarquement des polices sera géré automatiquement par le setter qui déterminera si la police est une police système ou non.

Méthode convertToInput : pour convertir le texte en champ de saisie.
Méthode convertToDynamic : pour convertir le texte en champ dynamique.
Nous implémentons également des méthodes pour changer l’alignement et le redimensionnement automatique du texte : alignCenter, alignRight, alignLeft, alignJustify, autoSizeRight, autoSizeLeft, autoSizeCenter, autoSizeNone. Des méthodes qui nous simplifient l’utilisation des classes TextFieldAutoSize et TextFieldAlign.

Getters / Setters maxWidth et maxHeight : permettent de définir une largeur et une hauteur maximale.
Méthode destroy : et enfin nous implémentons une méthode qui permet de détruire proprement notre composant. Elle ressemble de très près à la méthode destroy de la classe UIComponent.

Conclusion

Nous disposons maintenant d’un champ texte avec une mise à jour de son formatage grandement facilitée.

A l’utilisation, le composant UITextField se révèle être une véritable bénédiction pour manipuler un champ texte.

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

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

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 TextField, vous trouverez ci-dessous un exemple d’utilisation.

A vous de jouer !

TextField avec des fonts dynamiques

Je vous propose d’utiliser des fonts (polices) dynamiques pour vos textes.

Amusez-vous en utilisant des polices originales : découvrez un vaste choix de polices gratuites sur dafont. Elles ne sont généralement pas disponibles dans les polices de bases des systèmes d’exploitations (Windows, Linux, MAC). Il est donc nécessaire de les charger dans le Flash Player.

La lecture de cet article : Utiliser des polices partagées dynamiquement en AS3, devrait grandement vous faciliter la tâche!

L’Editeur ActionScript FDT 4.0 simplifie énormément la création des swf de polices partagées : Téléchargez le guide d’utilisation de l’Editeur ActionScript FDT.

Sources commentées

com.actionscriptfacile.ui.text.UITextField.as
UITextFieldExample.as

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

Vous pouvez télécharger le fichier zip :

Télécharger “Component TextField Framework actionscript-facile”

component_textfield_framework_actionscript-facile.zip – Téléchargé 1253 fois – 74,15 Ko

Et vous, comment utilisez-vous le texte / TextField en AS3 ?

Quelles classes avez-vous développé pour simplifier la création des champs textes dynamiques avec Flash ?

Je serais ravis de voir vos différentes implémentations. Utilisez les commentaires juste en dessous pour partager votre code.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.text.UITextField.as » bookmarkname= »com.actionscriptfacile.ui.text.UITextField.as « ]

package  com.actionscriptfacile.ui.text
{
	import flash.text.Font;
	import flash.text.FontType;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	import flash.utils.Dictionary;
	import flash.utils.getDefinitionByName;

	/**
	 * La classe UITextField est une extension de la classe flash.text.TextField de base.
	 * Elle inclut quelques fonctionnalités qui permettent de gérer plus facilement la mise
	 * en forme d'un champ texte.
	 *
	 * @author Matthieu
	 */
	public class UITextField extends TextField
	{

		protected static var m_allowedFonts:Dictionary; // Une liste des différentes polices de caractères autorisées.

		protected var m_currentFont:String; // Le nom de la police de caractère utilisée actuellement
		protected var m_maxWidth:Number; // la largeur maximale du champ texte
		protected var m_maxHeight:Number; // la hauteur maximale du champ texte

		public function UITextField()
		{
			super();
			/*
			 * on crée une méthode init pour gagner des ressources,
			 * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est
			 * pas optimisé à la compilation,
			 * on met donc toutes nos instructions dans une méthode privée init
			 *
			 */
			init();
		}

		/**
		 * Initialise proprement les différents éléments du composant
		 *
		 */
		private function init():void
		{
			// si le tableau de fonts n'est pas encore initialisé alors ...
			if ( m_allowedFonts == null )
			{
				m_allowedFonts = new Dictionary(); // on le crée
				var fonts:Array = Font.enumerateFonts( true ); // on récupère toutes les polices utilisables
				var max:int = fonts.length - 1;

				/**
				 * On boucle sur toutes les polices et on les ajoute à la liste des typos autorisées
				 */
				for ( ; max &gt; -1; max-- )
				{
					m_allowedFonts[Font( fonts[max] ).fontName ] = fonts[max];
				}

				// on définit une police par défaut
				m_currentFont = Font( fonts[ 0 ] ).fontName;
			}

			// puis on définit une hauteur et une largeur maximale théorique.
			m_maxHeight = m_maxWidth = 500;
		}

		/**
		 * Cette fonction sert à changer le format d'un caractère
		 *
		 * @param	p_letterIndex	Index du caractère dont on veut changer le formatage
		 * @param	p_propertyName	La nom de la propriété de formatage que l'on veut changer
		 * @param	p_value			La valeur de la propriété de formatage
		 */
		public function changeLetterFormat( p_letterIndex:int, p_propertyName:String, p_value:* ):void
		{
			changeFormat( p_propertyName, p_value, p_letterIndex, p_letterIndex + 1, false );
		}

		/**
		 * Cette fonction sert à récupérer le format d'un caractère
		 *
		 * @param	p_letterIndex	Index du caractère dont on veut récupérer le formatage
		 * @return	Un objet de type TextFormat
		 */
		public function getLetterFormat( p_letterIndex:int ):TextFormat
		{
			return getTextFormat( p_letterIndex, p_letterIndex );
		}

		 /**
		  * Cette méthode permet un accès direct aux propriétés de l'objet TextFormat du TextField.
		  * Elle a pour but de simplifier la mise à jour graphique d'un champ texte par le biais
		  * d'un appel à une seule méthode.
		  * http://help.adobe.com/fr_FR/AS3LCR/Flash_10.0/flash/text/TextFormat.html
		  *
		  * @param	p_propertyName nom de la propriété à changer @see flash.text.TextFormat
		  * @param	p_value valeur de la propriété
		  * @param	p_startIndex index de départ à partir duquel les changements opéreront dans le texte.
		  * @param	p_endIndex index de fin.
		  */
		public function changeFormat( p_propertyName:String, p_value:*, p_startIndex:int = -1, p_endIndex:int = -1, p_isDefault:Boolean = false ):void
		{
			// si la longueur du champ texte est inférieur à l'index maximal des caractères demandés alors on arrête tout
			if ( text.length &lt; p_endIndex )
				return;

			// on récupère le format des caractères compris entre p_startIndex et p_endIndex
			var format:TextFormat = getTextFormat( p_startIndex, p_endIndex );

			// si le textformat possède la propriété p_propertyName
			if ( format.hasOwnProperty( p_propertyName ) )
			{
				// alors on définit la nouvelle valeur de la propriété en question
				format[ p_propertyName ] = p_value;
			}

			// si on a définit le paramètre p_isDefault à true
			if ( p_isDefault )
			{
				// alors le format devient le format par défaut
				defaultTextFormat = format;
			}

			// enfin, on applique le format au champ texte pour les caractères spécifiés.
			setTextFormat( format, p_startIndex, p_endIndex );
		}

		/**
		 * Convertir le champ texte en champ de saisie
		 */
		public function convertToInput():void { type = TextFieldType.INPUT; }

		/**
		 * Convertir le champ texte en champ dynamique
		 */
		public function convertToDynamic():void { type = TextFieldType.DYNAMIC; }

		/**
		 * Aligne le champ texte par le centre
		 */
		public function alignCenter():void { changeFormat( 'align', TextFormatAlign.CENTER ); }

		/**
		 * Aligne le champ texte en mode justifié
		 */
		public function alignJustify():void { changeFormat( 'align', TextFormatAlign.JUSTIFY ); }

		/**
		 * Aligne le champ texte par la gauche
		 */
		public function alignLeft():void { changeFormat( 'align', TextFormatAlign.LEFT ); }

		/**
		 * Aligne le champ texte par la droite
		 */
		public function alignRight():void { changeFormat( 'align', TextFormatAlign.RIGHT ); }

		/**
		 * Redimensionne automatiquement le champ texte par le centre
		 */
		public function autoSizeLeft():void { autoSize = TextFieldAutoSize.LEFT; };

		/**
		 * Précise que le champ texte ne doit plus se redimensionner automatiquement
		 */
		public function autoSizeNone():void { autoSize = TextFieldAutoSize.NONE; };

		/**
		 * Redimensionne automatiquement le champ texte par la droite
		 */
		public function autoSizeRight():void { autoSize = TextFieldAutoSize.RIGHT; };

		/**
		 * Redimensionne automatiquement le champ texte par la gauche
		 */
		public function autoSizeCenter():void { autoSize = TextFieldAutoSize.CENTER; };

		/**
		 * Définit la nouvelle police de caractère utilisée pour ce champ texte.
		 * Si la police ne fait pas partie des polices autorisées, le système va tenter
		 * de la retrouver. En cas d'échec la police ne sera pas changée, dans le cas contraire
		 * la nouvelle police sera utilisée et ajoutée à la liste des polices autorisées.
		 */
		public function set font( p_font:String ):void
		{

			var fontDefinition:Class;

			if ( m_allowedFonts[p_font] == null || // si la police n'est pas autorisée alors ...
				Font( m_allowedFonts[p_font] ).fontType != FontType.DEVICE // ou qu'il ne s'agit pas d'une typo système
			)
			{
				try
				{
					// on tente de récupérer sa définition
					fontDefinition = getDefinitionByName( p_font ) as Class;

					// on l'enregistre auprès du flash player
					Font.registerFont( fontDefinition );

					// et on l'ajoute à la liste des typos autorisées
					m_allowedFonts[ p_font ] = new fontDefinition() as Font;
				}
				catch ( e:Error )
				{
					// dans le cas ou l'on n'est pas arrivé à récupérer la définition de la classe on arrête tout
					return;
				}

			}

			// si il s'agit d'une police du système alors emebedFonts = false sinon embedFonts = true
			embedFonts = ( Font( m_allowedFonts[p_font] ).fontType != FontType.DEVICE );

			// on redéfinit la font utilisée
			m_currentFont = p_font;

			// et on applique la nouvelle police de caractère au format
			changeFormat( 'font', p_font );
		}

		/**
		 * Récupère le nom de la police utilisée pour ce champ texte
		 */
		public function get font():String { return m_currentFont; }

		/**
		 * Récupère / définit la valeur de la largeur maximale autorisée pour ce champ texte
		 */
		public function get maxWidth():Number { return m_maxWidth; }
		public function set maxWidth(value:Number):void { m_maxWidth = value; }

		/**
		 * Récupère / définit la valeur de la hauteur maximale autorisée pour ce champ texte
		 */
		public function get maxHeight():Number { return m_maxHeight; }
		public function set maxHeight(value:Number):void { m_maxHeight = value; }

		/**
		 * Définit la largeur / hauteur du champ texte
		 */
		override public function set width( p_width:Number ):void { super.width = ( p_width &gt; m_maxWidth ) ? m_maxWidth : p_width; }
		override public function set height( p_height:Number ):void { super.height = ( p_height &gt; m_maxHeight ) ? m_maxHeight : p_height; }

		/**
		 * Détruit proprement un composant de type UITextField
		 */
		public function destroy():void
		{
			// la police de caractère est passée à null.
			m_currentFont = null;

			// on enlève le composant de la displayList de son parent
			if ( parent &amp;&amp; parent.contains( this ) )
			{
				parent.removeChild( this );
			}

			delete this;
		}

	}

}

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

package com.actionscriptfacile.ui.text

{

import flash.text.Font;

import flash.text.FontType;

import flash.text.TextField;

import flash.text.TextFieldAutoSize;

import flash.text.TextFieldType;

import flash.text.TextFormat;

import flash.text.TextFormatAlign;

import flash.utils.Dictionary;

import flash.utils.getDefinitionByName;

/**

* La classe UITextField est une extension de la classe flash.text.TextField de base.

* Elle inclut quelques fonctionnalités qui permettent de gérer plus facilement la mise

* en forme d'un champ texte.

* @author Matthieu

public class UITextField extends TextField

{

protected static var m_allowedFonts:Dictionary; // Une liste des différentes polices de caractères autorisées.

protected var m_currentFont:String; // Le nom de la police de caractère utilisée actuellement

protected var m_maxWidth:Number; // la largeur maximale du champ texte

protected var m_maxHeight:Number; // la hauteur maximale du champ texte

public function UITextField()

{

super();

* on crée une méthode init pour gagner des ressources,

* en effet en AS3 tout ce qui se trouvre dans le constructeur n'est

* pas optimisé à la compilation,

* on met donc toutes nos instructions dans une méthode privée init

init();

}

/**

* Initialise proprement les différents éléments du composant

private function init():void

{

// si le tableau de fonts n'est pas encore initialisé alors ...

if ( m_allowedFonts == null )

{

m_allowedFonts = new Dictionary(); // on le crée

var fonts:Array = Font.enumerateFonts( true ); // on récupère toutes les polices utilisables

var max:int = fonts.length - 1;

/**

* On boucle sur toutes les polices et on les ajoute à la liste des typos autorisées

for ( ; max > -1; max-- )

{

m_allowedFonts[Font( fonts[max] ).fontName ] = fonts[max];

}

// on définit une police par défaut

m_currentFont = Font( fonts[ 0 ] ).fontName;

}

// puis on définit une hauteur et une largeur maximale théorique.

m_maxHeight = m_maxWidth = 500;

}

/**

* Cette fonction sert à changer le format d'un caractère

* @param p_letterIndex Index du caractère dont on veut changer le formatage

* @param p_propertyName La nom de la propriété de formatage que l'on veut changer

* @param p_value La valeur de la propriété de formatage

public function changeLetterFormat( p_letterIndex:int, p_propertyName:String, p_value:* ):void

{

changeFormat( p_propertyName, p_value, p_letterIndex, p_letterIndex + 1, false );

}

/**

* Cette fonction sert à récupérer le format d'un caractère

* @param p_letterIndex Index du caractère dont on veut récupérer le formatage

* @return Un objet de type TextFormat

public function getLetterFormat( p_letterIndex:int ):TextFormat

{

return getTextFormat( p_letterIndex, p_letterIndex );

}

/**

* Cette méthode permet un accès direct aux propriétés de l'objet TextFormat du TextField.

* Elle a pour but de simplifier la mise à jour graphique d'un champ texte par le biais

* d'un appel à une seule méthode.

* http://help.adobe.com/fr_FR/AS3LCR/Flash_10.0/flash/text/TextFormat.html

* @param p_propertyName nom de la propriété à changer @see flash.text.TextFormat

* @param p_value valeur de la propriété

* @param p_startIndex index de départ à partir duquel les changements opéreront dans le texte.

* @param p_endIndex index de fin.

public function changeFormat( p_propertyName:String, p_value:*, p_startIndex:int = -1, p_endIndex:int = -1, p_isDefault:Boolean = false ):void

{

// si la longueur du champ texte est inférieur à l'index maximal des caractères demandés alors on arrête tout

if ( text.length < p_endIndex )

return;

// on récupère le format des caractères compris entre p_startIndex et p_endIndex

var format:TextFormat = getTextFormat( p_startIndex, p_endIndex );

// si le textformat possède la propriété p_propertyName

if ( format.hasOwnProperty( p_propertyName ) )

{

// alors on définit la nouvelle valeur de la propriété en question

format[ p_propertyName ] = p_value;

}

// si on a définit le paramètre p_isDefault à true

if ( p_isDefault )

{

// alors le format devient le format par défaut

defaultTextFormat = format;

}

// enfin, on applique le format au champ texte pour les caractères spécifiés.

setTextFormat( format, p_startIndex, p_endIndex );

}

/**

* Convertir le champ texte en champ de saisie

public function convertToInput():void { type = TextFieldType.INPUT; }

/**

* Convertir le champ texte en champ dynamique

public function convertToDynamic():void { type = TextFieldType.DYNAMIC; }

/**

* Aligne le champ texte par le centre

public function alignCenter():void { changeFormat( 'align', TextFormatAlign.CENTER ); }

/**

* Aligne le champ texte en mode justifié

public function alignJustify():void { changeFormat( 'align', TextFormatAlign.JUSTIFY ); }

/**

* Aligne le champ texte par la gauche

public function alignLeft():void { changeFormat( 'align', TextFormatAlign.LEFT ); }

/**

* Aligne le champ texte par la droite

public function alignRight():void { changeFormat( 'align', TextFormatAlign.RIGHT ); }

/**

* Redimensionne automatiquement le champ texte par le centre

public function autoSizeLeft():void { autoSize = TextFieldAutoSize.LEFT; };

/**

* Précise que le champ texte ne doit plus se redimensionner automatiquement

public function autoSizeNone():void { autoSize = TextFieldAutoSize.NONE; };

/**

* Redimensionne automatiquement le champ texte par la droite

public function autoSizeRight():void { autoSize = TextFieldAutoSize.RIGHT; };

/**

* Redimensionne automatiquement le champ texte par la gauche

public function autoSizeCenter():void { autoSize = TextFieldAutoSize.CENTER; };

/**

* Définit la nouvelle police de caractère utilisée pour ce champ texte.

* Si la police ne fait pas partie des polices autorisées, le système va tenter

* de la retrouver. En cas d'échec la police ne sera pas changée, dans le cas contraire

* la nouvelle police sera utilisée et ajoutée à la liste des polices autorisées.

public function set font( p_font:String ):void

{

var fontDefinition:Class;

if ( m_allowedFonts[p_font] == null || // si la police n'est pas autorisée alors ...

Font( m_allowedFonts[p_font] ).fontType != FontType.DEVICE // ou qu'il ne s'agit pas d'une typo système

)

{

try

{

// on tente de récupérer sa définition

fontDefinition = getDefinitionByName( p_font ) as Class;

// on l'enregistre auprès du flash player

Font.registerFont( fontDefinition );

// et on l'ajoute à la liste des typos autorisées

m_allowedFonts[ p_font ] = new fontDefinition() as Font;

}

catch ( e:Error )

{

// dans le cas ou l'on n'est pas arrivé à récupérer la définition de la classe on arrête tout

return;

}

// si il s'agit d'une police du système alors emebedFonts = false sinon embedFonts = true

embedFonts = ( Font( m_allowedFonts[p_font] ).fontType != FontType.DEVICE );

// on redéfinit la font utilisée

m_currentFont = p_font;

// et on applique la nouvelle police de caractère au format

changeFormat( 'font', p_font );

}

/**

* Récupère le nom de la police utilisée pour ce champ texte

public function get font():String { return m_currentFont; }

/**

* Récupère / définit la valeur de la largeur maximale autorisée pour ce champ texte

public function get maxWidth():Number { return m_maxWidth; }

public function set maxWidth(value:Number):void { m_maxWidth = value; }

/**

* Récupère / définit la valeur de la hauteur maximale autorisée pour ce champ texte

public function get maxHeight():Number { return m_maxHeight; }

public function set maxHeight(value:Number):void { m_maxHeight = value; }

/**

* Définit la largeur / hauteur du champ texte

override public function set width( p_width:Number ):void { super.width = ( p_width > m_maxWidth ) ? m_maxWidth : p_width; }

override public function set height( p_height:Number ):void { super.height = ( p_height > m_maxHeight ) ? m_maxHeight : p_height; }

/**

* Détruit proprement un composant de type UITextField

public function destroy():void

{

// la police de caractère est passée à null.

m_currentFont = null;

// on enlève le composant de la displayList de son parent

if ( parent && parent.contains( this ) )

{

parent.removeChild( this );

}

delete this;

}

[/codesyntax]

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

package
{
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.text.UITextField;

	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.text.Font;

	/**
	 * Exemple d'utilisation du composant UITextField
	 *
	 * @author Matthieu
	 */
	public class UITextFieldExample extends Sprite
	{

		protected var m_comboFonts:ComboBox;
		protected var m_textField:UITextField;

		public function UITextFieldExample()
		{

			/**
			 * On construit la combobox
			 */
			m_comboFonts = new ComboBox();
			m_comboFonts.applySkin( new DefaultComboBoxSkin() );

			// on écoute les changements qui interviennent dans la combobox
			m_comboFonts.addEventListener(Event.CHANGE, changeHandler );
			m_comboFonts.resize( 300, 100 );
			m_comboFonts.componentsHeight = 25;

			// on ajoute tous les noms de polices autorisées comme élément de la combobox
			var fonts:Array = Font.enumerateFonts( true );

			var boxElement:ComboBoxElement;

			for each ( var font:Font in fonts )
			{
				boxElement = m_comboFonts.addElement( font.fontName, font.fontName );
				boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte
				boxElement.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			}

			/**
			 * On construit un UITextField
			 */
			m_textField = new UITextField();
			m_textField.text = 'Enjoy :)';

			m_textField.x = m_textField.y = 5;
			m_textField.width = m_textField.maxWidth = 300;
			m_textField.height  = m_textField.maxHeight = 30;

			m_comboFonts.y = m_textField.y + m_textField.height + 20;
			m_comboFonts.x = 5;

			addChild( m_comboFonts );
			addChild( m_textField );
		}

		/**
		 * Fonction servant à écouter le changement de police au sein de la combobox.
		 * On applique la police à l'UITextField que l'on a crée et placé sur la
		 * scène.
		 *
		 * @param	e	Evenement de type Event.CHANGE
		 */
		private function changeHandler(e:Event):void
		{
			m_textField.font = m_comboFonts.currentLabel;
		}

	}

}

package

{

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

import com.actionscriptfacile.ui.combo.ComboBox;

import com.actionscriptfacile.ui.text.UITextField;

import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;

import flash.display.Sprite;

import flash.events.Event;

import flash.text.Font;

/**

* Exemple d'utilisation du composant UITextField

* @author Matthieu

public class UITextFieldExample extends Sprite

{

protected var m_comboFonts:ComboBox;

protected var m_textField:UITextField;

public function UITextFieldExample()

{

/**

* On construit la combobox

m_comboFonts = new ComboBox();

m_comboFonts.applySkin( new DefaultComboBoxSkin() );

// on écoute les changements qui interviennent dans la combobox

m_comboFonts.addEventListener(Event.CHANGE, changeHandler );

m_comboFonts.resize( 300, 100 );

m_comboFonts.componentsHeight = 25;

// on ajoute tous les noms de polices autorisées comme élément de la combobox

var fonts:Array = Font.enumerateFonts( true );

var boxElement:ComboBoxElement;

for each ( var font:Font in fonts )

{

boxElement = m_comboFonts.addElement( font.fontName, font.fontName );

boxElement.labelField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur du texte

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

}

/**

* On construit un UITextField

m_textField = new UITextField();

m_textField.text = 'Enjoy :)';

m_textField.x = m_textField.y = 5;

m_textField.width = m_textField.maxWidth = 300;

m_textField.height = m_textField.maxHeight = 30;

m_comboFonts.y = m_textField.y + m_textField.height + 20;

m_comboFonts.x = 5;

addChild( m_comboFonts );

addChild( m_textField );

}

/**

* Fonction servant à écouter le changement de police au sein de la combobox.

* On applique la police à l'UITextField que l'on a crée et placé sur la

* scène.

* @param e Evenement de type Event.CHANGE

private function changeHandler(e:Event):void

{

m_textField.font = m_comboFonts.currentLabel;

}

[/codesyntax]

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é 1309 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 : bibliothèque composants

Cours ActionScript 3 ‘bibliothèque composants’

SWFExplorer

Exemple de code AS3 SWFExplorer

Télécharger le code source du cours AS3

Connaissez-vous cette classe SWFExplorer ? L’utilisez-vous dans vos projets flash ?

Jpeg Encoder

Version démonstration

Télécharger le code source jpeg encoder

Montrez-moi vos applications flash qui utilisent jpeg encoder

Ticket à gratter

Version démonstration

Téléchargez le code source du Ticket à gratter

Et vous, quel est le premier jeu flash que vous avez programmé ?

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

Utilisez-vous toujours Adobe Flash pour développer des applications flash ?

Qu’est ce que le Flash Remoting ?

Installation d’une passerelle Remoting

Création de la connection entre Flash et Php

Échange de données entre Flash et Php

Création du Service Php

Test du service avec le browser

Appel de PhP à partir de Flash

Echanger des données entre flash

et une base de données MySQL

Création d’un compteur de visite en Flash

Conclusion

Sources Commentées

Quelle technique préférez-vous utiliser pour échanger des données entre Php et Flash ?

I – Cahier Des Charges Fonctionnel du ToolTip

II – Cahier Des Charges Techniques du ToolTip

Conclusion

Évolutions des fonctionnalités

Sources commentées

Quels sont les prochains tutoriels que vous souhaitez sur ActionScript-Facile ?

I – Cahier Des Charges Fonctionnel du TextField

II – Cahier Des Charges Techniques du TextField

Conclusion

Évolutions des fonctionnalités

TextField avec des fonts dynamiques

Sources commentées

Et vous, comment utilisez-vous le texte / TextField en AS3 ?

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