Installer le SDK Google Maps API pour Flash
Cette API permet aux développeurs Flex de publier des cartes Google Maps dans un environnement en Flash.
Accédez à la page d'accueil de cette nouvelle API.
Vous devrez :
Cette API permet aux développeurs Flex de publier des cartes Google Maps dans un environnement en Flash.
Accédez à la page d'accueil de cette nouvelle API.
Vous devrez :
- Signer pour une clé Google Maps API ;
- Installer le SDK Adobe Flex ;
- Installer le SDK pour Google Maps API.
Ce SDK se télécharge à partir de cette adresse.
Décompressez l'archive ZIP à la racine de votre disque dur ou dans un dossier dédié. Bien entendu, il est plus simple qu'il fasse partie des variables d'environnement définies sur votre système.
Une fois l'archive Zip décompressée, vous allez obtenir deux répertoires : docs et lib.
Il faut maintenant télécharger le SDK Adobe Flex.
Cliquez sur le lien Get the Free Adobe Flex 3 SDK ›.
En bas de page, cochez la case I have read the Adobe Flex 3.0 SDK License…
Cliquez sur le lien Download the Flex 3.0 SDK for all Platforms.
Décompressez l'archive ZIP.
Ouvrez une fenêtre d'Invite de commandes puis placez-vous dans cette arborescence : \flex_sdk_3\bin.
Afin de vérifier que tout fonctionne correctement, exécutez cette commande : mxmlc -help.
Mxmlc est le compileur Flex…
Il nous suffit maintenant d'ajouter l'ensemble des méthodes offertes par l'API Google maps en Flash :
Ouvrez le répertoire \sdk\lib.
Copiez le fichier map_flex_1_1.swc dans \flex_sdk_3\frameworks\libs\air.
Dans le cas contraire, vous aurez ce type d'erreur au moment de compiler votre fichier XMXL : "Accès à la propriété non définie".
Coder en MXML
Le MXML est le langage de description développé par Macromedia, puis repris par Adobe Systems pour la plateforme Adobe Flex. Voyons comment cérer votre première mini-application :
Ouvrez un nouveau document Bloc-notes.
Copiez le code suivant :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="center"
>
<mx:Button id="monbouton" label="Je suis un bouton !" />
</mx:Application>
Enregistrez le fichier en ayant soin de lui affecter une extension .mxml.
Ouvrez une fenêtre d'Invite de commandes.
De la même façon que précédemment, placez-vous dans le répertoire bin puis saisissez ce type de commande :
mxmlc --strict=true --file-specs c:\test.mxml
Un fichier SWF va être créé dans le même répertoire.
Vous pouvez le lire en téléchargeant un Player gratuit comme GeoVid Flash Player.
Nous allons maintenant voir comment créer rapidement votre première application Adobe Flex. Vous pouvez aussi consulter la documentation en français sur le sujet.
Utiliser ActionScript
Les balises MXML correspondent aux classes (ou propriétés de classe) ActionScript. Flex va parcourir les balises MXML et générer les classes ActionScript correspondantes.
De la même manière que précédemment copiez cette fois-ci ce contenu :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/GettingStartedActionScript/index.html"
creationComplete="creationCompleteHandler();"
width="300" height="80"
>
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.events.FlexEvent;
private var monBouton:Button;
private function creationCompleteHandler():void
{
monBouton = new Button();
monBouton.label = "Je suis un autre bouton !";
monBouton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
addChild (monBouton);
}
private function buttonCreationCompleteHandler ( evt:FlexEvent ):void
{
monBouton.x = parent.width/2 - monBouton.width/2;
monBouton.y = parent.height/2 - monBouton.height/2;
}
]]>
</mx:Script>
</mx:Application>
Ouvrez le fichier SWF dans un Player quelconque afin de vérifier que tout fonctionne correctement…
Créer une carte Google Maps en Flash
Afin de créer un fichier XML, rendez-vous à cette adresse.
Cliquez sur le lien View Raw File puis copiez le code généré dans un fichier MXML.
Nous copions le contenu d'un fichier nommé MapSimple.mxml.
Compilez le fichier comme expliqué précédemment.
Vous allez avoir ce message d'erreur :" Content is not allowed in prolog".
Il suffit de supprimer ces lignes (ainsi que les tirets en début de certaines déclarations) :
Décompressez l'archive ZIP à la racine de votre disque dur ou dans un dossier dédié. Bien entendu, il est plus simple qu'il fasse partie des variables d'environnement définies sur votre système.
Une fois l'archive Zip décompressée, vous allez obtenir deux répertoires : docs et lib.
Il faut maintenant télécharger le SDK Adobe Flex.
Cliquez sur le lien Get the Free Adobe Flex 3 SDK ›.
En bas de page, cochez la case I have read the Adobe Flex 3.0 SDK License…
Cliquez sur le lien Download the Flex 3.0 SDK for all Platforms.
Décompressez l'archive ZIP.
Ouvrez une fenêtre d'Invite de commandes puis placez-vous dans cette arborescence : \flex_sdk_3\bin.
Afin de vérifier que tout fonctionne correctement, exécutez cette commande : mxmlc -help.
Mxmlc est le compileur Flex…
Il nous suffit maintenant d'ajouter l'ensemble des méthodes offertes par l'API Google maps en Flash :
Ouvrez le répertoire \sdk\lib.
Copiez le fichier map_flex_1_1.swc dans \flex_sdk_3\frameworks\libs\air.
Dans le cas contraire, vous aurez ce type d'erreur au moment de compiler votre fichier XMXL : "Accès à la propriété non définie".
Coder en MXML
Le MXML est le langage de description développé par Macromedia, puis repris par Adobe Systems pour la plateforme Adobe Flex. Voyons comment cérer votre première mini-application :
Ouvrez un nouveau document Bloc-notes.
Copiez le code suivant :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="center"
>
<mx:Button id="monbouton" label="Je suis un bouton !" />
</mx:Application>
Enregistrez le fichier en ayant soin de lui affecter une extension .mxml.
Ouvrez une fenêtre d'Invite de commandes.
De la même façon que précédemment, placez-vous dans le répertoire bin puis saisissez ce type de commande :
mxmlc --strict=true --file-specs c:\test.mxml
Un fichier SWF va être créé dans le même répertoire.
Vous pouvez le lire en téléchargeant un Player gratuit comme GeoVid Flash Player.
Nous allons maintenant voir comment créer rapidement votre première application Adobe Flex. Vous pouvez aussi consulter la documentation en français sur le sujet.
Utiliser ActionScript
Les balises MXML correspondent aux classes (ou propriétés de classe) ActionScript. Flex va parcourir les balises MXML et générer les classes ActionScript correspondantes.
De la même manière que précédemment copiez cette fois-ci ce contenu :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/GettingStartedActionScript/index.html"
creationComplete="creationCompleteHandler();"
width="300" height="80"
>
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.events.FlexEvent;
private var monBouton:Button;
private function creationCompleteHandler():void
{
monBouton = new Button();
monBouton.label = "Je suis un autre bouton !";
monBouton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
addChild (monBouton);
}
private function buttonCreationCompleteHandler ( evt:FlexEvent ):void
{
monBouton.x = parent.width/2 - monBouton.width/2;
monBouton.y = parent.height/2 - monBouton.height/2;
}
]]>
</mx:Script>
</mx:Application>
Ouvrez le fichier SWF dans un Player quelconque afin de vérifier que tout fonctionne correctement…
Créer une carte Google Maps en Flash
Afin de créer un fichier XML, rendez-vous à cette adresse.
Cliquez sur le lien View Raw File puis copiez le code généré dans un fichier MXML.
Nous copions le contenu d'un fichier nommé MapSimple.mxml.
Compilez le fichier comme expliqué précédemment.
Vous allez avoir ce message d'erreur :" Content is not allowed in prolog".
Il suffit de supprimer ces lignes (ainsi que les tirets en début de certaines déclarations) :
- <!-- Copyright 2007 Google Inc.
-->
- <!-- All Rights Reserved.
-->
De manière un peu similaire vous pouvez avoir ce message d'erreur "Whitespace is not allowed before an XML Processing Instruction". Vous devez supprimer les espaces vides qui peuvent précéder une de vos déclarations.
Notez que si vous voulez afficher le fichier SWF contenant du code utilisant l'API Google Maps, ce message d'erreur va apparaître : "Initialization failed: please specify an API key".
Vous devez donc utiliser votre propre clé API, héberger le fichier SWF sur un serveur et créer une page HTML qui fera un appel vers ce fichier (via un code ActionScript).
Le code à utiliser dans une page HTML peut ressembler à celui-ci :
<div id="map_canvas" name="map_canvas">
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="800px"
height="600px">
<param name="movie" value="Emplacement du fichier SWF">
<param name="quality" value="high">
<param name="flashVars" value="key=Votre clé API>
<embed
width="800px"
height="600px"
src="Emplacement du fichier SWF"
quality="high"
flashVars="key=Votre clé API&client=google-flashmaps"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
</div>
Procédez à un test ! L'effet est vraiment très sympa… Bien entendu et afin d'avoir une idée des multiples possibilités qui vous sont offertes, visitez la galerie dédiée aux applications utilisant l'API Google Maps pour Flash.
0 commentaires:
Enregistrer un commentaire