Sujets sur : bouton lien html flash as3 exemple

Cours ActionScript 3 ‘bouton lien html flash as3 exemple’

Comment créer un Composant Bouton en AS3 ?

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

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://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/button_exemple.swf

1	http://e6msyji6epr.exactdn.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é 1086 fois –

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

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

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.button.Button.as » bookmarkname= »com.actionscriptfacile.ui.button.Button.as »]

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 &amp;&amp; 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 &gt; 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 );
		}

	}

}

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

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 );

}

[/codesyntax]

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

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

{

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

}

[/codesyntax]

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

package com.as3facileexemple.skin.classic
{
	// Import des classes gérant la partie graphique du composant dans le fla (movieclip)
	// Provient de ui.swc (créé avec la compilation de UI.fla)
	import com.as3facile.skin.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 );
		}

	}

}

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 );

}

[/codesyntax]

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : bouton lien html flash as3 exemple

Cours ActionScript 3 ‘bouton lien html flash as3 exemple’

Comment créer un Composant Bouton en AS3 ?

I – Cahier Des Charges Fonctionnel d’un Bouton

II – Cahier Des Charges Techniques d’un Bouton

Contraintes techniques

Conclusion

Évolutions des fonctionnalités

Lock Button

Skin

Sources commentées

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

Cours Récents

Liens / Partenaires