Apprendre à utiliser le langage de programmation de Flash ActionScript


Télécharger Apprendre à utiliser le langage de programmation de Flash ActionScript

★★★★★★★★★★4 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Apprendre à utiliser le langage de programmation de Flash ActionScript

L’Actionscript est le langage de programmation de Flash. La versionActionScript 3 a vu le jour avec l’arrivée de Flash CS3 en 2007. Selon ce que l’on retrouve comme information sur le site d’Adobe, son émergence aurait bouleversé la façon d’appréhender la programmation ActionScript. Il n’y a aucun doute là-dessus. Tous ceux qui étaient habitués à programmer en Flash depuis les débuts du logiciel ont, soit abandonné la programmation Flash avec la venue de la version 3, ou ont dû se mettre à jour de façon radicale car cette nouvelle version du langage adopte une syntaxe différente dite «orienté objet». Adobe prétend que la vitesse d’exécution des scripts serait jusqu’à dix fois plus rapide que l’ancienne version et qu’elle offrirait un lancement plus rapide des applications ainsi qu’une consommation réduite de la mémoire.

À QUOI SERT L’ACTIONSCRIPT ?

L’Actionscript permet de donner des commandes aux animations Flash. Par exemple, on peut commander à une animation de s’arrêter à n’importe quel moment avec la commande STOP : « stop (); ». C’est sans doute l’action la plus utilisée dans Flash. Elle est restée inchangée depuis les débuts de Flash. Seul problème avec l’Actionscript 3, nulle part vous ne trouverez un bouton ou un raccourci vous permettant de l’appliquer aisément. Il vous faut donc apprendre à l’écrire directement dans le panneau Fenêtre > Actions.

Parmi les actions les plus fréquentes que nous utiliserons dans le cadre de ce cours nous retrouverons entre autres :

» Jouer l’animation (Play) ;

» Atteindre une image (cellule ou frame) précise dans le scénario (GoToAndPlayFromFrame) ;

» Atteindre une page web (URLRequest) ;

» Charger un fichier .swf externe et le faire jouer (ClickToLoadUnloadSWF).

Nous aborderons également les actions qui permettent de charger un son, de lire une vidéo et de déplacer des objets.

COMMENT APPLIQUER DES ACTIONS ?

La norme est de créer un calque séparé dans le scénario dans lequel on placera les actions :

Si l’on veut par exemple insérer l’action « stop (); » dans le scénario, on doit : »            créer un calque qu’on nommera «ACTIONS»,

» placer une image-clé à l’endroit où l’on veut vous que l’action commence

» et, finalement, ouvrir le panneau des actions (Fenêtre > Actions) et taper l’action « stop (); ».

Pour pouvoir assigner des actions à des objets sur la scène, il faut absolument que l’objet soit converti en symbole et lui donner un nom d’occurrence.

La façon la plus simple pour insérer des actions pour les débutants est d’utiliser les fragments de code que l’on retrouve sous :

Fenêtre > Fragments de code.

ÉTIQUETTES (LABELS)

Les étiquettes servent à marquer des points dans le scénario auxquels se réfèreront les actions pour, par exemple, indiquer des endroits précis à atteindre dans le scénario. On les utilise de préférence plutôt que des numéros d’images (cellules). Les étiquettes (labels) dans Flash sont représentées par l’icône du petit drapeau rouge. 

Pour créer une étiquette, il faut simplement insérer une image-clé dans le scénario à l’endroit voulu et aller ensuite dans le panneau des propriétés et écrire un nom d’étiquette sous le menu «ÉTIQUETTE». Personnellement, je préfère créer un calque unique qui contiendra toutes les étiquettes que je nomme «ÉTIQUETTES».

Il est recommandé de ne pas utiliser d’espaces, de caractères spéciaux, de ponctuation ou de tirets pour les étiquettes.

EXEMPLE D’ACTION POUR ATTEINDRE UNE ÉTIQUETTE :

/*

Instructions :

1. Dans le code ci-dessous, remplacez le chiffre 5 par le nom de l’étiquette (entre guillemets) vers laquelle vous souhaitez que la tête de lecture se déplace lorsque vous cliquez sur l’occurrence de symbole.

*/ mc_bouton.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame);

function fl_ClickToGoToAndStopAtFrame(event:MouseEvent):void

{

 gotoAndStop(“depart”);

}

Quelques copies d'écrans :

Comment un « débutant en programmation » comme moi est devenu un Développeur AS3 efficace ?

J’ai lu et appliqué énormément de conseils des meilleurs livres sur la programmation ActionScript.

J'ai parcouru en long, en large et en travers les questions / réponses des mailing list, les articles des blogs ActionScript.

Au fur et à mesure de mes expérimentations, développements d'applications flash et surtout en apprenant de mes erreurs, j'ai retenu ce qui fonctionne.

Tout cela m’a aidé pour commencer à utiliser les Design Pattern et créer des Applications et Jeux Flash complexes, robustes et évolutifs.

L’ensemble de cet apprentissage m’a pris énormément de temps, d’expérimentations, de recherches, d'erreurs...

Que vous apporte ActionScript-Facile ?

Avec ActionScript Facile, je souhaite vous aider à acquérir ces connaissances beaucoup plus rapidement :

  • Avec des exemples concrets.
  • Des vidéos gratuites de formation.
  • du code source commenté.
  • des documents d’analyse, des idées d’implémentation.
  • des interviews d'experts ActionScript.
  • Et pleins d'autres surprises...

J’ai donc créé ActionScript Facile pour vous faciliter le développement AS3, le rendre le plus accessible possible à la majorité d’entre vous.

Dans ce guide, vous allez apprendre à utiliser le plus abouti des Éditeurs ActionScript en moins de 20 minutes.

LA DECOUVERTE

Que signifie ces trois lettres FDT ?

Flash Development Tools, le plus abouti des outils de développement Action Script ! Avec FDT, le Développement Flash redevient un plaisir :)

Présentation

La 1ère fois que j'ai découvert FDT (version 1.5), je suis surpris de découvrir un logiciel simplifiant et accélérant le développement AS2.

FDT continue de s'améliorer au fur et à mesure des versions. En l'utilisant de plus en plus pour tous mes projets de RIA Flash, je fut surprit de découvrir un logiciel aussi performant et simplifiant énormément (ou plutôt accélérant) le travail du développeur.

FDT est un plug-in pour Eclipse, qui fournit tout un environnement de travail dédié à Adobe Flash.

En effet, FDT permet de développer des applications Action Script (AS3, AS2 et haXe) avec beaucoup plus de rapidité (auto-complétion, templates personnalisés, import automatique...).

Après avoir essayé des éditeurs ActionScript comme Flashdevelop ou encore SEPY, FDT reste le meilleur et de loin, grâce à ses nombreuses fonctionnalités qui facilite énormément notre vie en tant que développeur.

FDT fonctionne donc sur les OS : Linux, Windows et MAC.

Les fonctionnalités

Il existe 3 version différents de FDT 5 :



  • Version Free : version de base qui propose des fonctionnalités suffisantes pour tout développeur Action Script dans un environnement professionnel.
  • Version MAX : celle-ci propose des fonctionnalités supplémentaires, notamment dans l'exploration et la gestion d'un projet Flash. Une version très complète !

Voici un aperçu des nombreuses fonctionnalités de FDT commune aux 2 versions :

  • Importation automatique : ajout des imports automatiquement pendant la création de code dans une classe.
  • proposition en directe de correction du code erroné.
  • Test en temps réel de la validité du code.
  • Réorganisation automatique des imports lors du changement (nom, chemin) d'une classe.
  • Gestion des classes intelligente (auto complétion du code très automatisé).
  • Système de template (pour la création rapide des classes récurrentes).
  • Support de la compilation MTASC directement dans eclipse.
  • Support de la compilation AS3 / AS2 avec Flex directement dans eclipse.
  • Compilation incrémentale et personnalisable.
  • Plusieurs « viewer » pour visualiser le résultat de son swf compilé (SWF externe Viewer, intérieur SWF Viewer, Adobe Flash Player, Navigateur dans le système, AIR Debug Launcher)
  • Multiplateforme, fonctionne aussi bien sous Linux que sous Windows et MAC (grâce à eclipse).
  • Support des commentaires au format javadoc.
  • Possibilité de travailler à plusieurs sur un même projet (avec les bibliothèques liées).
  • Explorateur intuitif pour visualiser l'arborescence d'une classe.
  • Possibilité de paramétrer tout son espace de travail.
  • Intègre l'aide de flash.
  • Gestion des tâches ANT pour la compilation, le débogage et le lancement.

 FDT transforme donc Eclipse en un puissant éditeur Flash, ActionScript et MXML.

 Il fournit aux développeurs des fonctions de codage sophistiquées.

INSTALLATION ET CONFIGURATION  

Installation

Pour commencer, vous devez installer la dernière version d'Eclipse. Je vous conseille d'installer la version Eclipse Classic 3.7.1 de 170 MB.

Pour les utilisateurs de Windows et MAC, il existe des versions de FDT sous forme de fichier « setup.exe ». Encore plus facile, il n'y a pas besoin d'installer Eclipse.

Ensuite, via Eclipse, il est possible d'installer directement FDT :

  • Lancez Eclipse.
  • Allez dans le menu Help puis cliquez sur Install New Software.
  • Sélectionnez Add , …://fdt.powerflasher.com/update/ et Name (par exemple FDT 5) et validez sur OK.
  • Dans l'onglet Available Software, cochez FDT 5 et cochez la ou les version(s) que vous souhaitez installer puis cliquez sur Next.
  • Une fenêtre apparaît pour déterminer les composants à installer dans Eclipse.
  • La fenêtre Install explique les composants à installer ou à mettre à jour. Appuyez sur Next.
  • Acceptez le contrat de licence et cliquez sur Next.
  • Puis cliquez sur Finish.
  • Il y a une Fenêtre de vérification avant l'installation, cliquez sur Install All.
  • Patentiez quelques minutes pendant le téléchargement et l'installation de FDT.
  • Lorsque FDT est téléchargé et installé, Eclipse va vous proposer de redémarrer le logiciel, cliquez sur Yes.

Voici des copies d'écran pour illustrer les principales étapes de l'installation.

Une fois installé, FDT comprend tous les composants nécessaires : le compilateur Flex, le debbuger, l'analyse du code en temps réel...

Pour des performances optimisées, vous pouvez installer :

  • La dernière version du SDK Flex 4.6 (compilateur AS3) : …/wiki/display/flexsdk/Flex+SDK .

Configuration

Maintenant nous allons configurer FDT.

Cliquez sur le menu Windows puis Preferences

Si l'installation s'est bien déroulée, vous devriez voir un onglet FDT, c'est ici que s'effectue la configuration du plugin.

C'est un exemple de configuration, libre à vous de l'améliorer en fonction de vos besoin :

  • Onglet Core Library : pour que FDT puisse corriger en temps réel votre code, choisissez les classes de références AS3 et AS2. Généralement c'est le path vers le compilateur Flex. Flex_3_SDK_1 : /.../eclipse/plugins/com.powerflasher.fdt.shippedflex_3.3.0.4852_1001/flex ou /home/matth/program/Adobe_Flex_Builder_Linux/sdks/3.5 (ce sera un autre répertoire, si vous avez installer la dernière version de Flex Builder).
  • Onglet Editor / Templates : vous pouvez ajouter vos propres modèles de classes. C'est à dire que lorsque vous créez une nouvelle classe dans FDT, il vous permet d'utiliser un template définis qui crée le code de base automatiquement pour votre classe. Il existe plusieurs templates sur internet, par exemple pour les framework Pixlib, PureMVC...
  • Onglet Tools / Flash :
  • Flash IDE : le chemin vers l'exécutable de Flash (Flash.exe).
  • Flash Player : le chemin vers le Player Flash Stand Alone (SAFlashPlayer.exe).
  • Flash ASO Directory : le chemin vers le cache des classes générées lors de la compilation avec Flash (généralement Flash 8/r/Configuration/Classes/aso).
  • Onglet Tools / Flash Help : renseignez le chemin vers le fichier d'aide de Flash (Adobe/help).
  • Onglet Tools / MTASC : renseignez le chemin vers l'exécutable MTASC pour compiler vos application AS2 avec mtasc.exe (sous Linux : /usr/bin/mtasc).

Concernant les autres paramètres, je vous laisse les découvrir par vous même.

CREATION D'UN NOUVEAU PROJET

Éclipse fonctionne avec ce qu'il appelle des perspectives (environnement de travail). C'est à dire qu'il existe une perspective par langage de programmation.

Avant de démarrer un nouveau projet, il est nécessaire de choisir le bon environnement de travail. En cours projet, il est bien sur possible de modifier sa perspective.

Allez dans l'onglet : Windows puis Open Perspective puis Other... et sélectionnez Flash FDT.

Sélectionnez l'explorateur Flash : allez dans l'onglet Windows -> Show view puis Flash Explorer.

Cliquez droit dans l'onglet Flash Explorer : New puis New Flash Project.

Donnez un nom à votre projet.

Choisissez le langage de programmation (AS2 ou AS3) ainsi que le compilateur pour un projet AS3. Sélectionnez un répertoire pour sauvegarder votre projet et cliquez sur Next.

Vous avez la possibilité :

  • Add Folder : d'ajouter des dossiers supplémentaires.
  • Add Linked Libraries : d'ajouter un framework de composants (par exemple Vegas, PureMVC ou ActionScriptFacile).
  • Create Folder : de créer des dossiers supplémentaires (en plus de src et deploy).

Et voilà, vous venez donc de créer votre premier projet avec FDT.

Félicitations !

CREATION D'UNE CLASSE AS3

Maintenant, nous allons créer une classe AS3.

Le projet d'exemple est construit à partir d'une librairie partagée, à savoir celle d'ActionScript Facile.

Cliquez droit dans l'onglet Flash Explorer : New puis AS Class.

Donnez un nom à votre classe. Vous pouvez aussi lui affecter une Superclass, des interfaces et appuyer sur Finish.

Ensuite, il ne vous reste plus que la rédaction du code de votre classe.

La combinaison de touches : Ctrl + espace vous propose les Templates FDT que vous avez configuré (onglet Window puis Preferences et FDT).



Ci-dessus, j'ai utilisé le Template Singleton qui m'a créé le code de la classe entièrement.

Pendant la rédaction de votre code, la combinaison de touche Ctrl + Espace vous propose une correction ou complétion de votre code automatiquement.

Correction des erreurs de code

Comme vous pouvez le voir sur la copie d'écran ci-dessous, FDT vous indique en temps réel les différentes erreurs.

Une croix rouge pour une erreur de code.

Un panneau d'avertissement jaune pour une erreur, mais qui n'empêche pas la compilation (création d'un objet non utilisé, import d'une classe non utilisée dans le code...).

COMPILATION AS3

La compilation FDT est très simplifiée. Il suffit de créer un nouveau profil de compilation par projet.

Allez sur l'icône « cercle vert avec une flèche blanche » puis « Run Configurations ».

Dans cette page, vous pouvez définir plusieurs configuration de compilation en fonction de votre type de projet (AS3, AS2, MTASC, Flex, IDE Flash).

Dans notre exemple, vous devez créer une nouvelle configuration de compilation dans « FDT AS3 Application » en appuyant sur l'icône « feuille avec un plus – New launch configuration ».

Dans l'onglet « Main », sélectionnez :

  • Project : le nom de votre projet ActionScript.
  • Main Class : la classe qui permet de lancer votre application flash.
  • Output : le chemin et le nom du fichier swf à créer.

Ensuite, vous avez plusieurs onglets permettant une configuration précise de la compilation de votre projet.

L'onglet « Flex SDK » permet de sélectionner la version du SDK de Flex que vous souhaitez utiliser pour la compilation de votre application flash.

L'onglet « Compiler Arguments » vous permet de personnaliser complètement la compilation de votre application flash en rajoutant des arguments. Par exemple : la couleur du fond du swf, sa taille, la vitesse du nombre d'image affichée par seconde...

L'onglet « Start », quand à lui, vous permet de choisir la destination du swf créé.

Et de choisir si FDT doit l'ouvrir ou non et avec le visualisateur (viewer) de votre choix.

Il y a ensuite l'onglet « Ant tasks » pour automatiser des tâches de compilation de plusieurs swf, swc...

Et l'onglet « Common » pour des options supplémentaires.

Note : FDT gère aussi la gestion de la compilation en incluant automatiquement les fichiers swc.

Il suffit d'effectuer un clique droit dans l'explorateur Flash (navigateur de classes) puis de sélectionner Source Folder puis Add to classpath.

Ensuite pour lancer la compilation de votre application flash, 2 solutions s'offre à vous :

  • toujours sur la même interface, appuyez sur le bouton « Run ».
  • Ou sur l'interface de votre perspective de travail « FDT Flash », appuyez sur la flèche à côté de l'icône « cercle vert avec une flèche blanche » puis sur le nom de votre configuration de compilation.

Et voilà, vous obtenez un swf tout neuf de votre application flash.

Si il y a des erreurs, FDT vous l'indique avec le maximum d'informations pour vous aider à corriger vos erreurs.

L'onglet « Console » affiche un lien pour accéder directement dans l'éditeur aux classes avec des erreurs de code.

Création d'un fichier .SWC

Les fichiers SWC sont en fait des archives simples contenant un descripteur au format XML et le bytecode des classes.

Le fichier SWC est très pratique pour diffuser du code à des Développeurs. Ceux-ci peuvent instancier les différentes classes, les utiliser très facilement dans une application.

De plus, avec un fichier SWC, les Développeurs n'ont pas accès à votre code source ActionScript.

Allez sur l'icône « cercle vert avec une flèche blanche » puis « Run Configurations ».

Dans notre exemple, vous devez créer une nouvelle configuration de compilation dans « FDT AS3 Library » en appuyant sur l'icône « feuille avec un plus – New launch configuration ».

Dans l'onglet « Main », sélectionnez :

  • Project : le nom de votre projet Actionscript.
  • Output : le chemin et le nom du fichier SWC à créer.

L'onglet « Compiler Arguments » vous permet de personnaliser complètement la compilation de votre application flash en rajoutant des arguments.

Pour créer un fichier SWC, il vous suffit de renseigner ces paramètres :

  • La version du player flash.
  • Le chemin vers le répertoire contenant l'ensemble des classes à inclure dans le fichier SWC.
  • Le chemin vers le SDK Flex.

Par exemple, pour créer un fichier SWC à partir des classes du Framework ActionScript Facile, j'utilise ces paramètres :

--target-player=10.0.0  -include-sources=/framework_AS3Facile/src/  -library-path

{flexSDK}/frameworks/locale/en_US

Création d'un swf / swc avec des polices partagées

La version de FDT 5 permet de créer très facilement des fichiers swf ou swc contenant des polices de caractères.

Votre fichier application.swf télécharge des fichiers swf ou swc (font1.swf, font2.swf, font 3.swc) contenant uniquement une ou plusieurs polices de caractères.

C'est très utile pour mettre à jour l'ensemble des polices d'une application sans la recompiler entièrement !

Je vous conseille de créer uniquement des fichiers swf pour contenir vos polices de caractères.

Ils sont plus petits en taille !

Lisez cet article pour plus d'informations sur les polices partagées dynamiques en AS3. Les polices partagées dans un swf externe avec FDT PowerFlasher

Effectuez un clique droit sur Flash Explorer. Sélectionnez Other.

Choisissez Font Library.

Puis appuyez sur le bouton « Next ».

Choisissez le répertoire pour la création de vos fichiers swf, swc.

Sélectionnez le type de format à créer : un fichier swf, un fichier swc ou un fichier ActionScript.

Renseignez l'identifiant de cette police. Vous appellerez votre police avec cet identifiant dans votre code ActionScript.

Sélectionnez vos polices de caractères parmi celles installées sur votre Système d'exploitation Windows, MAC ou Linux.

Ou sélectionnez un fichier de polices sur votre disque dur. Sélectionnez le style à ajouter : normal, gras ou italique. Choisissez les types de caractères à intégrer.

Appuyez sur le bouton « Add » pour ajouter cette police dans votre swf.

Votre fichier swf ou swc final peut contenir plusieurs polices de caractères. Pour un police de caractères, vous pouvez ajouter l'ensemble des styles (normal, gras, italique).

Appuyer sur le bouton « Create Libray ».



270