1

TP1 : Prise en main de l’environnement FlashDevelop

Pour pouvoir réaliser le projet de l’UE il est nécessaire de disposer d’un environnement de

développement permettant de réaliser des projets en ActionScript 3. Dans les salles de TP le logiciel

FlashDevelop a été installé. L’objectif de ce TP est de vous familiariser avec cet environnement de

développement avant de commencer le projet à proprement dit.

Installation et configuration de FlashDevelop Dans le contexte des salles de TP, FlashDevelop et les ressources associées ont été pré-téléchargés et

installés. Il ne vous reste plus qu’à configurer correctement FlashDevelop pour qu’il soit fonctionnel.

Configuration du compte utilisateur dans la salle machine Lancer FlashDevelop

Si une fenêtre « AppMan » apparaît, fermez-la

Renseigner l’emplacement des SDKs :

o A partir du menu Tools, choisir Program Settings… -> AS3 Context -> Installed Flex

SDKs -> cliquer sur le bouton « ... »

o Dans la nouvelle fenêtre, créer un nouveau contexte en cliquant sur le bouton

« Ajouter », puis spécifier la propriété Path avec la valeur suivante :

C:\Program Files (x86)\FlashDevelop\Apps\flexairsdk\4.6.0+18.0.0

o Fermer la fenêtre

Renseigner l’emplacement du Player Flash

o A partir du menu Tools, choisir Program Settings… -> FlashViewer

o Définissez la propriété External Player Path avec la valeur suivante :

C:\Program Files (x86)\FlashDevelop\Apps\flashsa\18.0.0\flashplayer_18_sa

_debug.exe

o Fermer la fenêtre

Relancez FlashDevelop pour qu’il prenne en compte les configurations effectuées

Pour réaliser le projet à venir les seules séances programmées ne suffiront pas et vous devrez fournir

un travail personnel non négligeable. Par conséquence vous aurez très certainement envie d’installer

FlashDevelop sur votre ordinateur personnel. Les informations suivantes vous seront donc utiles.

Installation de FlashDevelop sur son ordinateur personnel Téléchargez la dernière version de FlashDevelop depuis le site officiel :

http://www.flashdevelop.org/community/viewforum.php?f=11 (à l’écriture de ce document

la dernière version est la 5.0.1)

Installez FlashDevelop sur votre ordinateur

Lancez FlashDevelop

2

o Lors du premier lancement la fenêtre suivante devrait apparaître (c’est un assistant

permettant de télécharger les SDK requis à la compilation des projets), sélectionnez

les trois packages suivants : Flex + AIR SDK, Flash Player (SA) et Adobe AIR.

o Lancez l’installation et lorsque les téléchargements seront terminés, fermez cette

fenêtre

o Relancez FlashDevelop pour qu’il prenne en compte les packages ajoutés

Télécharger et installer la dernière version de Java. Si vous avez plusieurs versions de Java

installées sur votre ordinateur, vous pouvez spécifier la version que vous souhaitez utiliser n

modifiant le fichier « jvm.config » qui se trouve dans le répertoire d’installation du

compilateur :

o C:\Users\<NomUtilisateur>\AppData\Local\FlashDevelop\Apps\flexairsdk\4.6.0+1

8.0.0\bin

o Modifier la ligne 27 pour y indiquer l’emplacement de la version à utiliser, par

exemple : java.home=C:/Program Files (x86)/Java/jre6

Exercices : création de deux projets Vous allez découvrir ici deux types de projets différents : AS3 Project et AIR AS3 Projector. La

différence entre les deux est qu’un projet AS3 Project a pour vocation d’être déployé en ligne pour

être exécuté dans un navigateur web alors qu’un projet AIR AS3 Projector utilise le paquetage AIR

3

qui est un environnement d’exécution pour les applications « Desktop » et a pour vocation d’être

installer sur un terminal (PC, mobile…).

Hello World pour un projet de type web

Créer un nouveau projet de type web

Lancez FlashDevelop

Créez un nouveau projet via le menu : Project > New Project… > AS3 Project

Nommez le projet HelloWorldWeb et spécifiez son emplacement.

Cochez la case « Create directory for project »

Puis terminer en cliquant sur OK

Le projet est créé automatiquement avec deux sous-dossiers : bin qui

contiendra les fichiers compilés ainsi que la structure de fichier à

déployer sur un site internet et src qui contiendra les fichiers sources

du projet ; ce dernier contient dès la création du projet le fichier

Main.as (programme principal) avec une base de code minimale pour

permettre la compilation et l’exécution du projet.

4

Compiler et tester un projet

Pour compiler et tester le projet en cours, cliquez sur le bouton en forme de flèche bleu (voir image

ci-dessous) ou passer par les menus Project > Test Project ou appuyez sur la touche F5.

Après compilation et exécution du projet, vous constaterez qu’une fenêtre blanche (vide) s’affiche.

Modification du code

Vous allez enrichir cet environnement en affichant le texte « Hello, world ! ». Pour cela vous devez

modifier la classe Main (fichier Main.as). Ouvrez ce fichier et vous devriez observer le code suivant :

Vous remarquerez que par défaut, la classe Main a été créée comme une extension de la classe

Sprite. La classe Sprite est un bloc constitutif de base de la liste d'affichage : un nœud de liste

d'affichage qui permet d'afficher des images et peut également contenir des enfants. Lorsque cet

objet est ajouté à la zone de dessin principale (appelé Stage), sa propriété stage devient non nulle. Le

code du constructeur permet donc d’appeler la fonction init si sa propriété stage est déjà défini ou

plus tard dès qu’elle le sera (émission de l’évènement ADDED_TO_STAGE).

Pour afficher le texte « Hello, world! » vous devez disposer d’une classe permettant de réaliser cet

affichage. C’est le cas de la classe TextField qui permet de créer des objets d’affichage et de saisie de

texte. Ajoutez l’import de cette classe :

Importation des

classes nécessaires

Définition de la classe Main

qui hérite de la classe Sprite

Définition du constructeur qui

appelle la fonction init() lorsque

l’objet stage est défini

Définition de la fonction init

5

Puis dans la fonction init après le commentaire « // entry point » ajouter les lignes suivantes qui

définissent et instancient un objet TextField, l’initialisent et l’ajoutent comme enfant à l’objet

courant.

Compilez et exécutez à nouveau votre projet et une fenêtre contenant le texte « Hello, world ! »

devrait s’afficher.

Préparation au déploiement d’un projet de type web

Le fichier compilé du jeu se trouve dans le sous-dossier bin ; il s’appelle HelloWorldWeb.swf. Un

fichier index.html est généré automatiquement par FlashDevelop ; il figure également dans ce sous-

dossier bin.

Pour déployer le jeu et le rendre public, il suffit d’installer le contenu du répertoire bin sur un site

Internet.

6

Hello Word pour un projet de type AIR

Créer un nouveau projet de type AIR

Lancez FlashDevelop

Créez un nouveau projet via le menu : Project > New Project… > AIR AS3 Projector

Nommez le projet HelloWorldAIR et spécifiez son emplacement

Cochez la case « Create directory for project »

Puis terminer en cliquant sur OK

En plus des deux dossiers précédemment présentés (bin et src),

un projet AIR inclut des ressources supplémentaires dont un

dossier bat qui contient des scripts de génération utiles en fin de

projet et des fichiers de configuration (ne supprimez pas ces

documents).

7

Modification du code

Vous constaterez que la classe Main préconstruite ne contient pas exactement le même code de

départ que dans un projet du type AS3 Project. Vous pouvez directement modifier la classe Main

pour y ajouter le code précédent, n’oubliez pas d’ajouter l’import du TextField :

Compilez et exécutez le projet pour vérifier que le texte « Hello, world! » s’affiche bien.

Modifiez ce code pour déplacer le texte à la position 100x100. Pour vous aider, vous pourrez

consulter la documentation en ligne du TextField (pensez à parcourir les classes hérités) :

http://help.adobe.com/fr_FR/FlashPlatform/reference/actionscript/3/flash/text/TextField.html

Introduction aux évènements clavier

Vous allez maintenant déplacer le TextField en fonction de la pression sur certaines touches du

clavier (on souhaite que le texte se déplace sur la gauche lors de la pression des touches « Q » ou

« » et qu’il se déplace sur la droite lors de la pression des touches « D » ou « »). Ajouter dans le

constructeur la ligne suivante :

Cette ligne permet d’ajouter à la propriété stage un écouteur d’évènement. Lorsqu’une touche du

clavier sera enfoncée (KeyboardEvent.KEY_DOWN), la fonction onKeyboardDown sera appelée.

Cette dernière fonction doit bien sûr être définie. Ajoutez donc le code suivant à la classe Main et

complétez la fonction en conséquence (ajouter les imports si besoin) :

Compilez et exécutez le projet pour vérifier que le TextField se déplace bien en fonction des touches

pressées.

8

Préparation au déploiement d’un projet de type AIR

Le fichier compilé du projet se trouve dans le sous-dossier bin ; il s’appelle HelloWorldAIR.swf. Pour

diffuser le projet, il est nécessaire de générer un paquetage d’installation qui contiendra ce fichier

ainsi que les ressources associées (xml, images, sons…). Pour se faire :

Créer un certificat signé : pour cela, exécuter le fichier CreateCertificate.bat contenu dans le

répertoire bat.

Une fois le certificat généré, attendre 1 minute

Recompiler le projet

Générer le paquetage : exécuter le fichier PackageApp.bat contenu à la racine du projet.

Un nouveau dossier air a été créé contenant le fichier HelloWorldAIR.air. Ce fichier peut alors être

distribué et permettre à un utilisateur d’installer l’application sur son terminal. Pour pouvoir installer

le jeu sur son ordinateur l’utilisateur doit avoir installé auparavant Adobe AIR

(http://get.adobe.com/fr/air/).