AS3 - Survol du langage ActionScript

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Tutoriels Flash

<pageby nominor="false" comments="false"/>

Introduction

Historique et positionnement de AS3

Le langage ActionScript a été conçu au départ comme une simple série de commandes que l'on pouvait attacher à des boutons ou des images. Ce langage qu'on pouvait résumer en quelques pages est dévenu un véritable language de scripting (avec beaucoup de librairies incluses).

  • Flash 2: Contient juste 5 commandes: play", "stop", "getURL", and "gotoAndPlay". Ce petit langage était un langage séquenciel.
  • Flash 4 (2000/2003): ActionScript "1.0". Contient des boucles, conditionnels, variables etc., il s'agit d'un début de langage procédural
  • Flash 7 (2003-2006): ActionScript 2.0. Proche de la proposition ECMAScript de Netscape].
  • Flash 9 (2006): ActionScript 3.0 et un un langage orienté objets.

La syntaxe de base de ActionScript 3.0 (AS3) est dérivée de ECMASCript. En fait il s'agit d'une extension qui était basé sur la proposition abandonné de ECMAScript édition 4. Certains éléments du langage sont standardisés, par exemple:

La logique de la programmation des interfaces (GUI) en ActionScript ressemble beaucoup à celle qui est préconisé pour JavaScript (encore peu utilisée dans les faits). La logique de développement de programmes larges, par contre, ressemble plus à la logique du développement avec Java.

Selon le manuel Introduction à ActionScript 3.0 (consulté le 27 oct. 2010), «ActionScript est le langage de programmation des environnements d’exécution d’Adobe® Flash® Player et Adobe® AIR™. Il assure l’interactivité, le traitement des données et bien d’autres fonctions pour le contenu Flash, Flex et AIR et les applications associées. ActionScript s’exécute dans la machine virtuelle ActionScript (AVM), un composant de Flash Player et AIR. Le code ActionScript est généralement compilé en pseudo-code (sorte de langage de programmation écrit et compris par les ordinateurs) par un compilateur, tel celui intégré à Adobe® Flash® Professional ou celui intégré à Adobe® Flash® Builder™ et fourni dans le kit de développement SDK d’Adobe® Flex™. Le pseudo-code est intégré aux fichiers SWF, qui sont exécutés par Flash Player et AIR.»

On peut utiliser le langage ActionScript de plusieurs façons, notamment

  • Pour scripter la timeline de Flash: AS3 est utilisé de façon plutôt procédural et il ne faut pas connaître les principes de la programmation orientée-objets. C'est l'usage typique du "Flash Designer".
  • En ActionScript pur: Un programme est défini dans éditeur de programmation y compris celui de Flash Professional (CS3/4/5), ensuite compilé. AS3 est utilisé comme un langage de programmation "normal" (comme Java par exemple)
  • Avec Flex: Inséré dans Mxml, soit avec un éditeur de son choix, soit avec l'IDE Flash Builder/Flex Builder. La différence avec "ActionScript put" est qu'on peut profiter d'un méchansime simple et puissant pour définir un GUI et d'une bibliothèque de composants.

On peut combiner ces trois types d'utilisation. Par exemple, il arrive souvent aux programmeurs ActionScript d'utiliser des objets dessinés avec Flash Professional.

Le principe de la programmation

Un programme informatique peut se résuméer par deux aspects principaux :

  • Il est constitué d’une série d’instructions ou d’étapes que l’ordinateur doit effectuer une après les autres.
  • Chaque étape implique à terme la manipulation d’informations ou de données.

On utilise souvent l'expression: 

programme = algorithme + données

Voici un exemple fourni par Adobe qui illustre ce principe:

Par nature, le seul rôle d’une instruction de programme consiste à manipuler quelques données stockées dans la mémoire de l’ordinateur. Prenons un exemple simple : vous indiquez à l’ordinateur de faire la somme de deux nombres et de stocker le résultat en mémoire. Dans un cas de figure plus compliqué, imaginez un rectangle dessiné sur l’écran ; vous rédigez un programme pour le déplacer à un autre emplacement de l’écran. L’ordinateur mémorise certaines informations relatives au rectangle : les coordonnées x, y de sa position, sa largeur et sa hauteur, sa couleur, etc. Chacune de ces informations est stockée dans la mémoire de l’ordinateur. Un programme de déplacement du rectangle comporterait des étapes telles que « régler la coordonnée x sur 200 ; régler la coordonnée y sur 150. » En d’autres termes, il définirait de nouvelles valeurs pour les coordonnées x et y. En arrière-plan, l’ordinateur manipule ces données pour convertir les nombres en images visibles à l’écran. Il suffit cependant de savoir que le processus de « déplacement d’un rectangle à l’écran » implique uniquement la modification de données dans la mémoire de l’ordinateur.

La syntaxe de AS3

Chaque programme informatique doit scrupuleusement respecter un certaine syntaxe, car l'ordinateur est à priori ce que peut appeller un "processeur syntaxique". Dans ActionScript 3 il faut notamment respecter les règles suivantes. Vous pouvez revenir plus tard pour les détails.

Commentaires
Les commentaires servent à documenter un programme et ne seront pas interprétés par la machine. Il existe deux types de commentaires: les commentaires d’une ligne et les commentaires de plusieurs lignes.
  • Les commentaires d’une ligne commencent par deux barres obliques (//) et continuent jusqu’à la fin de la ligne, par exemple
 var volumeBalle:Int = 10 // par défaut le volume de la balle est de 10
  • Les commentaires de plusieurs lignes commencent par une barre oblique et un astérisque (/*) et se terminent pas un astérisque et une barre oblique (*/), par exemple:
 /* Début de l'explication
 ....
 */
Les noms
Dès vos premiers pas vous seriez appelé à définir des noms, par exemple pour une variable. Un nom doit commencer par une lettre, suivi d'autres lettres, de chiffres ou du caractère "_".
Bons exemples
 maBalle
 balle137
 balle_rouge
Mauvais exemples
 ma Balle
 1balle
 balle-rouge
Respect de la casse (Angl. "case")
Le nom MaBalle n'est pas identique à maBalle
Mots réservés
Il existe un certain nombre de mots réservés et que vous n'avez pas le droit d'utiliser dans vos noms de variables, de fonctions etc. En fait, le manuel distingue trois variantes, mais on conseille simplement d'éviter tous les mots de la liste suivante:
  • abstract, as, boolean, break, byte, case, cast, catch, char, class, const, continue, debugger, default, delete, do, double, dynamique, each, else, enum, export, extends, false, final, finally, float, fonction, for, get, goto, if, implements, import, in, inclure, instanceof, interface, internal, intrinsic, is, long, namespace, native, native, new, null, override, package, private, protected, prototype, public, return, set, short, static, super, switch, synchronized, this, throw, throws, to, to, transient, true, try, type, typeof, use, var, virtual, void, volatile, while, with
Instructions séparées par des points virgules ou des fins de ligne
Vous pouvez utiliser le point-virgule (;) à la fin d’une instruction. Si vous omettez ce caractère, le compilateur suppose que chaque ligne de code représente une instruction distincte. On suggère de placer chaque instruction sur une ligne séparée et d'utiliser les ";". Votre code sera plus intelligible...
Littéraux
ces objets sont des valeurs qui apparaissent "tel quels" comme par exemple les nombres, ou encore les valeurs booléens true/false
Syntax à points
Comme vous allez voir plus tard, l’opérateur point (.) permet d’accéder aux propriétés et aux méthodes d’un objet. La syntaxe à point vous permet de vous rapporter à une méthode ou à une propriété de classe à l’aide d’un nom d’occurrence, suivi par l’opérateur point et le nom de la méthode ou de la propriété. Par exemple
 // donne la propriété position x de l'objet "balleRouge"
 balleRouge.x 
 // début du dessin, l'objet dans la propriété graphics lance la méthode beginFill
 balleRouge.graphics.beginFill(0xFF0000)
Parenthèses, Accolades et crochets
On peut utiliser les parenthèses pour grouper des éléments dans une expression mathématique ou logique. Rien à signaler ici.
Un usage très spécial en AS3 est le suivant: ous pouvez utiliser des parenthèses avec l’opérateur virgule (,) pour évaluer une série d’expressions et renvoyer le résultat de l’expression finale, comme indiqué dans l’exemple suivant :
 var a:int = 2; 
 var b:int = 3; 
 trace((a++, b++, a+b)); // 7
Finalement, on le verra plus loin, on utilise des parenthèses pour transmettre un ou plusieurs paramètres à des fonctions ou à des méthodes. Donc un nom suivi d'une parenthèse indique qu'on invoque une méthode ou une fonction.
 trace("bonjour");

Les accolades "{ }" servent à délimiter des blocs ou à identifier le corps d'une fonction comme vous allez voir. Les chrochets "[ ]" servent à identifier des éléments d'une liste (d'un tableau). En aucun cas on peut substituer un type de parenthèse par un autre comme le font certains débutants qui ne comprennent pas que l'ordinateur fonctionne avec des formes....

Eléments de scripting pour la timeline

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.


Lorsqu'un "Flash designer" parle de ActionScript, il fait référence à son usage simplifié pour scripter des timelines dans l'outil Flash Developper (CS3/4/5/etc).

Ainsi il ne va jamais créer des artéfacts complexes comme des classes, mais il les utilisera quand-même comme nous allons voir. Ci-dessous on introduit quelques éléments de programmation.

Données et variables

En informatique les données, c-a-d les informations que l'on manipule, sont de types différents. En simplifiant, on peut dire qu'une donnée est est une valeur.

Le manuel ajoute les précisions suivantes: «Un type de données définit un ensemble de valeurs. Par exemple, le type de données Boolean est l’ensemble de deux valeurs exactement : true et false. Outre le type de données Boolean, ActionScript 3.0 définit plusieurs autres types de données couramment utilisés tels que String, Number et Array. Vous pouvez définir vos types de donnés en utilisant des classes ou des interfaces afin de définir un ensemble de valeurs personnalisé. Toutes les valeurs dans ActionScript 3.0, qu’elles soient primitives ou complexes, sont des objets. Une valeur primitive est une valeur appartenant à l’un des types de données suivants : Boolean, int, Number, String et uint. L’utilisation de valeurs primitives est généralement plus rapide que l’utilisation de valeurs complexes car ActionScript stocke les valeurs primitives de façon à permettre des optimisations de vitesse et de mémoire.» [1]

On peut distinguer entres les types de données suivantes:

les valeurs primitives
Une valeur primitive est une valeur appartenant à l’un des types de données suivants : Boolean, int, Number, String, uint, null et void. Voici quelques clarification et exemples.
  • Boolean: soit true, soit false
  • int: comprend l’ensemble des entiers allant de -2147483648 (-231) à 2147483647 (231 -1). Exemples: 1, 3, 12349, -50
  • Number: Représente les nombres rationnelles. Exemples: 345.1, 3.14, -20.0
  • Sring: une séquence de caractères 16 bits, autrement dit des caractères Unicode au format UTF-16. Exemples: "EdutechWiki", "edutech wiki", "université de genève", "首页", "维基百科，自由的百科全书"
  • uint: Entiers positifs. Exemples: 1, 2, 10
  • null et void: Sont des types qui veulent dire "rien" (à préciser plus tard). Elle ne contiennent qu'une valeur. void = undefined et null = null
Les valeurs complexes
Une valeur complexe est une valeur qui n’est pas une valeur primitive. Les types de données qui définissent des ensembles de valeurs complexes comprennent Object, Array, Date, Error, Function, RegExp, XML et XMLList.
Type de donnés Objet

Avant d'introduire la notion d'objet ActionScript nous reprenons la définition qu'[Adobe donne de la programmation orientée objets (consulté en no 2010). «La programmation orientée objets (POO) est une technique d’organisation du code d’un programme en le groupant en objets. Les objets sont ici des éléments individuels comportant des informations (valeurs de données) et des fonctionnalités. L’approche orientée objet permet de regrouper des éléments particuliers d’informations avec des fonctionnalités ou des actions communes associées à ces informations. Vous pourriez, par exemple, regrouper les informations d’un enregistrement musical (titre de l’album, titre de la piste ou nom de l’artiste) avec des fonctionnalités comme l’ajout de la piste à une liste de lecture ou la lecture de tous les enregistrement de cet artiste. Ces éléments sont rassemblés en un seul élément, l’objet (par exemple, un « album » ou une « piste »). La possibilité d’intégrer ainsi toutes ces valeurs et ces fonctions offre divers avantages : il est possible de n’utiliser qu’une seule variable plutôt que plusieurs d’entre elles, ainsi que de regrouper des fonctionnalités liées entre elles. La combinaison des informations et des fonctionnalités permet de structurer les programmes pour qu’ils se rapprochent davantage du fonctionnement humain.»


Fonctions

Décisions et boucles

Utilisation d'objets

Dans ActionScript 3.0, chaque objet est défini par une classe. Une classe peut être considérée comme un modèle (ou plan) pour un type d’objet. Les définitions de classe peuvent inclure des propriétés (variables) et des méthodes (internes) et qui définissent le comportement lié à la classe. Les valeurs stockées dans les propriétés peuvent être des valeurs primitives ou complexes (c.f. ci-dessus). Certaines propriétés et méthodes sont privés (c.a.d dire pas visibles et accessibles pour le programmeur/concepteur).

ActionScript contient de très nombreuses classes intégrées faisant partie du langage de base. Certaines de ces classes intégrées (Number, Boolean et String, par exemple), représentent les valeurs primitives disponibles dans ActionScript. D’autres, telles que les classe Array, Math et XML, définissent des objets plus complexes. Mais ce qui est beaucoup plus important de savoir est que Flash est essentiellement défini par des classes ActionScript. Autrement dit, presque tous ce qu'on peut dessiner avec CS5 et beaucoup plus (par ex. de la vraie 3D) peut être programmé en ActionScript.

Pratiquement, cela veut dire que le designer doit savoir travailler avec des objets de divers façons. Il doit, par exemple:

  • connaître certaines propriétés et méthodes de certaines classes comme le "Movie Clip".
  • savoir utiliser certaines bibliothèques crées par des développeurs indépendants.
  • savoir utiliser ses propres clips déposés dans la library

Création d'un objet

L'instruction suivant va créer une variable de type NomDeLaClasse en faisant appel à l´opérateur new ... 

var monObjet:NomDeLaClasse = new NomDeLaClasse();

Exemple qui crée un objet animable (en gros, un clip sans timeline): 

var objet_anime:Sprite = new Sprite ();

Utilisation d'un clip de la library

Il existe deux façons d'utiliser un clip déposé dans la library.

(1) La "méthode Flash designer" a été introduite dans tous les tutoriels sur l'interactivité

  1. Un clip dans la library est une sorte classe. Quand on tire un clip sur la scène on crée un objet.
  2. Dans le panneau propriétés un donne un nom à l'objet. Cela consiste en fait à créer une variable qui contient l'objet

Ensuite utiliser comme on appris

(2) La méthode par ActionScript se fait en deux parties

  1. Etant donné que les scripts attachés à la timeline n'ont pas accès à la library, il faut d'aborder exporter l'item en question (par exemple un clip) pour ActionScript.
    • Clic droit sur le clip (ou autre élément) dans la library
    • Clic sur avanceds et sélectionner Export for ActionScript
    • Vous pouvez, si vous avez envie, changer le nom de la classe
  2. Ensuite, avec ActionScript, on crée un ou plusieurs objets de cette classe. S'il s'agit d'un clip on le positionne et si nécessaire et on l'ajoute dans la scène. stage est la variable qui contient le graphe de scène (c-a-d. l'hiérarchie des objets visibles dans un frame donné).

Exemple pour un clip: 

var fromage:Cheese = new Cheese();
// positionner l'objet
cheese.x=100;
cheese.y=100;
// ajouter l'objet sur la scène
stage.addChild(cheese);

Exemple pour un son (voir Flash CS4 - Son pour plus de détails) 

var request:URLRequest = new URLRequest("track.mp3");
var son:Sound = new Sound();
son.load(request);
// ensuite on peut le jouer
son.play();

Les paquetages (packages)

Les packages permettent de regrouper des définitions de classe de façon à faciliter le partage de code et à réduire les conflits de noms. Si vous utilisez des classes développées par des auteurs indépendants vous devez toujours importer des paquets (packages) pour pouvoir utiliser ces bibliothèques. Ceci est également vraie pour certains paquets de Adobe.

Si vous souhaitez utiliser une classe se trouvant à l’intérieur d’un package, vous devez importer soit le package soit la classe en question. En général, les instructions import doivent être aussi spécifiques que possible.

FocusManager est une classe d'un paquet Adobe qu'il faut explicitement importer lorsqu'on veut jouer avec le "focus" de la souris. 

import fl.managers.FocusManager;

Voici un exemple de paquets d'un bibliothèque externe qu'il faut importer pour créer une animation de particules décrite dans en:FliNT particle system FliNT particle system (EdutechWiki Anglais). 

import org.flintparticles.common.counters.*;
import org.flintparticles.common.displayObjects.RadialDot;
import org.flintparticles.common.initializers.*;
import org.flintparticles.twoD.actions.*;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.*;
import org.flintparticles.twoD.renderers.*;
import org.flintparticles.twoD.zones.*;

D'autres exemples se trouvent ci-dessous.

Dans la définition du langage ActionScript 3.0 pour CS5 on retrouve cinq grandes catégories de paquets. Dans Flex (Flash Builder), la classe

(1) Le niveau "supérieur" inclut quelques classes et fonctions qui font partie du noyeau du langage. Par exemple la classes Math.

(2) Le package air et ses sous-packages includent des spécificités de du moteur d'exécution air.

(3) Le package fl et ses sous-packages contient les composants et les animations (Motion, Tween, Transition, etc.). La classes mx ne peuvent pas êtres utilisés avec fl.

(4) Le package flash et ses sous-packages définissent tout ce qui concerne le Flash player, donc graphismes, animations, etc.

(5) Le package flashx pour le nouvel engin de texte layout

(6) Les packages mx et spark pour développeurs Flex. Dans flex les classes fl ne sont pas disponibles et sont remplacées par des fonctionalités de la classe mx.

Pour voir une fois le manuel:

Notes:

(1) En tant que simple Flash developer, il suffit en règle générale d'obéir quand un manuel vous dit qu'il faut importer une classe. Ceci dit, il existe des situations où il faut chercher soi-même le nom du package à importer dans le manuel qui décrit les classes.... et cela peut s'avérer très péniple pour un non-informaticien. On reviendra sur ce sujet...

(2) Le développeur ActionScript "pur" qui ne scripte pas dans la timeline, par contre, doit tout le temps importer des paquets. Et pour cela il doit savoir consulter le manuel.

Par exemple pour créer un tableau interactif avec le composant DataGrid, il faut importer 

 import fl.controls.DataGrid;
 import fl.controls.ScrollPolicy

(3) Un concept associé au paqutage est celui d´"espace de nom". Sans rentrer dans les détails ici, «Les packages et les espaces de noms sont des concepts associés. Les packages vous permettent de regrouper des définitions de classe de façon à faciliter le partage de code et à réduire les conflits de noms. Les espaces de noms vous permettent de contrôler la visibilité des identifiants (noms de méthode et de propriété, par exemple) et peuvent être appliqués à un code se trouvant à l’intérieur ou à l’extérieur d’un package. Utilisez des packages pour organiser vos fichiers de classe et des espaces de noms pour gérer la visibilité des méthodes et des propriétés individuelles.» (Adobe, consulté le 2 novembre 2010 à 16:42 (CET))

Utilisation d'une méthode dite de classe

Il existe des classes qui définissent des méthodes que l'on peut utiliser au niveau de la classe. Autrement dit, il n'est pas nécessaire de créer un objet pour y avoir accès. Certains exemples existe dans les bibliothèques Flash de Adobe, par exemple la méthode de classe de SoundMixer tue tous les sons qui sont en train de jouer. 

SoundMixer.stopAll();

Un autre exmple, où il faut utiliser des classes sont certains bibliothèques externes utilisables par un public non-informaticien. Voici un exemple de la GreenSock Tweening Platform. La méthode to de class TweenMax fait une interpolation de movement non-linéaire avec votre clip mon_clip. 

import com.greensock.*; 
import com.greensock.easing.*;
 
TweenMax.to (mon_clip, 3, 
  {bezier:[{x:271, y:160}, {x:50, y:318}, {x:300, y:345}],
          orientToBezier:true, 
          ease:Bounce.easeOut});

Voir le tutoriel Flash CS4 - Utilisation de librairies pour des détails.

Eléments de la programmation orientée objets

(à faire)

Liens

Chez Adobe
Wikipedia et sites soeurs
  • ActionScript (Wikipedia Anglais, la version française n'est pas très bonne en oct 2010)


Remerciements et modification du copyright

Sinon, on conseille aussi le livre suivant (en Anglais) pour une introduction douce à ActionScript:

  • Gary Rosenzweig, Flash Game University, Que (1st Ed.). ISBN 0789737027. All code in actionscript 3. So far the best beginner's text I found. Environment is CS3 (also can be used with CS4 and CS5) - Daniel K. Schneider 10:16, 4 June 2010 (UTC)
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=AS3_-_Survol_du_langage_ActionScript&oldid=17376 »