Share
En este tutorial, te mostraré cómo comenzar con Yahoo! Maps API en Flash. Cargaremos un par de feeds RSS y trazaremos algunas advertencias de desastres naturales utilizando sus longitudes y latitudes..
Vaya a http://developer.yahoo.com/flash/maps/ y regístrese para obtener un ID de aplicación.
En la página del componente Yahoo Map AS3, descargue la versión más reciente del componente.
Cuando el archivo haya terminado de descargarse, extraiga el archivo zip. Navegue a la carpeta Flash e instale el archivo MXP.
Inicie Flash y abra un nuevo archivo ActionScript 3.0, luego guárdelo en una nueva carpeta como "yahoo_map.fla".
Cambia el tamaño del escenario a 640x480. Vaya a la pestaña de componentes y arrastre una copia del componente de YahooMaps al escenario. Una vez en el escenario, bórralo. Eso pondrá una copia en la biblioteca para que podamos acceder a ella desde allí..
Arrastre una copia de TextArea desde la pestaña de componentes. En el panel de propiedades, cambie el tamaño de TextArea a un ancho de 640px y una altura de 100px. Dale una posición X de 0 y una posición Y de 330. Finalmente, dale un nombre de instancia de "textArea".
A continuación, arrastre una copia del RadioButton desde la pestaña de componentes. Copie y pegue tres veces, de modo que haya cuatro instancias del componente RadioButton en el escenario. Alinéelos a la parte superior y espacíelos uniformemente, de modo que estén en línea recta uno al lado del otro. A continuación, arrástrelos debajo del componente TextArea.
Seleccione el primer botón de radio. Déle un nombre de instancia de "radioAll". Con el botón aún seleccionado, cambie al panel de parámetros. Dale un nombre de grupo de "Desastres". Cambie la propiedad de la etiqueta a "Todas" y la propiedad seleccionada a "verdadero".
Seleccione el siguiente botón de radio. Asígnele un nombre de instancia de "radioEarth", el mismo nombre de grupo de "Desastres", una etiqueta de "Terremotos" y deje la propiedad seleccionada como "falsa".
Seleccione el tercer botón de radio. Su nombre de instancia es "radioTsu", el nombre del grupo es "Desastres", la etiqueta es "Tsunamis" y la propiedad seleccionada es "falsa".
Finalmente, seleccione el cuarto botón de radio. Tiene un nombre de instancia de "radioVolcano", su nombre de grupo es "Desastres", tiene una etiqueta de "Volcanes", y seleccionado es "falso". Como queremos poder alternar entre los botones, les dimos el mismo nombre de grupo. Sepáralos en consecuencia, para que estén espaciados uniformemente..
Crear una capa separada. Coloque la capa debajo de la capa con los componentes TextArea y RadioButton. En el panel de la biblioteca, en la parte inferior, seleccione el nuevo icono de símbolo. Crea un nuevo movieclip vacío. Arrastre una instancia al escenario en la capa recién creada, luego dele un nombre de instancia de "vacío". Este clip de película mantendrá nuestro mapa cuando esté cargado. Dale al clip de película vacío una posición X e Y de 0. De esa manera se alinea con la esquina superior izquierda del escenario.
Ir a archivo> nuevo y seleccionar un nuevo archivo de ActionScript. Guarde el archivo en el mismo directorio que su archivo FLA "yahoo_map" con el nombre "yahoo_map.as". En su documento FLA de yahoo_map, en el panel de propiedades, escriba "yahoo_map" en el campo Clase de documento. Esto hará que su archivo de acciones sea la clase de documento para su FLA de yahoo_map.
Esta es la configuración básica para nuestra clase de documentos:
paquete import flash.display.Sprite; clase pública yahoo_map extiende Sprite función pública yahoo_map ()
Estas son las declaraciones que impulsarán la API de YahooMap.
package import com.yahoo.maps.api.YahooMap; importar com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; importar com.yahoo.maps.api.markers.Marker; importar flash.display.Sprite; clase pública yahoo_map extiende Sprite función pública yahoo_map ()
Simplemente agregue estos debajo de la declaración de importación de YahooMaps. Asegúrese de que están por encima de la declaración de clase.
package import com.yahoo.maps.api.YahooMap; importar com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; importar com.yahoo.maps.api.markers.Marker; importar fl.controls.RadioButtonGroup; importar fl.controls.RadioButton; importar flash.display.Sprite; importar flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; importar flash.filters.DropShadowFilter; importar flash.geom.ColorTransform; importar flash.net.URLLoader; importar flash.net.URLRequest; importar flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.AntiAliasType; importar flash.text.Font; importar flash.text.TextField; importar flash.text.TextFieldAutoSize; importar flash.text.TextFormat; clase pública yahoo_map extiende Sprite función pública yahoo_map ()
Aquí vamos a descifrar las variables globales. Necesitaremos la ID de la aplicación que obtuviste de la página de YahooMaps y vamos a necesitar usar algo de php más adelante para que las fuentes se carguen en Flash. Es por eso que tenemos la constante CURL. Asegúrese de que estos se encuentren debajo de la declaración de clase pero por encima de la función pública principal.
la clase pública yahoo_map extiende Sprite private static const APPID: String = "YOUR APP ID"; private static const CURL: String = "curl.php"; mapa var privado: YahooMap; var privado ds: DropShadowFilter; privado var geo: espacio de nombres; privado var tsuArray: Array; privado var tsuCounter: int = 0; color de var privado: ColorTransform; grupo de var privado: RadioButtonGroup; función pública yahoo_map ()
Aquí vamos a instanciar todas nuestras variables. Después de buscar en Google, encontré cuatro fuentes RSS para advertencias de tsunami en weather.gov. Los cargué en la variable tsuArray, de modo que puedo cargarlos uno por uno. El espacio geográfico de nombres ayudará a alcanzar la latitud y longitud de todos los canales RSS. Además, hay un nuevo RadioButtonGroup que manejará el cambio de los componentes de RadioButton en el escenario. Finalmente, llamo a la función handleMap. Eso iniciará el proceso de carga del mapa..
Accentsconagua
función pública yahoo_map () init (); función privada 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_caribe.xml "); geo = new Namespace ("http://www.georss.org/georss"); ds = nuevo DropShadowFilter (2,90,0x00000,0.75,2,2,1,3); color = new ColorTransform (); grupo = nuevo RadioButtonGroup ("Desastres"); handleMap (); Aquí es donde empezamos a trabajar con los conceptos básicos del mapa y donde usaremos nuestro ID de aplicación. Además, cuando llamamos al método map.init (), dictamos el tamaño que queremos que tenga el mapa. El mapa tendrá el ancho del escenario y tendrá una altura que toque la parte superior del componente TextArea. También escuchamos el evento MAP_INITALIZE..
Función privada handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330);
Cuando se inicializa el mapa, se activará la función onInit. Aquí es donde agregaremos el mapa al clip de película vacío que se colocó en el escenario. De esa manera, el mapa se cargará debajo de los componentes TextArea y RadioButton, por si acaso. Luego agregamos los widgets de zoom, paneo y tipo. Estos controlan el tipo de mapa, agregan la capacidad de desplazarse por el mapa y agregan los controles de zoom. Centraremos el mapa en 0,0..
El mapa está buscando una nueva variable de LatLon a la que se conectan dos números. Utilicé 0,0 para establecer el mapa donde se encuentran el ecuador y el primer meridiano. Después, se establece el nivel de zoom de los mapas. Esto se establece en la mayor altitud posible. De esa manera podemos ver todas las advertencias de desastres naturales en todo el mundo. A continuación llamamos a la función para comenzar a cargar nuestras fuentes RSS..
función privada onInit (evento: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); volcanes ();
Tenemos que salir de Flash por un segundo y hacer un poco de PHP. Cuando comencé a hacer este proyecto, me di cuenta de que las fuentes no se cargarían en mi sitio web. Una manera rápida y fácil de evitarlo fue usando cURL. Encontré un código de ejemplo útil de Google. No estoy muy seguro de dónde vino exactamente, pero he estado usando el mismo script desde hace algún tiempo. Abra un nuevo archivo PHP, pegue el siguiente código y guárdelo como "curl.php"
Ahora que hemos llamado a la función para comenzar a cargar nuestra alimentación de volcán, podemos echar un vistazo a lo que está sucediendo dentro de la función. En pocas palabras, estamos cargando nuestra página curl.php que está cargando la fuente RSS. Luego agregamos un oyente para cuando la página haya terminado de cargar..
volcanes de funciones privadas (): 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);
En el primer feed, hay algunas características interesantes. El más importante es el geo: punto. Esta es la latitud y longitud de la advertencia. Además, en este feed, hay un código de color para mostrar el nivel de alerta de la actividad. Con el feed cargado, hay dos listas xml que se van a cargar. Uno es para la latitud y longitud. El otro es para el código de color..
Las listas se repiten y los nuevos marcadores se crean en el mapa. Los clips de película personalizados se agregan a los marcadores, se realizan utilizando las funciones que describiré pronto. El color de los clips de película anidados se controla mediante la propiedad "colorTransform". Una vez que se carga la fuente y se colocan los marcadores, la siguiente fuente RSS se configura para cargar. También paso el texto de la descripción al clip de película recién creado, para poder acceder más tarde con el nombre que se le dio al clip de película..
función privada onVolcano (evento: Evento): void var vol: Namespace = new Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = nuevo XML (event.target.data); var pointList: XMLList = xml… geo :: point.text (); var colorList: XMLList = xml… vol :: colorcode.text (); var cadena: String; para (var i: uint; i Ahora es el momento de cargar el feed RSS de los terremotos. Las funciones funcionan de la misma manera que antes..
función privada 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);
Las diferencias son que no hay código de color para este feed. En su lugar, simplemente cambio el color manualmente a marrón. Además, la descripción de la alerta tiene algunos html dentro de ella. Usé una expresión regular que encontré en Google hace un tiempo para quitarle todo el HTML. Sin hacer eso, el componente TextArea cargará una imagen, que no quería.
Una cosa más a tener en cuenta es que este es un tipo diferente de fuente RSS. Por alguna razón (según mi experiencia) a los feeds Atom no les gusta analizar correctamente. La forma de evitar esto era bajar el árbol secundario hasta el primer elemento. Además, el nodo del elemento no siempre tiene el mismo número de hijos. He añadido un sencillo Si Declaración para dar cuenta de ello. Finalmente, llamamos a la función para cargar el último de los canales RSS..
función privada onEarthQuake (event: Event): void var xml: XML = new XML (event.target.data); var list: XMLList = xml… geo :: point.text (); var cadena: cadena para (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ s] +))?) + \ s * | \ s *) \ /?> / gi; string = string.replace (patrón, ""); earth.desc = cadena; tsunamis ();
Aquí es donde empezamos a cargar las fuentes de tsunami. Creamos un tsuCounter para que podamos aumentar el número cada vez que se carga un feed. Cuando el contador llegue al final de tsuArray, agregaremos los escuchas de cambios al RadioButtonGroup que se creó. Como quiero poder acceder a todos los marcadores creados en cada matriz, agregué tsuCounter al comienzo del nombre del clip de película. De esa manera podré acceder a la descripción desde 0Tsunami1 y 1Tsunami1.
Finalmente, cuando se han cargado todas las fuentes, agregamos el detector de eventos al RadioButtonGroup
función privada 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); función privada onTsu (evento: Evento): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = nuevo XML (event.target.data); var list: XMLList = xml… geo :: point.text (); var cadena: String; para (var i: uint; i
Estas son las funciones que agregan los marcadores, controlan el aspecto de los marcadores, establecen la longitud y la latitud de los marcadores y crean los clips de película en los marcadores. La función drawMarker crea un nuevo marcador, agrega una sombra paralela, luego le agrega el clip de película, le pasa el mismo nombre que el clip de video, obtiene la latitud y la longitud de la fuente RSS cargada y finalmente agrega los oyentes del evento. El marcador se agrega al markerManager del mapa. La función drawCircle simplemente dibuja un círculo de 10 píxeles de ancho. La función getLatlon toma la cadena que se le pasa, la rompe y devuelve el LatLon. La última función, theColor, maneja los diferentes colores pasados a través de la alimentación del volcán..
función privada drawMarker (mc: MovieClip, string: String, nombre: String): void var marker: Marker = new Marker (); marker.filters = [ds]; marker.addChild (mc); marker.latlon = getLatlon (string); marker.name = nombre; map.markerManager.addMarker (marcador); marker.addEventListener (MouseEvent.ROLL_OVER, onOver); marker.addEventListener (MouseEvent.CLICK, onClick); función privada drawCircle (): MovieClip var mc: MovieClip = new MovieClip (); mc.graphics.beginFill (0xFF0000, 1); mc.graphics.drawCircle (5,5,5); mc.graphics.endFill (); volver mc; función privada getLatlon (string: String): LatLon var array: Array = string.split (/ [\ s] /); var latlon: LatLon = new LatLon (array [0], array [1]); retorno latlon; función privada theColor (string: String): ColorTransform var int: uint; switch (cadena) caso "NARANJA": int = 0xFD8000; descanso; caso "VERDE": int = 0x225E33; descanso; por defecto: int = 0xFF0000; var ct: ColorTransform = new ColorTransform (); ct.color = int; devuelve ct;
Cuando el usuario desplaza el marcador, la descripción de la alerta se muestra en el componente TextArea. Esto se maneja a través de la función onOver. El objetivo se lanza como un marcador con el nombre que se le pasó. Luego recibimos el texto de descripción que se pasó al clip de película anidado dentro del marcador y lo enviamos al componente TextArea. El evento onClick desplaza el mapa a cualquier marcador en el que se hizo clic. Esto se hace usando el método map.panToLatLon ().
función privada onOver (evento: MouseEvent): void var marker: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) var mc: MovieClip = MovieClip (marker.getChildByName (event.target.name)); textArea.htmlText = mc.desc; función privada onClick (evento: MouseEvent): void var marker: Marker = Marker (map.markerContainer.getChildByName (event.target.name)) map.panToLatLon (marker.latlon);
El evento final es el evento onChange. Este evento desactiva todos los clips de película excepto los botones seleccionados. También coloca el mapa en la alerta más reciente que se recibió en el feed RSS..
función privada onChange (evento: Evento): void var g: RadioButtonGroup = RadioButtonGroup (event.target); var i: uint; marcador var: Marcador; var panTo: Marcador; switch (g.selection.name) caso "radioVolcano": para (i = 0; i
Así es como se ve el código final.
package import com.yahoo.maps.api.YahooMap; importar com.yahoo.maps.api.YahooMapEvent; import com.yahoo.maps.api.core.location.LatLon; importar com.yahoo.maps.api.markers.Marker; importar fl.controls.RadioButtonGroup; importar fl.controls.RadioButton; importar flash.display.MovieClip; importar flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; importar flash.filters.DropShadowFilter; importar flash.geom.ColorTransform; importar flash.net.URLLoader; importar flash.net.URLRequest; importar flash.net.URLRequestMethod; import flash.net.URLVariables; import flash.text.AntiAliasType; importar flash.text.Font; importar flash.text.TextField; importar flash.text.TextFieldAutoSize; importar flash.text.TextFormat; la clase pública yahoo_map extiende Sprite private static const APPID: String = "YOUR APP ID"; private static const CURL: String = "curl.php"; mapa var privado: YahooMap; var privado ds: DropShadowFilter; privado var geo: espacio de nombres; privado var tsuArray: Array; privado var tsuCounter: int = 0; color de var privado: ColorTransform; grupo de var privado: RadioButtonGroup; función pública yahoo_map () init (); función privada 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_hawaii.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 = nuevo DropShadowFilter (2,90,0x00000,0.75,2,2,1,3); grupo = nuevo RadioButtonGroup ("Desastres"); handleMap (); private function handleMap (): void map = new YahooMap (); map.addEventListener (YahooMapEvent.MAP_INITIALIZE, onInit); map.init (APPID, stage.stageWidth, 330); función privada onInit (evento: YahooMapEvent): void empty.addChild (map); map.addZoomWidget (); map.addPanControl (); map.addTypeWidget (); map.zoomLevel = 17; map.centerLatLon = new LatLon (0,0); volcanes (); función privada volcanes (): 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); función privada onVolcano (evento: Evento): void var vol: Namespace = new Namespace ("http://volcano.wr.usgs.gov/rss/volcanons/1.0"); var xml: XML = nuevo XML (event.target.data); var pointList: XMLList = xml… geo :: point.text (); var colorList: XMLList = xml… vol :: colorcode.text (); var cadena: String; para (var i: uint; i<\/?\w+((\s+(\w|\w[\w-]*\w)(\s*=\s*(?:\".*?\"|'.*?'|[^'\">\ s] +))?) + \ s * | \ s *) \ /?> / gi; string = string.replace (patrón, ""); earth.desc = cadena; tsunamis (); función privada 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); función privada onTsu (evento: Evento): void tsuCounter ++; if (tsuCounter == tsuArray.length) group.addEventListener (Event.CHANGE, onChange); else tsunamis (); var xml: XML = nuevo XML (event.target.data); var list: XMLList = xml… geo :: point.text (); var cadena: String; para (var i: uint; i Apenas he arañado la superficie por lo que YahooMaps tiene debajo del capó. Lee la documentación y vuelve loco.!
