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

Livre Pratique d’ActionScript 3 partie 2

1 question

Écrit le 26 décembre par Matthieu
Publié dans le(s) sujet(s) Livres

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

Le Kit du Développeur Flash

 

Phrase résumé du livre : l’arrivée d’ActionScript 3 avec Flash 9 apporte des nouveautés et des performances extrêmement intéressantes. Avec une complémentarité des spécialisations Graphistes / Programmeurs, les applications Flash deviennent de plus en plus attractives et intuitives. Flash 10 enfonce le clou avec la gestion 3D, c’est l’avènement des jeuxvidéos et des applications où (presque) tout devient possible avec de l’imagination!

De Thibault Imbert 1096 pages (édition pdf), 1080 pages (édition livre broché).

Note : Ce livre étant extrêmement complet et intéressant (difficile à résumer 🙂 ), je le publie en plusieurs parties. En voici la deuxième , les suivantes viendront plus tard.

Lire la première partie de cette chronique : Livre Pratique d’ActionScript 3 Partie 1.

Chronique et résumé du livre

Suite à vos demandes, la chronique de ce livre vous permettra d’avoir une vue d’ensemble de la programmation ActionScript 3. Et également de posséder un ouvrage de référence pour apprendre les bases et beaucoup plus.

Voici la 2ème partie de la chronique du livre Pratique d’ActionScript 3Août 2008 – v 0.1. Vous pouvez lire la 1ère partie ici.

Chapitre 7 – Interactivité

L’interactivité est la grande force du Flash. Très rapidement, il est possible de réaliser une interface simple qui interagit avec un utilisateur.

Interactivité avec un SimpleButton

L’objet SimpleButton est un bouton constitué de 4 DisplayObject :

  • SimpleButton.upState : définit l’état haut.
  • SimpleButton.overState : définit l’état dessus.
  • SimpleButton.downState : définit l’état abaissé.
  • SimpleButton.hitTestState : définit l’état cliqué.

Il est possible de personnaliser chaque état du bouton. Je vous invite à lire ce tutoriel : Comment créer un Composant Bouton en AS3 ?

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

Créer un menu dynamique

Toute application Flash intègre souvent (voir systématiquement) une interface de navigation permettant à l’utilisateur de consulter l’ensemble du contenu.

Le menu est des classiques du genre que nous avons tous développés au moins une fois.

Le plus efficace est de générer votre menu, dynamiquement, à partir de données externes provenant soit :

  • d’un tableau local
  • d’un fichier XML local
  • ou de données provenant d’un serveur : avec PHP et une base de données MySQL par exemple.

Ci-dessous, un exemple de menu très simple :

https://www.actionscript-facile.com/wp-content/uploads/2010/12/swfaddress_exemple.swf

Lisez cet article pour comprendre sa conception et consulter son code source : Utiliser l’historique du navigateur dans Flash avec les boutons précédent / suivant.

Si vous avez des questions ou besoin d’information supplémentaires, posez les dans les commentaires ci-dessous.

Mouvement programmatique

Pour ajouter des effets à notre menu, nous pouvons utiliser la classe Tween intégrée à Flash ou des librairies open-source comme TweenLite.

La librairie TweenLite est très intéressante et facile d’utilisation. La page TweenLite vous monter un exemple d’utilisation en ActionScript 3

Si vous avez des questions ou besoin d’un tutoriel spécifique, demandez le dans les commentaires ci-dessous.

Afin de donner du mouvement à un objet graphique dans Flash, nous pouvons utiliser les événements Event.ENTER_FRAME ou TimerEvent.TIMER.

La classe Tween (de Flash) utilise en interne un événement Event.ENTER_FRAME afin de modifier la propriété de l’objet.

Plusieurs types de mouvements sont disponibles :

  • cinétique
  • élastique
  • rebond
  • ou constant.

Les différentes méthodes et propriétés de la classe Tween  permettent de gérer le mouvement. Il est possible d’ajouter des effets à partir des propriétés suivantes : les axes x et y, l’alpha

Pour utiliser les Tween de Flash, pensez à les importer dans votre code ActionScript 3.

Tween.as   
// import des classes Tween et Elastic pour le type de mouvement
import fl.transitions.Tween;
import fl.transitions.easing.Elastic;

Il est possible d’activer le comportement bouton sur des objets autres que SimpleButton. Pour cela, il suffit d’activer la propriété buttonMode.

La propriété buttonMode affecte un comportement bouton aux objets MovieClip et Sprite.

Pour que seul le DisplayObject principal reçoive les évènements de la souris, nous passons la valeur false à la propriété mouseChildren.

désactive les évènements souris des enfants

// activation du comportement bouton
monBouton.buttonMode = true;
mouseChildren = false; // désactive les évènements souris des enfants

Gestion du focus

2 nouveaux événements existent en ActionScript 3 pour gérer le focus (sur un objet Button par exemple):

  • Event.ACTIVATE : événement diffusé lorsque l’objet écouté gagne le focus.
  • Event.DEACTIVATE : événement diffusé lorsque l’objet écouté perd le focus.

Ces deux événements sont diffusés par tout DisplayObject présent ou non au sein de la liste d’affichage.

Grâce à ces événements, il est possible de fermer le menu lorsque l’animation perdra le focus et à l’inverse de le rouvrir.

Espace de coordonnées

Pour toutes les entrées souris, les objets graphiques (DisplayObject) diffusent des objets événementiels de type flash.events.MouseEvent.

Cette classe possède de nombreuses propriétés :

  • MouseEvent.altKey : indique si la touche ALT est enfoncée au moment du clic.
  • MouseEvent.buttonDown : indique si le bouton principal de la souris est enfoncé au moment du clic.
  • MouseEvent.delta : indique le nombre de lignes qui doivent défiler chaque fois que l’utilisateur fait tourner la molette de sa souris d’un cran.
  • MouseEvent.localX : indique les coordonnées X de la souris par rapport à l’espace de coordonnées de l’objet cliqué.
  • MouseEvent.localY : indique les coordonnées Y de la souris par rapport à l’espace de coordonnées de l’objet cliqué.
  • MouseEvent.relatedObject : indique l’objet sur lequel la souris pointe lors de l’événement MouseEvent.MOUSE_OUT.
  • MouseEvent.shiftKey : indique si la touche SHIFT est enfoncée au moment du clic.
  • MouseEvent.stageX : indique les coordonnées X de la souris par rapport à l’espace de coordonnées de l’objet Stage.
  • MouseEvent.stageY : indique les coordonnées Y de la souris par rapport à l’espace de coordonnées de l’objet Stage.

Les propriétés localX et localY renvoient les coordonnées de la souris par rapport aux coordonnées locale de l’objet cliqué.

Les propriétés stageX et stageY renvoient les coordonnées de la souris par rapport au scénario principal.

Évènement global

L’objet Stage permet d’écouter la souris de manière globale. En écoutant les évènements MouseEvent.MOUSE_MOVE et / ou MouseEvent.MOUSE_UP, vous pouvez déclencher des actions différentes sur votre application Flash.

En utilisant la méthode updateAfterEvent, vous forcez le rafraichissement de votre interface. De plus, cela permet une optimisation des performances de votre application Flash, l’appel de la méthode updateAfterEvent est indépendante du framerate (nombre d’image par seconde).

Gestion du clavier

Par défaut, l’objet Stage gère les entrées clavier.
Deux événements sont liés à l’écoute du clavier :

  • KeyboardEvent.KEY_DOWN : diffusé lorsqu’une touche du clavier est enfoncée.
  • KeyboardEvent.KEY_UP : diffusé lorsqu’une touche du clavier est relâchée.

Dès qu’un objet événementiel de type KeyboardEvent est diffusé, celle-ci possède de nombreuses propriétés :

  • KeyboardEvent.altKey : indique si la touche ALT est enfoncée.
  • KeyboardEvent.charCode : contient le code caractère Unicode correspondant à la touche du clavier.
  • KeyboardEvent.ctrlKey : indique si la touche CTRL du clavier est enfoncée.
  • KeyboardEvent.keyCode : valeur de code correspondant à la touche enfoncée ou relâchée.
  • KeyboardEvent.keyLocation : indique l’emplacement de la touche sur le clavier.
  • KeyboardEvent.shiftKey : indique si la touche SHIFT du clavier est enfoncée.

La propriété charCode permet de déterminer la touche enfoncée. Grâce à la méthode String.fromCharCode, nous évaluons le code Unicode. Puis, récupérons le caractère correspondant.

charCode   
// souscription auprès de l'objet stage pour l'événement KEY_DOWN
stage.addEventListener ( KeyboardEvent.KEY_DOWN, ecouteClavier );
 
function ecouteClavier ( pEvt:KeyboardEvent ):void
{
	// affiche : d,f,g, etc...
	trace( String.fromCharCode( pEvt.charCode ) );
}

Les codes de touche les plus courants sont stockés dans des propriétés statiques de la classe Keyboard.

Par exemple : Keyboard.SPACE, Keyboard.SHIFT, Keyboard.CONTROL… Consultez la liste des propriétés statiques sur l’aide en ligne d’Adobe.

Avec les propriétés (altKey, ctrlKey et shiftKey) de la classe MouseEvent, il est possible de détecter la combinaison de touches.

Il n’existe pas d’équivalent à la méthode isDown de la classe Key en ActionScript 3. Par contre, il est facile de simuler un comportement équivalent grâce à un objet de mémorisation.

stage.addEventListener ( KeyboardEvent.KEY_DOWN, toucheEnfoncee );
stage.addEventListener ( KeyboardEvent.KEY_UP, toucheRelachee );
 
// objet de mémorisation de l'état des touches
var touches:Object = new Object();
 
function toucheEnfoncee ( pEvt:KeyboardEvent ):void
{
	// marque la touche en cours comme enfoncée
	touches [ pEvt.keyCode ] = true;
}
 
function toucheRelachee ( pEvt:KeyboardEvent ):void
{
	// marque la touche en cours comme relachée
	touches [ pEvt.keyCode ] = false;
}
 
monPersonnage.addEventListener ( Event.ENTER_FRAME, deplace );
var etat:Number = personnage_mc.scaleX;
var vitesse:Number = 15;
 
function deplace ( pEvt:Event ):void
{
	// si la touche Keyboard.RIGHT est enfoncée
	if ( touches [ Keyboard.RIGHT ] )
	{
		pEvt.target.x += vitesse;
		pEvt.target.scaleX = etat;
	}
	// si la touche Keyboard.LEFT est enfoncée
	else if ( touches [ Keyboard.LEFT ] )
	{
		pEvt.target.x -= vitesse;
		pEvt.target.scaleX = -etat;
	}
}

Lorsqu’une animation est redimensionnée un événement Event.RESIZE est diffusé par l’objet Stage.

Grace à cet événement, nous pouvons ensuite gérer le positionnement des éléments graphiques, par rapport aux nouvelles dimensions de l’animation.

Par exemple, il est possible de conserver un logo centré, quelque soit le redimensionnement de l’application Flash.

Chapitre 8 – Programmation orienté objet

L’intérêt de la programmation orientée objet réside dans la séparation des tâches, l’organisation et la réutilisation du code. C’est à dire : à chaque type d’objet une tâche spécifique.

Dans le cas d’une galerie photo :

  • un objet peut gérer la connexion au serveur afin de récupérer les données.
  • un autre s’occupe de l’affichage.
  • et un dernier objet traite les entrées souris et clavier de l’utilisateur.

En connectant ces objets entre eux, nous donnons vie à une application.

Ci-dessous, un exemple de galerie photo composée de trois objets principaux.

Pour créer un nouveau type d’objet en ActionScript 3, nous devons créer une classe. Une classe est comme un moule permettant de créer des objets de même type.

Caractéristiques d’un langage objet :

  • Chaque objet est associé à une tâche spécifique.
  • Les méthodes définissent les capacités d’un objet.
  • Les propriétés définissent ses caractéristiques.
  • Une instance de classe est un objet créé à partir d’une classe.
  • Pour instancier un objet à partir d’une classe, nous utilisons le mot clé new. A partir d’une classe nous pouvons créer autant d’instances de cette classe que nous voulons.

En ActionScript 3, une classe doit être contenue dans un conteneur de classes appelé paquetage. Les paquetages (packages en anglais) permettent d’organiser les classes dans des répertoires.

Nous pouvons imaginer une application dynamique dans laquelle : une classe Connector serait placée dans un répertoire serveur et une autre classe PNGEncoder serait dans le répertoire encodage.

Le compilateur trouvera la classe selon le chemin renseigné par le paquetage. Pour définir un paquetage nous utilisons le mot clé package.

En ActionScript 3, il existe 5 type d’attributs pour les propriétés pour une classe :

  • internal : Par défaut, le membre est accessible uniquement depuis le paquetage en cours.
  • public : Accessible depuis n’importe quelle partie du code.
  • private : Le membre n’est accessible que depuis la même classe. Les sous-classes n’ont pas accès au membre.
  • protected : Le membre est accessible depuis la même classe, et les sous-classes.
  • static : Le membre est accessible uniquement depuis la classe, non depuis les instances.

Il y a également 4 attributs pour une classe :

  • dynamic : La classe accepte l’ajout de propriétés ou méthodes à l’exécution.
  • final : La classe ne peut pas être étendue.
  • internal (par défaut) : La classe n’est accessible que depuis les classes appartenant au même paquetage.
  • public : La classe est accessible depuis n’importe quel emplacement.

Le constructeur d’une classe permet d’initialiser l’objet créé. Le constructeur possède le même nom que la classe.

Il est possible d’avoir une référence à l’objet courant en utilisant le mot clé this. Toutes les méthodes d’une classe ont accès aux propriétés définies au sein cette classe.

L’encapsulation

L’encapsulation détermine la manière dont nous exposons les propriétés d’un objet envers le monde extérieur. Un objet bien pensé s’utilise sans montrer les détails de son implémentation.

Pour cela, il faut tout d’abord séparer les personnes utilisant les classes en deux catégories :

  • Le ou les auteurs de la classe.
  • Les personnes l’utilisant.

Deux groupes de méthodes d’accès aux propriétés d’une classe existent :

  • Les méthodes récupérant la valeur d’une propriété, appelées méthodes de récupération (getAge, getVille).
  • Les méthodes affectant une valeur à une propriété, appelées méthodes d’affectation (setAge, setVille).

Les méthodes de lecture et d’écriture : getter / setter sont ‘une simplification’ des méthodes d’accès. Elles permettent au développeur d’appeler de manière transparente ces méthodes comme si ce dernier ciblait une propriété.

Dans la majorité des cas, les propriétés d’un objet possède l’attribut private.

Un code encapsulé par des méthodes de récupération / d’affectation rend la classe évolutive et solide.

L’héritage

La notion d’héritage est un concept clé de la programmation orientée objet tiré directement du monde qui nous entoure. Tout élément du monde réel hérite d’un autre en le spécialisant. Ainsi en tant qu’être humain nous héritons de toutes les caractéristiques d’un mammifère, au même titre qu’une pomme hérite des caractéristiques du fruit.

L’héritage permet de réutiliser facilement les fonctionnalités d’une classe existante. La classe mère est appelée super-classe (super-type), la classe fille est appelée sous-classe (sous-type). Afin d’hériter d’une classe, nous utilisons le mot clé extends.

Avec l’héritage, une classe peut avoir plusieurs types. Partout où une classe mère est attendue nous pouvons utiliser une classe fille. C’est ce que nous appelons le polymorphisme.

Le transtypage

Le transtypage est un processus très simple qui consiste à faire passer un objet pour un autre auprès du compilateur : Type ( monObjet).

Surcharge

Le concept de surcharge (override) intervient lorsque nous avons besoin de modifier certaines fonctionnalités héritées. Si une méthode héritée n’est pas assez complète, nous pouvons surcharger celle-ci dans la sous-classe afin d’intégrer notre nouvelle version.

Chapitre 9 – Étendre les classes natives

La grande puissance de flash réside dans sa capacité à lier graphisme et programmation.

L’héritage ne se limite pas aux classes personnalisées et peut être appliquée à n’importe quelle classe de l’API du lecteur Flash. Il est possible d’étendre la classe native MovieClip, en définissant de nouvelles méthodes afin d’obtenir un MovieClip amélioré. D’autres classes natives peuvent aussi être étendues afin d’augmenter leurs capacités. C’est le cas de la classe Array, dont les différentes méthodes ne sont quelquefois pas suffisantes.

Toutes les classes natives ne sont pas sous-classables. La composition peut être utilisée afin d’augmenter les capacités d’une classe qui n’est pas sous-classable.

Étendre une classe native est un moyen élégant d’étendre les capacités d’ActionScript 3 ou du lecteur Flash.

Étendre les classes graphiques

Il est possible de lier un symbole existant à une sous-classe graphique définie manuellement. Le symbole hérite de toutes les fonctionnalités de la sous-classe.

Par exemple le clip Stylo (le graphisme) qui étend la classe MovieClip. Ainsi, Stylo possède toutes les propriétés, méthodes de MovieClip, plus les siennes propres.

Étendre les classes graphiques natives de Flash permet de créer des objets interactifs puissants et réutilisables. Au sein d’une sous-classe graphique, l’utilisation du mot clé this, fait directement référence au scénario du symbole.

Ci-dessous, un exemple des possibilités de flash en étendant les classes graphiques.

Chapitre 10 – Diffusion d’évènements personnalisés

Un évènement personnalisé est un événement qui n’existe pas au sein du lecteur Flash. Nous l’ajoutons afin de gérer les différentes interactions entre nos objets.

En ActionScript 3, pour diffuser un événement nous devons créer un objet événementiel. Celui-ci est représenté par une instance de la classe flash.events.Event.

Le modèle événementiel ActionScript 3 repose sur la classe EventDispatcher. Toutes les classes issues du paquetage flash peuvent diffuser des événements natifs ou personnalisés.

Afin de diffuser un événement, nous utilisons la méthode dispatchEvent. La méthode dispatchEvent accepte comme paramètre une instance de la classe Event.

Event.as   
// création d'un sprite
var monSprite:Sprite = new Sprite();
// écoute de l'événement monEvent
monSprite.addEventListener ( "monEvenement", ecouteur );
 
// fonction écouteur
function ecouteur (pEvt:Event):void
{
	// affiche [Event type="monEvenement" bubbles=false cancelable=false eventPhase=2]
	trace( pEvt );
}
 
// création de l'objet événementiel
var objetEvenementiel:Event = new Event (“monEvenement”, bubbles, cancelable);
 
// nous diffusons l'événement monEvenement
monSprite.dispatchEvent (objetEvenementiel);

Le constructeur de la classe Event accepte trois paramètres :

  • type : le nom de l’événement à diffuser.
  • bubbles : indique si l’événement participe à la phase de remontée.
  • cancelable : indique si l’événement peut être annulé.

Dans la plupart des cas, nous n’utilisons que le premier paramètre type de la classe Event.

Un événement doit porter un nom simple et intuitif. Afin de stocker le nom d’un événement nous utilisons toujours une propriété constante de classe.

Lorsque nous ne pouvons pas étendre la classe EventDispatcher. Nous stockons une instance de celle-ci. Puis nous déléguons les fonctionnalités en utilisant le principe de la composition.

L’interface IeventDispatcher permet une implémentation obligatoire des différentes méthodes nécessaires à la diffusion d’événements.

Pour transmettre des informations lors de la diffusion d’un événement, nous devons étendre la classe Event. Le but est de créer un objet événementiel spécifique à l’événement diffusé. Cet objet contient, au sein de ses propriétés, toutes les informations que nous souhaitons affecter à l’évènement diffusé.

Chapitre 11 – Classe du document

Par défaut le scénario d’un SWF est représenté par la classe MainTimeline.

Pour affecter une classe du document, nous utilisons le champ Classe du document de l’inspecteur de propriétés. L’instanciation de classe du document est transparente, le lecteur s’en charge automatiquement. L’instance de la classe du document devient le scénario principal.

L’utilisation d’une sous classe de Sprite comme classe du document est généralement déconseillée. Nous préférons utiliser une sous-classe de MovieClip. La puissance réside dans l’interaction entre les actions d’images et les fonctionnalités de la classe du document.

Ci-dessous, un exemple d’initialisation d’une application.

package org.bytearray.document
{
	import flash.display.MovieClip;
	import flash.events.Event;
 
	public class Application extends MovieClip
	{
		// propriété permettant l’exécution de la fonction de rappel
		private var rappel:Function;
 
		public function Application ()
		{
			// création du symbole Personnage
			var autrePersonnage:Personnage = new Personnage();
 
			// ajout à la liste d'affichage
			addChild ( autrePersonnage );
 
			// l'occurrence est centrée
			autrePersonnage.x = (stage.stageWidth - autrePersonnage.width)/2;
			autrePersonnage.y = (stage.stageHeight - autrePersonnage.height)/2;
		}
 
		// méthode de déplacement de la tête de lecture personnalisé
		public function myGotoAndStop ( pImage:int, pFonction:Function ):void
		{
			// écoute de l'événement Event.RENDER
			addEventListener ( Event.RENDER, miseAJour );
 
			// déplacement de la tête de lecture
			gotoAndStop ( pImage );
 
			// retourne un objet permettant
			rappel = pFonction;
 
			// force la diffusion de l'événement Event.RENDER
			stage.invalidate();
		}
 
		private function miseAJour ( pEvt:Event ):void
		{
			// nous tentons d'appeler la fonction de rappel
			try
			{
				rappel();
			// si cela échoue, nous affichons un message d'erreur
			} catch ( pErreur:Error )
			{
				trace("Erreur : La méthode de rappel n'a pas été définie");
				// dans tout les cas, nous supprimons
			// l'écoute de l'événement Event.RENDER
			} finally
			{
				removeEventListener ( Event.RENDER, miseAJour );
			}
		}
	}
}

En attendant la suite de la chronique “Pratique d’ActionScript 3”

Je vous invite à découvrir le site sur “Pratique d’ActionScript 3” et également le site de l’auteur Thibault Imbert (ByteArray.org).

Achetez l’Édition Brochée du Livre Pratique d’ActionScript 3

Téléchargez l’Édition pdf du Livre Pratique d’ActionScript 3 :

Télécharger “Pratique ActionScript 3” Pratique-d-ActionScript-3-version_0.1.4.zip – Téléchargé 888 fois – 28 MB



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 ! 


nunc felis nec dictum risus leo. ut