Actionscript 3.0 by chrix

Programmer en ActionScript 3.0 : vue d’ensemble, prise en main et exemples des nouveaux concepts

À la découverte d’ActionScript 3.0

Packages et classes

Découvrir la programmation graphique

Travailler avec les animations et les boutons

v 22

Les structures de base

v 43

La programmation orientée objet

v 61

24/01/08

Focus

Programmer en ActionScript 3.0 Programmer avec ActionScript 3.0

ActionScript 3.0 est la première intégration d’ECMAScript E4, le langage standard de l’Internet, à Flash. Vous n’apprendrez pas seulement les rouages d’ActionScript 3.0, mais également tous les langages basés autour de l’ECMAScript à venir. Plutôt que de se cantonner à Flash 9 et Flex 2, ActionScript 3.0 devient le véritable langage de l’Internet.

sophie vandenabeele <sophievandenabeele@free.fr>

La version 3.0 d’ActionScript représente l’une des avancées les plus significatives de ce langage depuis l’apparition de Flash. À chaque nouvelle version, les développeurs et les designers ont bénéficié d’améliorations considérables au niveau d’ActionScript. ActionScript 1.0 s’est étoffé au fur et à mesure de la progression du langage. ActionScript 2.0 a ensuite introduit les classes utilisateur stockées dans des fichiers séparés et représente la première inclinaison vers un langage de programmation orientée objet.

Focus

Programmer en ActionScript 3.0

Sommaire

Focus

Programmer en ActionScript 3.0 : vue d’ensemble, prise en main et exemples des nouveaux concepts Ce Focus va vous aider à développer des applications en ActionScript 3.0 avec Flash 9, actuellement disponible dans une version alpha pour les utilisateurs disposant d’une licence Flash 8, à l’adresse : http://labs.adobe.com/technologies/ flash9as3preview/. Tous les exemples de code source accompagnent ce PDF et sont disponibles depuis votre page de téléchargement.

À la découverte d’ActionScript 3.0

D’autre part, de nombreux développeurs Flash utilisent ActionScript presque exclusivement comme un langage de création web. Ils développent en règle générale des scripts en ActionScript 1.0 et 2.0 à l’aide du panneau Action de Flash. Ces scripts participent ensuite à soutenir des Applications Internet Riches (Rich Internet Applications, RIA) d’une grande variété, qui tendent à se rapprocher de nos applications bureautiques. La plupart du travail consiste en une programmation séquentielle. Ce groupe de développeurs ne dispose pas nécessairement d’une formation traditionnelle en programmation, mais il s’est perfectionné au ﬁl des ans, en suivant en autodidacte toutes les évolutions d’ActionScript.

24/01/08

Enﬁn, certains développeurs ont choisi ActionScript après avoir maîtrisé d’autres langages de programmation orientée objet (POO), comme Java ou C#. Ces développeurs vont rapidement retrouver leurs marques avec cette nouvelle version d’ActionScript, qui correspond très largement à leurs habitudes. Dans la mesure où ActionScript 3.0 respecte de manière stricte les standards de l’ECMAScript, les différences essentielles se situeront dans le typage des variables ou

Programmer avec ActionScript 3.0

Les designers ont tendance à sélectionner un objet de la scène (comme un bouton ou un clip), puis à lui associer des scripts courts à l’aide de la fonction on. Un designer peut avoir conçu, par exemple, un bouton qui lance une animation lorsqu’on le presse. Une animation peut aussi changer de forme lorsqu’on la survole à la souris. Toutefois, cette méthode n’est plus disponible avec ActionScript 3.0 ; à travers ce Focus, vous apprendrez comment reproduire le même type d’effets à l’aide de la nouvelle version du langage. Nous invitons d’ailleurs les designers à se reporter à la section Découvrir la programmation graphique. Les nouvelles approches méritent largement cet investissement et vos efforts paieront à long-terme. ActionScript évolue à une vitesse considérable et les développeurs Flash professionnels doivent également tenir le même rythme.

sophie vandenabeele <sophievandenabeele@free.fr> •

Si vous êtes designer ou développeur, ActionScript vous sert à créer trois sortes de programmes.

Focus

la syntaxe d’autres fonctionnalités, mais les objectifs et les méthodes seront les mêmes que pour les autres langages de POO. La plupart des packages d’ActionScript 3.0 sont propres à l’environnement de Flash, mais leur structure ressemble étroitement à ce que connaissent les développeurs à travers les autres langages orientés objet. Au-delà de ces trois catégories principales d’utilisateurs d’ActionScript, nous sommes sûrs que de nombreux développeurs adeptes de JavaScript, VB.NET ou PHP ont d’ores et déjà goûté à ce langage. Dans la mesure où ECMAScript a été désigné comme un standard général pour les langages de l’Internet, tous ces autres langages seront probablement amenés à évoluer dans ce sens. Ainsi, en apprenant aujourd’hui à maîtriser ActionScript 3.0, vous vous préparez aux évolutions des autres langages et vous anticipez vos besoins futurs. (Pour une compréhension plus détaillée d’ActionScript 3.0, reportez-vous à Le meilleur d’ActionScript 3.0 de Colin Moock (à paraître) et à ActionScript 3 par l’exemple de Joey Lott, Darron Schall et Keith Peters, publiés tous les deux par O’Reilly).

Packages et classes

24/01/08

Programmer avec ActionScript 3.0

Exemple 1. Les bases : AfficheTexte.as package { import flash.display.Sprite; import flash.text.TextField; public class AfficheTexte extends Sprite { public function AfficheTexte():void { var actionTexte:TextField=new TextField(); var msg:String="Bonjour ActionScript 3.ohhhhh"; actionTexte.text=msg; this.addChild(actionTexte); actionTexte.width=((msg.length)*12)+4; actionTexte.height=16; actionTexte.x=200;

sophie vandenabeele <sophievandenabeele@free.fr> •

L’une des fonctions les plus importantes introduites avec ActionScript 3.0 concerne l’utilisation de packages et de classes. Plus précisément, tout votre travail consiste à comprendre que vous n’exploitez que certaines fonctionnalités d’ActionScript à la fois. Par exemple, si vous souhaitez travailler autour d’un champ de texte, vous devrez ainsi commencer par importer la classe TextField du package flash.text. Bien entendu, vous devrez savoir que la classe TextField se situe dans le package flash.text et connaître également l’emplacement de toutes les autres classes. Pour commencer sur de bonnes bases, regardez le script de l’exemple 1 :

Focus

actionTexte.y=150; } } }

Enregistrez ce script sous le nom AfficheTexte.as. Pour le tester, suivez ces quelques étapes : 1. Ouvrez un nouveau document Flash et dans le champ Document Class du panneau des Propriétés, saisissez le nom de la classe, AfficheTexte, comme le montre la figure 1. 2. Enregistrez le document Flash sous le nom TexteSimple.fla dans le même répertoire que le ﬁchier AfficheTexte.as. 3. Déroulez le menu Control → Test Movie (raccourcis-clavier : PC = [Ctrl + Entrée], Mac = [Pomme + Entrée]). Au milieu de l’écran, le message Bonjour ActionScript 3.ohhhhh devrait alors apparaître, comme à la figure 1.

Déterminer le package et la classe appropriés

24/01/08

De manière schématique, vous pouvez imaginer un package comme un répertoire de classes. Si vous regardez attentivement le package flash.text, par exemple, vous trouverez des classes comme TextField, TextFormat et bien d’autres encore relatives au traitement du texte. Le tableau 1 dresse la liste des packages et des classes correspondantes, avec une brève description de chacun d’entre eux.

Programmer avec ActionScript 3.0

Pour mieux comprendre l’intérêt de n’importer que les classes nécessaires, imaginez un voyage à Tahiti. Lorsque vous préparez vos bagages, vous emportez des vêtements adaptés aux conditions tropicales, votre maillot de bain et peut-être un masque et un tuba pour plonger parmi les poissons et les coraux. Ce n’est pas parce que vous disposez d’une parka de sports d’hiver, de bottes fourrées et d’un petit radiateur d’appoint que vous devez les emmener avec vous ! Vous envisagerez peut-être d’apporter votre ordinateur portable, mais vous n’essayerez jamais d’emballer votre ordinateur de bureau dans votre valise. Vous n’emportez que ce dont vous avez réellement besoin aﬁn de voyager le plus léger possible. C’est exactement la même chose avec les importations en ActionScript 3.0 : vous ne prenez que les classes dont vous avez besoin. Lorsque vous exécutez votre programme, il se lance de manière bien plus efﬁcace et rapide et il ne prend plus autant de mémoire dans la mesure où vous n’avez « emballé » que les éléments nécessaires, rien d’autre.

sophie vandenabeele <sophievandenabeele@free.fr> •

Avant d’aller plus loin, il est important de comprendre pourquoi vous avez importé les classes TextField et Sprite. Après tout, l’écriture d’un script dans le panneau Actions ne nécessitait pas ce genre d’importations dans les versions précédentes d’ActionScript ! ActionScript 3.0 a réparti environ 185 classes dans 17 packages différents. Dans notre exemple précédent, seules deux de ces 185 classes s’avéraient nécessaires : plutôt que d’ajouter 183 autres classes superﬂues, nous n’avons donc importé que les deux classes réellement utiles.

Utilisé par les développeurs d’outils pour l’environnement auteur de Flash.

flash.accessibility

Deux classes d’accessibilité.

flash.display

Un package essentiel pour les afﬁchages visuels qui contient 31 classes.

flash.errors

Un package qui fait partie de l’API de Flash Player et qui est spéciﬁque à ActionScript.

flash.events

Une large gamme de classes d’événements pour toutes les situations que vous serez susceptible de rencontrer.

flash.external

Une simple classe ExternalInterface.

flash.filters

Permet l’ajout dynamique de ﬁltres bitmap sur des objets d’afﬁchage.

flash.geom

Des classes pour soutenir la classe BitmapData et la mise en cache des bitmaps.

24/01/08

adobe.utils

sophie vandenabeele <sophievandenabeele@free.fr> •

Nom du package Description

Programmer avec ActionScript 3.0

Tableau 1. Les packages d’ActionScript 3.0

Focus

Figure 1. Le script est associé au document Flash à travers la classe de document

flash.net

Des classes relatives à la connexion, aux ﬂux et aux requêtes d’URL.

flash.print

Trois classes liées à l’impression.

flash.profiler

Ne contient que la seule fonction showRedrawRegions.

flash.system

Des classes pour accéder aux fonctionnalités au niveau du système.

flash.text

Des classes liées au texte, aux polices, aux feuilles de style et ainsi de suite.

flash.ui

Les classes liées à l’interface utilisateur, notamment ContextMenu, le clavier et la souris.

flash.utils

Ce package comprend des fonctions, des interfaces et des classes pour une grande variété de tâches comme la mise en place et la suppression d’intervalles, l’échappement du code UTF-8, la récupération du nom de classes et la déﬁnition de timers.

flash.xml

Classes liées au XML (la classe XMLSocket est dans le package flash.net)

Plus vous utiliserez ActionScript 3.0, plus vous vous familiariserez avec l’emplacement de certaines classes précises dans les packages. Lorsque vous n’importez pas correctement une classe ou une fonction, vous avez droit à un message d’erreur. Pour voir le type d’erreur que génère l’oubli d’un import, commentez la ligne qui importe la classe TextField dans l’exemple 1 : La figure 2 montre les erreurs de compilation générées lorsque vous testez l’application sans importer au préalable la classe TextField. Figure 2. Des erreurs de compilation dues à l’oubli de l’importation de la classe du package

24/01/08

L’une des nouveautés les plus intéressantes de la fenêtre de Sortie de Flash 9 est le bouton Go to Source. Lorsque vous cliquez dessus, vous êtes directement envoyé à la source de l’erreur sélectionnée. Si le ﬁchier qui contient l’erreur n’est pas chargé, il l’est automatiquement pour vous.

Programmer avec ActionScript 3.0

//import flash.text.TextField;

sophie vandenabeele <sophievandenabeele@free.fr> •

Des classes relatives à la vidéo, au son, à la caméra et au microphone.

Focus

flash.media

Focus

Durant votre travail, vous prendrez rapidement l’habitude d’ouvrir Le guide de référence d’ActionScript 3.0 (ce guide est intégré par défaut en anglais avec la version publique d’ActionScript 3.0 que vous aurez téléchargée depuis l’adresse http://labs.adobe.com/technologies/flash9as3preview/). La colonne en haut à gauche dresse la liste des packages et la colonne en bas à droite afﬁche toutes les classes correspondantes. Si vous cliquez sur une classe que vous souhaitez importer, la colonne de droite présente toutes les informations nécessaires, notamment les propriétés, les méthodes, les constantes et les autres détails qui concernent cette classe. En haut de la fenêtre, vous apercevez le chemin d’accès au package. Par exemple, si vous cliquez sur la classe FileReference, vous apprenez qu’elle appartient au package flash.net.

Utiliser le caractère générique (*) avec les packages Vous allez rapidement vous apercevoir que vous pouvez utiliser le caractère générique, un astérisque (*), au lieu de mentionner précisément le nom d’une classe dans le chemin d’un import. Par exemple, au lieu de saisir la ligne suivante : vous pouvez utiliser ce joker pour importer l’ensemble du package : import flash.display.*; En procédant de cette manière, en particulier pour un package comme display, vous n’avez plus à importer toutes les classes dont vous avez besoin car le package est chargé dans son intégralité.

24/01/08

Par ailleurs, un autre intérêt de la spécification des classes et des fonctions exactes que nécessite votre script se dégage : vous dressez ainsi la liste précise des imports dont vous avez besoin, véritable reflet de votre application, pour y revenir ultérieurement. Si vous souhaitez réutiliser la classe que vous avez construite, cette liste d’import vous donne un aperçu rapide de votre script. Par exemple, si votre script importe un Sprite (un Sprite est un bloc de construction de base de la liste d’affichage, un peu comme un MovieClip sans scénario) mais que votre nouvelle classe nécessite la classe MovieClip, vous pouvez rapidement changer l’importation de Sprite par MovieClip. En ajoutant le caractère générique * après l’expression import vous chargez toutes les classes d’un package et vous gagnez du temps lors du développement. Mais gardez à l’esprit que ce joker n’est pas sans inconvénient ; dans cet exemple, le caractère générique importerait toutes les classes du package display. N’oubliez pas de revenir ensuite sur votre code source et de modifier ces caractères génériques pour n’importer que les classes dont votre application a besoin : dans le cas contraire, votre application prendrait plus de temps à charger et pourrait tourner plus lentement.

Programmer avec ActionScript 3.0

Toutefois, vous pouvez vous épargner un temps précieux lors de vos premiers pas en ActionScript 3.0 grâce à ce caractère générique et vous apprendrez l’emplacement de chaque classe à votre rythme. Lorsque vous développez votre projet, n’hésitez pas à recourir à ce joker. Lorsque vous aurez terminé, revenez sur vos pas et supprimez ces caractères génériques en important précisément les classes dont votre application a besoin.

sophie vandenabeele <sophievandenabeele@free.fr> •

import flash.display.Sprite;

Focus

Découvrir la programmation graphique Si vous avez déjà travaillé avec ActionScript par le passé, il y a de fortes chances pour que vous l’ayez employé afin de manipuler des éléments sur la scène. L’expression programmation graphique désigne justement la capacité d’ActionScript 3.0 à travailler avec les différents éléments qui apparaissent sur la scène. Mais pour mieux cerner le concept et pour y parvenir, vous devez comprendre le fonctionnement de la structure d’affichage d’ActionScript 3.0. Dans la nouvelle architecture, Stage est le conteneur de base de la structure d’affichage. Lorsque vous greffez d’autres conteneurs à la scène, ils s’ajoutent à une liste d’affichage. Chaque conteneur peut gérer des objets graphiques différents qui apparaissent à l’écran. Pour bien débuter, nous allons voir comment créer un conteneur d’objet (c’est-à-dire un objet DisplayObjectContainer) placé sur la scène, avant d’ajouter un objet Shape (« forme ») dans un conteneur.

Maintenant que vous disposez d’un script et d’un exemple visuel de programmation graphique, vous pouvez mieux comprendre sa structure.

24/01/08

À la ligne 9, grâce à la méthode addChild(), l’instance de Sprite baptisée conteneur est ajoutée au conteneur de base de l’objet Stage. Ensuite, l’instance de Shape (baptisée bloc) est ajoutée au conteneur conteneur, toujours à l’aide de la méthode addChild(). Mais cette fois, l’instance conteneur est le conteneur et non la scène. Pour préciser un conteneur, la méthode addChild() est simplement ajoutée à l’instance du conteneur : conteneur.addChild(bloc). Grâce aux coordonnées x et y qui correspondent au centre de la scène, le carré est repositionné avec x=0 et y=0 pour le coin supérieur gauche. Si vous avez déjà utilisé ActionScript, vous remarquerez que plutôt que d’employer _x et _y pour désigner les positions horizontale et verticale, les signes underscores ont été supprimés des identiﬁants de propriété (les dimensions de la scène sont celles par défaut : largeur=550, hauteur=400).

Programmer avec ActionScript 3.0

Observez la figure 3. Elle présente le script à l’origine du carré qui apparaît sur la scène, juste au-dessous. Pour reproduire cette petite application et pour mieux comprendre le fonctionnement de la programmation graphique, suivez ces quelques étapes : 1. Ouvrez un nouveau document Flash et cliquez sur la première image-clé. 2. Ouvrez le panneau Actions et saisissez le script qui apparaît à la figure 3. 3. Enregistrez le ﬁchier et testez-le.

sophie vandenabeele <sophievandenabeele@free.fr> •

Si vous connaissez déjà Flash, vous savez que vous pouvez placer dans un objet MovieClip des objets comme des champs de texte, des dessins et même des animations. Toutefois, ActionScript 3.0 dispose d’une nouvelle classe Sprite qui peut contenir d’autres objets, dans le même ordre d’idée que la classe MovieClip. Mais contrairement à cette dernière, la classe Sprite ne possède pas de scénario. (Plus précisément, la classe MovieClip est une sous-classe de Sprite). Dépourvue de scénario, la classe Sprite nécessite ainsi moins de mémoire et peut être exploitée comme un conteneur idéal pour une grande variété d’objets tout en conservant de nombreux avantages de l’objet MovieClip.

//import flash.display.Shape; //import flash.display.Sprite;

24/01/08

Testez l’application à nouveau. Tout devrait se passer normalement et vous ne devriez pas voir de différences par rapport à votre premier essai. En effet, lorsque vous placez un script dans une image-clé du scénario à l’aide du panneau Actions, tous les packages sont chargés automatiquement. Vos scripts sont donc loin d’être aussi efﬁcaces que précédemment et ils sont entachés par des dizaines de classes et de packages superﬂus.

sophie vandenabeele <sophievandenabeele@free.fr> •

Maintenant, commentez les deux lignes import pour tester le résultat :

Programmer avec ActionScript 3.0

La nouvelle architecture de l’affichage fonctionne donc ainsi. À chaque fois qu’un nouveau conteneur est ajouté à la scène ou à un autre conteneur, il se greffe à la liste d’affichage (vous aurez remarqué qu’une référence à stage, avec la première lettre en minuscule, correspond à l’emplacement où vous dessinez et placez des objets sur différents calques. En revanche, une référence à Stage, qui débute par une majuscule, correspond à la classe Stage). La figure 4 montre un modèle abstrait de l’application de la figure 3. du point de vue de l’architecture de l’affichage.

Focus

Figure 3. Le script qui place une forme dans un objet Sprite sur la scène

Focus

Figure 4. L’architecture de l’affichage est composée de conteneurs d’objet graphique et des objets graphiques qu’ils contiennent

Exemple 2. ActionCarre.as

24/01/08

Programmer avec ActionScript 3.0

package { import flash.display.Shape; import flash.display.Sprite; public class ActionCarre extends Sprite { public function ActionCarre():void { var conteneur:Sprite=new Sprite(); var bloc:Shape=new Shape(); bloc.graphics.beginFill(0xcc0000); bloc.graphics.lineStyle(4,0x00cc00); bloc.graphics.drawRect(0,0, 150,150); bloc.graphics.endFill(); addChild(conteneur); conteneur.addChild(bloc); conteneur.x=(550/2)-75; conteneur.y=(400/2)-75;

sophie vandenabeele <sophievandenabeele@free.fr> •

Pour utiliser les imports efficacement, vous devez les isoler dans une classe de votre propre crû et les appeler à partir de la classe Document dans votre document Flash (cette technique apparaît à l’exemple 1). Ainsi, pour optimiser votre code, vous rédigerez des fichiers ActionScript (dotés de l’extension .as) plutôt que de saisir votre script dans le panneau Actions. L’exemple 2 montre à quoi devrait ressembler votre code si vous le définissez dans une classe. Nous avons appelé la classe ActionCarre et enregistré le fichier sous le nom ActionCarre.as.

Focus

} } }

Supprimez le code ActionScript de l’image et saisissez ActionCarre dans le champ Document Class du panneau Propriétés. Désormais, lorsque vous testerez le script, vous obtiendrez le même résultat mais vous serez assuré que seules les classes nécessaires seront chargées (avec le scénario, le ﬁchier SWF pèse 556 octets contre 458 octets pour celui qui repose sur une classe — une différence de 98 octets).

Charger et modiﬁer les éléments graphiques Maintenant que vous avez une bonne idée générale de l’architecture de l’afﬁchage et que vous savez comment ajouter des éléments sur la scène ou dans un conteneur, travailler avec les autres objets graphiques sera plus simple.

24/01/08

Exemple 3. LogoLoader.as package { import flash.display.Sprite; import flash.display.Loader; import flash.net.URLRequest; public class LogoLoader extends Sprite { public function LogoLoader():void

Programmer avec ActionScript 3.0

L’exemple 3 montre le processus qui met en place et positionne une image sur la scène. Vous pouvez charger des fichiers GIF, JPEG et PNG. Si vous essayez de charger d’autres types de fichiers, vous aurez droit à un message d’erreur. C’est également le cas des fichiers PSD (Photoshop) que vous pouvez charger directement sur la scène avec Flash 9, rapprochement avec Adobe oblige !, et qui sont convertis dans un format affichable à l’écran. L’objet Loader devient le conteneur et il peut également être traité comme un objet graphique à part entière. Toutes les propriétés que vous seriez susceptible d’appliquer à une instance MovieClip peuvent donc être associées à l’instance Loader. Ouvrez un fichier ActionScript et enregistrez le script présenté à l’exemple 3 sous le nom LogoLoader.as.

sophie vandenabeele <sophievandenabeele@free.fr> •

Une nouvelle fonctionnalité très importante d’ActionScript 3.0 est la nouvelle classe Loader. Cette classe vous permet de charger des images externes ou des fichiers SWF (elle remplace la classe MovieClipLoader issue d’ActionScript 2.0). Imaginons, par exemple, que vous utilisiez souvent le même logo. L’instance Loader vous permet de charger l’image dans l’instance, dont le nom devient alors la référence de l’objet pour l’afficher sur la scène. À l’aide de la méthode load() et de l’instance URLRequest qui pointe vers le fichier de l’image, vous pouvez ensuite la placer n’importe où dans un conteneur.

var logoLoader:Loader=new Loader(); var logoHaut:URLRequest=new URLRequest("logo.gif"); logoLoader.load(logoHaut); addChild(logoLoader); logoLoader.x=40; logoLoader.y=20;

Focus

{

} } }

Ouvrez un nouveau document Flash et dans la classe Document, saisissez LogoLoader. Vous pouvez remplacer logo.gif par le ﬁchier de votre choix ; assurez-vous de placer l’image dans le même répertoire que le ﬁchier LogoLoader.as.

Pour illustrer ce fonctionnement, l’exemple 4 charge deux images dont la seconde doit être placée derrière la première. Pour y parvenir, notre script emploie la méthode addChildAt(imageRef, profondeur). Ouvrez un nouveau fichier ActionScript et saisissez le code présenté à l’exemple 4. Enregistrez le fichier sous le nom LogoLoaderAt.as et ajoutez deux images dans le même répertoire, qui correspondent aux fichiers logo.gif et etoile.png.

24/01/08

Exemple 4. LogoLoaderAt.as package { import flash.display.Sprite; import flash.display.Loader; import flash.net.URLRequest; public class LogoLoaderAt extends Sprite { public function LogoLoaderAt():void

Programmer avec ActionScript 3.0

Toutefois, grâce à l’architecture de la programmation graphique d’ActionScript 3.0, il est possible d’ajouter plus d’une image à Stage ou à un autre conteneur, en-dehors d’un Loader. De plus, vous pouvez jouer sur la profondeur de chaque image. À chaque fois que vous ajoutez un élément à un conteneur, on assigne à cet élément une valeur partant de 0 et incrémentée à chaque nouvel élément enfant. Plus la valeur est basse, plus l’image est basse dans le conteneur. Plus clairement, la première image que vous placez dans un conteneur est en arrière-plan et la dernière est au premier plan.

sophie vandenabeele <sophievandenabeele@free.fr> •

Lorsque vous testez le script, l’image devrait apparaître sur la scène. L’objet Loader ne peut contenir qu’un seul objet graphique enfant : le ﬁchier qu’il charge. Même si Loader fonctionne comme un conteneur d’objet graphique, vous ne pouvez pas lui ajoutez plusieurs éléments comme c’est le cas de Sprite.

var etoileLoader:Loader=new Loader(); var logoLoader:Loader=new Loader(); var etoileHaut:URLRequest=new URLRequest("etoile.png"); var logoHaut:URLRequest=new URLRequest("logo.gif"); etoileLoader.load(etoileHaut); addChild(etoileLoader); logoLoader.load(logoHaut); addChildAt(logoLoader,0); logoLoader.x=40; logoLoader.y=20; etoileLoader.x=175; etoileLoader.y=75;

Focus

{

} }

Dans un nouveau document Flash, saisissez LogoLoaderAt dans la classe Document du panneau des Propriétés et testez l’application.

Si vous êtes avant tout un graphiste, vous devriez considérer ActionScript 3.0 comme une excellente opportunité de contrôler les images créées à travers d’autres applications. Gardez également à l’esprit que vous pouvez toujours décorer la scène avec des images vectorielles directement créées sous Flash et que vous pouvez positionner les autres images à l’aide d’ActionScript 3.0.

Charger et afﬁcher du texte

24/01/08

L’une des fonctionnalités les plus importantes d’ActionScript est la possibilité de charger dynamiquement du texte. Les applications Flash qui chargent tout le texte d’un coup ne manquent pas seulement de souplesse : elles sont également trop lourdes et inefﬁcaces. Le texte est relativement « léger » ; il n’occupe que quelques octets au maximum. Toutefois, le texte à l’intérieur d’un ﬁchier SWF peut rapidement devenir lourd et lent. Il est donc primordial d’apprendre à charger dynamiquement du texte pour optimiser toutes vos applications.

Programmer avec ActionScript 3.0

La figure 5 montre le résultat du code présenté à l’exemple 3 (à gauche) et de l’exemple 4 (à droite). Elle montre également ce qui se passe si on utilise addChild() au lieu de addChildAt() à l’exemple 4. La ﬁgure sur la gauche présente le logo avec l’image en forme d’étoile derrière le palmier : par défaut, le premier élément enfant ajouté au conteneur dispose d’une plus grande profondeur. En revanche, la ﬁgure sur la droite montre l’étoile au-dessus du palmier parce que le script a ajouté la seconde image, le logo, à un niveau plus bas (0). L’étoile apparaît donc au-dessus du palmier.

sophie vandenabeele <sophievandenabeele@free.fr> •

}

Focus

Figure 5. Des images chargées sans (à gauche) et avec (à droite) un contrôle de la profondeur

Dans cet exemple précis, vous allez voir comment utiliser une classe en la référençant directement depuis un script situé dans le scénario à l’aide du panneau Actions. Ensuite, vous verrez comment parvenir au même résultat à partir d’un ﬁchier spécial qui fait ofﬁce de lien entre la classe et la classe Document du document Flash. Pour commencer, saisissez le script de l’exemple 5 et enregistrez-le sous le nom TexteLoader.as. Exemple 5. TexteLoader.as

flash.display.Sprite; flash.events.DataEvent; flash.events.Event; flash.net.URLLoader;

24/01/08

package { import import import import

Programmer avec ActionScript 3.0

Charger du texte externe est légèrement plus complexe que de charger des images ou des ﬁchiers SWF. Vous devez notamment utiliser un gestionnaire d’événements pour savoir quand le ﬁchier texte a été entièrement chargé : ce n’est qu’après son chargement complet que vous pourrez placer le texte dans une instance de TextField. Pour y parvenir, vous devrez donc recourir à un gestionnaire d’événement qui signale (à l’aide de la constante Event.COMPLETE) que les données ont été chargées et qu’elles sont prêtes à être placées dans un champ de texte.

sophie vandenabeele <sophievandenabeele@free.fr> •

ActionScript 3.0 n’utilise pas la classe Loader pour charger des fichiers texte externes : il exploite plutôt la classe URLLoader. Par ailleurs, URLLoader est situé dans le package flash.net et non dans flash.display. L’une des raisons de cette différence tient au fait que le contenu chargé par la classe Loader est placé dans une instance de DisplayObjectContainer tandis que le texte doit être placé dans une instance de TextField. Toutefois, l’objet TextField est placé dans un conteneur d’affichage et devient lui-même un élément de la liste d’affichage, à l’instar des objets non-textuels.

Cette classe possède un niveau d’abstraction qui offre une plus grande souplesse dans son implémentation. Comme la classe constructeur dispose d’un paramètre, il est facile d’utiliser le script pour ajouter n’importe quel ﬁchier texte de

24/01/08

Le script se décompose en deux parties essentielles : la fonction TexteLoader et la fonction chargeMaintenant. Le constructeur de la classe (la fonction TexteLoader) dispose d’un paramètre unique, une chaîne où l’utilisateur indique le nom (URL) du champ de texte à charger. À l’aide d’une instance d’URLRequest, le fichier texte est alors chargé. Grâce à un gestionnaire d’événements, l’instance d’URLLoader attend l’événement COMPLETE, qui est une constante de type DataEvent. Lorsque le fichier est chargé, la fonction privée (qui n’est donc visible que pour les références de la même classe) exécute le script qui crée un champ de texte et place le contenu chargé (à l’aide de la propriété data de l’instance URLLoader) dans le champ. La fonction addChild() achève le processus en affichant le champ de texte.

sophie vandenabeele <sophievandenabeele@free.fr> •

}

Programmer avec ActionScript 3.0

public class TexteLoader extends Sprite { public function TexteLoader(fichier:String):void { var txtChargeur:URLLoader = new URLLoader(); txtLoader.addEventListener(Event.COMPLETE,chargeMaintenant); var fichierMaintenant:URLRequest = new URLRequest(fichier); txtChargeur.load(fichierMaintenant); } private function chargeMaintenant(evenement:Event):void { var chargeVerif:URLLoader = URLLoader(evenement.target); var afficheTexte:TextField=new TextField(); afficheTexte.width=300; afficheTexte.height=300; afficheTexte.type=TextFieldType.DYNAMIC; afficheTexte.multiline=true; afficheTexte.wordWrap=true; afficheTexte.text=chargeVerif.data; this.addChild(afficheTexte); } }

Focus

import flash.net.URLRequest; import flash.text.TextField; import flash.text.TextFieldType;

Focus

votre choix. On accède à cette classe directement à travers le document Flash grâce à du code placé sur le scénario. Saisissez le script suivant sur le scénario d’un document Flash en cliquant sur la première image-clé et en ajoutant les lignes suivantes au panneau Actions : var chargeurTexte:TexteLoader=new TexteLoader("Schopenhauer.txt"); this.addChild(chargeurTexte); chargeurTexte.x=100; chargeurTexte.y=100;

Enregistrez le fichier sous le nom TexteLoader.fla et placez-le dans le même répertoire que le fichier TexteLoader.as. Par ailleurs, toujours dans le même répertoire, placez un fichier texte avec le contenu de votre choix. Dans notre exemple, le script charge la citation suivante, qui a été enregistrée dans un fichier texte :

Citation

Vous pouvez utiliser le ﬁchier texte de votre choix, mais assurez-vous d’avoir remplacé la chaîne Schopenhauer.txt par le nom de votre ﬁchier.

afficheTexte.type=TextFieldType.DYNAMIC; afficheTexte.multiline=true; afficheTexte.wordWrap=true;

On assigne à la propriété TextField.type l’une des deux constantes de la classe TextFieldType : DYNAMIC ou INPUT. La classe n’est pas construite comme on en a l’habitude et se comporte plutôt comme une valeur de propriété. Par ailleurs, lorsque vous ajoutez des ﬁchiers texte, vous avez intérêt à assigner les valeurs booléennes à true pour les propriétés multiline et wordWrap de la classe TextField. Les valeurs par défaut de TextField prévoient en effet d’afﬁcher le texte sur une simple ligne, sans retour automatique à la ligne.

24/01/08

Mais au lieu d’utiliser le code ajouté au scénario, vous pouvez éviter de charger inutilement votre package en passant une simple référence à un script d’implémentation. Souvent baptisé Main.as, ce script peut être utilisé pour implémenter une classe que vous avez construite. Cette classe « principale » se contente ainsi d’instancier les éléments d’une autre classe. Ouvrez un nouveau ﬁchier ActionScript et ajoutez le script suivant :

Programmer avec ActionScript 3.0

Prenez le temps d’analyser la manière de construire l’instance de TextField. Les lignes suivantes déﬁnissent l’aspect du champ :

sophie vandenabeele <sophievandenabeele@free.fr> •

La découverte de la vérité est moins entravée par l’apparence fallacieuse des choses — qui mène à l’erreur — ou par la faiblesse du raisonnement que par les opinions préconçues. — Arthur Schopenhauer

Focus

Enregistrez le script sous le nom Main.as et, dans un nouveau document Flash, saisissez Main dans le champ Document Class. Lorsque vous testez l’application, vous obtenez exactement le même résultat que précédemment avec le script dans le scénario. Dans notre exemple, nous avons utilisé à nouveau la citation de Schopenhauer et le ﬁchier SWF généré est rigoureusement identique à notre essai précédent. Seule la méthode d’exécution du test a changé entre nos deux exemples.

Lorsque vous travaillez avec des champs de texte, vous avez souvent besoin de modiﬁer les valeurs par défaut des propriétés de TextField. Par exemple, la propriété wordWrap (retour à la ligne) est assignée à false, tout comme la propriété multiline. Vous aurez probablement besoin de les passer à true, comme nous l’avons fait dans l’exemple précédent. ActionScript 3.0 dispose d’une classe TextFormat très proche de celle qu’on retrouvait déjà dans les versions précédentes d’ActionScript. Toutefois, de nouvelles fonctionnalités ont été ajoutées et méritent qu’on s’y attarde ! La mise en forme du texte dans un champ s’articule autour des classes TextFormat et StyleSheet. Dans cette section, nous allons nous concentrer sur la classe TextFormat ; la section suivante s’attardera sur le texte HTML et nous passerons en revue la classe StyleSheet plus précisément.

monTextField.defaultTextFormat=monTextFormat;

24/01/08

La classe TextFormat contient plusieurs propriétés auxquelles vous devez assigner des valeurs. Ensuite, vous assignez l’instance de TextFormat à l’instance de TextField pour appliquer la mise en forme de votre choix à tout le texte de l’instance de TextField. Utilisez la propriété TextField.defaultTextFormat pour assigner une instance de TextFormat, comme à la ligne suivante :

Programmer avec ActionScript 3.0

Mettre le texte en forme

sophie vandenabeele <sophievandenabeele@free.fr> •

package { import flash.display.Sprite; public class Main extends Sprite { public function Main():void { var chargeTexte:TexteLoader=new TexteLoader("Schopenhauer.txt"); this.addChild(chargeTexte); chargeTexte.x=100; chargeTexte.y=100; } } }

Focus

L’exemple 6 illustre de manière très simple l’utilisation de la classe TextFormat avec la classe TextField. Remarquez au passage l’introduction de la nouvelle classe TextFieldAutoSize. On l’utilise pour définir automatiquement la taille du champ en fonction de la quantité de texte chargé. Ouvrez un nouveau fichier ActionScript et saisissez le code de l’exemple 6. Enregistrez le fichier sous le nom Rimbaud.as et dans un document Flash, saisissez Rimbaud dans le champ Document Class. Lorsque vous testerez l’application, vous devriez voir les quatre premiers vers du Dormeur du Val d’Arthur Rimbaud en rouge, dans la police Comic Sans MS en 16 points. Le tiret qui précède l’épigraphe « Arthur Rimbaud » est créé à partir de l’Unicode \u2015. En utilisant le même format, vous pouvez ajouter n’importe quel symbole Unicode dont vous avez besoin. Par ailleurs, n’oubliez pas d’enregistrer votre fichier ActionScript dans un jeu de caractères UTF-8 si vous désirez afficher des accents (généralement, votre éditeur de texte offre cette option au moment de l’enregistrement. C’est également le cas si vous saisissez directement votre fichier ActionScript dans Flash 9).

var rimbaudTexte:TextField=new TextField(); rimbaudTexte.autoSize=TextFieldAutoSize.LEFT;

24/01/08

var rimbaudFormat:TextFormat=new TextFormat(); rimbaudFormat.font="Comic Sans MS"; rimbaudFormat.color=0xcc0000; rimbaudFormat.size=16;

Programmer avec ActionScript 3.0

public class Rimbaud extends Sprite { public function Rimbaud():void { var quatreVers:String="C'est un trou de verdure où chante une rivière\n"; quatreVers+="Accrochant follement aux herbes des haillons\n"; quatreVers+="D'argent; où le soleil, de la montagne fière,\n"; quatreVers+="Luit : c'est un petit val qui mousse de rayons.\n\n"; quatreVers+="\u2015Arthur Rimbaud";

sophie vandenabeele <sophievandenabeele@free.fr> •

Exemple 6. Utiliser la classe TextFormat avec TextField package { import flash.display.Sprite; import flash.text.TextField; import flash.text.TextFormat; import flash.text.TextFieldAutoSize;

Focus

rimbaudTexte.defaultTextFormat=rimbaudFormat; rimbaudTexte.text=quatreVers; this.addChild(rimbaudText); rimbaudTexte.x=100; rimbaudTexte.y=90; } } }

Contrairement aux versions précédentes d’ActionScript, on assigne à la propriété autoSize une constante TextFieldAutoSize. Par ailleurs, l’expression newline n’a plus cours en ActionScript 3.0. Pour ajouter une nouvelle ligne, utilisez le caractère d’échappement \n en le greffant directement à la chaîne de caractère.

Texte HTML et feuilles de style

var poeme:Object = new Object(); poeme.textAlign = "center"; poeme.color = "#9900aa"; poeme.marginLeft=20;

Le code précédent est équivalent à la déclaration suivante en CSS :

Après avoir déﬁni un ou plusieurs styles, vous « chargez » la feuille de style à l’aide de la méthode StyleSheet.setStyle(), comme ci-après :

24/01/08

poeme { text-align: center; color: #9900aa; margin-left: 20pt; }

Programmer avec ActionScript 3.0

Par ailleurs, la création d’une instance StyleSheet en ActionScript 3.0 diffère de nos réﬂexes précédents en ActionScript 2.0. Les différents styles au sein d’une feuille de style sont créés à l’aide d’une instance d’Object. Chaque propriété CSS est alors assignée sous la forme d’une propriété d’Object. Par exemple, le script suivant montre comment on déﬁnit un style CSS en ActionScript 3.0 :

sophie vandenabeele <sophievandenabeele@free.fr> •

ActionScript 3.0 offre un ensemble de propriétés liées aux feuilles de style (Cascading Style Sheet, CSS) que l’on emploie pour déﬁnir les styles en HTML. Même s’il est possible d’appliquer de nombreux styles CSS à du texte HTML, ActionScript 3.0 n’a retenu que treize propriétés CSS. Le tableau 2 dresse la liste de toutes ces propriétés CSS accessibles en ActionScript 3.0.

Focus

var maStyleSheet:StyleSheet = new Style; monStyle,setStyle(".poeme", poeme);

Enﬁn, vous appliquez la feuille de style de la même manière que vous associerez des styles CSS à une page HTML. L’exemple 7 montre comment créer différents aspects CSS en ActionScript 3.0 et les appliquer dans un script. Tableau 2. Propriétés CSS disponibles en ActionScript 3.0 Propriétés

Valeurs possibles

Hexadécimal uniquement, au format #RRGGBB (par exemple, #00aa33). Les noms de couleurs (red, blue, {) ne sont pas acceptés. display inline, block ou none. fontFamily Les noms des polices séparés par des virgules (Arial Bold, Verdana). fontSize Un nombre seulement, sans préciser l’unité (comme pt, px, etc.). fontStyle normal ou italic. fontWeight normal ou bold. kerning true ou false (paramètre très limité, disponible uniquement pour les ﬁchiers SWF développés sous Windows). Il s’agit du crénage séparant certaines paires de caractères pour en améliorer la lisibilité. letterSpacing Un nombre seulement, sans préciser l’unité. marginLeft Un nombre seulement, sans préciser l’unité (comme pt, px, etc.). marginRight Un nombre seulement, sans préciser l’unité (comme pt, px, etc.). textAlign left, center, right ou justify textDecoration none ou underline textIndent Un nombre seulement, sans préciser l’unité (comme em). color

sophie vandenabeele <sophievandenabeele@free.fr> •

24/01/08

Exemple 7. Styliser.as package { import flash.display.Sprite;

Programmer avec ActionScript 3.0

Ouvrez un nouveau ﬁchier ActionScript et ajoutez le script de l’exemple 7. Enregistrez-le sous le nom Styliser.as. Ensuite, ouvrez un nouveau document Flash et enregistrez-le sous le nom Styliser.fla dans le même répertoire. Saisissez Styliser dans le champ Document Class du panneau des Propriétés.

Focus

import flash.text.StyleSheet import flash.text.TextField; import flash.text.TextFieldAutoSize;

var signature:Object=new Object(); signature.fontStyle="italic"; signature.color ="#cc0000"; signature.fontSize=16; signature.textIndent=30;

monStyle.setStyle(".citation",citation); monStyle.setStyle(".signature",signature);

24/01/08

var bobin:TextField=new TextField(); bobin.autoSize=TextFieldAutoSize.LEFT; bobin.styleSheet=monStyle; bobin.htmlText=cStr; this.addChild(bobin);

Programmer avec ActionScript 3.0

var cStr:String="<body><p class='citation'>Une jolie femme "; cStr+="qui n'a aucun souci de plaire\n"; cStr+="est d'emblée sans rivale, au sommet de toute\n"; cStr+="beauté comme le sont les roses et les saintes.\n\n"; cStr+="Rien ne préserve mieux la fraîcheur de la vie\n"; cStr+="que le calme d'un coeur brûlant.</p>\n\n"; cStr+="<p class='signature'>Christian Bobin</p></body>"

sophie vandenabeele <sophievandenabeele@free.fr> •

public class Styliser extends Sprite { public function Styliser():void { var monStyle:StyleSheet=new StyleSheet(); var citation:Object=new Object(); citation.color="#999999"; citation.marginLeft=20; citation.fontSize=16; citation.textAlign="left";

Focus

bobin.x=100; bobin.y=80; } } }

Lorsque vous testez le script, le texte est mis en forme selon vos souhaits. La figure 6 montre le résultat, avec la citation et la signature dans des styles CSS différents. Si vous n’avez pas regardé le code précédent, vous ne remarquerez probablement pas de différences entre l’utilisation de StyleSheet sur du texte HTML et TextFormat sur du texte normal.

24/01/08

Dans cette section, nous allons passer en revue deux symboles très courants en Flash : les animations (clips) et les boutons. Comme vous allez le découvrir en travaillant avec ActionScript 3.0, vous avez également la possibilité de développer des objets Sprite, dont les objets MovieClip sont une sous-classe. Dans le même ordre d’idée, vous devez

Programmer avec ActionScript 3.0

Travailler avec les animations et les boutons

sophie vandenabeele <sophievandenabeele@free.fr> •

Figure 6. Le texte s’affiche à l’aide d’une feuille de style et de code HTML

Focus

également comprendre comment fonctionne la nouvelle classe SimpleButton pour optimiser votre utilisation des boutons. Les animations et les boutons héritent tous les deux la plupart de leurs classes de la classe DisplayObject ; aux propriétés des deux classes s’ajoutent donc toutes les propriétés des classes héritées.

Les objets MovieClip Pour bien démarrer, vous devez entièrement remettre à plat votre conception des animations sur la scène et leur relation à ActionScript. De manière générale, lorsque vous convertissez un dessin dans un clip ou un bouton, vous créez une classe. Le nom de la classe correspond au nom que vous avez associé au Symbole.

24/01/08

Programmer avec ActionScript 3.0

Pour travailler avec les animations créées sur la scène à l’aide des outils de dessin en ActionScript 3.0, mettons en place un exemple simple. Nous allons dessiner un camion puis ajouter quelques éléments, avant d’apprendre à convertir l’objet MovieClip en une classe. Pour commencer, suivez ces étapes : 1. Ouvrez un nouveau document Flash et enregistrez-le sous le nom Camion.fla 2. En vous servant de la figure 8 en guise de modèle, dessinez la cabine et le conteneur à l’arrière du camion. 3. Sélectionnez l’image et pressez la touche F8 pour convertir le dessin en un symbole. Remplissez alors la boîte de dialogue comme à la figure 7. 4. Double-cliquez sur l’image pour entrer dans l’éditeur de symbole et ajoutez deux calques, votre projet en aura donc trois au total. Baptisez Camion le calque avec le dessin du véhicule puis Roue et Texte les deux calques restants. De haut en bas, ordonnez les calques comme suit : Texte, Camion et Roue. Verrouillez le calque Camion. 5. Cliquez sur le calque Roue et dessinez une première roue. Sélectionnez votre dessin et pressez F8 pour le convertir dans un symbole clip, mais ne cochez pas les cases de la section Linkage (« liaison »). 6. Dans le champ Name, saisissez Roue et cliquez sur OK. Placez les deux objets en forme de roue sous le camion, comme sur la figure 8. Précisez les noms des instances : roue1_mc pour celle de devant et roue2_mc pour la seconde. 7. Cliquez à présent sur le calque Texte et ajoutez un champ de texte dynamique sur le conteneur, comme le montre la figure 8. Dans le panneau Propriétés, saisissez camion_txt en guise de nom d’instance. Verrouillez le calque. 8. Double-cliquez sur l’une des deux roues pour entrer dans le mode d’édition de symbole. Ajoutez un calque, baptisez-le Rotation et nommez Roue le calque d’origine. Verrouillez ce dernier.

sophie vandenabeele <sophievandenabeele@free.fr> •

Lorsque vous créez une animation à l’aide des outils de dessin (plutôt que de la créer en ActionScript 3.0), la boîte de dialogue de création de symbole propose une case à cocher pour exporter, Export for ActionScript. Si vous activez cette option, le nom du symbole apparaît alors dans le champ Class et le chemin d’accès de la classe de base s’afﬁche dans le champ Base class. En guise d’exemple, la figure 7 montre à quoi ressemble cette boîte de dialogue si vous appelez le symbole Camion et que vous cochez la case Export for ActionScript.

Focus

9. Tracez quatre lignes jaunes sur les pneus comme à la figure 9. Sélectionnez-les et pressez F8 pour les convertir en symbole. Dans la boîte de dialogue qui apparaît, saisissez Rotation dans le champ Name et sélectionnez MovieClip comme comportement. Cliquez sur OK. Baptisez rotation_mc l’instance de l’objet Rotation. 10. Dans le mode d’édition de votre symbole Roue, ajoutez trente images aux deux calques. Dans le calque Rotation, ajoutez des images-clés aux images 7, 15, 22 et 30. À l’aide de l’outil de transformation, effectuez une rotation de l’image dans le sens inverse des aiguilles d’une montre : -90° à l’image 7, -180° à l’image 15, -270° à l’image 22 et de retour à 0 degré à l’image 30. Créez des interpolations de mouvement aux images 0, 7, 15 et 22 en effectuant un clic droit sur ces images dans le scénario et en choisissant Create Motion Tween. 11. Retournez sur la scène principale et testez l’animation. Les roues devraient ainsi tourner. Supprimez l’animation de la scène : lorsque vous ajouterez l’instance de la classe du camion en ActionScript, vous n’obtiendrez pas deux véhicules en surimpression. La scène est donc vide pour l’instant, mais trois symboles de type clip devraient apparaître dans votre Bibliothèque, comme à la figure 8.

24/01/08

Programmer avec ActionScript 3.0

sophie vandenabeele <sophievandenabeele@free.fr> •

Figure 7. Le nom du symbole devient le nom de la classe pour les animations et les boutons

1. 2. 3. 4.

Sélectionnez l’icône du Camion dans la Bibliothèque. Cliquez sur l’icône Information dans la barre inférieure de cette fenêtre. Dans le champ Base class, remplacez flash.display.MovieClip par flash.display.Sprite comme sur la figure 9. Cliquez enﬁn sur OK.

24/01/08

Et voilà le travail ! Le clip du Camion est dorénavant un objet Sprite. Désormais, lorsque vous écrirez un script qui s’appuie sur votre classe Camion, vous devez garder à l’esprit qu’il s’agit d’un Sprite. Pour comprendre le fonctionnement, ouvrez un nouveau fichier ActionScript et enregistrez-le sous le nom LireCamion.as. Ensuite, dans le champ Document class du fichier Camion.fla, saisissez LireCamion. Saisissez le code de l’exemple 8 dans votre fichier ActionScript.

sophie vandenabeele <sophievandenabeele@free.fr> •

Mais vous ne pouvez pas créer un Sprite sur la scène. Vous devez donc convertir un MovieClip en un Sprite par un autre biais. Voici la marche à suivre :

Programmer avec ActionScript 3.0

Avant de passer en revue le code, étudions les différents éléments de la scène du point de vue de la programmation. Le clip du camion est en fait un Graphique : un simple Sprite. Nous n’utilisons pas le scénario et il est donc inutile de créer une classe MovieClip et de charger du code supplémentaire pour gérer le scénario avec cet élément ! Ce clip est plus précisément un conteneur sur lequel nous avons placé un champ de texte et quelques autres clips. Ainsi, au niveau des classes, nous pouvons parfaitement nous contenter d’un Sprite.

Focus

Figure 8. L’animation complète sur la scène (avant de la supprimer) et les différents symboles dans la Bibliothèque

sophie vandenabeele <sophievandenabeele@free.fr> •

24/01/08

package { import flash.display.Sprite; public class LireCamion extends Sprite { public function LireCamion():void { var camionCafe:Camion=new Camion(); this.addChild(camionCafe); camionCafe.camion_txt.text="Buvez du café !"; //camionCafe.roue1_mc.rotation_mc.visible=false; //camionCafe.roue2_mc.stop(); camionCafe.x=(stage.stageWidth/2)-(camionCafe.width/2); camionCafe.y=(stage.stageHeight/2)-(camionCafe.height/2);

Programmer avec ActionScript 3.0

Exemple 8. LireCamion.as

Focus

Figure 9. Conversion d’un MovieClip en Sprite

Focus

} } }

Testez le script. Vous devriez voir l’animation du camion au centre de la scène avec les roues en rotation et le message « Buvez du café ! » sur le côté du véhicule. L’aspect le plus important de cet exemple tient au fait que la classe Camion est traitée comme n’importe quelle autre classe et que le champ de texte est accessible comme une propriété de l’instance de la classe Camion. Gardez à l’esprit que le clip d’origine du Camion était une extension de la classe MovieClip et que nous l’avons remplacé par la classe Sprite : tout fonctionne donc comme prévu. En ajoutant les lignes commentées du script précédent, vous verrez que vous pouvez également contrôler les propriétés et les méthodes du clip Roue. Supprimez les caractères des commentaires (//) des deux lignes suivantes :

Testez à nouveau votre animation. Les lignes sur le pneu avant sont invisibles et la roue arrière ne bouge plus.

Bien entendu, vous pouvez développer votre propre animation sans utiliser les outils de l’IDE de Flash. Dans le contexte d’ActionScript, c’est même plutôt simple. Vous pouvez ajouter dynamiquement du texte ou des dessins en programmant des formes (« Shapes ») et des champs de texte directement dans une classe qui étend la classe MovieClip. Toutefois, à moins d’utiliser le scénario, vous feriez mieux de développer des champs de texte et des formes dans un objet Sprite, comme nous l’avons vu précédemment à la figure 3. Lorsque vous travaillez autour des propriétés de MovieClip, vous devez également garder à l’esprit les propriétés dont hérite cette classe. Dans la mesure où de nombreux noms de propriétés ont changé avec ActionScript 3.0, reportez-vous au tableau 3 pour une liste exhaustive de toutes les propriétés de la classe MovieClip et des propriétés dont elle hérite.

24/01/08

Programmer avec ActionScript 3.0

Comme vous pouvez le voir, vous pouvez créer tous les éléments graphiques que vous souhaitez sur la scène, en les imbriquant les uns aux autres. Ensuite, en assignant au symbole de premier plan un nom et un statut de classe, vous pouvez accéder à toutes les propriétés et aux méthodes contenues dans cette classe. Vous pouvez assigner la classe de base à MovieClip (par défaut) ou Sprite, comme nous l’avons vu.

sophie vandenabeele <sophievandenabeele@free.fr> •

//camionCafe.roue1_mc.rotation_mc.visible=false; //camionCafe.roue2_mc.stop();

accessibilityProperties

AccessibilityProperties

alpha

cacheAsBitmap

Nombre Chaîne Booléen Booléen

constructor

Objet

contextMenu

ContextMenu

currentFrame

enabled

Entier Chaîne Tableau Scène Booléen DisplayObject Booléen

Afﬁche les options d’accessibilité actuelles de l’objet. Niveau d’opacité (niveau de transparence). Valeur de la classe BlendMode exprimée sous forme de constante. Mode bouton activé ou désactivé. Le Flash Player met en cache une représentation bitmap de l’objet graphique si cette propriété est assignée à true. Référence de la classe si l’objet est une instance de classe ; dans les autres cas, référence de la fonction constructeur pour l’instance d’un objet donné. Menu contextuel associé à l’objet. Numéro de l’image actuellement parcourue (lecture seule). Libellé de l’image actuellement parcourue (lecture seule) Tableau des libellés de la scène (lecture seule). Scène courante de l’instance du MovieClip (lecture seule). L’objet reçoit un événement doubleClick. DisplayObject est la cible où le sprite est glissé ou déposé. L’instance de MovieClip est activée si la propriété est assignée à true.

filters

Tableau

Filtre le tableau indexé de l’objet, associé avec l’objet graphique.

focusRect

Objet

Une valeur Null indique que l’objet obéit à la propriété stageFocusRect.

framesLoaded

Entier

Nombre d’images chargées dans le ﬁchier SWF (lecture seule).

graphics

Graphique

Associée à l’objet Graphics, cette propriété permet d’ajouter des dessins vectoriels au sprite.

height

Nombre

Hauteur de DisplayObject.

hitArea

Sprite

Spéciﬁe un autre Sprite comme la zone cible du Sprite courant.

loaderInfo

LoaderInfo

Permet d’obtenir des informations concernant le ﬁchier de l’objet graphique chargé.

mask

DisplayObject

Demande à utiliser l’objet appelé comme un masque.

blendMode buttonMode

currentLabel currentLabels currentScene doubleClickEnabled dropTarget

24/01/08

Fonction

sophie vandenabeele <sophievandenabeele@free.fr> •

Type de données

Programmer avec ActionScript 3.0

Propriété

Focus

Tableau 3. Les propriétés de MovieClip et les propriétés héritées

Tableau contenant le nom et le nombre d’images de la scène du MovieClip (lecture seule).

scrollRect

Rectangle

Limite du rectangle d’afﬁchage d’un objet graphique.

soundTransform

SoundTransform

Contrôle du son de ce Sprite.

stage

Scène

Scène de l’objet graphique.

tabChildren

Booléen

true si les enfants de l’objet sont inclus dans l’ordre de tabulation automatique.

tabEnabled

Booléen

true si l’objet est inclus dans l’ordre de tabulation automatique.

tabIndex

Entier

Déﬁnit l’ordre de tabulation automatique du ﬁchier SWF.

textSnapshot

TextSnapshot

Objet TextSnapshot de l’instance de DisplayObjectContainer courant.

totalFrames

Entier

Nombre total d’images dans l’instance du clip (lecture seule).

trackAsMenu

Booléen

true signiﬁe que les objets SimpleButton ou MovieClip peuvent recevoir des événements de relâchement de bouton de souris.

transform

Transform

Objet de propriétés doté de la matrice, de la transformation de couleurs ou de pixels de l’objet graphique.

mouseY name numChildren opaqueBackground parent prototype root rotation scale9Grid scaleX

24/01/08

Tableau

mouseX

sophie vandenabeele <sophievandenabeele@free.fr> •

scenes

mouseEnabled

Programmer avec ActionScript 3.0

Retourne true si l’enfant de l’objet a activé la souris. Retourne true si cet objet reçoit des messages de la souris. Coordonnée x de la souris. Coordonnée y de la souris. Nom d’instance de DisplayObject. Nombre d’éléments enfants de l’objet. Indique l’opacité et la couleur de fond de l’objet. Référence à l’objet conteneur qui soutient l’objet d’afﬁchage. Classe ou fonction du prototype de l’objet. Racine du ﬁchier SWF chargé qui contient le DisplayObject. Valeur de la rotation (0-360). Grille d’échelle actuellement en effet. Pourcentage de la taille horizontale de DisplayObject. Pourcentage de la taille verticale de DisplayObject.

Focus

scaleY

Booléen Booléen Nombre Nombre Chaîne Entier Objet DisplayObjectContainer Objet DisplayObject Nombre Rectangle Nombre Nombre

mouseChildren

Booléen

true indique que le curseur de main standard est utilisé lorsque la souris passe au-dessus d’un sprite, avec buttonMode assigné à true.

visible

Booléen Nombre Nombre Nombre

false masque l’objet

width x y

Focus

useHandCursor

Largeur de DisplayObject. Coordonnée x de DisplayObject. Coordonnée y de DisplayObject.

Programmer les classes de sprite

24/01/08

Programmer avec ActionScript 3.0

L’une des fonctionnalités les plus importantes de Flash réside dans sa capacité à ajouter des instances de MovieClip. Toutefois, il est désormais possible d’aboutir au même résultat avec les objets Sprite. Ces derniers peuvent notamment servir à créer une « réglette » qui contrôle une animation. En déplaçant un clip et en récupérant sa position horizontale ou verticale, il est possible de modifier les propriétés d’autres objets, comme le volume sonore dans une application musicale par exemple. Pour y parvenir, suivez ces quelques étapes : 1. Créez une ligne « de base » qui servira de support à la réglette. Il s’agit d’une forme qui définit les limites du curseur à déplacer. Cette première étape est relativement simple : vous n’avez qu’à tracer une ligne. Avec ActionScript 3.0, on y parvient à l’aide d’un objet Shape et des méthodes de dessin contenues dans le package flash.display.Graphics. 2. Créez un objet Sprite qui fait office de « curseur » à déplacer. C’est le script lui-même qui va tracer la figure : un simple rectangle aux bords arrondis, créé à l’aide de la méthode de dessin drawRoundRect(), devrait suffire. 3. Enfin, on doit ajouter un gestionnaire d’événement à l’objet précédent pour le déplacer le long de la réglette. La méthode startDrag() a changé par rapport aux versions antérieures d’ActionScript : vous devrez plutôt opter pour une instance de Rectangle à partir du package flash.geom. La nouvelle méthode startDrag() obéit à la forme :startDrag(lockCenter: Booléen, bounds: Rectangle);Pour définir les limites, créez une instance de Rectangle qui corresponde à la zone où le curseur peut être déplacé. On peut considérer la ligne de la réglette comme un « rectangle » d’un pixel de hauteur ; vous devrez donc définir un rectangle de la même largeur et hauteur. L’exemple 9 contient tout le script nécessaire. Remarquez les quatre classes différentes qu’il importe. La définition de variables et de fonctions privées les restreint à la classe à laquelle elles appartiennent.

sophie vandenabeele <sophievandenabeele@free.fr> •

Vous pouvez créer dynamiquement des animations en ActionScript, mais, dans la mesure où vous ne pouvez pas ajouter dynamiquement des scripts aux images et aux images-clés, vous allez essentiellement travailler autour des objets Sprites en ActionScript 3.0. Si vous n’avez pas besoin du scénario, il vaut mieux utiliser un Sprite qu’un MovieClip comme nous l’avons vu précédemment.

package { import import import import

Focus

Exemple 9. Créer une réglette

flash.display.Sprite; flash.display.Shape; flash.events.MouseEvent; flash.geom.Rectangle;

public class Reglette extends Sprite { private var posx:uint=200; private var posy:uint=100;

24/01/08

private function creerCurseur():void { var curseur:Sprite =new Sprite(); curseur.graphics.beginFill(0xccccccc); curseur.graphics.lineStyle(2,0xaaaaaa); curseur.graphics.drawRoundRect(10,80,10,40,6); curseur.graphics.endFill();

Programmer avec ActionScript 3.0

private function creerReglette():void { var reglette:Shape =new Shape(); reglette.graphics.lineStyle(1,0x000000); reglette.graphics.moveTo(10,100); reglette.graphics.lineTo(210,100); addChild(reglette); reglette.x=posx; reglette.y=posy; }

sophie vandenabeele <sophievandenabeele@free.fr> •

public function Reglette():void { creerReglette(); creerCurseur(); }

Focus

addChild(curseur); curseur.x=posx; curseur.y=posy; function lancerCurseur(event:MouseEvent):void { var dragRec:Rectangle=new Rectangle(posx,posy,200,0); curseur.startDrag(false,dragRec); trace(Math.round((curseur.x-posx)/2)); } curseur.addEventListener(MouseEvent.MOUSE_DOWN,lancerCurseur);

} } }

1. Commencez par ouvrir un nouveau document Flash et enregistrez-le sous le nom Reglette.fla. Ensuite, ouvrez un fichier ActionScript et enregistrez-le sous le nom Reglette.as, dans le même répertoire que le fichier précédent. 2. Saisissez ensuite le code de l’exemple 9 dans votre fichier ActionScript. 3. Enfin, saisissez Reglette dans le champ Document class du panneau des Propriétés du fichier Reglette.fla.

24/01/08

En testant l’application, des valeurs comprises entre 0 et 100 devraient apparaître dans la fenêtre de Sortie, à mesure que vous bougez le curseur de gauche à droite sur la réglette. Vous pouvez modiﬁer cette fourchette de valeurs comme bon vous semble — dans notre exemple, le curseur peut se déplacer sur les 200 pixels de longueur de la réglette. La figure 10 montre le résultat lorsque vous testez l’application.

Programmer avec ActionScript 3.0

Suivez ces étapes aﬁn de mettre en place l’exemple :

sophie vandenabeele <sophievandenabeele@free.fr> •

function arreterCurseur(event:MouseEvent):void { curseur.stopDrag(); trace(Math.round((curseur.x-posx)/2)); } curseur.addEventListener(MouseEvent.MOUSE_UP,arreterCurseur);

24/01/08

1. Ouvrez un nouveau document Flash et enregistrez-le sous le nom GoBouton.fla. 2. À l’aide de l’outil Ovale, dessinez un cercle de 36 pixels de diamètre avec deux couleurs différentes pour le remplissage et le trait. Choisissez un contour de 2,25 pixels. 3. Sélectionnez le cercle et pressez la touche F8 pour ouvrir la boîte de dialogue de conversion de symbole. Saisissez GoBouton dans le champ Name et choisissez Bouton comme type de symbole, comme le montre la figure 11. 4. Cochez la case Export for ActionScript à la section Liaison. Le nom de la classe, GoBouton, apparaît ainsi que la classe de base : flash.display.SimpleButton, comme à la figure 11.

sophie vandenabeele <sophievandenabeele@free.fr> •

À l’instar des objets MovieClip et Sprite, vous pouvez dessiner des boutons sur la scène et les convertir en symboles avant de les référencer sous forme de classe. La classe de base d’un objet bouton est SimpleButton. Si la création de boutons sur la scène vous est déjà familière, cette nouvelle classe ne devrait pas vous poser de problèmes particuliers. Mais sachez qu’ActionScript 3.0 vous offre un bien plus grand contrôle de vos propres boutons. Pour entrevoir vos possibilités, commencez par créer un bouton sur la scène :

Programmer avec ActionScript 3.0

Boutons

Focus

Figure 10. Notre réglette créée à partir des instances de Sprite et de Shape, qui renvoie les valeurs de la position

Focus

Figure 11. Création de la classe SimpleButton

24/01/08

Programmer avec ActionScript 3.0

sophie vandenabeele <sophievandenabeele@free.fr> •

5. Cliquez sur OK. 6. Supprimez le bouton de la scène. Sélectionnez le symbole correspondant dans la bibliothèque et effectuez un clic droit (Contrôle-Clic sous Mac) sur son icône. Choisissez Edit dans le menu contextuel qui apparaît. 7. À tour de rôle, cliquez sur les positions Dessus (Over), Abaissé (Down) et Cliquable (Hit) et appuyez sur F6 pour leur ajouter une image-clé. Cliquez sur l’image Dessus et inversez les couleurs de remplissage et de trait. Cliquez sur l’image Abaissé et modifiez la couleur de remplissage en choisissant une autre teinte. Cliquez sur l’image Cliquable et dessinez un ovale ou un rectangle aux bords arrondis afin de cacher le bouton, en dépassant de 50 pixels sur sa droite (votre bouton bénéficiera ainsi d’une zone cliquable plus étendue). Cliquez sur l’icône de la Scène 1 pour quitter le mode d’édition du symbole. 8. Ouvrez le panneau des Propriétés et saisissez CreerBouton, qui correspond au nom de la classe qui va placer les boutons sur la scène. 9. Ouvrez un nouveau fichier ActionScript et enregistrez-le sous le nom CreerBouton.as, dans le même répertoire que votre document Flash GoBouton.fla. 10. Ajoutez le script présenté à l’exemple 10 et enregistrez le fichier.

package { import flash.display.Sprite; public class CreerBouton extends Sprite { public function CreerBouton():void { var navBtn1:GoBouton=new GoBouton(); var navBtn2:GoBouton=new GoBouton(); var navBtn3:GoBouton=new GoBouton();

Focus

Exemple 10. Créer le bouton

navBtn1.x=100; navBtn2.x=100; navBtn3.x=100;

} } }

En testant votre application, vous verrez sur la scène trois boutons alignés verticalement. Vous savez désormais créer un bouton à l’aide des outils de Flash et vous avez appris à multiplier ses instances sur la scène avec ActionScript 3.0. Mais pour rendre le bouton opérationnel, vous devez encore ajouter des gestionnaires d’événements aﬁn qu’il réagisse au clic ou au survol de la souris. Conservez la classe du bouton que vous venez de créer : nous allons voir dans la prochaine section comment lui associer un événement de souris.

24/01/08

Programmer avec ActionScript 3.0

navBtn1.y=100; navBtn2.y=150; navBtn3.y=200;

sophie vandenabeele <sophievandenabeele@free.fr> •

this.addChild(navBtn1); this.addChild(navBtn2); this.addChild(navBtn3);

Focus

Associer des événements à vos boutons Pour comprendre les événements en ActionScript 3.0, oubliez autant que possible tout ce que vous saviez d’eux avec les versions précédentes d’ActionScript. On en a maintenant l’habitude : vous disposez d’un package dédié aux différents événements que vous serez susceptible de rencontrer, flash.events. Aussi, à chaque fois que vous utiliserez un événement (ce qui devrait arriver souvent !), pensez à importer le package flash.events nécessaire et la classe dont vous avez besoin. ActionScript 3.0 contient 21 classes d’événements différentes, dont la plupart disposent de constantes qui se rapportent à un événement précis. De manière générale, lorsque vous utilisez n’importe quelle classe avec un événement, vous devez respecter la nomenclature suivante : objetInstance.addEventListener(EventClass.CONSTANTE_EVENEMENT, gestionnaireEvenement);

Par exemple, l’instruction suivante sert à relier un bouton avec un événement de souris : L’instance monBouton du bouton ajoute l’événement CLICK de la souris. Une fonction baptisée deplacerMC réalise un traitement lorsqu’on clique sur le bouton avec la souris (en clair, cette instruction active le clic sur un bouton). Pour en comprendre le fonctionnement, modifions le script de l’exemple 10. Les changements réalisés sont en gras dans l’exemple 11 ; modifiez le fichier CreerBouton.as en conséquence puis enregistrez-le et testez le résultat.

navBtn1.x=100;

24/01/08

this.addChild(navBtn1); this.addChild(navBtn2); this.addChild(navBtn3);

Programmer avec ActionScript 3.0

Exemple 11. Le script CreerBouton.as modifié package { import flash.events.MouseEvent; import flash.display.Sprite; public class CreerBouton extends Sprite { public function CreerBouton():void { var navBtn1:GoBouton=new GoBouton(); var navBtn2:GoBouton=new GoBouton(); var navBtn3:GoBouton=new GoBouton();

sophie vandenabeele <sophievandenabeele@free.fr> •

monBouton.addEventListener(mouseEvent.CLICK, deplacerMC);

Focus

navBtn2.x=100; navBtn3.x=100; navBtn1.y=100; navBtn2.y=150; navBtn3.y=200; navBtn1.addEventListener(MouseEvent.CLICK,avancer); navBtn3.addEventListener(MouseEvent.CLICK,reculer); function avancer():void { navBtn2.x+= 5; }

} } }

Mis à part l’événement CLICK de la souris, on peut associer bien d’autres constantes à la classe MouseEvent. Le tableau 4 dresse la liste de tous les événements qui peuvent être lus par un objet en associant un gestionnaire à la classe MouseEvent. Tableau 4. Les constantes de la classe MouseEvent Nom de la constante Événement DOUBLE_CLICK MOUSE_DOWN

Le bouton de la souris est pressé et relâché (le bouton de gauche sur une souris à deux boutons). Le bouton de la souris a effectué un double-clic. Le bouton de la souris est maintenu enfoncé.

24/01/08

CLICK

Programmer avec ActionScript 3.0

Parmi les changements, n’oubliez pas d’ajouter la ligne qui importe la classe MouseEvent au ﬁchier. Ce script déplace alors le bouton du milieu vers la gauche ou la droite, mais vous pouvez associer n’importe quelle fonction au gestionnaire du clic de la souris.

sophie vandenabeele <sophievandenabeele@free.fr> •

function reculer():void { navBtn2.x+= -5; }

MOUSE_OUT MOUSE_OVER MOUSE_UP MOUSE_WHEEL ROLL_OUT ROLL_OVER

La La La Le La La La

souris change actuellement de position. souris est passée d’une position au-dessus de l’objet à une position en dehors de l’objet. souris est positionnée au-dessus de la cible, comme la zone cliquable d’un bouton par exemple. bouton de la souris a été pressé et cet événement apparaît lorsqu’on le relâche. molette de la souris est utilisée au-dessus de la cible. souris quitte la cible. souris survole la cible.

Focus

MOUSE_MOVE

Pour tester les différents événements associés à la souris, contentez-vous de modiﬁer les constantes d’événement de l’exemple 11. Par exemple, remplacez CLICK par ROLL_OVER sur l’un des boutons et testez le résultat.

Contrairement à la classe MovieClip, où vous ne pouvez pas ajouter d’images et d’images-clés, la nouvelle classe SimpleButton permet de créer des boutons relativement complexes. Comme vous allez le voir, ces boutons peuvent disposer de champs de texte dynamiques et réagir différemment à la souris. Lorsque vous développez des boutons en ActionScript, vous devez garder les éléments suivants à l’esprit :

Mais avant de mettre en place un exemple qui illustre la création d’un bouton à travers un script, parcourez le tableau 5 qui présente toutes les propriétés que vous pouvez contrôler directement avec ActionScript 3.0.

24/01/08

Vous pouvez vous demander pourquoi créer un script autour d’un bouton alors qu’il est tout à fait possible d’en dessiner simplement un sur la scène. La réponse est simple : vous pouvez contrôler bien plus d’aspects d’un bouton lorsqu’il est entièrement réalisé à partir d’un script. Par ailleurs, en créant une classe autour d’un bouton, vous pouvez gagner du temps en réutilisant cette classe à loisir et en modiﬁant éventuellement légèrement le comportement de vos boutons.

Programmer avec ActionScript 3.0

1. Quelle est la forme de votre bouton ? Sera-t-il rond, ovale, rectangulaire ou présentera-t-il une autre forme encore ? Quelles sont les propriétés des objets Shape ou Sprite dont vous allez avoir besoin ? 2. Votre bouton requiert-il un champ de texte ? Sera-t-il dynamique ou statique ? L’utilisateur pourra-t-il utiliser la même classe pour afﬁcher des textes différents 3. Quels sont les événements que vous associerez au bouton ? 4. Quels sont les états dont vous aurez besoin ? (reportez-vous au tableau 5 pour toutes les propriétés de la classe SimpleButton).

sophie vandenabeele <sophievandenabeele@free.fr> •

Développer un script autour de la classe SimpleButton

Propriété

Focus

Tableau 5. Les propriétés de la classe SimpleButton Caractéristiques

Le bouton est maintenu enfoncé. enabled Le bouton est activé si la propriété est assignée à true. hitTestState Un objet graphique est utilisé comme une zone cliquable d’un bouton. Cet objet peut être d’une taille et d’une forme différentes que les aspects visibles d’un bouton. overState L’état lorsque la souris est au-dessus de la zone cliquable d’un bouton. soundTransform Objet soundTransform associé à un bouton. trackAsMenu Valeur booléenne qui indique si un objet peut recevoir des événements de relâchement de bouton de souris. upState L’état lorsque la souris a été maintenue enfoncée puis relâchée ou tout simplement qu’elle n’est pas maintenue enfoncée. useHandCursor Si la valeur booléenne associée à cette propriété est true, alors on afﬁche le curseur de main standard. Si la valeur est false on utilise le curseur de ﬂèche. downstate

Exemple 12. FlashBtn.as

flash.display.Sprite; flash.display.SimpleButton; flash.display.Shape; flash.text.TextFormat; flash.text.TextField; flash.text.TextFieldAutoSize;

24/01/08

package { import import import import import import

sophie vandenabeele <sophievandenabeele@free.fr> •

Ouvrez un nouveau ﬁchier ActionScript et enregistrez-le sous le nom FlashBtn.as. Saisissez ensuite le script présenté ci-dessous et sauvegardez-le.

Programmer avec ActionScript 3.0

L’exemple 12 présente un bouton relativement complexe. Toutefois, ce bouton est créé sans qu’on lui associe le moindre événement. Non seulement l’exemple est plus simple à comprendre, mais il vous permettra surtout d’ajouter des événements de manière plus souple par la suite, comme nous le verrons à l’exemple 13. L’exemple 12 vous montre comment créer un bouton sous la forme d’une entité que vous placerez dans votre application. L’exemple 13 va plus loin et construit de manière souple des instances de boutons, en les nommant différemment et en leur associant des événements.

Focus sophie vandenabeele <sophievandenabeele@free.fr> â&#x20AC;˘

}

24/01/08

Programmer avec ActionScript 3.0

public class FlashBtn extends SimpleButton { public function FlashBtn(txt:String) { upState = new BtnEtat(0xfff56d, txt); downState = new BtnEtat(0xfff222, txt); overState= new BtnEtat(0xfff000,txt); hitTestState=upState; useHandCursor=true; } } class BtnEtat extends Sprite { private var btnLabel:TextField; public function BtnEtat(color:uint,btnLabelTexte:String):void { //Champ de texte du bouton btnLabel = new TextField(); btnLabel.text=btnLabelTexte; btnLabel.autoSize=TextFieldAutoSize.LEFT; //Format du champ de texte var format:TextFormat = new TextFormat("Verdana"); format.size=12; btnLabel.setTextFormat(format); var btnLargeur:Number=btnLabel.textWidth + 10; //Forme pour le fond du bouton var fond:Shape = new Shape(); fond.graphics.beginFill(color); fond.graphics.lineStyle(2,0xf3c716); fond.graphics.drawRect(0,0,btnLargeur,18); addChild(fond); addChild(btnLabel); } }

Focus

Comme d’habitude, votre premier réﬂexe consiste à importer tous les packages et les classes dont vous avez besoin. Remarquez au passage que le script n’importe aucune classe de flash.events dans la mesure où il se contente de construire les boutons et non de les utiliser. En revanche, tous les scripts secondaires qui mettront en place les boutons importeront ce package. Par contre, dès ce script nous importons toutes les classes liées au texte et aux objets de dessin, ainsi que la classe SimpleButton dont nous utiliserons quelques propriétés. Notez que la classe FlashBtn étend SimpleButton. Vous pourrez ainsi assigner des valeurs aux différentes propriétés de SimpleButton (présentées au tableau 5) sans avoir à les déclarer. Le constructeur de la classe assigne d’ailleurs des valeurs à cinq propriétés de SimpleButton.

L’exemple 13 implémente les boutons en leur assignant des libellés uniques et en leur associant des événements à la souris. Ouvrez un nouveau fichier ActionScript et enregistrez-le sous le nom AfficheBtn.as, dans le même répertoire que le fichier FlashBtn.as. Ouvrez ensuite un nouveau document Flash, saisissez AfficheBtn dans le champ Document class du panneau des Propriétés et enregistrez-le sous le nom AfficheBtn.fla (toujours dans le même répertoire que les fichiers FlashBtn.as et AfficheBtn.as). Enfin, saisissez le code de l’exemple 13 dans le fichier AfficheBtn.as. Exemple 13. Implémenter les boutons

public class AfficheBtn extends Sprite {

24/01/08

package { import flash.display.Sprite; import flash.events.MouseEvent;

Programmer avec ActionScript 3.0

L’arrière-plan est composé d’un rectangle et un champ de texte est ajouté à la scène à l’aide de la fonction addChild(). L’ordre d’utilisation des deux fonctions addChild() est primordial. Le texte doit être visible au-dessus de l’élément graphique et on le place donc en deuxième (il apparaîtra au-dessus) d’après l’ordre de profondeur que nous avons déjà évoqué précédemment. Dans le cas contraire, le rectangle masquerait le champ de texte. (Essayez d’inverser les deux appels de la fonction addChild() et vous ne verrez plus le texte lorsque vous testerez le script de l’exemple 13).

sophie vandenabeele <sophievandenabeele@free.fr> •

La seconde classe (qui correspond à une classe privée, BtnEtat) est une extension de Sprite qui définit les caractéristiques graphiques du bouton. Tout d’abord, on ajoute un champ de texte et on modifie son format, avant de dessiner la forme du bouton à l’aide de l’objet Shape, qui trace un rectangle. L’image d’arrière-plan et le texte sont alors passés sous forme de valeurs aux différents états de la fonction constructeur. Cette dernière, utilisée pour instancier les objets de la classe, est reconnaissable par son nom qui correspond au nom de la classe (dans notre exemple, la fonction constructeur est donc BtnEtat). Les valeurs des couleurs sont insérées sous forme d’arguments et vous pouvez donc les modifier comme bon vous semble pour les différents états du bouton.

Focus

public function AfficheBtn():void { var btnProduits:FlashBtn=new FlashBtn("Produits"); var btnServices:FlashBtn=new FlashBtn("Services"); var btnContact:FlashBtn=new FlashBtn("Nous contacter"); this.addChild(btnProduits); this.addChild(btnServices); this.addChild(btnContact); btnProduits.x=100; btnProduits.y=100;

btnContact.x=100; btnContact.y=200;

} } }

En testant l’application, vous apercevrez trois boutons disposant chacun d’un libellé différent et dont la largeur s’adapte automatiquement en fonction de la quantité de texte. Lorsque vous cliquez sur le bouton Produits, la fenêtre de Sortie afﬁche le message Bouton Produits sélectionné, comme le montre la figure 12.

24/01/08

Pour mieux comprendre la relation entre les boutons et les événements, essayez d’ajouter des gestionnaires d’événements aux deux autres boutons. Mieux encore, modiﬁez leurs libellés pour les faire correspondre aux besoins réels de votre application.

Programmer avec ActionScript 3.0

// Ajout d'un événement au bouton function prods():void { trace("Bouton Produits sélectionné"); } btnProduits.addEventListener(MouseEvent.CLICK,prods);

sophie vandenabeele <sophievandenabeele@free.fr> •

btnServices.x=100; btnServices.y=150;

Focus

Figure 12. Des boutons personnalisés entièrement créés en ActionScript 3.0

24/01/08

Pour bien commencer, nous allons passer en revue les types de données puis les classes et leurs attributs, en détaillant le rôle de ces attributs dans les différents contextes que vous serez susceptible de rencontrer. Commençons par analyser les différents types de données.

Programmer avec ActionScript 3.0

Maintenant que vous maîtrisez les éléments fondamentaux de la programmation graphique, vous serez heureux d’apprendre que les structures de base d’ActionScript 3.0 ressemblent très largement à ce que l’on connaissait avec les versions antérieures du langage. On gère les classes de manière différente, mais si vous avez d’ores et déjà l’habitude de traiter les classes en ActionScript 2.0, vous ne serez pas fondamentalement dépaysé. Nous allons passer en revue toutes ces structures dans cette section, en abordant les différents attributs associés aux classes, aux variables et aux fonctions. Il est très important de comprendre ces relations avant de découvrir la programmation orientée objet (POO), le dernier sujet de notre ouvrage.

sophie vandenabeele <sophievandenabeele@free.fr> •

Les structures de base

Focus

Types de données Pour développer efﬁcacement des applications avec ActionScript 3.0, vous devez utiliser les types de données de manière rigoureuse et stricte. En ActionScript 3.0, on déclare les types de données en plaçant deux points entre le nom de la variable ou de la constante et le type de donnée, comme par exemple : var total:Number; const AVERTISSEMENT:String="Veuillez saisir votre adresse e-mail"; var tailleChaine:uint = machaine.length;

La même règle s’applique aux fonctions : les deux points suivent les parenthèses, après le nom de la fonction. Le type de donnée se réfère alors à la valeur retournée par la fonction, si l’on emploie l’expression return. Si on n’utilise pas d’expression return, le type est alors void. L’exemple suivant illustre la déﬁnition des types de données associés aux fonctions :

AS2 versus AS3 Si vous avez l’habitude d’ActionScript 2.0, où Void s’écrit avec une majuscule, retenez bien ce changement important, sous peine de recevoir un message d’erreur : en ActionScript 3.0, on utilise void et non Void.

Créer des classes

24/01/08

À ce stade, nous avons déjà vu de nombreux exemples de classes utilisateur et vous savez maintenant les maîtriser. Toutefois, nous n’avons pas encore abordé en détails leurs attributs et nous nous sommes essentiellement contentés de présenter des exemples plutôt que de les expliquer. Pour bien comprendre le fonctionnement et la création de classes, commençons par poser quelques bases.

sophie vandenabeele <sophievandenabeele@free.fr> •

À l’instar des noms de classe, la plupart des types de données débutent par une majuscule, comme String, Object ou Array. Toutefois, certains types de données s’écrivent en minuscule en ActionScript 3.0. C’est notamment le cas des types de données entier signés et non signés, int et uint, ainsi que void.

Programmer avec ActionScript 3.0

function recupValeur() : Number { return total + taxe + port; } function demarrerLecture(): void { trace("Lecture en cours"); }

Focus

La première étape dans la création d’une classe est la planification. Le vieil adage « mesurer deux fois, couper une fois » s’applique parfaitement. Vous devez connaître précisément les objectifs de votre classe et les éléments qui vont la constituer. Quelles sont vos attentes ? La liste suivante présente quelques pistes que vous devez garder à l’esprit avant de plancher frénétiquement sur le clavier pour créer une application : La tâche à accomplir Si vous ne connaissez pas exactement les objectifs et le rôle de votre classe, vous ne pouvez pas amorcer la moindre planification. La première question à vous poser est donc « Que va accomplir cette classe ? ». La classe peut aussi bien servir à la création d’un bouton qu’on utilisera dans plusieurs applications qu’à la réalisation d’une tâche très précise, comme l’affichage d’un champ de texte au sein d’une animation par exemple. Commencez par inscrire la tâche sur un bout de papier. Il sera alors plus simple de noter quelques idées et de les réarranger afin d’aboutir à une tâche clairement définie.

Liste des packages et des classes Lorsque vous aurez déterminé les éléments dont vous aurez besoin, préparez la liste des packages que vous devrez importer. En règle générale, vous devez commencer par saisir le mot-clé package et le faire suivre d’une série d’expressions import qui rassemblent tous les packages et les classes nécessaires. Avec les anciennes versions d’ActionScript, tout ce traitement est automatique lorsqu’on associe un script dans une image-clé du scénario. Mais toutefois, cette méthode n’est pas très efficace et conduit au chargement de nombreux packages que vous n’utiliserez jamais. En préparant une liste, vous créez un code plus efficace et donc au final une meilleure application, tout en organisant les classes dont vous avez réellement besoin.

Pour la programmation graphique, votre classe doit étendre la classe Sprite (au minimum) pour être afﬁchée sur la scène. Les autres classes, notamment celles qui soutiennent d’autres classes, ne devraient pas avoir besoin du même traitement.

24/01/08

Déclarer les classes et les extensions

Programmer avec ActionScript 3.0

Lorsque vous devez construire une maison ou préparer un gâteau, vous commencez par préparer les outils et les ingrédients. Les outils (un marteau, une scie, un robot-mixeur, un batteur de cuisine{) correspondent aux méthodes et les ingrédients (du bois, du ciment, de la farine, de la levure{) aux propriétés. Si vous créez une classe pour une application vidéo, vous devez réﬂéchir aux méthodes qui permettront de lancer et d’arrêter la vidéo ainsi qu’aux propriétés qui placeront l’objet sur la scène et qui le mettront correctement à l’échelle. Commencez donc par travailler sur papier pour dresser la liste des éléments nécessaires.

sophie vandenabeele <sophievandenabeele@free.fr> •

Les composants nécessaires

Focus

Créer un constructeur Pour implémenter votre classe, vous devez bâtir un constructeur de classe, que l’on crée à l’aide d’une fonction publique qui dispose du même nom que la classe. Ajouter les méthodes et les propriétés Il s’agit des outils et des éléments (ou des ingrédients). Souvenez-vous que les méthodes sont des fonctions et que les propriétés correspondent aux variables et aux objets. Ces étapes représentent la marche à suivre pour créer une classe simple et déﬁnissent aussi de manière plus générale les points d’ancrage du traitement des classes en ActionScript 3.0. On distingue alors les classes « utilisateur » des classes « intégrées » qui font partie d’un package.

Une classe de base

24/01/08

Exemple 14. AssignRecup.as package { import flash.display.Sprite; import flash.text.TextField;

sophie vandenabeele <sophievandenabeele@free.fr> •

Ouvrez deux fichiers ActionScript et enregistrez le premier sous le nom AssignRecup.as et le second sous le nom ExecuterAssignRecup.as, dans le même répertoire. Ouvrez ensuite un nouveau document Flash et enregistrez-le sous le nom ExecuterAssignRecup.fla, dans le même répertoire que les deux fichiers ActionScript. Saisissez alors le script de l’exemple 14 dans le fichier AssignRecup.as.

Programmer avec ActionScript 3.0

Pour comprendre les règles de création d’une classe, mettons en place un premier exemple qui va envoyer un message à l’écran à l’aide d’un champ de texte. Comme vous allez le voir, cet exemple ne ressemble pas à l’exemple 1, qui présentait pourtant un objectif similaire. Nous passons ici en revue un premier exemple de POO, que nous aborderons plus en détails à la section suivante. La particularité de la classe de cet exemple 14 (AssignRecup) est qu’elle est abstraite. Une classe abstraite est une classe dont l’implémentation n’est pas complète et qui n’est pas instanciable : elle sert de base à d’autres classes dérivées. Dans cet exemple, on voit en effet que toutes les références sont encapsulées ; dans la fonction constructeur (AssignRecup), on a encapsulé la fonction assignerMot(monMot), qui est donc « masquée ». La fonction assignerMot() est une référence à une fonction statique privée, déﬁnie dans une autre partie du programme en-dehors de la fonction constructeur. Le paramètre monMot lui est passé à partir d’un attribut du constructeur, mais aucun de ces détails ne sont visibles. Vous remarquerez également que les attributs private et static sont utilisés dans la classe AssignRecup, sur lesquels nous allons revenir dans un instant (l’exemple 15 va mettre en place la classe AssignRecup).

Focus

public class AssignRecup extends Sprite { private static var _msg:String; public const MESSAGE:String="CONSTANTE DU MESSAGE"; public function AssignRecup(monMot:String):void { assignerMot(monMot); var afficherMsg:TextField=new TextField(); afficherMsg.text=recupMot(); this.addChild(afficherMsg); }

public function afficher():void { trace(MESSAGE); } } }

Saisissez le script de l’exemple 15 dans le fichier ExecuterAssignRecup.as. Dans le champ Document class du fichier ExecuterAssignRecup.fla, saisissez ExecuterAssignRecup et enregistrez-les tous les deux dans le même répertoire que le fichier AssignRecup.as.

24/01/08

Exemple 15. ExecuterAssignRecup.as package { import flash.display.Sprite;

Programmer avec ActionScript 3.0

private static function recupMot():String { return _msg; }

sophie vandenabeele <sophievandenabeele@free.fr> •

private static function assignerMot(monMessage:String):void { _msg=monMessage; }

Focus

public class ExecuterAssignRecup extends Sprite { public function ExecuterAssignRecup():void { var affichage:AssignRecup=new AssignRecup("Regardez-moi ça !"); this.addChild(affichage); affichage.x=100; affichage.y=100; affichage.afficher(); } } }

Importation du package Après le mot-clé package et l’ouverture de l’accolade ({), qui doivent introduire la déclaration de la classe, on importe les packages. Ce script n’utilise que deux classes qui sont importées successivement : import flash.display.Sprite; Déclaration de la classe Ici, on fait précéder le nom de la classe du mot-clé public. Dans la mesure où notre classe dérive de la classe Sprite, elle hérite également de toutes ses propriétés et ses méthodes. public class AssignRecup extends Sprite {

Les classes peuvent présenter quatre attributs différents qui déﬁnissent sa visibilité

24/01/08

• interne (internal) : c’est l’attribut par défaut. Si on ne précise pas le moindre attribut, la classe est créée en internal : elle n’est visible que par le package du ﬁchier. Elle se comporte alors un peu comme une classe privée. • publique (public) : si l’on déclare une classe avec le mot-clé public, on la rend visible et instanciable à tous les niveaux. Comme vous l’avez vu dans les exemples précédents, la plupart des déclarations utilisent l’attribut public.

Programmer avec ActionScript 3.0

import flash.text.TextField

sophie vandenabeele <sophievandenabeele@free.fr> •

En parcourant l’exemple 14 point par point, vous passerez en revue tous les éléments essentiels de la création d’une classe, notamment ses méthodes et ses propriétés.

Focus

• dynamique (dynamic) : une déclaration avec l’attribut dynamic « ouvre » la classe pour qu’on lui ajoute des propriétés et des méthodes au moment de l’exécution. • finale (final) : les classes qui disposent d’un attribut final ne peuvent pas être étendues par une autre classe. Constructeur de classe Le constructeur de classe est une fonction qui prend le nom de la classe : on l’exécute à chaque fois que la classe est instanciée. Comme elle inclut un paramètre et qu’elle est déclarée avec l’attribut public, il est possible de lui passer des valeurs lorsqu’on invoque une classe : public function AssignRecup(monMot:String):void { assignerMot(monMot); var afficherMsg:TextField=new TextField(); this.addChild(afficherMsg); }

public function AssignRecup(monMot:String) { public const MESSAGE:String="CONSTANTE DU MESSAGE";

Les CONSTANTES en majuscules

• privé (private) : la fonction, la variable ou la constante n’est visible que pour les références de la même classe. Généralement, on identiﬁe les variables et les constantes privées en faisant débuter le nom de la propriété par un

24/01/08

Une autre convention, que l’on retrouve aussi bien dans les constantes intégrées que dans les constantes utilisateur, les constantes portent un nom en majuscules. En général, on évite les majuscules dans le code car elles le rendent plus difﬁcile à lire. Mais il est toutefois intéressant d’utiliser des majuscules pour saisir le nom des constantes aﬁn de les différencier des variables du premier coup d’œil.

Programmer avec ActionScript 3.0

De la même manière que les classes disposent d’attributs, les propriétés et les méthodes de la classe en ont également la possibilité. Le constructeur de classe étant avant tout une fonction, proﬁtons-en pour observer les différents attributs associés aux variables, aux constantes et aux fonctions au sein de la classe : • public : la fonction, la variable ou la constante est visible à toutes les références. On peut le voir dans les déclarations de la fonction constructeur et de la constante suivantes :

sophie vandenabeele <sophievandenabeele@free.fr> •

afficherMsg.text=recupMot();

Focus

underscore (un tiret bas). Dans l’exemple 14, vous pouvez voir où l’attribut private a été utilisé :private static var _msg:String;. • statique (static) : la fonction, la variable ou la constante n’est pas disponible pour une sous-classe ; on ne peut pas en hériter. Si vous ne souhaitez pas qu’une propriété ou une méthode soit héritée par une sous-classe, utilisez l’attribut static. Par exemple, la méthode suivante n’est pas disponible pour les sous-classes de la classe AssignRecup :private static function assignerMot(monMessage:String):void • protégé (protected) : la fonction, la variable ou la constante n’est disponible que pour sa propre classe et ses sousclasses. Par exemple, voici une variable protégée :protected var exclusif:String="Seulement pour notre classe et ses classes-filles"; • interne (internal) : c’est l’attribut par défaut si on ne précise pas l’attribut d’une fonction, d’une variable ou d’une constante. La propriété ou la méthode n’est visible que pour son propre package. Les deux exemples suivants sont donc équivalents dans la mesure où internal est l’attribut par défaut :function amusezVous():voidinternal function amusezVous():void L’exemple 14 dispose d’un couple de fonctions statiques setter/getter avec l’attribut private, d’une propriété private et d’une simple méthode public. Les éléments statiques déclarés avec l’attribut private sont utilisés par la fonction constructeur et sont exécutés dès que la classe est instanciée. Toutefois, la méthode public afficher() doit être invoquée en l’attachant à l’instance, comme le montre l’exemple 15. Vous pouvez ajouter autant de propriétés que vous le désirez à une classe. L’étape de planiﬁcation, dont nous avons déjà parlé, vous aide à choisir précisément les propriétés et leur type.

Orienter le choix : les structures conditionnelles Les structures conditionnelles à votre disposition en ActionScript 3.0 ressemblent à celles qui existaient déjà avec les versions antérieures du langage. Dans cette section, nous allons passer en revue les éléments de base des différentes boucles conditionnelles dont vous disposez en ActionScript 3.0.

La condition if

24/01/08

La condition if déﬁnit un simple traitement si la condition booléenne est true ou false. Par exemple, imaginez que vous êtes en train de développer un site web dans lequel vous avez déﬁni des frais de port uniques pour vos produits. Toutefois, si le panier d’achat du client dépasse 100 euros de produits, les frais de port sont offerts ; dans le cas contraire, ils s’élèvent à 12,44 euros et on doit les ajouter au total. L’exemple 16 présente une classe qui s’appuie sur

Programmer avec ActionScript 3.0

affichage.afficher();

sophie vandenabeele <sophievandenabeele@free.fr> •

Propriétés et méthodes

Focus

une simple boucle conditionnelle qui va se charger de déterminer si les frais de port doivent être ajoutés ou non. Ouvrez un nouveau ﬁchier ActionScript et saisissez le code de l’exemple 16 avant de l’enregistrer sous le nom Condition.as. Exemple 16. Condition.as

Exemple 17. ConditionTest.as

24/01/08

package { import flash.display.Sprite; public class ConditionTest extends Sprite { public function ConditionTest():void { var test:Condition=new Condition(55); } } }

Programmer avec ActionScript 3.0

Pour tester la classe Condition, saisissez le script de l’exemple 17 dans un ﬁchier ActionScript que vous enregistrerez sous le nom ConditionTest.as, dans le même répertoire que précédemment. (La valeur 55, placée sous forme de paramètre, est un exemple de montant inférieur à 100, qui nous permet de tester la boucle conditionnelle.)

sophie vandenabeele <sophievandenabeele@free.fr> •

package { public class Condition { private var total:Number; private const FRAISDEPORT:Number=12.44; public function Condition(montant:Number):void { total=montant; if(total < 100) { total += FRAISDEPORT; trace(total); } } } }

Focus

Ouvrez un nouveau document Flash et saisissez ConditionTest dans le champ Document class avant de tester le ﬁchier. Comme 55 est inférieur à 100, on ajoute les frais de port et le total s’élève à 67,44 euros. Si vous aviez saisi une valeur supérieure à 100 en guise de paramètre, vous n’obtiendrez pas la moindre sortie (voir la boucle conditionnelle de l’exemple 16).

Les conditions if{else et else if En testant les exemples 16 et 17, vous avez vu que si la valeur était supérieure à 100, on n’obtenait pas le moindre affichage. En ajoutant une clause else à l’exemple 16, il est possible d’afficher un message quel que soit le montant total des achats. Modifiez le script en ajoutant les instructions qui apparaissent en gras à l’exemple 18. Exemple 18. sophie vandenabeele <sophievandenabeele@free.fr> •

24/01/08

Ensuite, modifiez la valeur du paramètre de l’exemple 17, en passant de 55 à 255. Testez l’application : la fenêtre de Sortie affiche désormais le montant total, 255. En effet, le montant est supérieur à 100 et les frais de port sont gratuits. La boucle conditionnelle a déterminé que la valeur n’était pas inférieure à 100 et le script se reporte alors à la clause else pour afficher le montant total sans les frais de port.

Programmer avec ActionScript 3.0

Focus

Dans les cas où vous devez tester plus d’une condition, utilisez l’expression else if. Par exemple, imaginez que vous créez une application de lecture vidéo, qui permette à l’utilisateur de choisir parmi différents ﬁchiers FLV. En fonction de la sélection de l’utilisateur, on lance une vidéo différente. L’exemple 19 présente une classe avec des conditions multiples. Saisissez le code suivant dans un ﬁchier ActionScript et enregistrez-le sous le nom MulCondition.as. Exemple 19. MulCondition.as

sophie vandenabeele <sophievandenabeele@free.fr> •

24/01/08

Vous remarquerez que la première condition est une simple expression if et que la boucle s’achève par l’expression else. En clair, si la première condition n’est pas rencontrée, on parcourt les autres conditions à tester. Si aucune d’entre elles n’est rencontrée, la dernière clause else est exécutée. L’exemple 20 en montre une implémentation. Enregistrez le code sous le nom MulCondTest.as et ouvrez un nouveau document Flash que vous enregistrerez sous le nom MulCondTest.fla dans le même répertoire que le ﬁchier précédent. Ensuite, saisissez MulCondTest dans le champ Document class du ﬁchier Flash et testez l’application.

Programmer avec ActionScript 3.0

package { public class MulCondition { private var flvselect:String; public function MulCondition(flv:String):void { flvselect=flv; if (flvselect == "Un") { trace("Lecture Un.flv"); } else if (flvselect == "Deux") { trace("Lecture Deux.flv"); } else if (flvselect == "Trois") { trace("Lecture Trois.flv"); } else { trace("Choix non reconnu"); } } } }

Focus

Exemple 20. MulCondTest.as package { import flash.display.Sprite; public class MulCondTest extends Sprite { public function MulCondTest():void { var test:MulCondition=new MulCondition("Trois"); } } }

Structure switch/case

24/01/08

Exemple 21. SwitchCase.as package { public class SwitchCase { private var flvselect:String; public function SwitchCase(flv:String):void { flvselect=flv; switch (flvselect) {

Programmer avec ActionScript 3.0

La dernière structure conditionnelle est l’expression switch/case qui est souvent une bonne alternative à la condition else if lorsqu’on doit traiter plusieurs conditions, surtout si l’on prévoit d’ajouter des conditions supplémentaires par la suite. En adaptant l’exemple précédent de la condition else if, vous verrez la relative simplicité de la structure switch/case. Les exemples 21 et 22 présentent le script qui crée une application autour de cette structure. Enregistrezles tous les deux dans le même répertoire, en les nommant SwitchCase.as pour l’exemple 21 et SwitchCaseTest.as pour l’exemple 22. Ensuite, dans le champ Document class d’un nouveau ﬁchier Flash, saisissez SwitchCaseTest et testez l’application.

sophie vandenabeele <sophievandenabeele@free.fr> •

En testant le fichier, la fenêtre de Sortie devrait afficher Lecture Trois.flv. Remplacez le paramètre de MulCondition par Des souris et des ROM et testez le résultat. Vous verrez alors que toutes les entrées différentes de Un, Deux ou Trois conduisent à l’affichage du message Choix non reconnu.

Focus

case "Un" : trace("Lecture Un.flv"); break; case "Deux" : trace("Lecture Deux.flv"); break; case "Trois" : trace("Lecture Trois.flv"); break;

} } } Exemple 22. SwitchCaseTest.as

24/01/08

En testant la classe SwitchCaseTest de l’exemple 22, le résultat sera rigoureusement le même qu’à l’exemple 20 – nous avons simplement changé le paramètre passé à la classe (Deux au lieu de Trois).

Programmer avec ActionScript 3.0

package { import flash.display.Sprite; public class SwitchCaseTest extends Sprite { public function SwitchCaseTest():void { var test:SwitchCase=new SwitchCase("Deux"); } } }

sophie vandenabeele <sophievandenabeele@free.fr> •

default : trace("Choix non reconnu"); }

Focus

Les boucles À l’instar des structures conditionnelles, la syntaxe des boucles n’a pas fondamentalement changé depuis les versions précédentes d’ActionScript. En règle générale, les boucles sont un atout essentiel pour répéter des tâches. Par exemple, on les utilise pour parcourir des tableaux ou d’autres objets dont on ne connaît pas nécessairement le nombre d’éléments. Nous allons passer en revue le format et la structure des différentes boucles à l’aide d’une série d’exemples. Ils fonctionnent généralement par couple (définition de la classe principale puis de la classe de test), que vous devez saisir dans des fichiers ActionScript distincts avant de créer un nouveau document Flash. Dans ce dernier, saisissez le nom de la classe de test dans le champ Document class, comme vous en avez maintenant l’habitude. Enregistrez tous les exemples suivants dans le même répertoire, en utilisant systématiquement le nom de la classe en guise de nom de fichier.

On utilise la boucle for pour parcourir un nombre fini d’opérations. Le traitement à réaliser est encadré par des accolades. En règle générale, on définit un compteur, une condition finale et une variable qui incrémente ou décrémente le compteur en les séparant par un point-virgule comme dans le pseudo-code suivant : for(compteur=valeurDepart; condition finale; increment) {

Exemple. La boucle for

24/01/08

package { public class BoucleFor { private var tailleBoucle:uint; private var compteur:uint; public function BoucleFor(equipe:Array):void { tailleBoucle=equipe.length; for (compteur=0; compteur < tailleBoucle; compteur++) { trace(equipe[compteur]); }

Programmer avec ActionScript 3.0

L’exemple suivant, réparti en deux fichiers, s’appuie sur la taille d’un tableau pour définir la condition finale :

sophie vandenabeele <sophievandenabeele@free.fr> •

La boucle for

Focus

} } }

La boucle for{in

for(variableStockage in certainObjet) { {

Cette boucle débute à zéro : le premier élément parcouru est la propriété ou l’élément zéro de l’objet. L’exemple suivant parcourt un tableau. Remarquez de quelle manière la structure abstraite de la première classe est implémentée concrètement dans la classe de test.

24/01/08

Exemple. La boucle for{in package { public class BoucleForIn { public function BoucleForIn(prop:Object):void { for (var p:Object in prop) { trace((Number(p)+1) +". "+ prop[p]);

Programmer avec ActionScript 3.0

On utilise la boucle for...in pour parcourir des objets, notamment des tableaux. Sa structure est composée d’une variable où l’on stocke les éléments et du nom de l’objet à parcourir :

sophie vandenabeele <sophievandenabeele@free.fr> •

Test de la boucle for package { import flash.display.Sprite; public class BoucleForTest extends Sprite { private var membres:Array=new Array("Michel","Guy","Claire"); public function BoucleForTest():void { var test:BoucleFor=new BoucleFor(membres); } } }

Focus

} } } }

La boucle for each{in

for each (certainObjet in autreObjet) {{

Les deux exemples suivants peuvent fonctionner avec n’importe quel objet, notamment un tableau comme c’est le cas ici :

24/01/08

Exemple. La boucle for each{ in package { public class BoucleForEachIn { public function BoucleForEachIn(groupe:Object) :void { for each (var truc:Object in groupe) { trace(truc);

Programmer avec ActionScript 3.0

Dans le même esprit que la boucle for{in, la boucle for each{in parcourt des groupes de données, notamment des valeurs de propriétés, du XML et les propriétés d’un objet XMList. Elle s’appuie sur le format suivant :

sophie vandenabeele <sophievandenabeele@free.fr> •

Test de la boucle for{ in package { import flash.display.Sprite; public class BoucleForInTest extends Sprite { private var monEquipe:Array=new Array("Charles","Sophie","Laure"); public function BoucleForInTest():void { var test:BoucleForIn=new BoucleForIn(monEquipe); } } }

Focus

} } } }

La boucle while

while(condition) {{

Si la condition est false, aucune opération n’est exécutée. Ce type de boucle est idéal dans le cas où vous ne souhaitez pas réaliser le moindre traitement si la condition n’est pas rencontrée. Dans l’exemple suivant, vous pouvez saisir directement le nom de la classe dans le champ Document class du ﬁchier Flash, sans créer de classe de test :

24/01/08

Exemple. La boucle while package { import flash.display.Sprite; public class BoucleWhile extends Sprite { private static var compteur:Number=10; public function BoucleWhile():void {

Programmer avec ActionScript 3.0

La boucle while met en place une condition entre parenthèses et la fait suivre d’une série d’opérations encadrées par des accolades. Elle utilise le format suivant :

sophie vandenabeele <sophievandenabeele@free.fr> •

Test de la boucle for each{ in package { import flash.display.Sprite; public class BoucleForEachInTest extends Sprite { private var internet:Array=new Array("PHP","Perl","C#","ColdFusion"); public function BoucleForEachInTest():void { var test:BoucleForEachIn=new BoucleForEachIn(internet); } } }

Focus

while (compteur > 0) { trace(compteur); compteur--; } trace("Décollage !"); } } }

La boucle do{while

do { operation } while(condition)

L’exemple suivant peut être testé directement en saisissant le nom de la classe dans le champ Document class d’un nouveau ﬁchier Flash :

public class DoWhile extends Sprite { private var parcours:String="Albert Einstein"; private var compteur:uint=parcours.length; private const TOTAL:uint=parcours.length; private var chaineTemp:String; private var albert:String="";

24/01/08

public function DoWhile():void { do { chaineTemp=parcours.charAt(TOTAL-compteur);

Programmer avec ActionScript 3.0

Exemple. la boucle do...while package { import flash.display.Sprite;

sophie vandenabeele <sophievandenabeele@free.fr> •

La différence principale entre les boucles while et do{while se situe au niveau de la condition de test : elle intervient immédiatement après la première opération. Ainsi, même si la condition est false, la boucle do{while exécute au moins une opération. Elle repose sur le format suivant :

Focus

albert+= chaineTemp; trace(chaineTemp); compteur--; } while (chaineTemp != " "); trace(albert); } } }

La programmation orientée objet

Pourquoi la POO ?

24/01/08

Si vous vous intéressez aux origines de la POO, vous apprendrez que, parmi d’autres raisons, elle a été développée pour les analogies avec le monde réel qu’elle offre. La programmation devient alors plus intuitive. Que tous ceux qui pensent que la POO est complexe et difﬁcile se ﬁgurent les problèmes de ses créateurs : les méthodes de la programmation procédurale ont leurs limites. (La programmation procédurale est une méthode qui consiste à écrire les procédures les unes à la suite des autres, de manière linéaire). Les développeurs de la POO ont articulé leurs concepts autour de l’idée d’objets (ou de l’analogie avec les objets), qui disposent de propriétés et de méthodes (leurs caractéristiques et leurs

Programmer avec ActionScript 3.0

Par ailleurs, Nakhimovsky et Myers ont prédit que dans un futur proche (après 1998), de plus en plus de développeurs non initiés se mettraient à écrire des programmes. En d’autres termes, de nombreux individus sans le moindre diplôme d’ingénieur ou d’informaticien deviendraient de véritables développeurs. Cette prévision de 1998 illustre parfaitement la situation actuelle de nombreux développeurs en ActionScript. D’un langage disposant à l’origine de quelques instructions, opérateurs et commandes, ActionScript 3.0 est devenu un véritable langage de POO. La plupart des développeurs en ActionScript ne sont pas des programmeurs traditionnels, bardés de diplômes. Nakhimovsky et Myers ne se plaignaient pas de cette situation, mais ils cherchaient au contraire à démontrer que les principes de la POO permettent aux développeurs de programmer plus efﬁcacement et plus intuitivement.

sophie vandenabeele <sophievandenabeele@free.fr> •

L’un de mes livres préférés autour de la programmation orientée objet (POO) est sans conteste JavaScript Objects : Object Use and Data Manipulation with JavaScript (non traduit en français, paru en 1998 aux éditions Wrox) d’Alexander Nakhimovsky et Tom Myers. Ils montrent comment on peut appliquer la POO au JavaScript, un langage interprété faiblement typé. Venant de la part de deux universitaires prestigieux, rompus à des langages de programmation comme C++ et Java, cette perspective et ce point de vue sont encore plus intéressants que s’ils émanaient de simples passionnés de JavaScript. Leur démarche nous fait ainsi comprendre que l’on n’a pas besoin d’un langage de POO pour appliquer les principes de la POO. La POO est donc autant une approche pour la programmation que la structure intrinsèque d’un langage.

Focus

actions). Par exemple, si vous possédez un chien (un objet), il dispose d’une personnalité (une propriété), d’une queue (une autre propriété) et il est capable d’aboyer (une action) lorsqu’il voit des inconnus roder autour de la maison. Tous ces éléments fonctionnent de concert pour définir son apparence et son comportement. Dans le même esprit, on peut disposer d’une application Flash capable de lire (méthode) des vidéos sélectionnées par l’utilisateur (propriété). Elle est également en mesure d’enregistrer (méthode), d’ajouter (méthode) ou de mettre en pause (méthode) la vidéo (propriété). L’application dispose d’un champ de texte (objet) dans lequel l’utilisateur saisit ce qu’il veut voir et entendre (propriété). Des instructions (propriété) lui expliquent ce qu’il peut saisir. En plus de simplifier la programmation, la POO a été conçue pour gérer des applications plus complexes, en particulier celles qui interagissent avec d’autres éléments, comme les utilisateurs, d’autres composants ou des données. De manière interne, la structure de la POO est plus simple à traiter par le compilateur et le programme fonctionne plus efficacement.

Les fonctionnalités les plus importantes d’ActionScript en rapport avec la POO ne sont pas nécessairement visibles. ActionScript 2.0 (et les versions précédentes) peut être articulé et exécuté selon les principes de la POO ; toutefois, la compilation et l’exécution du code ne proﬁtait pas encore des structures de la POO. ActionScript 3.0 y remédie.

24/01/08

ActionScript 3.0 et POO

Programmer avec ActionScript 3.0

Figure 13. Les classes sont des représentations abstraites des objets (instances)

sophie vandenabeele <sophievandenabeele@free.fr> •

Alors, pourquoi la POO ? Vous l’aurez compris : elle rend la programmation plus simple, même pour des structures complexes, et votre application tourne de manière plus efﬁcace. Vous apprécierez ainsi davantage la programmation ! Que demander de plus ? La figure 13 montre une représentation simpliﬁée de la structure de la POO.

Focus

Les bases de la POO La section suivante détaille tous les éléments de base de la programmation orientée objet. Nous tâcherons de rester le plus concret et le plus simple possible aﬁn d’explorer davantage certaines pistes par la suite. Les exemples mettent en évidence le comportement d’ActionScript 3.0 vis-à-vis des différents éléments de POO. Les débutants y trouveront les bases de la programmation orientée objet et pourront poursuivre leur découverte par la suite. Les développeurs plus aguerris verront les ressemblances et les différences d’ActionScript 3.0 avec les autres langages de POO qu’ils ont probablement déjà utilisés.

Organisation des classes

Pour créer votre propre classe de POO, vous devez établir un plan abstrait du rôle et des objectifs de la classe. Par exemple, vous pouvez réfléchir à une classe qui génère des messages saisis par l’utilisateur. Pour contenir le message, vous avez besoin d’une variable, qui correspond à l’une des propriétés de la classe. Afin d’afficher le message, vous devez mettre en place une fonction, qui sera l’une des méthodes de la classe. Tout comme la propriété, la méthode est abstraite : elle ne place pas directement le message dans un champ de texte ou elle ne le passe pas à une autre variable – elle se contente de l’afficher quel qu’il soit. L’exemple 23 crée une classe qui correspond à ces critères, définis dans un plan d’ensemble. Les différents éléments importants et relatifs à la POO ont été commentés :

24/01/08

Exemple 23. package { public class Exemple { // Voici une propriété private var bonnePropriete:String;

Programmer avec ActionScript 3.0

var Pedro:String="Votez pour Pedro"; var longueur:uint = Pedro.length; var coordonnee:String = Pedro.slice(0,longueur-10); trace(coordonnee);

sophie vandenabeele <sophievandenabeele@free.fr> •

Que vous ayez déjà goûté à la POO ou que vous découvriez ActionScript, il y a de fortes chances pour que vous ayez déjà travaillé avec des classes, parfois sans même le savoir. Les classes en ActionScript sont des ensembles abstraits qui réunissent des propriétés et des méthodes. Dans cet ouvrage, vous avez déjà parcouru de nombreux exemples de classes intégrées et de classes générées par l’utilisateur, avec leurs propriétés et leurs méthodes. Par exemple, les lignes suivantes présentent une instance de la classe String (Pedro), une propriété de cette classe (length) et une méthode (slice).

Focus

} }

Pour créer une instance d’une classe abstraite, on a besoin d’une autre classe (traditionnellement appelée Main ou Principal) qui va assigner du contenu à la classe abstraite et afﬁche les valeurs de ses propriétés, comme le montre l’exemple 24. Exemple 24.

24/01/08

package { import flash.display.Sprite; import flash.text.TextField; public class TestExemple extends Sprite { public function TestExemple() { var texteHaut:TextField=new TextField(); var test:Exemple=new Exemple(); test.assignerProp("Bonjour la classe");

Programmer avec ActionScript 3.0

La classe Exemple est l’abstraction de notre simple besoin de retourner une chaîne de caractères. La classe dispose d’une propriété exprimée sous la forme d’une chaîne (bonnePropriete), d’une méthode constructeur; d’une méthode qui assigne une valeur à la propriété (assignerProp) et d’une méthode qui retourne la propriété de la chaîne (afficher). Rappelez-vous : la méthode constructeur dispose du même nom que la classe et sert à l’instancier. Dans cet exemple, le constructeur est vide et rien ne se passe lorsqu’on crée une instance (un objet) de la classe.

sophie vandenabeele <sophievandenabeele@free.fr> •

// Voici une méthode constructeur public function Exemple():void { } // Voici une méthode public function afficher():String { return bonnePropriete; } // Voici une méthode public function assignerProp(msg:String):void { bonnePropriete=msg; }

Focus

texteHaut.text=test.afficher(); this.addChild(texteHaut); texteHaut.x=100; texteHaut.y=100; } } }

Ce ne sont que des propriétés

Comme vous pouvez le voir, la bonne démarche pour écrire une application en POO consiste à s’appuyer aussi bien sur des classes intégrées que sur celles créées par l’utilisateur, en mettant en place les propriétés et les méthodes qui correspondent à ce que vous aviez planiﬁé.

Dans le cadre de la POO, l’héritage désigne la capacité d’une classe à passer ses propriétés et ses méthodes à une autre classe. Lorsqu’une classe étend une autre (on parle de sous-classage), la sous-classe hérite de toutes les propriétés non privées de la classe mère. L’exemple 25 étend la classe Exemple de l’exemple 23. Précédemment, nous avons vu que la classe Exemple contient une propriété, bonnePropriete, et deux méthodes, assignerProp et afficher. En étendant la classe Exemple à ExempleEtendu (exemple 25), cette dernière classe hérite d’assignerProp, d’afficher et de bonnePropriete. On peut alors ajouter d’autres méthodes et des propriétés à cette classe ﬁlle. L’exemple 25 ajoute justement une propriété numérique et une fonction qui retourne cette propriété.

24/01/08

Exemple 25. package { public class ExempleEtendu extends Exemple { // Voici une propriété ajoutée

Programmer avec ActionScript 3.0

Héritage

sophie vandenabeele <sophievandenabeele@free.fr> •

Lorsque vous consulterez des livres et des articles à propos de la POO, vous remarquerez que le terme propriétés intervient régulièrement et désigne à la fois les propriétés et les méthodes de manière indistincte. D’un point de vue strict, les propriétés correspondent aux variables et les méthodes aux fonctions, mais il n’est pas si étrange de les désigner dans leur ensemble comme des « propriétés », lorsqu’on parle d’objets. En POO, l’objet est au centre des préoccupations : il est composé d’éléments et même si on désigne ses caractéristiques (propriétés) et ses actions (méthodes) d’un seul tenant, on n’estompe pas cette conception.

Focus

public var numPropriete:Number; // Voici la méthode constructeur public function ExempleEtendu():void { } // Voici une méthode ajoutée public function affichNum():Number { return numPropriete; } } }

Exemple 26. package { import flash.display.Sprite; import flash.text.TextField;

24/01/08

Programmer avec ActionScript 3.0

public class ExempleEtenduTest extends Sprite { public function ExempleEtenduTest() { var texteHaut:TextField=new TextField(); texteHaut.width=150; texteHaut.height=15; var test:ExempleEtendu=new ExempleEtendu(); test.bonnePropriete="Moitié prix = seulement $"; test.numPropriete=42; test.numPropriete/= 2; texteHaut.text=test.afficher() + test.affichNum(); this.addChild(texteHaut); texteHaut.x=100; texteHaut.y=100;

sophie vandenabeele <sophievandenabeele@free.fr> •

Pour voir comment fonctionne l’héritage, l’exemple 26 instancie la classe ExempleEtendu. On assigne des valeurs aux méthodes et aux propriétés héritées de la classe Exemple et à celles créées par la classe ExempleEtendu, aﬁn de les afﬁcher à l’écran.

Focus

} } }

Comme avec l’héritage dans les arbres généalogiques, on aboutit parfois à des résultats plus complexes qu’il n’y paraît. Toutefois, l’essentiel est de comprendre qu’une classe peut hériter des caractéristiques d’une autre.

Abstraction et encapsulation Même s’il s’agit de concepts différents, il est très intéressant d’aborder l’abstraction et l’encapsulation ensemble, pour mieux les comprendre.

sophie vandenabeele <sophievandenabeele@free.fr> •

24/01/08

Afin de saisir le concept d’encapsulation, on doit remonter aux origines de la POO. Les méthodes de programmation procédurale sont souvent à l’origine de problèmes, notamment lorsqu’une propriété et sa valeur se voient écrasées par d’autres propriétés. Au fur et à mesure que les applications sont devenues plus ambitieuses et plus complexes, ce problème s’est développé de manière exponentielle. En encapsulant les propriétés, vous pouvez en modifier une sans causer des changements accidentels à un autre endroit de votre code source. L’abstraction et l’encapsulation sont donc des techniques qui divisent un grand problème en une série de composants plus faciles à traiter. En prime, ces techniques offrent un plus grand contrôle de votre code et vous serez donc en mesure de modifier ou d’étendre votre programme sans recommencer à zéro. Vous pourrez également réutiliser les éléments (les classes) dans d’autres programmes, qui

Programmer avec ActionScript 3.0

L’abstraction désigne la définition des caractéristiques d’un objet sans préciser le contenu de cet objet. L’exemple 23 a mis en place une classe qui dispose de caractéristiques abstraites sous la forme de la propriété bonnePropriete et des méthodes assignerProp et afficher : • Tout ce que nous savons de la propriété bonnePropriete est qu’il s’agit d’une chaîne, mais nous ne connaissons pas son contenu. • De même, nous savons que la méthode afficher retourne une chaîne, mais le traitement et la destination de la chaîne dépendent de son implémentation. • La méthode assignerProp est capable d’assigner une chaîne, mais là encore il reste à l’implémenter. Pour comprendre l’abstraction, imaginez une fenêtre et considérez-la comme une abstraction. Nous comprenons tous le concept abstrait de la fenêtre et nous savons qu’elle peut revêtir toutes sortes d’apparences, de la large baie vitrée d’un magasin au vitrail d’une cathédrale en passant par le hublot d’un bateau. Dans le même esprit, on peut utiliser le terme abstrait chien pour désigner une large variété « d’implémentations », du chihuahua au labrador. L’abstraction est suffisamment claire et explicite pour qu’on puisse la distinguer d’une autre. Par exemple, notre abstraction d’une fenêtre se distingue clairement de l’abstraction d’une porte. De même, notre abstraction d’un chien doit être différente de celle d’un chat. Même si les abstractions ne délivrent pas de contenu particulier, elles sont suffisamment précises pour qu’on les distingue les unes des autres.

Focus

n’avaient a priori rien à voir. Par exemple, si vous avez développé une extension de la classe SimpleButton, vous n’aurez vraisemblablement pas envie de réécrire le code nécessaire à chaque fois que vous créez une application qui a besoin d’un bouton. Grâce à l’abstraction, vous pourrez alors implémenter le bouton avec les caractéristiques propres à votre nouvelle application. En parallèle, l’encapsulation des éléments assure une nouvelle implémentation claire et nette et évite que des changements dans les propriétés ne causent des modiﬁcations accidentelles.

Accesseurs

En règle générale, les accesseurs sont des méthodes publiques, qui autorisent donc les changements comme le montre l’exemple 24. Dans l’implémentation d’une classe, les accesseurs déclarés en private forcent évidemment l’encapsulation, mais ils n’offrent pas la souplesse dont on a besoin.

Au-delà de l’accès aux informations et aux propriétés d’un objet, on a souvent besoin de changer les valeurs d’une propriété. Pour modiﬁer les informations d’un objet tout en forçant l’encapsulation, on fait appel aux mutateurs (également appelés setters). Les méthodes publiques qui se contentent d’assigner des valeurs sont donc des mutateurs, comme la méthode assignerProp de l’exemple 23. Lorsqu’on implémente la classe à l’exemple 24, vous pouvez voir comment la méthode assignerProp parvient à assigner une valeur concrète. Notez au passage qu’elle assigne une valeur à une propriété private encapsulée dans la déﬁnition de la classe.

Les accesseurs et les mutateurs avec get et set

24/01/08

Vous pouvez également utiliser les expressions get et set disponibles en ActionScript 3.0 pour créer vos accesseurs et mutateurs. Les méthodes créées à l’aide de ces expressions vous permettent d’accéder à une information de la même manière qu’une propriété — sans utiliser de parenthèses. Par exemple, si vous déﬁnissez les accesseurs et les mutateurs de la manière suivante : public function get flv():String { return flvTitre;

Programmer avec ActionScript 3.0

Mutateurs

sophie vandenabeele <sophievandenabeele@free.fr> •

Pour forcer l’encapsulation, vous pouvez utiliser des accesseurs (également désignés par l’anglicisme getters). Un accesseur est une méthode qui récupère des informations à propos d’un objet (elle délivre un accès à ces informations). On peut restreindre les accesseurs à l’aide de méthodes privées. Si une méthode est privée, seule la classe elle-même peut y accéder et un objet externe ne peut pas récupérer des informations. Dans l’exemple 23, l’accesseur est la méthode afficher, qui est publique et qui n’est donc pas aussi restrictive. En revanche, à l’exemple 14, la méthode recupMot est déclarée en private et n’est implémentée qu’au sein de la classe. Ainsi, le seul moyen d’accéder à la propriété de l’exemple 14 est à travers le constructeur de la classe. Ce n’est pas une structure très souple et simple d’emploi ! (Le rôle de l’exemple 14 est d’illustrer une classe et son traitement interne).

Focus

} public function set flv(nomFichier:String):void { flvTitre= nomFichier; } Vous y accéderez avec la syntaxe : uneInstance.flv= "monFichier.flv " //Setter trace(uneInstance.flv); //Fonctionnement du getter Comme vous pouvez le voir, le résultat ressemble davantage à des propriétés qu’à des méthodes, même s’il s’agit bien de méthodes. C’est d’ailleurs pour cette raison que nous n’avons pas utilisé les expressions get et set dans nos exemples, aﬁn de ne pas les confondre avec des propriétés. Mais ce sont bien des méthodes et à l’usage vous pourrez d’ailleurs les préférer pour créer vos accesseurs et vos mutateurs.

Globalement, le polymorphisme désigne les différentes implémentations d’une classe abstraite. Reprenons notre concept de fenêtre en guise d’abstraction. Vous pouvez diviser la classe Fenetres dans les sous-classes limitées aux baies de magasin ou aux vitraux de cathédrale. Ces deux classes implémentent des méthodes de la classe Fenetres, mais elles le font de manière différente. Au lieu d’avoir une simple implémentation (mono), vous disposez de plusieurs implémentations (poly) du concept initial de la fenêtre. Le code suivant illustre ce comportement :

Le concept de polymorphisme est important pour la programmation orientée objet et peut vous être d’une grande utilité si vous développez une application selon cette architecture. Il est particulièrement efﬁcace lorsqu’on utilise des interfaces, un sujet que nous abordons sans plus tarder !

24/01/08

En sous-classant la classe Fenetres dans les classes Magasin et Cathedrale, on hérite des noms de fonction de la classe mère, mais celles-ci disposent de fonctionnalités différentes. Dans l’implémentation Magasin, la méthode mettreCadre va traiter un large espace de travail. En revanche, la méthode de l’implémentation Cathedrale va gérer de très nombreux cadres de petite taille pour créer le vitrail. Dans le même esprit, les méthodes mettreVerre sont différentes : une implémentation dispose d’une large baie vitrée tandis que l’autre présente de nombreux éclats colorés.

Programmer avec ActionScript 3.0

public class Fenetres { public function Fenetres() {} public function mettreCadre() { // Traitement du cadre } public function mettreVerre() // Traitement du verre } }

sophie vandenabeele <sophievandenabeele@free.fr> •

Polymorphisme

Focus

Interfaces Une interface ressemble à une classe abstraite. Pour être clair, une interface (à ne pas confondre avec l’interface graphique de l’utilisateur, qui n’a rien à voir) est un ensemble de méthodes que l’on différencie par leur nom et le type de leurs données, mais qui ne contiennent rien de particulier. Les interfaces ressemblent ainsi à des contrats : tous les intervenants sont d’accord pour respecter les termes qui déﬁnissent une interface. C’est donc un outil précieux pour faciliter le travail collaboratif et pour s’assurer que les mêmes types de données et d’arguments seront utilisés dans l’implémentation de l’interface. En reprenant notre analogie avec les fenêtres, nous avons utilisé deux méthodes pour créer un objet : mettreCadre et mettreVerre. Voici à quoi ressemblerait une interface en ActionScript 3.0 :

Pour utiliser cette interface, vous devez encore l’implémenter. Dans notre exemple, nous avons besoin de deux interfaces : celle du magasin et celle de la cathédrale, comme les scripts suivants :

24/01/08

Magasin package { class Magasin implements Fenetres { public function Magasin() { trace("==Magasin=="); } public function mettreCadre():void

Programmer avec ActionScript 3.0

En clair, le contrat stipule : « si vous souhaitez implémenter cette interface, vous devez utiliser ces deux fonctions sans qu’elles ne retournent quoi que ce soit (void) ». C’est un autre niveau d’abstraction, mais, avec cet exemple, vous êtes en mesure de créer n’importe quel type de fenêtres, du plus petit bâtiment au large gratte-ciel.

sophie vandenabeele <sophievandenabeele@free.fr> •

Interface package { interface Fenetres { function mettreCadre():void; function mettreVerre():void; } }

trace("On place un large cadre.");

Focus

{ } public function mettreVerre():void { trace("On ajoute une grande baie vitrée."); } } }

Cathédrale

24/01/08

Programmer avec ActionScript 3.0

package { class Cathedrale implements Fenetres { public function Cathedrale() { trace("==Cathedrale=="); } public function mettreCadre():void { trace("On place de très nombreux cadres de petite taille."); } public function mettreVerre():void { trace("On ajoute de nombreux éclats colorés."); } } }

sophie vandenabeele <sophievandenabeele@free.fr> •

La fonction constructeur se contente d’ajouter un message à la fenêtre de Sortie à l’aide de l’expression trace(), pour montrer qu’il s’agit de l’implémentation dédiée au magasin. Ensuite, les deux méthodes de l’interface sont afﬁchées à l’aide de trace() pour qu’on identiﬁe leur implémentation unique. Comparez alors le résultat avec l’implémentation dédiée à la cathédrale, présentée ci-après :

Focus

En poursuivant notre analogie entre l’interface et le « contrat », on voit que l’implémentation de la cathédrale respecte bien le nom des méthodes et la valeur retournée, mais qu’elle utilise la fonction trace() de manière différente. (À la place de l’expression trace(), toutes les autres instructions, les fonctions ou les éléments en accord avec l’interface pourraient convenir.) Pour comparer ces deux implémentations différentes de l’interface Fenetres, une classe de test instancie les deux implémentations à la suite l’une de l’autre. De cette manière, vous pouvez voir en quoi les mêmes méthodes ont été implémentées différemment. Test de la classe Fenetres

24/01/08

==Magasin== On place un large cadre. On ajoute une grande baie vitrée. ==Cathedrale== On place de très nombreux cadres de petite taille. On ajoute de nombreux éclats colorés. The output window shows the following:

sophie vandenabeele <sophievandenabeele@free.fr> •

La fenêtre de Sortie devrait alors afﬁcher :

Programmer avec ActionScript 3.0

package { import flash.display.Sprite; public class CreerFenetres extends Sprite { var monMagasine:Fenetres; var maCathedrale:Fenetres; public function CreerFenetres() { monMagasine=new Magasin(); monMagasine.mettreCadre(); monMagasine.mettreVerre(); maCathedrale=new Cathedrale(); maCathedrale.mettreCadre(); maCathedrale.mettreVerre(); } } }

Focus

Comme le montre la sortie, les mêmes méthodes renvoient des messages différents, qui correspondent à des contextes uniques. C’est une illustration du polymorphisme.

Modèles de conception (Design Patterns) Pour conclure notre document, introduisons le concept de modèles de conception. Dans la mesure où ActionScript 3.0 est un véritable langage de programmation orientée objet, vous pouvez progresser en POO et proﬁter d’un concept que les programmeurs professionnels connaissent déjà et exploitent (ou souhaiteraient mieux connaître et exploiter !).

Une brève introduction aux modèles de conception À l’image de la POO elle-même, les modèles de conception proposent une stratégie pour traiter les problèmes récurrents que rencontrent les programmeurs. Si vous envisagez les modèles de conception comme des « patrons de vêtement », vous comprendrez mieux leur fonctionnement et l’idée générale d’architecture de la programmation.

24/01/08

Imaginez que vous êtes un fabricant de vêtement et que vous disposez d’un ensemble de patrons pour les différents types d’habits. La collection d’été inclut des patrons pour les shorts, les chemises à manches courtes, les maillots de bain et des matériaux légers et colorés. La même chose s’applique aux autres saisons de l’année. De même, vous disposez de patrons pour les vêtements classiques et modernes et pour un ensemble d’activités, du camping à l’uniforme scolaire.

Programmer avec ActionScript 3.0

Pour tous ceux qui débutent en POO, les design patterns sont des modèles de conception, à un niveau toutefois assez avancé. Maintenant qu’ActionScript 3.0 est devenu un véritable langage de programmation orientée objet, il est nécessaire de s’intéresser à ce concept et de le considérer comme un ensemble de « bonnes pratiques ». Dans cette brève introduction au concept, nous allons passer en revue un simple exemple de modèle de conception, le Singleton.

sophie vandenabeele <sophievandenabeele@free.fr> •

Les design patterns ont été développés par un groupe de programmeurs professionnels sous la forme de « pratiques de programmation », aﬁn d’optimiser la qualité des applications orientées objet. En clair, il s’agit d’un ensemble de méthodes et de solutions pour des problèmes de développement récurrents : le programmeur n’a pas besoin de réinventer la roue et peut exploiter directement des méthodes testées et approuvées par la communauté des développeurs. Toutes ces lignes de conduite ont été réunies dans un ouvrage fondateur qui date de 1995, Design Patterns : Catalogue des modèles de conception réutilisables (Vuibert), par Erich Gamma, Richard Helm, Ralph Johnson et John Vlissides. Ces quatre auteurs sont souvent appelés le Gang of Four et sont à l’origine des modèles de conception.

Focus

À chaque changement saisonnier, vous faites face au même problème : vous devez produire les vêtements qui correspondent à la prochaine saison. Plutôt que de considérer chaque saison comme un retour à zéro, où vous devez plancher sur de nouveaux modèles, vous pouvez récupérer les patrons qui correspondent à cette période de l’année. L’automne nécessite des patrons qui utilisent davantage de laine et des manches longues. En hiver, vous aurez besoin de matériaux plus épais et de solutions qui permettent à vos clients de rester au chaud malgré de basses températures. Il n’est donc pas absurde de réutiliser les mêmes patrons d’une année sur l’autre. Ces derniers doivent être sufﬁsamment souples pour autoriser les changements de style et de mode, mais s’ils se sont déjà montrés efﬁcaces l’année précédente, pourquoi vouloir en changer ? On retrouve la même démarche avec les designs patterns du monde logiciel. Si vous avez passé du temps à l’ébauche d’une solution robuste de POO, vous pouvez l’exploiter à nouveau lorsque le même problème vient à se présenter.

Un exemple de modèle de conception : le Singleton

L’exemple suivant de Singleton est abstrait, mais il permet d’en comprendre sa structure : une seule instance peut être instanciée à la fois. Il suit plus ou moins la conception classique du Singleton en utilisant une fonction constructeur private et un test de l’instanciation précédente. Mais en ActionScript 3.0, les fonctions constructeur doivent être déclarées comme public. Pour y remédier, vous pouvez utiliser une classe internal créée en dehors de la classe, ou même déﬁnir un package.

24/01/08

Dans le constructeur de classe, si vous utilisez l’argument internal, la fonction constructeur va se comporter comme une fonction privée. On obtient un plus haut niveau de sécurité en plaçant la classe internal en dehors de la déﬁnition de la classe et du package, mais vous pouvez également disposer cette classe internal en dehors de la déﬁnition de la classe mais à l’intérieur du package.

Programmer avec ActionScript 3.0

Lorsque vous travaillez en ActionScript 3.0, vous devez traiter les classes et les objets implémentés depuis une classe. Parfois, vous devez vous assurer qu’il n’existe qu’une seule instance d’une classe mais qu’on peut malgré tout y accéder de manière globale. Par exemple, si vous créez une application qui lit des fichiers MP3, vous devez vous assurer qu’une seule instance de la classe qui lit les MP3 soit instanciée à la fois. Dans le cas contraire, des instances multiples conduiraient à la lecture de plusieurs fichiers MP3 simultanément. Vous avez également besoin d’un accès unifié au lecteur afin de choisir le fichier à lire et de garantir qu’un seul MP3 est lu à la fois.

sophie vandenabeele <sophievandenabeele@free.fr> •

Tout l’attrait des modèles de conception réside dans leur capacité à résoudre des problèmes précis, tout en assurant sufﬁsamment de souplesse et de liberté pour s’appliquer à un large éventail de situations. En parallèle, les modèles de conception sont prévus pour optimiser chaque aspect de la programmation orientée objet. Tout en incarnant des raccourcis et des solutions rapides à des problèmes complexes et récurrents, les modèles de conception offrent également d’excellentes pratiques de programmation.

Focus

Dans l’exemple du Singleton ci-dessous, la classe internal à la fin du script est placée en-dehors du package et elle n’est donc pas visible en dehors de ce fichier source. (Notez également que l’attribut internal n’est pas mentionné dans la fonction ClassePrivee, car il s’agit de l’attribut par défaut qui est donc ajouté automatiquement). En utilisant l’instance de la classe privée dans le constructeur, le Singleton ne peut pas être instancié en-dehors de la classe. C’est seulement en utilisant l’accesseur getInstance() qu’une instance peut être instanciée. La logique du code du Singleton est à la fois simple mais élaborée. La fonction constructeur s’ouvre avec la fonction getInstance() qui vérifie si une instance de Singleton existe déjà. Si ce n’est pas le cas, elle en crée une ; dans le cas contraire, elle arrête son traitement et affiche un message indiquant qu’une instance de Singleton est déjà en place. Le script aboutit alors à l’expression return, qui retourne soit l’instance du nouveau Singleton qui vient d’être créé, soit celle qui existe déjà. Dans les deux cas, une seule instance de la classe du Singleton est autorisée. Saisissez l’exemple suivant dans un fichier ActionScript que vous enregistrerez sous le nom Singleton.as. Exemple de Singleton

sophie vandenabeele <sophievandenabeele@free.fr> •

24/01/08

Programmer avec ActionScript 3.0

package { public class Singleton { private static var _instance:Singleton; public function Singleton(pvt:ClassePrivee) { } public static function getInstance():Singleton { if(Singleton._instance == null) { Singleton._instance=new Singleton(new ClassePrivee()); trace("Singleton instancié"); } else { trace("Désolé, un Singleton a déjà été instancié") } return Singleton._instance; } } } class ClassePrivee

public function ClassePrivee() { trace("La classe privée est là"); }

Focus

{

}

Pour tester le Singleton, vous devez mettre en place un script qui tente d’instancier plus d’une instance de la classe. Ouvrez un nouveau ﬁchier ActionScript, saisissez le script ci-dessous et enregistrez-le sous le nom SingletonTest.as, dans le même répertoire que le ﬁchier Singleton.as. Test du Singleton

La classe privée est là Singleton instancié Désolé, un Singleton a déjà été instancié

24/01/08

La classe pseudo-privée est mise en évidence par la première ligne de la sortie. Cela montre que l’astuce pour instancier le Singleton sous la forme d’une classe private a bien fonctionné. Ensuite, la première tentative de création d’une instance de Singleton a marché correctement. En revanche, la seconde tentative s’est soldée par un échec : on ne peut pas avoir deux instances simultanément. C’est précisément le rôle du Singleton !

sophie vandenabeele <sophievandenabeele@free.fr> •

Enﬁn, ouvrez un nouveau document Flash et enregistrez-le sous le nom SingletonTest.fla, dans le même répertoire que les deux ﬁchiers précédents. Dans le champ Document class, saisissez SingletonTest et testez le script. Vous devriez voir la sortie suivante :

Programmer avec ActionScript 3.0

package { import flash.display.Sprite; public class SingletonTest extends Sprite { public function SingletonTest() { var singletonInitial:Singleton = Singleton.getInstance(); var singletonSuivant:Singleton = Singleton.getInstance(); } } }

Focus

Cet exemple vise à démontrer que les modèles de conception ne sont pas forcément difﬁciles et complexes à utiliser. Bien au contraire, vous pouvez vous appuyer sur leur architecture pour créer des programmes souples et optimisés. À l’image de tous les excellents algorithmes qui ont été testés encore et toujours depuis l’essor de la programmation informatique, les design patterns offrent des modèles de programmation efﬁcaces. Pour mieux comprendre les modèles de conception, au-delà du livre fondateur du Gang of Four, n’hésitez pas à vous reporter à Design Patterns – Tête la première, d’Eric et Elisabeth Freeman (O’Reilly). Même si les exemples sont écrits en Java, l’ouvrage est très clair et devrait vous permettre de mieux comprendre le concept. Par ailleurs, l’ouvrage ActionScript 3.0 Design Patterns, de William B. Sanders et Chandima Cumaranatunge (O’Reilly) devrait également vous permettre de maîtriser la programmation orientée objet à travers les modèles de conception.

Pour aller plus loin en programmation orientée objet sophie vandenabeele <sophievandenabeele@free.fr> •

24/01/08

Pour comprendre les bases de la POO, n’hésitez pas à vous reporter à un livre consacré au sujet. Nous vous recommandons Orienté Objet — Tête la première (à paraître chez O’Reilly). Idéalement, vous préférerez un livre consacré à ActionScript 3.0 ; vous pouvez même vous reporter à un ouvrage dédié aux versions antérieures d’ActionScript. Le meilleur d’ActionScript 3.0 par Colin Moock et ActionScript 3 par l’exemple de Joey Lott, Darron Schall et Keith Peters font ofﬁce de référence pour créer des applications orientées objet en ActionScript 3.0. Si vous disposez déjà d’un livre consacré à la POO dans un autre langage, comme Java, C++, JavaScript ou C#, il peut également vous être d’une grande utilité pour illustrer les concepts. Dans tous les cas, vous devez compléter les premiers apprentissages de cet ouvrage ! Considérez nos exemples comme autant de points de départ. Aujourd’hui plus que jamais, ActionScript est capable de créer de véritables structures de POO et est en mesure de s’appuyer sur les design patterns. La révolution est en marche et vous êtes d’ores et déjà du voyage.

Programmer avec ActionScript 3.0

Au final, la POO s’impose rapidement par son efficacité et la clarté de ses concepts. Toutefois, comme bien souvent, le diable est dans les détails. Lorsque vous créez des programmes simples, dédiés à des tâches précises sans grande implication, il est facile de mettre de côté la POO et de programmer vos fonctions d’un seul tenant. Mais pour mettre en place efficacement la POO, vous devez absolument planifier vos actions. Et il ne s’agit pas seulement de coucher sur papier les types de données dont vous aurez besoin : vous devez prendre le temps de réfléchir à l’ensemble de votre projet – même s’il est relativement court. Effectivement, l’apprentissage de la POO prend du temps et nécessite des efforts ; vous perdrez également vos anciennes habitudes de programmation séquentielle en cours de route, mais c’est une bonne chose ! Le jeu en vaut la chandelle et vous parviendrez à résoudre des problèmes plus complexes encore, vous deviendrez un meilleur programmeur et vous aurez la satisfaction du travail bien fait.