Sujets sur : application

Cours ActionScript 3 ‘application’

Comment debugger son code actionscript 3 avec Flash ?

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

Dans les articles précédents, vous avez découvert les outils pour programmer en actionscript 3. Vous connaissez également les bases de programmation AS3.

Vous concevez des applications flash de plus en plus évoluées 😉

Mais comme la majorité des développeurs (moi y compris), vous rencontrez des bugs difficiles à localiser et corriger !

Et chaque fois, vous passez des heures et des heures pour trouver ce fameux bug, qui est en fait une erreur d’inattention : l’erreur bête en somme.

En procédant à tâtons pour corriger vos applications, vous perdez un temps considérable.

Ce qu’il vous manque, c’est un outil efficace pour vous aider à « tracker » les bugs beaucoup plus rapidement.

Dans le cours vidéo de cette semaine, je vous propose de découvrir un de ces outils. Vous allez adorez 😉

Voici ce que je vais vous apprendre :

Pourquoi utiliser Monster Debugger pour le debug de vos jeux flash.
Comment installer Monster Debugger pour commencer le debug de votre code AS3.
Comment effectuer du debug en live directement dans les navigateurs Firefox et Google Chrome.
Comment debugger une application en ligne d’une façon totalement transparente pour vos visiteurs.

A la fin de cette formation, vous serez capable de trouver et corriger rapidement les bugs de vos applications flash, quelles soient en ligne ou sur le bureau (Adobe AIR).

Exemple d’application avec le debug

Ci-dessous, une démonstration de l’intégration du Monster Debugger.

Lancez Monster Debugger, puis rechargez cette page.

Et amusez-vous à changer les paramètres du swf !

https://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/main-base.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/main-base.swf

Téléchargez le code source debug AS3

Vous trouverez l’ensemble du code source commenté pour ce cours Actionscript.

Télécharger “Debug AS3 avec Monster Debugger” ex-debug-monster-debugger.zip – Téléchargé 1033 fois – 49,97 Ko

Le site Monster Debugger pour télécharger et installer ce logiciel Adobe AIR.

Et vous, quel logiciels utilisez-vous pour debugger votre code Actionscript 3 ?

Partagez vos logiciels de debug dans les commentaires ci-dessous.

Les 2 bases essentielles à maitriser en programmation Actionscript 3

1 question

Ecrit le 20 juin par Matthieu
Publié dans le(s) sujet(s) Cours AS3

Vous venez de découvrir la programmation Actionscript 3. Sur le web, vous avez consulté plusieurs applications et jeux flash qui vous scotchent devant votre écran. Et vous voulez programmer les mêmes !

Vous avez donc commencé à créer vos premiers swf.

Mais vous peinez à organiser correctement votre code. Vous ne comprenez pas le concept de programmation orienté objet, ni la stratégie de diffusion d’évènements propre à l’AS3.

C’est normal, c’est le problème majeur rencontré par les débutants en programmation AS3. Vous ne savez pas par où commencer votre apprentissage.

Et tout cela vous semble peu important. Erreur !

En ne connaissant pas ces bases essentielles en Actionscript 3, vous passez à côté du minimum requis pour commencer à programmer des applications et jeux vidéos en flash !

Je vais vous expliquer précisément toutes les bases de la programmation Actionscript.

Voici ce je vais vous apprendre :

Comment organiser un projet flash avec les notions de packages, interfaces, fonctions…
Vous allez apprendre toutes les caractéristiques possibles d’un objet et comment les paramétrer correctement.
Vous connaitrez la notion de display list et comment afficher vos interfaces graphiques.
Et quels sont les caractéristiques d’un langage objet.
Comment créer et utiliser des objets, en fonction de vos applications et les utiliser efficacement.
Pourquoi les évènements sont si importants en AS3.
Et comment mettre en œuvre la diffusion d’évènements dans vos applications flash.

Bref, il s’agit de vous aider à acquérir les bases essentielles de la programmation en Actionscript 3.

Et de vous rendre accessible les notions orientée objet, diffusion d’évènements, package, extends…

En fait, c’est beaucoup plus simple qu’il n’y parait !

A la fin de cette formation, vous constaterez par vous même les résultats et vous saurez exactement comment utiliser ces notions pour concevoir vos premières applications flash.

Le modèle évènementiel en Actionscript 3

La diffusion d’évènements permet d’informer en temps réel de l’état de vos objets, d’une interface, d’une action de l’utilisateur…

C’est à dire, en fonction du type d’évènement reçu, votre application se met à jour, lance un calcul, enregistre une donnée, et bien d’autres possibilités.

Et tout cela est simplifié grâce à l’utilisation des évènements, c’est un des piliers de la programmation Actionscript 3.

Vous trouverez ci-dessous un exemple avec un évènement simple : la souris. Chaque fois que l’utilisateur bouge le curseur de la souris, le champ texte se met à jour avec les coordonnées de celle-ci. Effectivement, un évènement est diffusé en temps réel, l’application flash se met donc à jour instantanément.

La programmation orientée objet

Un objet représente un concept, une idée ou un objet du monde physique. Par exemple : une voiture, une personne ou encore un restaurant.

Un objet possède une structure interne, un comportement et des informations propres.

De plus, il sait communiquer avec d’autres objets. La programmation orienté objet consiste à représenter ces objets et leurs relations.

La communication entre les objets permet de réaliser les fonctionnalités attendues, de programmer des applications.

Ci-dessous, un exemple dans lequel nous utilisons un objet Voiture.

Cet objet est caractérisé par :

son modèle.
son état.
son type (citadine, monospace, espace, course…).
son prix.

Et voici le résultat des 2 exemples dans un swf :

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

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

Téléchargez le code source POO AS3

Vous trouverez l’ensemble du code source commenté pour ce cours Actionscript.

Télécharger “Programmation Orientée Objets” 01-POO-AS3.zip – Téléchargé 990 fois – 26,30 Ko

En tant que débutant, quelles sont vos principales difficultés en AS3 ?

Dites-moi les points bloquants, ce qui vous empêche de programmer les applications flash que vous souhaitez.

Evenements

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

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

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

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

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

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

Et voici le résultat dans un swf :

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

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

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

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

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

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

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

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

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

Avez-vous des questions sur ce cours ?

Posez-les dans les commentaires ci-dessous.

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

Découvrez Pixlib Flash Plateform Framework.

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

7 questions

Ecrit le 4 avril par Matthieu
Publié dans le(s) sujet(s) ActionScript 3 |Pixlib

Dans ce tutoriel vidéo, vous allez apprendre à développer votre première application avec Pixlib.

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

Et voici le résultat dans un swf :

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

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

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

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

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

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

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

Et vous, avez-vous des exemples Pixlib en AS3 ?

Postez votre code AS3 dans les commentaires, je suis curieux de le découvrir !

Le tutoriel vidéo sur Pixlib étant très court, posez-vos questions s’il reste des fonctionnalités incomprises.

Découvrez Pixlib Flash Plateform Framework.

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

Rendez-vous la semaine prochaine pour la suite de ce tutoriel video Pixlib.

Démarrer avec ActionScript 3 : la classe Main

Commentaires fermés sur Démarrer avec ActionScript 3 : la classe Main

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

Dans cette vidéo, je vous propose de découvrir la classe de base à utiliser dans vos projets flash : la classe Main.

Celle-ci contient plusieurs fonctionnalités prêtes pour être utiliser dans vos classes ActionScript.

Voici le résultat dans un swf :

https://e6msyji6epr.exactdn.com/wp-content/uploads/2011/03/main-base.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/03/main-base.swf

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

Télécharger “Classe Main de base” ex-main-base.zip – Téléchargé 832 fois – 23,90 Ko

Téléchargez De MonsterDebugger pour le debug de vos applications flash : le fameux trace amélioré !

Et vous, quelle classe Main utilisez-vous pour démarrer vos swf ?

Postez votre code AS3 dans les commentaires, je suis curieux de voir votre code.

[codesyntax lang= »actionscript3″ title= »La classe Main » bookmarkname= »La classe Main »]

package
{
	import nl.demonsters.debugger.MonsterDebugger;
	import flash.text.TextFormat;
	import flash.text.TextField;
	import flash.events.Event;
	import flash.display.Sprite;

	public class Main extends Sprite
	{
		private var debugger:MonsterDebugger;

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

			// Init De MonsterDebugger
			debugger = new MonsterDebugger(this);

			// message de debug
			MonsterDebugger.trace(this, "Start Application");

			// le code de notre application
			var oText:TextField = new TextField();
			oText.width = stage.stageWidth;
			oText.autoSize = 'center';
			oText.text = "Bienvenue sur ActionScript-Facile";
			oText.y = 150;

			var tFormat:TextFormat = new TextFormat();
			tFormat.font = "Arial";
			tFormat.size = 20;
			tFormat.color = Math.random() * 0X00FFFFFF;
			oText.setTextFormat(tFormat);
			addChild( oText );

			MonsterDebugger.trace(this, oText);// affichage dans le debug de notre objet oText
		}
	}
}

package

{

import nl.demonsters.debugger.MonsterDebugger;

import flash.text.TextFormat;

import flash.text.TextField;

import flash.events.Event;

import flash.display.Sprite;

public class Main extends Sprite

{

private var debugger:MonsterDebugger;

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 votre application.

protected function onReady(event : Event) : void

{

this.removeEventListener(Event.ADDED_TO_STAGE, onReady);

// Init De MonsterDebugger

debugger = new MonsterDebugger(this);

// message de debug

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

// le code de notre application

var oText:TextField = new TextField();

oText.width = stage.stageWidth;

oText.autoSize = 'center';

oText.text = "Bienvenue sur ActionScript-Facile";

oText.y = 150;

var tFormat:TextFormat = new TextFormat();

tFormat.font = "Arial";

tFormat.size = 20;

tFormat.color = Math.random() * 0X00FFFFFF;

oText.setTextFormat(tFormat);

addChild( oText );

MonsterDebugger.trace(this, oText);// affichage dans le debug de notre objet oText

}

[/codesyntax]

Pixlib 3.0 Flash Platform Framework

9 questions

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

Qu’est ce donc Pixlib 3.0 ?

Présentation du Framework Pixlib 3.0

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

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

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

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

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

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

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

Fonctionnalités du Framework Pixlib 3.0

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

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

Conclusion

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

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

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

Et vous, que pensez-vous de Pixlib 3.0?

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

Ou utilisez vous un autre framework ? Lequel ?

Sinon, le votre, fait maison ?

Création d’un Mini Flex avec les Composants AS3 Facile

1 question

Ecrit le 3 octobre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Et voici un article Bonus qui montre une autre facette du Framework AS3 Facile!

La création d’une Application avec les Composants AS3 Facile. Cet exemple Flash utilise un fichier xml pour la construction des Composants ActionScript.

I – CDCF et CDCT

Pour une fois, nous allons déroger à la règle.

En effet, cette fois-ci il n’y aura aucun cahier des charges techniques ni de cahier des charges fonctionnels.

Pourquoi me direz-vous ?

Eh bien tout simplement parce que nous n’allons pas développer une application flash destinée à être utilisé telle quelle en production.

Le contexte d’apprentissage de cet article est plus du domaine de la Recherche & Développement.

La fameuse R&D!

II – Mini Flex

Place à la pratique, au code !

Nous allons concevoir un mini Flex.

C’est à dire que nous allons coder une classe de document. Cette classe va nous permettre de créer des interfaces, à l’aide d’un fichier XML chargé dynamiquement.

Cela consiste à développer un parseur qui :

Va analyser notre XML de configuration.
En déduire ce qu’il doit créer et comment.

Le code en lui-même reste simple, je vous laisse donc le découvrir.

Sachez cependant qu’il est loin d’être terminé.

En effet, seul le composant Button est implémenté.

Je vous encourage vivement à continuer, en implémentant tous les composants que nous avons développés précédemment.

Debug dans Flash avec Firefox / Google Chrome

Vous remarquerez sans doute que j’ai ajouté dans la classe MiniFlexExample.as un système de debug d’application.

Cet ensemble de classes fonctionne avec Firefox pour effectuer un affichage – debug (ou trace) de votre application en ligne.

Cette fonctionnalité est indispensable pour les RIA Flash 🙂

Il vous suffit de :

installer l’extension Firebug sous Firefox ou GoogleChrome.
de télécharger Flash Thunderbolt : Logging ActionScript projects using Firebug within Firefox!

Ensuite dans votre code ActionScript, vous n’avez plus qu’à utiliser la syntaxe suivante pour afficher le message, les variables que vous souhaitez.

[codesyntax lang= »actionscript3″ title= »ThunderBolt’s Logger.as » bookmarkname= »ThunderBolt’s Logger.as »]

import org.osflash.thunderbolt.Logger;

var myNumber: int = 5;
var myString: String = "Lorem ipsum";
Logger.error ("Logging two objects: A number typed as int and a string", myNumber, myString);

// some log objects
var myNumber: int = 5;
var myString: String = "Lorem ipsum";

// INFO log level
Logger.info ("Just an info message");

// DEBUG log level
Logger.debug ("A debug log ", myString);

// WARN log level
Logger.warn ("A warn message", myNumber);

// ERROR log level
Logger.error ("An error log ", myString);

import org.osflash.thunderbolt.Logger;

var myNumber: int = 5;

var myString: String = "Lorem ipsum";

Logger.error ("Logging two objects: A number typed as int and a string", myNumber, myString);

// some log objects

var myNumber: int = 5;

var myString: String = "Lorem ipsum";

// INFO log level

Logger.info ("Just an info message");

// DEBUG log level

Logger.debug ("A debug log ", myString);

// WARN log level

Logger.warn ("A warn message", myNumber);

// ERROR log level

Logger.error ("An error log ", myString);

[/codesyntax]

Conclusion

Voilà, cette fois-ci tout est fini !

Notre mini application Flex en action :

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

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

Évolutions des fonctionnalités

Je vous propose de continuer à développer ce mini-flex pour :

intégrer les autres composants d’ActionScript-Facile.
ajouter des fonctionnalités propres à vos besoins.
l’utiliser comme modèle pour créer vos applications. Évidemment, il est nécessaire, voir indispensable, de concevoir une analyse beaucoup plus complète et structurée.

Le début de la programmation AS3 Facile

Ne perdez pas de vue que ce n’est que le début.

En effet, notre librairie est loin d’être complète, je vous encourage vivement à l’enrichir et à l’améliorer.

J’ai pris beaucoup de plaisir à être votre guide tout au long de ces 10 articles et j’espère que leur lecture vous aura aidé.

Sources commentées

MiniFlexExample.as
bin/interface.xml

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 “Mini Flex Framework AS3 Facile” miniflex_framework_actionscript-facile.zip – Téléchargé 945 fois – 91,16 Ko

Comment utilisez-vous les Composants AS3 Facile ?

Je serais ravi de consulter les Applications Flash que vous avez développés avec le Framework AS3 Facile.

Postez-les dans les commentaires juste en dessous, je les rajouterais prochainement dans un article!

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

package
{
	import flash.events.MouseEvent;

	import com.actionscriptfacile.skin.ISkin;

	import flash.utils.getDefinitionByName;

	import org.osflash.thunderbolt.Logger;

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

	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.ui.UIComponent;

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.utils.Dictionary;

	/**
	 * Exemple de Mini Flex avec les composants graphiques ActionScript-Facile.
	 *
	 * @author Matthieu
	 */
	 public class MiniFlexExample extends Sprite
	{
		private var m_correspTable:Dictionary;// création d'une table de correspondance.

		/*
		 * Permet de forcer l'inclusion des classes de Skin Button dans le swf
		 */
        public static var linkages:Array = [DefaultButtonSkin, DefaultButtonSkin2, MouseEvent.CLICK];

		public function MiniFlexExample()
		{
			Logger.debug ("info a="+Math.random()*28); // debug de l'application avec l'extension firefox Firebug

			// chargement le fichier XML
			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, completeHandler );
			loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler );

			var file:URLRequest =  new URLRequest('interface.xml?a='+Math.random()*28);
			loader.load(file );
		}

		private function errorHandler(e:IOErrorEvent):void
		{
			// gestion des erreurs
			var loader:URLLoader = e.target as URLLoader;
			loader.removeEventListener(Event.COMPLETE, completeHandler );
			loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );

			var text:TextField = addChild( new TextField() ) as TextField;
			text.width = stage.stageWidth;
			text.autoSize = 'center';
			text.text = "Erreur : "+e.text;
		}

		private function completeHandler(e:Event):void
		{
			// récupération des données puis transmission de celles-ci à la méthode parseInterface
			var loader:URLLoader = e.target as URLLoader;
			loader.removeEventListener(Event.COMPLETE, completeHandler );
			loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );

			parseInterface( new XML( loader.data ) );
		}

		/**
		 * Analyse du fichier xml et construction de l'interface.
		 *
		 */
		private function parseInterface( p_interface:XML ):void
		{
			// on référence le composant button dans la table de correspondance
			m_correspTable = new Dictionary();
			m_correspTable['button'] = buildButton;// appel automatique de la méthode de construction d'un Button

			var component:UIComponent;
			var func:Function;

			XML.ignoreComments = true;
			XML.ignoreWhitespace = true;
			XML.ignoreProcessingInstructions = true;

			for each ( var xml:XML in p_interface.children() )
			{
				// on cherche la fonction de parsing du composant
				func = m_correspTable[ xml.name() ] as Function;

				// si on ne la trouve pas on continue
				if ( func == null )
					continue;

				// sinon on  l'éxécute
				component = func( xml ) as UIComponent;// création du composant

				// on écoute les changements qui interviennent sur le composant
				component.addEventListener(MouseEvent.CLICK, updateLabel );

				// et on ajoute le composant à la scène
				addChild ( component );
			}
		}

		/**
		 * Modifie la label du Button
		 *
		 */
		private function updateLabel(e:MouseEvent): void
		{
			var oButton:Button = e.target as Button;
			oButton.label = "N° " + Math.ceil(Math.random()*28);

			Logger.debug ("updateLabel : "+oButton.label);
		}

		/**
		 * fonction permettant de construire un composant button
		 *
		 */
		private function buildButton( p_xml:XML ):Button
		{

			var prop:XML;
			var l_labelField:XML;
			var l_labelsList:XMLList = p_xml.child('labelField');

			var l_component:Button = new Button();
			var parameters:Array = new Array();
			var parameter:XML;
			var method:Function;

			// on regarde si l'objet labelField est défini dans le XML
			if ( l_labelsList.length() &gt; 0 )
			{
				// si oui on le récupère
				l_labelField = l_labelsList[0];
			}

			// récupère le skin du fichier xml et l'applique au composant
			var definition:Class = getDefinitionByName(p_xml.attribute('skin') ) as Class;
			l_component.applySkin( new definition() as ISkin);

			Logger.debug ("p_xml : "+p_xml.attribute('skin'));

			l_component.resize( Number ( p_xml.attribute('width') ), Number ( p_xml.attribute('height') ) );

			for each( prop in p_xml.attributes() )
			{
				// on a déjà défini le width et le height
				if ( prop.name() == "width" || prop.name() == "height" )
					continue;

				// on vérifie que la propriété existe avant de lui appliquer la valeur définit dans le XML
				if ( l_component.hasOwnProperty( new String( prop.name() ) ) )
				{
					l_component[ new String( prop.name() ) ] = prop.valueOf();
				}
			}

			// si le labelField est défini
			if ( l_labelField != null )
			{
				// on boucle sur ses propriétés
				for each( prop in l_labelField.attributes() )
				{
					// on regarde si la propriété existe et le cas échéant on lui applique la valeur
					if ( l_component.labelField.hasOwnProperty( new String( prop.name() ) ) )
					{
						l_component.labelField[new String( prop.name() )] = prop.valueOf();
					}
				}

				for each( prop in l_labelField.children() )
				{

					// on regarde si le noeud est un appel de méthode
					if ( prop.name() == "callMethod" )
					{
						if ( l_component.labelField.hasOwnProperty( prop.attribute('name').toString() ) )
						{

							// on récupère les paramètres
							parameters = new Array();
							for each( parameter in prop.children() )
							{
								parameters.push( parameter.valueOf() );
							}

							method = l_component.labelField[prop.attribute('name').toString()] as Function;

							if ( method != null )
							{
								// et on appelle la méthode
								method.apply( this, parameters );
							}

						}
					}
				}
			}
			return l_component;// renvoie une référence vers le composant créé
		}

	}
}

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

package

{

import flash.events.MouseEvent;

import com.actionscriptfacile.skin.ISkin;

import flash.utils.getDefinitionByName;

import org.osflash.thunderbolt.Logger;

import com.as3facileexemple.skin.classic.DefaultButtonSkin;

import com.as3facileexemple.skin.classic.DefaultButtonSkin2;

import com.actionscriptfacile.ui.button.Button;

import com.actionscriptfacile.ui.UIComponent;

import flash.display.Sprite;

import flash.events.Event;

import flash.events.IOErrorEvent;

import flash.net.URLLoader;

import flash.net.URLRequest;

import flash.text.TextField;

import flash.utils.Dictionary;

/**

* Exemple de Mini Flex avec les composants graphiques ActionScript-Facile.

* @author Matthieu

public class MiniFlexExample extends Sprite

{

private var m_correspTable:Dictionary;// création d'une table de correspondance.

* Permet de forcer l'inclusion des classes de Skin Button dans le swf

public static var linkages:Array = [DefaultButtonSkin, DefaultButtonSkin2, MouseEvent.CLICK];

public function MiniFlexExample()

{

Logger.debug ("info a="+Math.random()*28); // debug de l'application avec l'extension firefox Firebug

// chargement le fichier XML

var loader:URLLoader = new URLLoader();

loader.addEventListener(Event.COMPLETE, completeHandler );

loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler );

var file:URLRequest = new URLRequest('interface.xml?a='+Math.random()*28);

loader.load(file );

}

private function errorHandler(e:IOErrorEvent):void

{

// gestion des erreurs

var loader:URLLoader = e.target as URLLoader;

loader.removeEventListener(Event.COMPLETE, completeHandler );

loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );

var text:TextField = addChild( new TextField() ) as TextField;

text.width = stage.stageWidth;

text.autoSize = 'center';

text.text = "Erreur : "+e.text;

}

private function completeHandler(e:Event):void

{

// récupération des données puis transmission de celles-ci à la méthode parseInterface

var loader:URLLoader = e.target as URLLoader;

loader.removeEventListener(Event.COMPLETE, completeHandler );

loader.removeEventListener(IOErrorEvent.IO_ERROR, errorHandler );

parseInterface( new XML( loader.data ) );

}

/**

* Analyse du fichier xml et construction de l'interface.

private function parseInterface( p_interface:XML ):void

{

// on référence le composant button dans la table de correspondance

m_correspTable = new Dictionary();

m_correspTable['button'] = buildButton;// appel automatique de la méthode de construction d'un Button

var component:UIComponent;

var func:Function;

XML.ignoreComments = true;

XML.ignoreWhitespace = true;

XML.ignoreProcessingInstructions = true;

for each ( var xml:XML in p_interface.children() )

{

// on cherche la fonction de parsing du composant

func = m_correspTable[ xml.name() ] as Function;

// si on ne la trouve pas on continue

if ( func == null )

continue;

// sinon on l'éxécute

component = func( xml ) as UIComponent;// création du composant

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

component.addEventListener(MouseEvent.CLICK, updateLabel );

// et on ajoute le composant à la scène

addChild ( component );

}

/**

* Modifie la label du Button

private function updateLabel(e:MouseEvent): void

{

var oButton:Button = e.target as Button;

oButton.label = "N° " + Math.ceil(Math.random()*28);

Logger.debug ("updateLabel : "+oButton.label);

}

/**

* fonction permettant de construire un composant button

private function buildButton( p_xml:XML ):Button

{

var prop:XML;

var l_labelField:XML;

var l_labelsList:XMLList = p_xml.child('labelField');

var l_component:Button = new Button();

var parameters:Array = new Array();

var parameter:XML;

var method:Function;

// on regarde si l'objet labelField est défini dans le XML

if ( l_labelsList.length() > 0 )

{

// si oui on le récupère

l_labelField = l_labelsList[0];

}

// récupère le skin du fichier xml et l'applique au composant

var definition:Class = getDefinitionByName(p_xml.attribute('skin') ) as Class;

l_component.applySkin( new definition() as ISkin);

Logger.debug ("p_xml : "+p_xml.attribute('skin'));

l_component.resize( Number ( p_xml.attribute('width') ), Number ( p_xml.attribute('height') ) );

for each( prop in p_xml.attributes() )

{

// on a déjà défini le width et le height

if ( prop.name() == "width" || prop.name() == "height" )

continue;

// on vérifie que la propriété existe avant de lui appliquer la valeur définit dans le XML

if ( l_component.hasOwnProperty( new String( prop.name() ) ) )

{

l_component[ new String( prop.name() ) ] = prop.valueOf();

}

// si le labelField est défini

if ( l_labelField != null )

{

// on boucle sur ses propriétés

for each( prop in l_labelField.attributes() )

{

// on regarde si la propriété existe et le cas échéant on lui applique la valeur

if ( l_component.labelField.hasOwnProperty( new String( prop.name() ) ) )

{

l_component.labelField[new String( prop.name() )] = prop.valueOf();

}

for each( prop in l_labelField.children() )

{

// on regarde si le noeud est un appel de méthode

if ( prop.name() == "callMethod" )

{

if ( l_component.labelField.hasOwnProperty( prop.attribute('name').toString() ) )

{

// on récupère les paramètres

parameters = new Array();

for each( parameter in prop.children() )

{

parameters.push( parameter.valueOf() );

}

method = l_component.labelField[prop.attribute('name').toString()] as Function;

if ( method != null )

{

// et on appelle la méthode

method.apply( this, parameters );

}

return l_component;// renvoie une référence vers le composant créé

}

[/codesyntax]

[codesyntax lang= »xml » title= »interface.xml » bookmarkname= »interface.xml »]

&lt;?xml version="1.0" encoding="utf-8" ?&gt;
&lt;data&gt;

	&lt;button x = "20" y = "100" width = "100" height = "20" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin"&gt;

		&lt;labelField
			text = "Un Bouton"
			font = "Arial"
			textColor = "0XFFFFFF"&gt;

				&lt;callMethod name="changeFormat"&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;16&lt;/parameter&gt;
				&lt;/callMethod&gt;

		&lt;/labelField&gt;

	&lt;/button&gt;

	&lt;button x = "20" y = "20" width = "50" height = "30" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin"&gt;

		&lt;labelField
			text = "N 3"
			font = "Arial"
			textColor = "0XFFFFFF"&gt;

				&lt;callMethod name="changeFormat"&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;16&lt;/parameter&gt;
				&lt;/callMethod&gt;

				&lt;callMethod name="alignCenter" /&gt;

		&lt;/labelField&gt;

	&lt;/button&gt;

	&lt;button x = "100" y = "50" width = "150" height = "40" buttonMode="true" skin = "com.as3facileexemple.skin.classic::DefaultButtonSkin2"&gt;

		&lt;labelField
			text = "Mon long bouton"
			font = "Arial"
			textColor = "0XFFFFFF"&gt;

				&lt;callMethod name="changeLetterFormat"&gt;
					&lt;parameter&gt;0&lt;/parameter&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;30&lt;/parameter&gt;
				&lt;/callMethod&gt;

				&lt;callMethod name="changeLetterFormat"&gt;
					&lt;parameter&gt;2&lt;/parameter&gt;
					&lt;parameter&gt;size&lt;/parameter&gt;
					&lt;parameter&gt;30&lt;/parameter&gt;
				&lt;/callMethod&gt;

				&lt;callMethod name="alignLeft" /&gt;

		&lt;/labelField&gt;

	&lt;/button&gt;

&lt;/data&gt;

<?xml version="1.0" encoding="utf-8" ?>

<data>

<labelField

text = "Un Bouton"

font = "Arial"

textColor = "0XFFFFFF">

</callMethod>

</labelField>

</button>

<labelField

text = "N 3"

font = "Arial"

textColor = "0XFFFFFF">

</callMethod>

</labelField>

</button>

<labelField

text = "Mon long bouton"

font = "Arial"

textColor = "0XFFFFFF">

</callMethod>

</callMethod>

</labelField>

</button>

</data>

[/codesyntax]

Comment créer des Composants en AS3 ?

3 questions

Ecrit le 25 août par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Après avoir vu ensemble les différentes raisons (Chapitre 1 : Pourquoi créer des Composants Graphiques en AS3 ?), nous allons aborder le thème de leur conception.

La façon de concevoir des composants se doit d’être souple. Il est donc nécessaire d’adapter son processus de développement en fonction du type de projet sur lequel nous travaillons.

La méthode qui vous est décrite est basée sur l’expérience, un vécu de programmeur. Après la lecture de ce tutoriel, vous possèderez toutes les clés pour améliorer vos Composants AS3 selon vos besoins spécifiques. C’est un petit peu cela la magie du développement!

Si il n’y a qu’une seule et unique règle d’or à retenir c’est : « Soyez rigoureux, codez avec souplesse ! ».

I – Le Cahier Des Charges Fonctionnel

Ah le cahier des charges fonctionnel, aussi appelé CDCF, un vaste programme ô combien primordial ! Sachez que c’est l’une des étapes les plus importantes si ce n’est la plus importante de tout projet informatique.

Un CDCF correctement décrit et validé c’est des dizaines d’heures de code économisées.

Dans un monde idéal, tout projet informatique devrait démarrer avec un Cahier Des Charges Fonctionnel.

Concrètement, c’est quoi un CDCF ?

Un cahier des charges fonctionnel est un document qui décrit de la manière la plus exhaustive possible la liste des actions et fonctionnalités dont votre programme devra être dôté en fin de production.

Comprenez par là que toute personne, et surtout non versée dans le développement, sera à même de vous décrire le fonctionnement détaillé de votre future application sous réserve d’avoir lu ce fameux CDCF.

Pour vous donner un exemple plus concret, cela ressemble à un story-board au cinéma. Un story-board va vous décrire l’enchaînement des actions, de la scène, le placement, l’attitude des acteurs. Et bien un CDCF est un story-board informatique.

Imaginons un instant la scène suivante :

Eh Tom !
Oui chef ?
Laisses tomber ce que tu fais et viens voir un peu là, on a nouveau projet à démarrer !
Ah ? Très bien de quel genre de projet s’agit-il ?
Il s’agit d’un site e-commerce.
Mmmh ok, je t’écoute.

Le client veut quelque chose de classe et sobre, une vitrine en somme, seulement les clients devront pouvoir acheter ses produits par le biais d’une boutique en ligne.Ah et j’oubliais de préciser il ne veut pas que son site soit développé en PHP et n’aime pas Flash ! Alors tu te sens d’attaque ?

Mmmh j’aurais besoin d’un peu plus de précision, pourquoi ne veux-t-il pas de PHP sur son site ? Quelle plateforme de paiement désire-t-il utiliser ? Ce que je veux dire c’est qu’il me faudrait un peu plus de renseignements que ça.

Oui enfin bon, le truc c’est qu’il est assez pressé vois-tu, il a besoin d’une démo pour se décider, je compte sur toi pour faire au mieux et pour les précisions je te les donnerai au fur et à mesure, là tu as l’essentiel. Tu penses que la démo peut être prête pour demain midi afin que je lui soumette ?

Je vais faire de mon mieux, seulement je ne peux pas te garantir que cela va lui plaire.
N’oublies pas que je compte sur toi, t’es le meilleur !

Alors ? Un air de déjà vu ? Si non, ça ne saurait tarder ! En effet, il s’agit là d’un dialogue classique entre un développeur et un commercial / chef de projet.

Pauvre Tom… Il va être bien embêté pour réaliser sa démo. Eh oui, à aucun moment son chef ne lui a donné de direction précise vers laquelle s’orienter, comptant sur le seul talent de son employé.

Seulement voilà, Tom est développeur, pas magicien! Il ne peut deviner ce à quoi pense le client, il a donc 90% de chance de se planter!

Sa seule consolation, c’est qu’il y a peu de chance que ses concurrents possèdent plus d’informations.

Maintenant vous avez saisi l’importance de la rédaction d’un bon CDCF. Un Cahier Des Charges Fonctionnel contient la liste des fonctionnalités et des actions de votre programme.

Ensuite, nous passons à la rédaction du Cahier Des Charges Technique que nous abrègerons par CDCT.

II – Le Cahier Des Charges Technique

Le CDCT est un chantier aussi vaste que le CDCF, toutefois sa conception est nettement plus simple. En général il est réalisé par des programmeurs pour des programmeurs! C’est un avantage certain, en effet, tous les protagonistes « parlent » le même langage.

Le CDCT est un élément intermédiaire, à cheval entre le CDCF et la production. Il permet aux développeurs d’avoir une référence sur laquelle s’appuyer pour implémenter telle ou telle fonctionnalité.

Le Cahier Des Charges Technique existe pour décrire l’ensemble des librairies, frameworks, méthodes de développement qui seront employées en production. Il apporte également quelques précisions qui ne rentrent pas dans le cadre du Cahier Des Charges Fonctionnel ( par exemple le fait que le site devra être développé en Java et non en PHP ).

De plus le CDCT a également une autre utilité. Il permet de préparer le terrain pour l’élaboration du schéma architectural de l’application que nous verrons un peu plus loin.

Dans le cadre du développement d’un composant graphique, le Cahier Des Charges Technique servira à décrire la manière de développer les fonctionnalités que nous estimons génériques ou non.

Prenons un exemple tout simple et retrouvons notre ami Tom :

Eh Tom ! Laisses-donc ce site e-commerce, de toute façon la démo n’a pas plus au client ! Viens voir un peu.
Oui ?
J’aimerais que tu développes une bibliothèque de composants graphiques génériques dont on pourra se resservir à loisir ! Le client est très exigeant et nous a fourni la liste des fonctionnalités qu’il souhaite trouver sur les différents éléments de cette bibliothèque.

Très bien, dois-je coder de manière à pouvoir l’étendre facilement plus tard ? Pour les skins, est-ce que je fais un module à part ou directement dépendant de la bibliothèque ? Ai-je le droit d’utiliser des librairies externes comme des librairies de Tween ?

Euuhhhh …. Fais comme tu le sens ! Au mieux !

Disons qu’il est un peu difficile de dire ce qui est le mieux, tout dépend de ce que l’on souhaite en faire et de comment la bibliothèque est censée évoluer.
Je te fais confiance, tu es le meilleur ! Et n’oublies pas que je compte sur toi !

Ahlala, décidément ce Tom a l’art de s’attirer des ennuis, ou peut être que sont-ce les aléas courants du métier, allez savoir…

Toujours est-il qu’il va être obligé de passer pas mal de temps à réfléchir à ce qui sera le mieux pour le futur de cette bibliothèque de composants. Et qui plus est, sans connaître les exigences particulières des équipes techniques du client.

Il est donc fort probable qu’à terme, il perde une bonne partie de son temps à redévelopper des fonctionnalités mais cette fois-ci, d’une manière qui convienne au client.

D’où l’importance de la rédaction d’un Cahier Des Charges Technique qui permet au développeur de développer plutôt telle ou telle fonctionnalité et d’en laisser une autre de côté (car inutile pour le client).

Maintenant, nous allons découvrir la création du schéma architectural de l’application.

III – Le schéma architectural de l’application

Le schéma architectural d’une application est, disons, INDISPENSABLE.

En effet, lorsque nous abordons pour la première fois une nouvelle librairie, nous disposons en général d’une documentation. Cependant, celle-ci nous renseigne rarement sur la façon dont les différents éléments interagissent entre eux.

Il s’agit donc d’une représentation imagée de l’emboîtement des différentes briques fonctionnelles du projet. Ainsi, nous connaissons, par exemple, que telle ou telle classe à des dépendances avec telle ou telle autre. Et nous pouvons déterminer assez aisément que cette classe à droite hérite de celle qui se trouve juste au dessus.

Le but de cet article n’étant pas de faire un cours magistral sur les méthodes de conception de ces schémas, en voici une : UML.

Et je vous invite grandement à approfondir vos connaissances sur le sujet. La documentation sur internet est nombreuse et qualitative pour que je me permette de vous laisser choisir vos propres sources.

Voici à titre d’exemple, ce à quoi peut ressembler un schéma UML, il s’agit d’un exemple pris sur internet au hasard des couloirs…

Comme vous pouvez le constater, l’application semble complexe. Toutefois grâce à notre schéma, nous pouvons aisément dissocier certains éléments. Nous pouvons même comprendre, grâce au sens des flèches, comment s’effectue la communication entre les différents éléments.

IV – Conclusion

Dans ce chapitre, nous avons vu que pour entamer un développement de la manière la plus sereine possible, il nous fallait au préalable préparer le terrain avec la rédaction :

du Cahier Des Charges Fonctionnel (CDCF).
du Cahier Des Charges Technique (CDCT).
du Schéma Architectural.

Et cela, en étant le plus rigoureux possible afin de gagner du temps plus tard sur le développement.

Certes, au début tout cela peut vous paraître superflu voire franchement casse-pieds. Ces différentes méthodes ont fait leurs preuves maintes et maintes fois. Et elles continuent chaque jour, pour chaque application, de les faire.

Dans le prochain chapitre nous aborderons enfin la pratique avec le développement des fonctionnalités de base de notre bibliothèque de Composants AS3.

Et vous, comment effectuez-vous l’analyse de vos projets ActionScript ?

Avant le développement pur et dur, utilisez-vous des outils / logiciels spécifiques ?

Partagez votre expérience dans les commentaires ci-dessous.

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : application

Cours ActionScript 3 ‘application’

Exemple d’application avec le debug

Téléchargez le code source debug AS3

Et vous, quel logiciels utilisez-vous pour debugger votre code Actionscript 3 ?

Le modèle évènementiel en Actionscript 3

La programmation orientée objet

Téléchargez le code source POO AS3

En tant que débutant, quelles sont vos principales difficultés en AS3 ?

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

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

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

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

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

Et vous, avez-vous des exemples Pixlib en AS3 ?

Et vous, quelle classe Main utilisez-vous pour démarrer vos swf ?

Présentation du Framework Pixlib 3.0

Fonctionnalités du Framework Pixlib 3.0

Conclusion

Et vous, que pensez-vous de Pixlib 3.0?

I – CDCF et CDCT

II – Mini Flex

Debug dans Flash avec Firefox / Google Chrome

Conclusion

Évolutions des fonctionnalités

Le début de la programmation AS3 Facile

Sources commentées

Comment utilisez-vous les Composants AS3 Facile ?

I – Le Cahier Des Charges Fonctionnel

Concrètement, c’est quoi un CDCF ?

II – Le Cahier Des Charges Technique

III – Le schéma architectural de l’application

IV – Conclusion

Et vous, comment effectuez-vous l’analyse de vos projets ActionScript ?

Cours Récents

Liens / Partenaires