Sujets sur : FDT

Cours ActionScript 3 ‘FDT’

La Méthode en 3 étapes pour utiliser les graphismes d’Adobe Flash avec l’éditeur ActionScript FDT

Commentaires fermés sur La Méthode en 3 étapes pour utiliser les graphismes d’Adobe Flash avec l’éditeur ActionScript FDT

Ecrit le 3 février par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Beaucoup d’utilisateurs d’Adobe Flash rencontrent le même problème :

Comment créer des graphismes dans Adobe Flash et surtout comment utiliser ces graphismes directement avec un éditeur ActionScript performant.

Ce tutoriel ActionScript, relie Adobe Flash CS et FDT, avec un nouvel exemple pour affecter une couleur aléatoire à un clip.

Voici ce que vous allez mettre en pratique suite à cette formation Flash :

La technique pour créer vos clips dans la bibliothèque Adobe Flash.
Comment utiliser le nuancier pour ajouter des effets de transparence.
Une astuce pour ajouter plusieurs couleurs dans un élément graphique.
Une technique pour ajouter des effets d’ombre, de relief sur une clip complet.
Ce qu’il faut absolument paramétrer pour utiliser vos graphismes Adobe Flash avec votre éditeur ActionScript préféré.
Une technique pour ajouter plusieurs fois le même clip graphique sur la scène et donner à chacun un comportement différent.
Comment affecter une couleur aléatoire, sur un movieclip, une animation…, avec la classe ColorTransform .
Comment convertir rapidement un nombre décimal en hexadécimal.

Cette formation flash vous apprend comment travailler de concert avec Adobe Flash CS et votre éditeur ActionScript (FDT).

Vous pouvez ainsi travailler en équipe, avec d’un côté un designer pour créer les graphismes dans Adobe Flash CS. Et de l’autre côté, un développeur crée le code ActionScript.

Le tout donne vie rapidement à une application flash optimisée 😉

Les graphismes Adobe Flash et l’éditeur ActionScript

Version démonstration

Voici la version de l’application « ColorTransform ».

https://e6msyji6epr.exactdn.com/wp-content/uploads/2013/02/couleur-transparence-colorTransform.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2013/02/couleur-transparence-colorTransform.swf

Télécharger le code source couleur aléatoire

Vous trouvez ci-dessous le code source complet pour utiliser les graphismes d’Adobe Flash CS avec un éditeur ActionScript.

Il y a également l’exemple de changement de couleur d’un clip avec la classe ColorTransform.

Télécharger “ColorTransform” couleur-transparence-colorTransform.zip – Téléchargé 651 fois – 101,54 Ko

Et vous, comment travaillez vous à plusieurs sur le même projet ?

Quelles solutions utilisez-vous, pour travailler tous ensemble, sur le même projet ?

Partagez vos solutions et postez vos applications dans les commentaires ci-dessous.

Utiliser un code source AS3 avec l’éditeur FDT – Import des fichiers .as

Commentaires fermés sur Utiliser un code source AS3 avec l’éditeur FDT – Import des fichiers .as

Ecrit le 16 février par Matthieu
Publié dans le(s) sujet(s) Cours AS3 |Editeur ActionScript

Le thème de la formation ActionScript 3 de cette semaine répond à une question qui revient souvent parmi les Développeurs qui suivent la Formation AS3 Facile :

Comment utiliser des codes sources et importer les fichiers as directement dans l’éditeur FDT ?

En fait, c’est très simple et très rapide d’importer un code source complet dans un projet FDT PowerFlasher.

C’est ce que je vous propose de découvrir à travers cette formation flash sur l’éditeur FDT.

Vous apprendrez également comment compiler très rapidement et efficacement votre projet Flash avec FDT pour créer un swf tout neuf !

L’éditeur FDT – import des fichiers as

Télécharger le code source du cours AS3

Vous trouverez l’ensemble du code source utilisé durant cette formation flash.

Télécharger “FDT import des fichiers as” exercice-fdt-import-classes.zip – Téléchargé 1018 fois – 277,85 Ko

Souhaitez-vous d’autres cours sur l’éditeur FDT PowerFlasher ?

Donnez-moi les prochains thèmes des cours sur l’éditeur FDT, via les commentaires ci-dessous.

Comment utiliser les polices embarquées en Flash ActionScript 3 avec FDT PowerFlasher ?

1 question

Ecrit le 19 juillet par Matthieu
Publié dans le(s) sujet(s) Cours AS3 |Editeur ActionScript

Dans un article précédent, vous avez appris à créer des swf contenant des polices partagées avec FlashDevelop et swfmill.

Après utilisation, cette méthode s’avère longue et compliquée. Comme vous, c’est cette solution que j’utilisais au départ.

Puis j’ai découvert l’éditeur FDT. C’est un logiciel très efficace, il permet de créer très rapidement et simplement des swf contenant vos polices de caractères.

Un vrai jeu d’enfant !

Vous choisissez les polices à inclure dans le swf, leurs styles et il suffit de cliquer sur le bouton « create » pour obtenir un swf de polices embarquées.

Ce n’est pas plus compliqué que cela.

Dans le cours vidéo de cette semaine, je vous propose de découvrir la création de swf de polices embarquées ou partagées avec FDT PowerFlasher.

Voici ce que je vais vous apprendre :

Pourquoi créer des swf contenant uniquement des polices de caractères, quel est l’intérêt.
Comment utiliser FDT PowerFlasher pour créer des swf de polices embarquées ou partagées.
Pour ceux qui n’ont pas de licence FDT, la technique pour créer des swf de polices de caractères gratuitement. Et comment automatiser la création.
Pour ceux qui préfèrent le logiciel Adobe FLash CS5, vous saurez comment concevoir des swf de polices partagées directement avec Adobe CS5.

A la fin de cette formation actionscript, vous connaitrez plusieurs méthodes pour créer des swf de polices partagées. Et surtout, vous saurez quand cela est nécessaire ou non.

Exemple d’application flash

Ci-dessous, l’application charge un fichier fonts.swf qui contient 3 polices de caractères différentes. Puis le flash affiche du texte en utilisant ces polices embarquées.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/FDT-polices-partagees.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2011/07/FDT-polices-partagees.swf

Téléchargez le code source polices embarquées en AS3

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

Télécharger “FDT Polices partagées en AS3” ex-FDT-polices-embarquees.zip – Téléchargé 1129 fois – 298,06 Ko

Le site DaFont pour télécharger des polices de caractères originales.

Téléchargez l’éditeur FDT PowerFlasher.

Avez-vous des polices de caractères préférées ?

Partagez-les via les commentaires ci-dessous.

Et ajoutez le lien vers votre application flash pour montrer un rendu visuel de leurs utilisations.

Comment améliorer votre programmation Actionscript avec FDT PowerFlasher ?

56 questions

Ecrit le 28 juin par Matthieu
Publié dans le(s) sujet(s) Cours AS3 |Editeur ActionScript |Livres

Savez-vous qu’il possible de programmer des applications flash beaucoup plus rapidement avec un éditeur Actionscript digne de ce nom ?

Ca y est, vous commencez à être beaucoup plus à l’aise en programmation flash !

Tout comme vous, au début, j’écrivais du code actionscript directement dans le logiciel Adobe Flash, la galère !!!

Compliqué, fastidieux, une compilation longue, une multitude de défauts rebutants qui enlève tout le plaisir de la programmation flash.

Eh oui, 80% des développeurs débutants font comme vous, en compilant des swf avec le logiciel Adobe Flash.

En utilisant un éditeur Actionscript performant, vous allez redécouvrir le plaisir de vous concentrer uniquement sur la création de vos classes actionscript.

Fini les longs temps d’attente de compilation, l’ajout de paramètres compliqués…

Voici ce que je vais vous montrer :

Comment installer et utiliser cet éditeur sur Windows, MAC ou Linux.
Comment exploiter chacune des fonctionnalités pas à pas.
La méthode simple pour compiler des applications très rapidement, d’un seul clic de souris !
Comment partager votre code source avec vos prestataires / freelance, sans que ceux-ci puissent le copier / modifier.
Comment mettre en œuvre la solution de création simplifiée de bibliothèques swc.

Ce cours consiste à vous aider à profiter au maximum des fonctionnalités offertes par cet éditeur actionscript, afin de vous aider à programmer efficacement.

Laissez-moi vous présenter l’éditeur Actionscript qui a grandement simplifié et amélioré mon développement d’applications flash.

Cet éditeur actionscript FDT vous permet de programmer efficacement et GRATUITEMENT

Et en plus, il fonctionne sur les plateformes Windows, Linux et MAC !

Découvrez dans cette vidéo, l’éditeur que j’utilise dans mes projets actionscript.

Guide Editeur FDT PowerFlasher

Pour vous aider à utiliser l’ensemble des fonctionnalités de FDT, j’ai rédigé un guide complet d’utilisation.

Ce guide FDT contient également une offre spéciale, réservée uniquement aux lecteurs Actionscript Facile.

Et vous, quel est votre éditeur Actionscript préféré ?

Dites-moi dans les commentaires, l’éditeur actionscript que vous utilisez le plus souvent.

Quels sont ces fonctionnalités ?

Et pourquoi l’utilisez-vous ?

Comment ajouter Google Analytics dans Flash en AS3 ?

6 questions

Ecrit le 24 octobre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Nous allons découvrir comment effectuer des mesures statistiques avec les applications Flash .

Cet article est consacré à l’implémentation de Google Analytics dans vos RIA Flash en AS3.

Qu’est ce que GA For Flash ?

Une API a été conçu en AS3 par Nickski15, Zwetan et Ekameleon. Ils ont développé cette API et l’ont mis à disposition, en Open Source, via le projet Google Analytics Tracking for Flash API (gaforflash).

Google Analytics vous permet d’analyser le traffic de votre RIA Flash pour :

visualiser les pages vues (interfaces AS3) et leur nombre d’affichage.
tracer des actions et des évènements.

Installation de Google Analytics

Pour implémenter GA (Google Analytics), il suffit de télécharger la dernière version sur le site Google Code. Vous pouvez télécharger :

soit le fichier .SWC gaforflash-1.0.1.319.zip. Je vous conseille de télécharger le fichier SWC, c’est plus simple à utiliser dans vos projets AS3.
soit le code source complet via le SVN Google Code. Lien du SVN : http://gaforflash.googlecode.com/svn/trunk/

Ensuite, vous ajoutez le fichier analytics_flash.swc dans votre application AS3 avec votre Éditeur ActionScript habituel.

Avec l’Éditeur FDT, c’est très simple. J’ai rédigé un Guide gratuit pour Développer efficacement et rapidement en ActionScript.

Utilisation de GA en AS3

Reprenons l’exemple du Chapitre : Création des Graphismes / Skins des Composants AS3 pour ajouter le Tracking Google Analytics en AS3.

Création du Tracker

Juste avant la création de votre interface Flash, vous devez initialiser le Tracker.

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

/**
 * Paramètres : application flash, N° compte Google Analytics, mode (Bridge ou AS3), debug
 * Le mode AS3 permet à l'application flash de fonctionner indépendamment du javascript ga.js
 *
 */
var tracker : GATracker = new GATracker( this, "UA-983969-6", "AS3", true );

/**

* Paramètres : application flash, N° compte Google Analytics, mode (Bridge ou AS3), debug

* Le mode AS3 permet à l'application flash de fonctionner indépendamment du javascript ga.js

var tracker : GATracker = new GATracker( this, "UA-983969-6", "AS3", true );

[/codesyntax]

Les différents paramètres à renseigner :

Id : cette propriété permet de déclarer le Tracker dans votre application Flash.
Account : c’est l’identifiant de votre compte Google Analytics. Un numéro du type UA-944069-6.
Mode : cette valeur est renseignée par AS3 ou Bridge.

Le mode AS3 est utilisé lorsque vous ne contrôlez pas les pages HTML dans lesquelles votre RIA est incluse (par exemple les widgets affichés sur myspace, facebook…), ou s’il n’y a pas de suivi Google Analytics activé.

Dans la majorité des RIA Flash, le mode AS3 est utilisé.

Le mode Bridge est utilisé lorsque votre RIA est intégré dans une page Web qui contient un script de mesure Google Analytics. Ce mode est utilisé avec la classe ExternalInterface, il est donc important que le paramètre allowScriptAccess soit correctement défini (« always » ou « sameDomain »).

Debug : cette propriété active le débug avec l’API gaforflash. Si le Débug est défini sur true, toutes les données sont affichées dans une fenêtre de débogage.

Ensuite, en fonction de votre application Flash, Google Analytics peut :

tracker les pages vues (interfaces AS3) et leur nombre d’affichage.
tracker des actions ou des évènements.

Suivi des pages vues

Pour suivre les interfaces affichées dans votre RIA, une seule ligne de code est nécessaire. Renseignez le nom de l’interface et son nombre d’affichage sera comptabilisé dans Google Analytics.

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

// Ce paramètre permet de traquer le nom de la page affichée ou d'une action
if ( tracker != null ) tracker.trackPageview( "AS3 Facile Exemple Google Analytics" ) ;

1 2	// Ce paramètre permet de traquer le nom de la page affichée ou d'une action if ( tracker != null ) tracker.trackPageview( "AS3 Facile Exemple Google Analytics" ) ;

[/codesyntax]

Par exemple, à chaque fois que votre application Flash est affichée, vous pouvez ajouter un trackPageview. Ou lorsqu’une interface précise est sélectionnée par l’utilisateur.

Suivi des évènements

Vous pouvez également suivre le cheminement complet de l’utilisateur dans votre RIA Flash. Cela permet d’envoyer des événements qui seront enregistrés dans GA.

Voici les 4 paramètres à définir :

category : le nom du groupe d’événements. Dans notre exemple la category est AS3 Facile GA.
action : le nom de l’action effectuée, cette action est associée avec une catégorie. Dans notre exemple, l’événement se nomme par le nom du Button choisit par l’utilisateur (Arc en Ciel Liste).

label : un nom optionnel pour donner des informations supplémentaires sur la combinaison category / action. Dans une liste d’éléments de votre interface, vous pouvez préciser le type d’élément (un Button). Ou dans une playlist vidéo, vous précisez le numéro de la vidéo.

value : un nombre non négatif, c’est une valeur optionnel qui associe un canal (ou channel) à un événement mesuré.

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

/**
 * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...
 *
 * category: le nom du groupe d'évènements.
 * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.
 * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.
 * value: un nombre optionnel, pour associer un channel à l'évènement traquer.
 *
 */
// l'utilisateur appuie sur le Button 'Arc en Ciel'
if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Arc en Ciel Liste", "Button");

// ou l'utilisateur modifie la police de caractère utilisée dans la ComboBox
if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", m_comboFonts.currentLabel, "ComboBox");

/**

* Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...

* category: le nom du groupe d'évènements.

* action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.

* label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.

* value: un nombre optionnel, pour associer un channel à l'évènement traquer.

// l'utilisateur appuie sur le Button 'Arc en Ciel'

if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Arc en Ciel Liste", "Button");

// ou l'utilisateur modifie la police de caractère utilisée dans la ComboBox

if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", m_comboFonts.currentLabel, "ComboBox");

[/codesyntax]

Très facilement, vous pouvez tracker toutes les actions de l’utilisateur de votre RIA Flash :

l’appuie sur tel ou tel élément de l’interface pour lancer un nouvel écran, ouvrir une page Web…
lorsque l’utilisateur télécharge des fichiers pdf, zip…
lorsque l’utilisateur visualise une vidéo, écoute un podcast, un MP3…

Tableau de Bord Google Analytics

Une fois votre application Flash paramétrée, vous pouvez visualiser les différentes statistiques dans votre Tableau de Bord Google Analytics.

Pour visualiser les statistiques sur les pages vues (interface AS3) et leurs nombre d’affichage, allez dans Contenu et Pages les plus consultées.

Google Analytics - Suivi des Pages

Pour visualiser les évènements ou actions de l’utilisateur, allez dans Suivi des évènements. Ensuite, vous pouvez choisir Catégories, Actions, Libellés…

Google Analytics - Suivi des évènements

Google Analytics - Détails des évènements

Conclusion

Google Analytics Tracking for Flash offre des capacités de tracking infinies dans une RIA Flash en AS3.

L’utilisation de trackPageview vous permet de mesurer le trafic de votre application Flash dans ses moindres détails.
L’utilisation de trackEvent vous permet de mieux comprendre la manière dont vos utilisateurs réagissent à vos interfaces Flash.

gaforflash est donc un complément très intéressant pour comprendre les actions de vos utilisateurs dans vos interfaces AS3.

Ci-dessous, voici notre application Flash avec l’implémentation de Google Analytics.

Appuyez sur la touche « ESPACE » de votre clavier pour faire disparaitre / apparaitre la fenêtre de Debug GA.

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

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

Sources Commentées

GoogleAnalyticsExample.as

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

package
{
	import com.google.analytics.GATracker;

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

	import com.as3facileexemple.skin.classic.DefaultListSkin;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin2;
	import com.as3facileexemple.skin.classic.DefaultListSkin2;
	import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;

	import com.actionscriptfacile.ui.button.Button;
	import com.actionscriptfacile.ui.list.List;
	import com.actionscriptfacile.ui.utils.UIMargins;
	import com.actionscriptfacile.ui.combo.element.ComboBoxElement;
	import com.actionscriptfacile.ui.combo.ComboBox;
	import com.actionscriptfacile.ui.text.UITextField;

	/**
	 * Mise à jour en live des Skin Graphismes des Composants du Framework AS3 ActionScript-Facile
         * Implémentation de Google Analytics
	 *
	 * @author Matthieu
	 */
	public class GoogleAnalyticsExample extends Sprite
	{

		protected var m_comboFonts:ComboBox;
		protected var m_list:List;
		protected var m_textField:UITextField;
		private var tracker : GATracker;

		public function GoogleAnalyticsExample()
		{
			addTracker();

			/**
			 * On construit les boutons
			 */
			var buttonHide:Button = new Button();

			// définition du texte
			buttonHide.label = 'Arc en Ciel Liste';

			// Application de la skin par défaut
			// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			buttonHide.applySkin( new DefaultButtonSkin() );

			// on écoute les changements qui interviennent sur le bouton
			buttonHide.addEventListener(MouseEvent.CLICK, changeSkinList );

			// ajout à la displaylist
			addChild( buttonHide );

			// définition de sa taille en 150 * 30 pixels
			buttonHide.resize( 150, 30 );

			// définition de la position du button sur la scène
			buttonHide.x = 10;
			buttonHide.y = 220;

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

			var buttonShow:Button = new Button();

			// définition du texte
			buttonShow.label = 'Classique Liste';

			// Application de la skin par défaut
			// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			buttonShow.applySkin( new DefaultButtonSkin2() );

			// on écoute les changements qui interviennent sur le bouton
			buttonShow.addEventListener(MouseEvent.CLICK, changeSkinList2 );

			// ajout à la displaylist
			addChild( buttonShow );

			// définition de sa taille en 150 * 30 pixels
			buttonShow.resize( 150, 30 );

			// définition de la position du button sur la scène
			buttonShow.x = buttonHide.x;
			buttonShow.y = buttonHide.y + buttonShow.height + 10;

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

			/**
			 * On construit la liste
			 */
			m_list = new List();

			// Application de la skin par défaut
			// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
			m_list.applySkin( new DefaultListSkin2() );

			// définition de la taille de la List
			m_list.resize( 230, 150 );

			// ajout de plusieurs éléments dans la liste
			for ( var i:int = 0; i &lt; 35; i++ )
			{
				m_list.addElement( getListElement(i+1) );
			}

			// détermination de la position de la List
			m_list.x = 200;
			m_list.y = buttonHide.y;

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

			// affichage - ajout à la displaylist
			addChild( m_list );

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

			/**
			 * 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 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 = 'Développez avec fun :)';

			m_textField.x = m_textField.y = 5;
			m_textField.width = m_textField.maxWidth = 390;
			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;

			addChild( m_comboFonts );
			addChild( m_textField );
		}

		/**
		 * Ajoute Google Analytics dans votre application Flash.
		 *
		 */
		private function addTracker() : void
		{
			/**
			 * Paramètres : application flash, N° compte Google Analytics, mode (Bridge ou AS3), debug
			 * Le mode AS3 permet à l'application flash de fonctionner indépendamment du javascript ga.js
			 *
			 */
			tracker = new GATracker( this, "UA-983969-6", "AS3", true );

			// Ce paramètre permet de traquer le nom de la page affichée ou d'une action
			if ( tracker != null ) tracker.trackPageview( "AS3 Facile Exemple Google Analytics" ) ;
		}

		/**
		 * 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 MouseEvent.CLICK
		 */
		private function changeHandler(e:Event):void
		{
			m_textField.font = m_comboFonts.currentLabel;
			m_textField.changeFormat("color", Math.random() * 0X00FFFFFF);// changement de la couleur

			/**
			 * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...
			 *
			 * category: le nom du groupe d'évènements.
			 * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.
			 * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.
			 * value: un nombre optionnel, pour associer un channel à l'évènement traquer.
			 *
			 */
			if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", m_comboFonts.currentLabel, "ComboBox");
		}

		/**
		 * Fonction servant à écouter les click de l'utilisateur sur le buttonHide.
		 * On modifie le Skin de La List "Arc en Ciel Liste"
		 *
		 * @param	e	Evenement de type MouseEvent.CLICK
		 */
		 private function changeSkinList(e:MouseEvent) : void
		{
			m_list.applySkin(new DefaultListSkin() );

			/**
			 * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...
			 *
			 * category: le nom du groupe d'évènements.
			 * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.
			 * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.
			 * value: un nombre optionnel, pour associer un channel à l'évènement traquer.
			 *
			 */
			if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Arc en Ciel Liste", "Button");
		}

		/**
		 * Fonction servant à écouter les click de l'utilisateur sur le buttonHide.
		 * On modifie le Skin de La List "Classique Liste"
		 *
		 * @param	e	Evenement de type MouseEvent.CLICK
		 */
		private function changeSkinList2(e:MouseEvent) : void
		{
			m_list.applySkin(new DefaultListSkin2() );

			/**
			 * Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...
			 *
			 * category: le nom du groupe d'évènements.
			 * action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.
			 * label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.
			 * value: un nombre optionnel, pour associer un channel à l'évènement traquer.
			 *
			 */
			if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Classique Liste", "Button");
		}

		/**
		 * Création des éléments du composant List
		 */
		private function getListElement(id:Number):Sprite
		{
			// création de l'élément
			var oElement:Sprite = new Sprite();

			// ajout d'un fond avec une couleur aléatoire
			var shp:Shape = new Shape();
			var color:int = Math.random() * 0X00FFFFFF;

			shp.graphics.beginFill( color );
			shp.graphics.drawRect( 0, 0, 200, 30 );
			shp.graphics.endFill();

			// ajout d'un texte
			var oTxt:UITextField = new UITextField();

			// définition de la taille du texte
			oTxt.height = oTxt.maxHeight = 25;
			oTxt.width = oTxt.maxWidth = 195;

			oTxt.text = "Élément "+id;
			oTxt.selectable = false;
			oTxt.changeFormat("color", 0xffffff);// changement de la couleur du texte
			oTxt.changeFormat("size", 14);// changement de la taille de la police du texte
			oTxt.changeFormat("font", "Arial");// changement de la police du texte

			oTxt.alignCenter();

			oTxt.background = false;
			oTxt.backgroundColor = 0xff33ff;

			// ajout à la displaylist (le fond et le texte) de l'élément
			oElement.addChild(shp);
			oElement.addChild(oTxt);

			return oElement;
		}
	}

}

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

package

{

import com.google.analytics.GATracker;

import flash.events.MouseEvent;

import flash.display.Shape;

import flash.display.Sprite;

import flash.events.Event;

import flash.text.Font;

import com.as3facileexemple.skin.classic.DefaultListSkin;

import com.as3facileexemple.skin.classic.DefaultButtonSkin;

import com.as3facileexemple.skin.classic.DefaultButtonSkin2;

import com.as3facileexemple.skin.classic.DefaultListSkin2;

import com.as3facileexemple.skin.classic.DefaultComboBoxSkin;

import com.actionscriptfacile.ui.button.Button;

import com.actionscriptfacile.ui.list.List;

import com.actionscriptfacile.ui.utils.UIMargins;

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

import com.actionscriptfacile.ui.combo.ComboBox;

import com.actionscriptfacile.ui.text.UITextField;

/**

* Mise à jour en live des Skin Graphismes des Composants du Framework AS3 ActionScript-Facile

* Implémentation de Google Analytics

* @author Matthieu

public class GoogleAnalyticsExample extends Sprite

{

protected var m_comboFonts:ComboBox;

protected var m_list:List;

protected var m_textField:UITextField;

private var tracker : GATracker;

public function GoogleAnalyticsExample()

{

addTracker();

/**

* On construit les boutons

var buttonHide:Button = new Button();

// définition du texte

buttonHide.label = 'Arc en Ciel Liste';

// Application de la skin par défaut

// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]

buttonHide.applySkin( new DefaultButtonSkin() );

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

buttonHide.addEventListener(MouseEvent.CLICK, changeSkinList );

// ajout à la displaylist

addChild( buttonHide );

// définition de sa taille en 150 * 30 pixels

buttonHide.resize( 150, 30 );

// définition de la position du button sur la scène

buttonHide.x = 10;

buttonHide.y = 220;

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

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

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

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

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

var buttonShow:Button = new Button();

// définition du texte

buttonShow.label = 'Classique Liste';

// Application de la skin par défaut

// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]

buttonShow.applySkin( new DefaultButtonSkin2() );

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

buttonShow.addEventListener(MouseEvent.CLICK, changeSkinList2 );

// ajout à la displaylist

addChild( buttonShow );

// définition de sa taille en 150 * 30 pixels

buttonShow.resize( 150, 30 );

// définition de la position du button sur la scène

buttonShow.x = buttonHide.x;

buttonShow.y = buttonHide.y + buttonShow.height + 10;

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

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

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

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

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

/**

* On construit la liste

m_list = new List();

// Application de la skin par défaut

// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]

m_list.applySkin( new DefaultListSkin2() );

// définition de la taille de la List

m_list.resize( 230, 150 );

// ajout de plusieurs éléments dans la liste

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

{

m_list.addElement( getListElement(i+1) );

}

// détermination de la position de la List

m_list.x = 200;

m_list.y = buttonHide.y;

// ajout des marges au contenu de la liste

m_list.margins = new UIMargins( 5, 10, 5, 5 );

// affichage - ajout à la displaylist

addChild( m_list );

/**

* 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

/**

* 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 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 = 'Développez avec fun :)';

m_textField.x = m_textField.y = 5;

m_textField.width = m_textField.maxWidth = 390;

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;

addChild( m_comboFonts );

addChild( m_textField );

}

/**

* Ajoute Google Analytics dans votre application Flash.

private function addTracker() : void

{

/**

* Paramètres : application flash, N° compte Google Analytics, mode (Bridge ou AS3), debug

* Le mode AS3 permet à l'application flash de fonctionner indépendamment du javascript ga.js

tracker = new GATracker( this, "UA-983969-6", "AS3", true );

// Ce paramètre permet de traquer le nom de la page affichée ou d'une action

if ( tracker != null ) tracker.trackPageview( "AS3 Facile Exemple Google Analytics" ) ;

}

/**

* 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 MouseEvent.CLICK

private function changeHandler(e:Event):void

{

m_textField.font = m_comboFonts.currentLabel;

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

/**

* Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...

* category: le nom du groupe d'évènements.

* action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.

* label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.

* value: un nombre optionnel, pour associer un channel à l'évènement traquer.

if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", m_comboFonts.currentLabel, "ComboBox");

}

/**

* Fonction servant à écouter les click de l'utilisateur sur le buttonHide.

* On modifie le Skin de La List "Arc en Ciel Liste"

* @param e Evenement de type MouseEvent.CLICK

private function changeSkinList(e:MouseEvent) : void

{

m_list.applySkin(new DefaultListSkin() );

/**

* Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...

* category: le nom du groupe d'évènements.

* action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.

* label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.

* value: un nombre optionnel, pour associer un channel à l'évènement traquer.

if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Arc en Ciel Liste", "Button");

}

/**

* Fonction servant à écouter les click de l'utilisateur sur le buttonHide.

* On modifie le Skin de La List "Classique Liste"

* @param e Evenement de type MouseEvent.CLICK

private function changeSkinList2(e:MouseEvent) : void

{

m_list.applySkin(new DefaultListSkin2() );

/**

* Ce paramètre permet de traquer les évènements sur une interface, la lecture d'une vidéo, d'un MP3...

* category: le nom du groupe d'évènements.

* action: le nom associée à la catégorie (category), utilisé par traquer le type d'action.

* label: un nom optionnel pour donner des informations supplémentaires sur l'action et la catégorie.

* value: un nombre optionnel, pour associer un channel à l'évènement traquer.

if ( tracker != null ) tracker.trackEvent("AS3 Facile GA", "Classique Liste", "Button");

}

/**

* Création des éléments du composant List

private function getListElement(id:Number):Sprite

{

// création de l'élément

var oElement:Sprite = new Sprite();

// ajout d'un fond avec une couleur aléatoire

var shp:Shape = new Shape();

var color:int = Math.random() * 0X00FFFFFF;

shp.graphics.beginFill( color );

shp.graphics.drawRect( 0, 0, 200, 30 );

shp.graphics.endFill();

// ajout d'un texte

var oTxt:UITextField = new UITextField();

// définition de la taille du texte

oTxt.height = oTxt.maxHeight = 25;

oTxt.width = oTxt.maxWidth = 195;

oTxt.text = "Élément "+id;

oTxt.selectable = false;

oTxt.changeFormat("color", 0xffffff);// changement de la couleur du texte

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

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

oTxt.alignCenter();

oTxt.background = false;

oTxt.backgroundColor = 0xff33ff;

// ajout à la displaylist (le fond et le texte) de l'élément

oElement.addChild(shp);

oElement.addChild(oTxt);

return oElement;

}

[/codesyntax]

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 “Google Analytics dans Flash en AS3” google_analytics_exemple.zip – Téléchargé 843 fois – 198,15 Ko

Pour en savoir plus

Les mesures statistiques au sein d’Adobe Flash à l’aide de Google Analytics Tracking for Adobe Flash
Mise en place du composant Google Analytics dans Adobe Flash : Adobe Flash Setup
Mise en place de Google Analytics dans Adobe Flex : Adobe Flex Setup

Remerciements

Je remercie les Développeurs AS3 pour la création de cette API AS3 : Google Analytics Tracking for Flash API (gaforflash).

Et je vous invite à découvrir leurs Projets respectifs :

Zwetan : l’ensemble de ses Projets en ActionScript / Flex.
Ekameleon : ses conseils et tutoriels ActionScript.

Dans les prochains tutoriels : quels sujets voulez-vous que j’aborde ?

Souhaitez des nouveaux exemples avec le code source sur l’utilisation du Framework de Composants AS3 Facile ?

Avez-vous besoin de plus d’éclaircissement sur tel ou tel Composants AS3 du Framework ? Ou préférez que j’aborde des sujets totalement différents ?

Comment développer facilement en ActionScript ?

4 questions

Ecrit le 11 août par Matthieu
Publié dans le(s) sujet(s) Editeur ActionScript |Livres

Comment utiliser le plus abouti des Éditeurs

ActionScript en moins de 20 minutes ?

Avec un Éditeur ActionScript performant, il est possible de simplifier énormément la programmation en ActionScript Flash.

Pour recevoir ce Guide Gratuit, renseignez votre prénom et adresse mail dans le formulaire ci-dessous.

FDT Powerflasher Pure Coding Confort

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

FDT : L’essayer c’est l’adopter 🙂

Voici ce que vous allez découvrir dans ce guide :

Comment installer et configurer FDT PowerFlasher. (p.5)
Comment créer un nouveau projet AS3. (p. 12)
Comment créer une classe AS3, en utilisant des templates prédéfinis. (p.16)
L’utilisation de la fonctionnalité de correction automatique des erreurs de code. (p.18)
Des techniques pour compiler de vos applications flash très rapidement et sans prise de tête avec les paramètres ! (p.19)
Comment créer un fichier SWC contenant l’ensemble des classes d’un Framework, d’un projet (p.24)
Une offre spéciale sur les licences de FDT PowerFlasher pour les lecteurs d’ActionScript Facile. (p.26)

Pour recevoir immédiatement et gratuitement votre exemplaire du guide Éditeur ActionScript FDT Powerflasher, renseignez votre prénom et adresse mail dans le formulaire ci-dessous.

Faîtes moi part de vos retours sur le guide Utiliser l’Éditeur ActionScript FDT Powerflasher dans les commentaires, juste en dessous.

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : FDT

Cours ActionScript 3 ‘FDT’

La Méthode en 3 étapes pour utiliser les graphismes d’Adobe Flash avec l’éditeur ActionScript FDT

Les graphismes Adobe Flash et l’éditeur ActionScript

Version démonstration

Télécharger le code source couleur aléatoire

Et vous, comment travaillez vous à plusieurs sur le même projet ?

Utiliser un code source AS3 avec l’éditeur FDT – Import des fichiers .as

L’éditeur FDT – import des fichiers as

Télécharger le code source du cours AS3

Souhaitez-vous d’autres cours sur l’éditeur FDT PowerFlasher ?

Comment utiliser les polices embarquées en Flash ActionScript 3 avec FDT PowerFlasher ?

Exemple d’application flash

Téléchargez le code source polices embarquées en AS3

Avez-vous des polices de caractères préférées ?

Comment améliorer votre programmation Actionscript avec FDT PowerFlasher ?

Guide Editeur FDT PowerFlasher

Et vous, quel est votre éditeur Actionscript préféré ?

Comment ajouter Google Analytics dans Flash en AS3 ?

Qu’est ce que GA For Flash ?

Installation de Google Analytics

Utilisation de GA en AS3

Création du Tracker

Suivi des pages vues

Suivi des évènements

Tableau de Bord Google Analytics

Conclusion

Sources Commentées

Pour en savoir plus

Remerciements

Dans les prochains tutoriels : quels sujets voulez-vous que j’aborde ?

Comment développer facilement en ActionScript ?

Comment utiliser le plus abouti des Éditeurs

ActionScript en moins de 20 minutes ?

Pour recevoir ce Guide Gratuit, renseignez votre prénom et adresse mail dans le formulaire ci-dessous.

FDT : L’essayer c’est l’adopter 🙂

Pour recevoir immédiatement et gratuitement votre exemplaire du guide Éditeur ActionScript FDT Powerflasher, renseignez votre prénom et adresse mail dans le formulaire ci-dessous.

Cours Récents

Liens / Partenaires