<h2>Votre Formation vidéo</h2><br/>
Votre formation est décomposée<br/>
en chapitres très clairs de 20 à 30 min. <h2>Des exemples SWF </h2><br/>
Chaque leçon est accompagnée<br/>
du code source avec le fla et les classes. <h2>Votre Suivi personnalisé</h2><br/>
Vous pouvez  me poser toutes<br/>
vos questions sous les cours vidéos.

Comment créer un Composant Bouton en AS3 ?

18 questions

Écrit le 6 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Mots clés : , , , , , , , , ,

Le Kit du Développeur Flash

Enfin nous allons attaquer les choses sérieuses avec la conception du 1er composant de notre “Bibliothèque AS3 de Composants Graphiques“.

Dans ce tutoriel, nous allons concevoir un composant de type Button. Et avec la possibilité de le personnaliser graphiquement!

I – Cahier Des Charges Fonctionnel d’un Bouton

Nous allons commencer par un bref descriptif des fonctionnalités de base d’un bouton avec le fameux Cahier Des Charges Fonctionnel.

Un bouton est un composant, qui peut être cliqué, survolé et qui dispose d’une apparence personnalisable pour chacun de ses états.

Comme vous pouvez le constater, il est facile de définir un composant bouton.
Le composant en lui-même reste simple à réaliser. Les prochains seront plus compliqués!

Commençons donc par lister tous les états que nous désirons obtenir sur notre bouton :

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

Nous possédons à présent un CDCF (Cahier Des Charges Fonctionnel) court et précis.

Le CDCF nous donne la marche à suivre pour la mise en place du CDCT (Cahier Des Charges Technique).

II – Cahier Des Charges Techniques d’un Bouton

Pour rédiger le Cahier Des Charges Technique, nous procédons comme pour la classe de base UIComponent (lisez le Chapitre 3 : Les fonctionnalités de base d’une Bibliothèque de Composants AS3 ).

C’est à dire  que nous reprenons le CDCF et nous nous chargeons de le “traduire” en langage technique. Nous apportons également plusieurs précisions utiles.

Un bouton est un composant, qui peut être cliqué, survolé et qui dispose d’une apparence personnalisable pour chacun de ses états.

Voici la liste des états d’un bouton (déterminé dans le CDFC) : Normal, Survol, Cliqué.

Contraintes techniques

A partir des différents états d’un bouton, nous définissons les contraintes techniques suivantes :

Écouter les évènements de type :

  • MouseEvent.MOUSE_DOWN : état Cliqué.
  • MouseEvent.MOUSE_UP : état Survol.
  • MouseEvent.ROLL_OVER : état Survol.
  • MouseEvent.ROLL_OUT : état Normal.

 

  • Actualiser l’état graphique du bouton en fonction des évènements reçus.
  • Overrider la fonction (c’est à dire redéfinir son comportement) du composant de base UIComponent afin de mettre à jour chacun des états graphiques du Button.

 

Nous ajoutons également la contrainte technique suivante :

Ajout d’un champ texte qui se nommera “label” au sein du bouton et donner la possibilité d’y accéder depuis l’extérieur.

Pour cela, nous coderons deux getters et un setter :

  • Un getter labelField qui retournera directement le champ texte
  • Un getter label qui retournera le texte du champ texte.
  • Un setter label qui permettra de définir le texte du champ texte.

Notre champ texte sera de type UITextfield, cette classe est définie dans le package com.actionscriptfacile.ui.text. Nous reviendrons sur son implémentation lors du chapitre dédié au composant UITextfield.

Conclusion

Nous disposons maintenant d’un bel objet de type Button. Celui-ci nous sera utile pour les développements de nos futurs composants.

Le composant Button peut être cliqué, survolé et un état graphique nous permet de visualiser une réelle interaction.

https://www.actionscript-facile.com/wp-content/uploads/2010/09/button_exemple.swf

Évolutions des fonctionnalités

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

N’hésitez pas à poster vos exemples dans les commentaires.

A vous de jouer !

Lock Button

Vous pouvez créer une classe permettant de gérer un groupe de plusieurs boutons. En fonction du bouton cliqué, des actions différentes sont lancées. Le bouton cliqué ne peut pas être de nouveau activé. Un peu comme la gestion d’un menu de “Lock Button”.

Skin

Implémentez la possibilité de mettre à jour en direct l’apparence de vos boutons. Par exemple en cliquant sur l’un de vos “Lock Button”, l’apparence du bouton est modifiée.

Sources commentées

  • com.actionscriptfacile.button.Button.as
  • ButtonExample.as
  • com.as3facileexemple.skin.classic.DefaultButtonSkin.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 “Composant Button du Framework AS3 Facile” component_button_framework_actionscript-facile.zip – Téléchargé 707 fois –

Et vous : Comment concevez vous vos Boutons en Actionscript 3 ?

Proposez vos exemples de codes AS3 dans les commentaires juste en dessous.

package  com.actionscriptfacile.ui.button
{
	import com.actionscriptfacile.skin.ISkin;
	import com.actionscriptfacile.ui.UIComponent;
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import com.actionscriptfacile.ui.text.UITextField;
 
	/**
	 * Un objet de type Button est un objet
	 * @author Matthieu
	 */
	public class Button extends UIComponent
	{
 
		/**
		 * Constantes qui vont nous servir à définir des styles dans les objets de skin par défaut @see com.as3facileexemple.skin.classic.DefaultButtonSkin
		 */
		static public const BUTTON_UP_SKIN:String = "BUTTON_UP_SKIN";
		static public const BUTTON_DOWN_SKIN:String = "BUTTON_DOWN_SKIN";
		static public const BUTTON_OVER_SKIN:String = "BUTTON_OVER_SKIN";
 
		/**
		 * Constantes qui vont nous servir à changer l'état  du bouton par le biais d'un appel à la méthode setState
		 */
		static protected const UP_STATE:String = "UP_STATE";
		static protected const DOWN_STATE:String = "DOWN_STATE";
		static protected const OVER_STATE:String = "OVER_STATE";
 
		protected var m_overStyle:DisplayObject;	// objet graphique représentant l'état OVER
		protected var m_upStyle:DisplayObject;		// objet graphique représentant l'état UP
		protected var m_downStyle:DisplayObject;	// objet graphique représentant l'état DOWN
		protected var m_label:UITextField;			// objet de type UITextField qui est en fait un champ texte un peu amélioré
 
		public function Button()
		{
			/*
			 * ajout d'une méthode init pour gagner des ressources, en effet en AS3 tout ce qui se trouve dans le constructeur n'est
			 * pas optimisé à la compilation, on met donc toutes nos instructions dans une méthode privée init
			 * */
 
			init();
		}
 
		/**
		 * Détruit proprement un objet de type Button
		 */
 
		override public function destroy():void
		{
 
			/**
			 * On s'extrait de la display list de notre parent, on détruit notre composant m_label de type UITextField ainsi
			 * que nos objets graphiques qui représentent les différents états et on appelle la méthode
			 * destroy() parente @see com.actionscriptfacile.ui.UIComponent
			 */
 
			if ( parent && parent.contains( this ) )
				parent.removeChild( this );
 
			m_label.destroy();
			m_label = null;
			m_upStyle = m_downStyle = m_overStyle = null;
 
			super.destroy();
		}
 
		/**
		 * Initialise proprement les différents éléments du composant
		 */
		private function init():void
		{
 
			/**
			 * Création d'un objet de type UITextField que l'on assigne à la variable membre m_label.
			 * On aligne son texte par défaut en justifié et on indente le texte de 2 pixels.
			 * Ensuite nous mettons des valeurs totalement arbitraires pour les propriétés width, maxwidth, height
			 * et maxheight que l'on pourra changer par la suite.
			 */
 
			m_label = addChild( new UITextField() ) as UITextField;
			m_label.alignJustify();
			m_label.changeFormat( 'indent', 2 );
			m_label.maxHeight = m_label.height = 30;
			m_label.maxWidth = m_label.width = 80;
 
			/**
			 * nos objets graphiques de style sont des sprites vides par défaut
			 */
			m_overStyle = addChild( new Sprite() );
			m_upStyle = addChild( new Sprite() );
			m_downStyle = addChild( new Sprite() );
 
			setState( UP_STATE );
 
			mouseChildren = false;
		}
 
		/**
		 * Quand on sort de la display list du stage on tue tout les events listeners ce qui économise des ressources
		 */
 
		override public function onRemovedFromStage():void
		{
			removeEventListener( MouseEvent.MOUSE_UP, overHandler, false );
			removeEventListener( MouseEvent.ROLL_OUT, upStateHandler, false );
			removeEventListener( MouseEvent.MOUSE_DOWN, downStateHandler, false );
			removeEventListener( MouseEvent.ROLL_OVER, overHandler, false );
		}
 
		/**
		 * On initialise les events listeners uniquement lorsque le composant est ajouté à la displaylist du stage.
		 * En procédant de la sorte, on utilise les ressources uniquement lorsque cela s'avère nécessaire.
		 */
		override public function onAddedToStage():void
		{
			addEventListener( MouseEvent.MOUSE_UP, overHandler, false );
			addEventListener( MouseEvent.ROLL_OUT, upStateHandler, false );
			addEventListener( MouseEvent.MOUSE_DOWN, downStateHandler, false );
			addEventListener( MouseEvent.ROLL_OVER, overHandler, false );
		}
 
		/**
		 * @see com.actionscriptfacile.ui.UIComponent
		 */
		override public function resize( p_width:Number, p_height:Number ):void
		{
 
			/*
			 * on redéfinit les maxWidth et maxHeight de notre m_label et on les définit à la taille de notre composant button.
			 * Ensuite on rédéfinit la taille de nos composants m_overStyle, m_downStyle, m_upStyle.
			 * */
 
			m_label.maxWidth = p_width;
			m_label.maxHeight = p_height;
 
			m_overStyle.width = m_label.width = m_downStyle.width = m_upStyle.width = p_width;
			m_overStyle.height = m_label.height = m_downStyle.height = m_upStyle.height = p_height;
		}
 
		/**
		 * Au survol on affiche l'état OVER par le biais de la méthode setState
		 * @param	e Evenement de type MouseEvent
		 */
		private function overHandler(e:MouseEvent):void { setState( OVER_STATE ); }
 
		/**
		 * Au survol on affiche l'état DOWN par le biais de la méthode setState
		 * @param	e Evenement de type MouseEvent
		 */
		private function downStateHandler(e:MouseEvent):void { setState ( DOWN_STATE ); }
 
		/**
		 * Au survol on affiche l'état UP par le biais de la méthode setState
		 * @param	e Evenement de type MouseEvent
		 */
		private function upStateHandler(e:MouseEvent):void { setState( UP_STATE ); }
 
		/**
		 *	Définit le texte du composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField
		 */
		public function set label( p_label:String ):void { m_label.text = p_label; }
 
		/**
		 *	Retourne le texte du composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField
		 */
		public function get label():String { return m_label.text; }
 
		/**
		 *	Retourne le composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField
		 */
		public function get labelField():UITextField { return m_label; }
 
		/**
		 *
		 * Cette méthode applique la skin définit en paramètre au composant.
		 *
		 * @param	p_skin Objet implémentant l'interface ISkin
		 */
 
		override public function applySkin(p_skin:ISkin):void
		{
 
			// on définit une variable de type Class qui servira à réceptionner toutes les définitions de notre objet skin
			var definition:Class;
 
			// on cherche la définition au sein de la skin qui répond au nom : BUTTON_OVER_SKIN
			definition = p_skin.getSkin( BUTTON_OVER_SKIN ) as Class;
 
			// si cette définition existe alors on en crées une nouvelle instance et on l'assigne à l'élément m_overStyle
			if ( definition != null )
				m_overStyle = new definition();
 
			/*
			 * On applique le même procédé pour tous les autres éléments du bouton
			 * */
 
			definition = p_skin.getSkin( BUTTON_DOWN_SKIN ) as Class;
 
			if ( definition != null )
				m_downStyle = new definition();
 
			definition = p_skin.getSkin( BUTTON_UP_SKIN ) as Class;
 
			if ( definition != null )
				m_upStyle = new definition();
 
			// on ajoute nos styles à la display list
			addChild( m_upStyle );
			addChild( m_downStyle );
			addChild( m_overStyle );
 
			// on affiche l'état par défaut.
			setState ( UP_STATE );
 
			// Et on redimensionne proprement nos nouveaux objets graphiques / états
			resize( width, height );
		}
 
		/**
		 *
		 * Change l'état graphique du bouton en fonction du paramètre p_state qui répresente l'id de l'état à afficher.
		 * Si l'état n'est pas valide l'état par défaut est l'état UP_STATE.
		 *
		 * @param	id de l'état à afficher
		 */
		protected function setState( p_state:String ):void
		{
 
			// on enlève tout les enfants de la display list
			while ( numChildren > 0 )
				removeChildAt( 0 );
 
			// puis on ajoute celui qui représente notre état.
 
			switch ( p_state )
			{
				case OVER_STATE:
					addChild( m_overStyle );
					break;
 
				case DOWN_STATE:
					addChild( m_downStyle );
					break;
 
				default:
					addChild( m_upStyle );
					break;
			}
 
			addChild( m_label );
		}
 
	}
 
}
package
{
	import com.actionscriptfacile.ui.button.Button;
	import com.as3facileexemple.skin.classic.DefaultButtonSkin;// import du skin du boutton
 
	import flash.display.Sprite;
 
	/**
	 * Exemple d'utilisation du composant Button.
	 * @author Matthieu
	 */
	public class ButtonExample extends Sprite
	{
 
		public function ButtonExample():void
		{
			// création un objet de type Button
			var button:Button = new Button();
 
			// définission du texte
			button.label = 'Button Component';
 
			// 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 ]
			button.applySkin( new DefaultButtonSkin() );
 
			// ajout à la displaylsit
			addChild( button );
 
			// définition de sa taille en 150 * 30 pixels
			button.resize( 150, 30 );
 
			// définition de la position du button sur la scène
			button.x = 60;
			button.y = 60;
 
			// acccès au composant de type UITextField (labelField)
			button.labelField.alignCenter(); // centre le texte
			button.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte
			button.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
			button.labelField.changeFormat("font", "Arial");// changement de la police du texte
		}
	}
}
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.button.ButtonDownSkin;
	import com.as3facile.skin.button.ButtonOverSkin;
	import com.as3facile.skin.button.ButtonUpSkin;
 
	import com.actionscriptfacile.skin.Skin;
	import com.actionscriptfacile.ui.button.Button;
 
	/**
	 * Définition du skin utilisé pour un composant Button
	 *
	 * @author Matthieu
	 */
	public class DefaultButtonSkin extends Skin
	{
 
		public function DefaultButtonSkin()
		{
			// Affectation de chaque élément du bouton à un skin
			setSkin( Button.BUTTON_DOWN_SKIN , ButtonDownSkin );// élément du bouton, classe graphique (movieclip) associée
			setSkin( Button.BUTTON_OVER_SKIN, ButtonOverSkin );
			setSkin( Button.BUTTON_UP_SKIN , ButtonUpSkin );
		}
 
	}
 
}


Développez des Jeux et Applications Flash avec la Formation AS3 Facile !

Recevez Gratuitement Des Cours en Vidéos, des codes source et des livrets de formation.
Et en bonus gratuit : Le Framework AS3 Facile ! 


Lorem elementum Phasellus id amet, sit risus Praesent libero. Sed diam