Upload
doanhanh
View
227
Download
5
Embed Size (px)
Citation preview
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/).