TP1 : Prise en main de l environnement FlashDevelop

Transcription

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\ 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 : (à l écriture de ce document la dernière version est la 5.0.1) Installez FlashDevelop sur votre ordinateur Lancez FlashDevelop 1

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 o Lancez l installation et lorsque les téléchargements seront terminés, fermez cette fenêtre 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\ \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 2

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. 3

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 : 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 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 : 4

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 sousdossier bin. Pour déployer le jeu et le rendre public, il suffit d installer le contenu du répertoire bin sur un site Internet. 5

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). 6

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) : 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. 7

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 ( 8