Share
Dans ce tutoriel, je vais vous montrer comment commencer à utiliser Yahoo! API Maps en Flash. Nous allons charger quelques flux RSS et tracer des alertes de catastrophe naturelle en utilisant leurs longitudes et latitudes..
Accédez à http://developer.yahoo.com/flash/maps/ et inscrivez-vous pour obtenir un identifiant d'application..
Sur la page du composant AS3 de Yahoo Map, téléchargez la dernière version du composant..
Lorsque le téléchargement du fichier est terminé, extrayez le fichier zip. Accédez au dossier Flash et installez le fichier MXP..
Démarrez Flash et ouvrez un nouveau fichier ActionScript 3.0, puis enregistrez-le dans un nouveau dossier sous le nom "yahoo_map.fla"..
Changez la taille de la scène en 640x480. Accédez à l'onglet Composants et faites glisser une copie du composant YahooMaps sur la scène. Une fois sur la scène, supprimez-le. Cela mettra une copie dans la bibliothèque afin que nous puissions y accéder à partir de là.
Faites glisser une copie de TextArea à partir de l'onglet Composants. Dans le panneau des propriétés, définissez la taille de TextArea sur une largeur de 640 pixels et une hauteur de 100 pixels. Donnez-lui une position X de 0 et une position Y de 330. Enfin, attribuez-lui un nom d'instance de "textArea".
Ensuite, faites glisser une copie du RadioButton à partir de l'onglet Composants. Copiez-le et collez-le trois fois pour qu'il y ait quatre instances du composant RadioButton sur la scène. Alignez-les vers le haut et répartissez-les uniformément de manière à ce qu'ils soient alignés les uns à côté des autres. Ensuite, faites-les glisser sous le composant TextArea..
Sélectionnez le premier bouton radio. Donnez-lui un nom d'instance de "radioAll". Avec le bouton toujours sélectionné, basculez vers le panneau des paramètres. Donnez-lui un nom de groupe de "Catastrophes". Modifiez la propriété label en "All" et la propriété sélectionnée en "true".
Sélectionnez le bouton radio suivant. Donnez-lui un nom d'occurrence de "radioEarth", le même nom de groupe que "Disasters", une étiquette de "Tremblements de terre" et laissez la propriété sélectionnée comme "false".
Sélectionnez le troisième bouton radio. Son nom d'instance est "radioTsu", le nom du groupe est "Désastres", le libellé est "Tsunamis" et la propriété sélectionnée est "false"..
Enfin, sélectionnez le quatrième bouton radio. Il a un nom d'instance "radioVolcano", son nom de groupe est "Désastres", l'étiquette "Volcans" et la valeur "faux". Comme nous souhaitons pouvoir basculer entre les boutons, nous leur avons attribué le même nom de groupe. Espacez-les en conséquence, afin qu'ils soient espacés de manière égale.
Créez un calque séparé. Placez le calque sous le calque avec les composants TextArea et RadioButton. Dans le panneau de la bibliothèque, en bas, sélectionnez la nouvelle icône de symbole. Créez un nouveau MovieClip vide. Faites glisser une occurrence sur la scène du calque nouvellement créé, puis nommez-la "vide". Ce clip tiendra notre carte quand il est chargé. Attribuez la position X et Y à 0 au clip vidéo vide. De cette manière, il est aligné avec le coin supérieur gauche de la scène..
Allez dans fichier> nouveau et sélectionnez un nouveau fichier ActionScript. Enregistrez le fichier dans le même répertoire que votre fichier FLA "yahoo_map" avec le nom "yahoo_map.as". Dans votre document FLA yahoo_map, dans le panneau des propriétés, tapez "yahoo_map" dans le champ Classe de document. Cela fera de votre fichier actionscript la classe Document pour votre yahoo_map FLA.
Voici la configuration de base pour notre classe de document:
package import flash.display.Sprite; public class yahoo_map étend Sprite fonction publique yahoo_map ()
Ce sont les déclarations qui vont piloter l'API YahooMap
package import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.markers.Marker; import flash.display.Sprite; public class yahoo_map étend Sprite fonction publique yahoo_map ()
Ajoutez-les simplement ci-dessous l'instruction d'importation YahooMaps. Assurez-vous qu'ils sont au dessus de la déclaration de classe.
package import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.markers.Marker; import fl.controls.RadioButtonGroup; import fl.controls.RadioButton; import flash.display.Sprite; import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.DropShadowFilter; import flash.geom.ColorTransform; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.AntiAliasType; import flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; public class yahoo_map étend Sprite fonction publique yahoo_map ()
Ici, nous allons examiner les variables globales. Nous aurons besoin de l'identifiant d'application que vous avez obtenu sur la page YahooMaps et nous devrons utiliser un peu plus tard php pour que les flux soient chargés dans Flash. C'est pourquoi nous avons la constante CURL. Assurez-vous qu'ils sont placés sous la déclaration de classe, mais au-dessus de la fonction publique principale.
public class yahoo_map étend Sprite private static const APPID: String = "VOTRE ID APP"; Constante statique privée CURL: String = "curl.php"; carte var privée: YahooMap; private var ds: DropShadowFilter; private var geo: Espace de noms; var privé tsuArray: Array; var privé tsuCounter: int = 0; private var color: ColorTransform; groupe de variables privé: RadioButtonGroup; fonction publique yahoo_map ()
Ici, nous allons instancier toutes nos variables. Après une recherche sur Google, j'ai trouvé quatre flux RSS pour avertissements de tsunami de weather.gov. J'ai chargé ceux-ci dans la variable tsuArray, afin de pouvoir les charger un à la fois. L'espace de noms geo va aider à obtenir la latitude et la longitude de tous les flux RSS. Il existe également un nouveau groupe RadioButton qui gérera le basculement des composants RadioButton sur la scène. Enfin, j'appelle la fonction handleMap. Cela va démarrer le processus de chargement de la carte.
Accentsconagua
fonction publique yahoo_map () init (); fonction privée init (): void tsuArray = new Array ("http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_pacific.xml", "http://www.prh.noaa.gov/ptwc /feeds/ptwc_rss_hawaii.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_indian.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_indian.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_fss/index.html " "); geo = new Namespace ("http://www.georss.org/georss"); ds = nouveau DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); color = new ColorTransform (); groupe = new RadioButtonGroup ("Disasters"); handleMap (); C’est là que nous commençons à utiliser les bases de la carte et à utiliser notre identifiant d’application. De plus, lorsque nous appelons la méthode map.init (), nous déterminons la taille souhaitée de la carte. La carte aura la largeur de la scène et aura une hauteur qui touche le haut du composant TextArea. Nous écoutons également pour l'événement MAP_INITALIZE.
fonction privée handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330);
Une fois la carte initialisée, la fonction onInit sera activée. Voici où nous allons ajouter la carte au clip vide qui a été placé sur la scène. Ainsi, la carte se chargera sous les composants TextArea et RadioButton, au cas où. Nous ajoutons ensuite les widgets zoom, panoramique et type. Ceux-ci contrôlent le type de carte, ajoutent la possibilité de faire un panoramique sur la carte et ajoutent les contrôles de zoom. Nous allons centrer la carte sur 0,0.
La carte recherche une nouvelle variable LatLon à laquelle vous insérez deux nombres. J'ai utilisé 0,0 pour définir la carte à l'endroit où l'Equateur et le Premier Méridien se rencontrent. Après, le niveau de zoom des cartes est défini. Ceci est réglé à la plus haute altitude possible. De cette façon, nous pouvons voir tous les avertissements de catastrophe naturelle à travers le monde. Ensuite, nous appelons la fonction pour commencer à charger nos flux RSS..
fonction privée onInit (événement: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); volcans();
Nous devons sortir de Flash pendant une seconde et faire un peu de PHP. Quand j'ai commencé à faire ce projet, j'ai réalisé que les flux ne se chargeraient pas sur mon site Web. Un moyen simple et rapide que j'ai contourné était d’utiliser cURL. J'ai trouvé un exemple de code utile de Google. Je ne sais pas trop d'où cela vient exactement, mais j'utilise le même script depuis quelque temps déjà. Ouvrez un nouveau fichier PHP, collez le code suivant et enregistrez-le sous le nom "curl.php"
Maintenant que nous avons appelé la fonction pour commencer à charger notre flux de volcan, nous pouvons regarder ce qui se passe à l'intérieur de la fonction. En bref, nous chargeons notre page curl.php qui charge le flux RSS. Nous ajoutons ensuite un écouteur pour le chargement de la page..
fonction privée volcans (): void var url: URLLoader = new URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = new URLVariables (); var req: URLRequest = new URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req);
Dans le premier flux, il y a quelques fonctionnalités intéressantes. Le plus important est le geo: point. C'est la latitude et la longitude de l'avertissement. De plus, dans ce flux, un code de couleur indique le niveau d'alerte de l'activité. Avec le flux chargé, il y a deux listes XML qui vont être chargées. On est pour la latitude et la longitude. L'autre est pour le code de couleur.
Les listes sont bouclées et les nouveaux marqueurs sont créés sur la carte. Des clips personnalisés sont ajoutés aux marqueurs. Ils sont créés à l'aide de fonctions que je décrirai bientôt. La couleur des clips imbriqués est contrôlée à l'aide de la propriété "colorTransform". Une fois le flux chargé et les marqueurs placés, le prochain flux RSS est configuré pour être chargé. Je passe également le texte de description au clip nouvellement créé, afin que je puisse y accéder plus tard en utilisant le nom qui a été donné au clip..
fonction privée onVolcano (event: Event): void var vol: Namespace = new Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = new XML (event.target.data); var pointList: XMLList = xml… geo :: point.text (); var colorList: XMLList = xml… vol :: colorcode.text (); var string: String; pour (var i: uint; i Il est maintenant temps de charger le flux RSS des séismes. Les fonctions fonctionnent à peu près comme avant.
fonction privée earthQuakes (): void var url: URLLoader = new URLLoader (); var vars: URLVariables = new URLVariables (); var req: URLRequest = new URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://earthquake.usgs.gov/eqcenter/catalogs/1day-M2.5.xml" req.data = vars; url.addEventListener (Event.COMPLETE, onEarthQuake); url.load (req);
Les différences sont qu’il n’ya pas de code de couleur pour ce flux. Au lieu de cela, je change simplement la couleur manuellement en brun En outre, la description de l'alerte contient du code HTML. J'ai utilisé une expression régulière que je suis tombée sur Google il y a quelque temps pour en extraire tout le code HTML. Sans cela, le composant TextArea chargera une image, ce que je ne voulais pas.
Une autre chose à noter est qu’il s’agit d’un type de flux RSS différent. Pour une raison quelconque (selon mon expérience), les flux Atom n'aiment pas analyser correctement. La solution consistait à descendre l’arbre des enfants jusqu’au premier élément. De plus, le nœud d'élément n'a pas toujours le même nombre d'enfants. J'ai ajouté un simple si déclaration pour en tenir compte. Enfin, nous appelons la fonction pour charger le dernier des flux RSS.
fonction privée onEarthQuake (event: event): void var xml: XML = new XML (event.target.data); Liste var: XMLList = xml… geo :: point.text (); var string: String pour (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ s] +))?) + \ s * | \ s *) \ /?> / gi; string = string.replace (pattern, ""); earth.desc = chaîne; tsunamis ();
C'est ici que nous commençons à charger les flux du tsunami. Nous avons créé un tsuCounter afin que nous puissions augmenter le nombre chaque fois qu'un flux est chargé. Lorsque le compteur atteint la fin du tsuArray, nous ajoutons les écouteurs de modification au groupe RadioButtonGroup créé. Puisque je veux pouvoir accéder à tous les marqueurs créés dans chaque tableau, j'ai ajouté tsuCounter au début du nom du clip. De cette façon, je pourrai accéder à la description de 0Tsunami1 et 1Tsunami1.
Enfin, lorsque tous les flux ont été chargés, nous ajoutons l’écouteur d’événements au groupe RadioButtonGroup.
fonction privée tsunamis (): void var url: URLLoader = new URLLoader (); var vars: URLVariables = new URLVariables (); var req: URLRequest = new URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Event.COMPLETE, onTsu); url.load (req); fonction privée onTsu (événement: événement): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = new XML (event.target.data); Liste var: XMLList = xml… geo :: point.text (); var string: String; pour (var i: uint; i
Ce sont les fonctions qui ajoutent les marqueurs, contrôlent l'aspect des marqueurs, définissent la longitude et la latitude des marqueurs et créent les clips vidéo dans les marqueurs. La fonction drawMarker crée un nouveau marqueur, ajoute une ombre portée, y ajoute le clip, lui transmet le même nom que le MovieClip, obtient la latitude et la longitude du flux RSS chargé et ajoute enfin les écouteurs d'événement. Le marqueur est ajouté au marqueurManager de la carte. La fonction drawCircle dessine un cercle de 10 pixels de large. La fonction getLatlon prend la chaîne qui lui est transmise, la sépare et renvoie le LatLon. La dernière fonction, theColor, gère les différentes couleurs qui lui sont transmises par l’alimentation du volcan..
fonction privée drawMarker (mc: MovieClip, chaîne: String, nom: String): void marqueur var: Marker = new Marker (); marqueur.filtres = [ds]; marqueur.addChild (mc); marker.latlon = getLatlon (chaîne); marqueur.nom = nom; map.markerManager.addMarker (marqueur); marker.addEventListener (MouseEvent.ROLL_OVER, onOver); marker.addEventListener (MouseEvent.CLICK, onClick); fonction privée drawCircle (): MovieClip var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (0xFF0000, 1); mc.graphics.drawCircle (5,5,5); mc.graphics.endFill (); retour mc; fonction privée getLatlon (string: String): LatLon tableau de var: Array = string.split (/ [\ s] /); var latlon: LatLon = new LatLon (tableau [0], tableau [1]); retournez latlon; fonction privée theColor (string: String): ColorTransform var int: uint; commutateur (chaîne) case "ORANGE": int = 0xFD8000; Pause; case "GREEN": int = 0x225E33; Pause; défaut: int = 0xFF0000; var ct: ColorTransform = new ColorTransform (); ct.color = int; retour ct;
Lorsque l'utilisateur survole le marqueur, la description de l'alerte s'affiche dans le composant TextArea. Ceci est géré par la fonction onOver. La cible est convertie en marqueur en utilisant le nom qui lui a été transmis. Nous recevons ensuite le texte de description qui a été transmis au MovieClip imbriqué dans le marqueur et nous l'envoyons au composant TextArea. L'événement onClick déplace la carte sur le marqueur sur lequel vous avez cliqué. Ceci est fait en utilisant la méthode map.panToLatLon ().
fonction privée onOver (événement: MouseEvent): void marqueur variable: Marker = marqueur (map.markerContainer.getChildByName (event.target.name)) var mc: MovieClip = MovieClip (marqueur.getChildByName (event.target.name)); textArea.htmlText = mc.desc; fonction privée onClick (event: MouseEvent): void marqueur var: Marker = marqueur (map.markerContainer.getChildByName (event.target.name)) map.panToLatLon (marker.latlon);
L'événement final est l'événement onChange. Cet événement désactive tous les clips sauf les boutons sélectionnés. Il affiche également la carte sur la dernière alerte reçue dans le flux RSS..
fonction privée onChange (événement: événement): void var g: RadioButtonGroup = RadioButtonGroup (event.target); var i: uint; marqueur var: marqueur; var panTo: Marker; switch (g.selection.name) case "radioVolcano": pour (i = 0; i
Voici à quoi ressemble le code final.
package import com.yahoo.maps.api.YahooMap; import com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; import com.yahoo.maps.api.markers.Marker; import fl.controls.RadioButtonGroup; import fl.controls.RadioButton; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.DropShadowFilter; import flash.geom.ColorTransform; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.AntiAliasType; import flash.text.Font; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; public class yahoo_map étend Sprite private static const APPID: String = "VOTRE ID APP"; Constante statique privée CURL: String = "curl.php"; carte var privée: YahooMap; private var ds: DropShadowFilter; private var geo: Espace de noms; var privé tsuArray: Array; var privé tsuCounter: int = 0; private var color: ColorTransform; groupe de variables privé: RadioButtonGroup; fonction publique yahoo_map () init (); fonction privée init (): void color = new ColorTransform (); tsuArray = new Array ("http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_pacific.xml", "http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_hawss.hawk.xml", " http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_indian.xml "," http://www.prh.noaa.gov/ptwc/feeds/ptwc_rss_caribe.xml "); geo = new Namespace ("http://www.georss.org/georss"); ds = nouveau DropShadowFilter (2,90,0x00000,0,75,2,2,1,3); groupe = new RadioButtonGroup ("Disasters"); handleMap (); fonction privée handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330); fonction privée onInit (événement: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); volcans(); fonction privée volcanoes (): void var url: URLLoader = new URLLoader (); url.addEventListener (Event.COMPLETE, onVolcano); var vars: URLVariables = new URLVariables (); var req: URLRequest = new URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = "http://volcanoes.usgs.gov/rss/vhpcaprss.xml" req.data = vars; url.load (req); fonction privée onVolcano (événement: événement): void var vol: espace de noms = nouvel espace de noms ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = new XML (event.target.data); var pointList: XMLList = xml… geo :: point.text (); var colorList: XMLList = xml… vol :: colorcode.text (); var string: String; pour (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ s] +))?) + \ s * | \ s *) \ /?> / gi; string = string.replace (pattern, ""); earth.desc = chaîne; tsunamis (); fonction privée tsunamis (): void var url: URLLoader = new URLLoader (); var vars: URLVariables = new URLVariables (); var req: URLRequest = new URLRequest (CURL); req.method = URLRequestMethod.POST; vars.earl = tsuArray [tsuCounter] req.data = vars; url.addEventListener (Event.COMPLETE, onTsu); url.load (req); fonction privée onTsu (événement: événement): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = new XML (event.target.data); Liste var: XMLList = xml… geo :: point.text (); var string: String; pour (var i: uint; i J'ai à peine effleuré la surface pour voir ce que YahooMaps a sous le capot. Lire la documentation et devenir fou!
