asd

21

Mar

Como utilizar o importar clases en actionscript

Publicado por: LeoBaraldi

Cuando decidí ir colocando clases tanto mías como de terceros para compartirlas con ustedes, me llegaron muchas consultas de cómo importarlas?, unos de los problemas mas grabe que cometemos los que estamos en el tema es que damos muchas cosas por sabidas y olvidamos de explicar los pasos o fundamentos básicos del porque de las cosas, así que este post es como un pedido de disculpas de cierta manera :) , voy a ir repasando los post y colocando cosas mas básicas y útiles junto a contenidos mas avanzado así es mas democrático!!!

¿Que es una clase?
Podríamos decir que una clase es un constructor de objetos que se basa en pautas ya establecidas o que se deban asignar (propiedades), pero en definitiva el resultado será un nuevo objeto con propiedades y métodos (funciones) listo para utilizar.

Por ejemplo si tuviéramos una fabrica de mesas, en vez de tener que pensar como esta compuesta la mesa a la hora de crear cada nueva mesa, e ir haciendo paso a paso el ensamblaje a medida que vamos relacionando las partes, nos daríamos cuenta que seria mucho mas útil si implementáramos un plano o croquis, donde ese plano indique los elementos básico como debe situarse por ejemplo las patas, la tapa, etc. En el mismo plano seguro que podremos indicar que partes de las mesas deberían poder ser personalizada (propiedades), por ejemplo el color. Este modelo lineal de establecer los pasos para construir una mesa podríamos repetirlo miles de veces con cada mesa logrando una serialización donde si quisiéramos agregar o modificar un paso en vez de hacerlo con cada mesa simplemente lo indicamos en el plano. De la misma manera funciona una clase, el constructor “new” siempre da origen un objeto nuevo con sus propiedades y métodos (funciones) listo para ser utilizado. Normalmente muchas veces harán uso del mismo, por ejemplo cuando creamos un movieClip desde actionscript: var miPeli:MovieClip = new MovieClip(), este es un claro ejemplo en el uso de clases, donde creamos un nuevo objeto MovieClip con todas sus propiedades y funciones listo para ser utilizado.

Aclaro que el mundo de las clases es muchisimo mas que esto, pero la idea es que mas o menos puedan entender el porque y que es una clase de manera simple.
Dado esto veremos que al programar abra tareas repetitivas donde seria bueno delegar dicha tarea a una clase, por ejemplo si requerimos hacer una mascara para un mc, sabemos que necesitamos un recuadro, no seria muy complicado crearlo, con solo unas 4 a 6 líneas estaría todo listo, pero si dichas líneas de código la implementáramos en una clase aislada para la función crear recuadro, en una sola línea podríamos implementarla, por ejemplo var mask:Recuadro = new Recuadro(100,100,0xFF0000); Esta sola línea hace referencia (instancia) a un nuevo objeto Recuadro con las propiedades 100 px de ancho, 100 px de alto y de color rojo y de esta manera podríamos crear cuantos recuadros quisiéramos de una manera mucho mas fácil y controlable.

¿Como importo una clase?
Si la clase se encuentra en la raíz de nuestro archivo fla, simplemente utilizando la sentencia: import nombredelaClase desde el panel acciones (F9), si en cambio la clase esta dentro de una carpeta deberíamos indicar la ruta de la misma: import carpeta. nombredelaClase, el punto es el conector para navegar por las carpetas.

Una vez importada la clase ya esta disponible para utilizarla, ejemplo:

Importamos la clase DrawCircle.as > import DrawCircle;
Creamos un nuevo objeto > var circulo:DrawCircle = new DrawCircle(100,100,20,0xFF0000)

Las propiedades y métodos de cada clase serán particularidades según el caso, por eso es bueno siempre al utilizarlas ver cuales son sus métodos y propiedades admitidas en los documentos de referencia.

categorias: ActionScript 3 , Clases Actionscript 3 Coment.: -

27

Ene

Dibujar polígono API Google Maps Actionscript 3 – Polygon

Publicado por: LeoBaraldi

Siguiendo con los ejemplos, en este caso continuamos el mismo código del ejemplo anterior pero le sumamos la posibilidad de dibujar una zona determinada del mapa con las opciones de Polygon.

Clic para ver Texto Plano
Actionscript:
  1. import com.google.maps.Map;
  2. import com.google.maps.MapEvent;
  3. import com.google.maps.MapType;
  4. import com.google.maps.controls.*;
  5. import com.google.maps.LatLng;
  6. //IMPORTAMOS LA CLASE PARA TRABAJAR CON MARCADORES
  7. import com.google.maps.overlays.*;
  8. //importamos la clase para trabajar con opciones para los marcadores
  9. import com.google.maps.overlays.MarkerOptions;
  10. //clase para trabajar con eventos del mouse
  11. import com.google.maps.MapMouseEvent;
  12. //clase requerida para desplegar una ventana
  13. import com.google.maps.InfoWindowOptions;
  14. //clases para trabajar con rellenos y filetes
  15. import com.google.maps.styles.FillStyle;
  16. import com.google.maps.styles.StrokeStyle;
  17. //clases para dibujar un poligono
  18. import com.google.maps.overlays.Polygon;
  19. import com.google.maps.overlays.PolygonOptions;
  20.  
  21. var map:Map = new Map();
  22. //CREAMOS UNA VARIABLE CON EL TIPO MARKER
  23. var marker:Marker;
  24.  
  25. map.key="ABQIAAAAvvxprSVgDmort-nQvP9UOBRcIBM5SEgUYyuJIuqH4Qf0kgkYgBT_K4sLwopPkxZFAw-tlQLIRz3sTA";
  26. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  27. map.setSize(new Point(stage.stageWidth, stage.stageHeight));
  28. this.addChild(map);
  29.  
  30. function onMapReady(event:Event):void {
  31.     //centramos el mapa a las coordenadas deseadas (-31...,-64...) e indicamos el zoom (12) y tipo de mapa por defecto (MapType.NORMAL_MAP_TYPE)
  32.     map.setCenter(new LatLng(-31.409619,-64.184532), 15, MapType.NORMAL_MAP_TYPE);
  33.     map.addControl(new ZoomControl());
  34.     map.addControl(new PositionControl());
  35.     map.addControl(new MapTypeControl());
  36.     //en la libreria cramos un Sprite con el nombre de clase Icono
  37.     //creamos una variable opciones y guardamos el icono
  38.     var opciones:MarkerOptions=new MarkerOptions({icon:new Icono()});
  39.     //CREAMOS UN NUEVO OBJETO CON LAS COORDENADAS DEL MARCADOR
  40.     //y agregamos como parametro las opciones antes modificadas
  41.     marker=new Marker(new LatLng(-31.40949996324042, -64.18445689814757),opciones);
  42.    
  43.     //agregamos un detector de evento para el clic sobre el marcador
  44.     marker.addEventListener(MapMouseEvent.CLICK, ClickMarket);
  45.     //por si quieren saber las coordenadas de un punto descomenten la linea 49
  46.     map.addEventListener(MapMouseEvent.CLICK,mapClic);
  47.     function mapClic(e:MapMouseEvent):void {
  48.         //trace(e.latLng);
  49.     }
  50.     //creamos un poligono dibujando lineas
  51.     var polygon:Polygon=new Polygon([
  52.     //desde
  53.     new LatLng(-31.40949996324042, -64.18445689814757),
  54.     //hasta
  55.     new LatLng(-31.409783819879326, -64.1834162010498),
  56.     //desde
  57.     new LatLng(-31.41198139060486, -64.18427450793456),
  58.     //hasta
  59.     new LatLng(-31.411688384148704, -64.1853259338684)],
  60.     //agregamos las opciones de relleno y filete
  61.     new PolygonOptions({strokeStyle:new StrokeStyle({color:0x000000,thickness:1,alpha:0.7}),fillStyle:new FillStyle({color:0xFF0000,alpha:0.8})}));
  62.     //agregamos el poligono a la visualizacion del mapa
  63.     map.addOverlay(polygon);
  64.     //agregamos el marcador a la visualizacion del mapa
  65.     map.addOverlay(marker);
  66. }
  67.  
  68. //el contenido del globo del marcador
  69. var Texto:String="<b>LeoBaraldi</b> <br/> Juan de los Palotes 225";
  70.  
  71. function ClickMarket(e:MapMouseEvent):void {
  72.     //mostramos el globo y su contenido
  73.     marker.openInfoWindow(new InfoWindowOptions({contentHTML:Texto,pointOffset: new Point(0, -35)}));
  74. }

ver ejemplodescargar archivos
categorias: API's , ActionScript 3 Coment.: 1

23

Ene

Personalizar icono marker y desplegar información del lugar con Api Google Maps – MarkerOptions Actionscript 3

Publicado por: LeoBaraldi

En el ejemplo anterior agregamos un marcador en una posición determinada pero usando el icono por defecto del api de Google Maps para Flash, en este nuevo ejemplo vamos a personalizar dicho marcador o marker y sumarle un evento clic para que despliegue un globo o ventana con información.

Clic para ver Texto Plano
Actionscript:
  1. import com.google.maps.Map;
  2. import com.google.maps.MapEvent;
  3. import com.google.maps.MapType;
  4. import com.google.maps.controls.*;
  5. import com.google.maps.LatLng;
  6. //IMPORTAMOS LA CLASE PARA TRABAJAR CON MARCADORES
  7. import com.google.maps.overlays.*;
  8. //importamos la clase para trabajar con opciones para los marcadores
  9. import com.google.maps.overlays.MarkerOptions;
  10. //clase para trabajar con eventos del mouse
  11. import com.google.maps.MapMouseEvent;
  12. //clase requerida para desplegar una ventana
  13. import com.google.maps.InfoWindowOptions;
  14.  
  15. var map:Map = new Map();
  16. //CREAMOS UNA VARIABLE CON EL TIPO MARKER
  17. var marker:Marker;
  18.  
  19. map.key="ABQIAAAAvvxprSVgDmort-nQvP9UOBRcIBM5SEgUYyuJIuqH4Qf0kgkYgBT_K4sLwopPkxZFAw-tlQLIRz3sTA";
  20. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  21. map.setSize(new Point(stage.stageWidth, stage.stageHeight));
  22. this.addChild(map);
  23.  
  24. function onMapReady(event:Event):void {
  25.     //centramos el mapa a las coordenadas deseadas (-31...,-64...) e indicamos el zoom (12) y tipo de mapa por defecto (MapType.NORMAL_MAP_TYPE)
  26.     map.setCenter(new LatLng(-31.409619,-64.184532), 12, MapType.NORMAL_MAP_TYPE);
  27.     map.addControl(new ZoomControl());
  28.     map.addControl(new PositionControl());
  29.     map.addControl(new MapTypeControl());
  30.     //en la libreria cramos un Sprite con el nombre de clase Icono
  31.     //creamos una variable opciones y guardamos el icono
  32.     var opciones:MarkerOptions=new MarkerOptions({icon:new Icono()});
  33.     //CREAMOS UN NUEVO OBJETO CON LAS COORDENADAS DEL MARCADOR
  34.     //y agregamos como parametro las opciones antes modificadas
  35.     marker=new Marker(new LatLng(-31.409619,-64.184532),opciones);
  36.     //Y LO AGREGAMOS A LA VISUALIZACION DEL MAPA
  37.    
  38.     //agregamos un detector de evento para el clic sobre el marcador
  39.     marker.addEventListener(MapMouseEvent.CLICK, ClickMarket);
  40.     map.addOverlay(marker);
  41. }
  42.  
  43. //el contenido del globo del marcador
  44. var Texto:String="<b>LeoBaraldi</b> <br/> Juan de los Palotes 225"
  45.  
  46. function ClickMarket(e:MapMouseEvent):void {
  47.     //mostramos el globo y su contenido
  48.     marker.openInfoWindow(new InfoWindowOptions({contentHTML:Texto}));
  49. }

ver ejemplodescargar archivos
categorias: API's , ActionScript 3 Coment.: -

21

Ene

Agregar Marker o pointer en componente de google maps actionscript 3

Publicado por: LeoBaraldi

Cuando vimos tutorial de como utilizar la api de Google maps en adobe flash, surgieron posteriormente muchas dudas por partes de usuarios a la hora de personalizarlo como por ejemplo cargar pointers, marker o puntos de referencias en el mapa. Dado eso voy a ir colocando ejemplos variados de personalización para que quede mas claro la utilización de la misma. El ejemplo siguiente simplemente agrega un marker en el mapa.

Clic para ver Texto Plano
Actionscript:
  1. import com.google.maps.Map;
  2. import com.google.maps.MapEvent;
  3. import com.google.maps.MapType;
  4. import com.google.maps.controls.*;
  5. import com.google.maps.LatLng;
  6. //IMPORTAMOS LA CLASE PARA TRABAJAR CON MARCADORES
  7. import com.google.maps.overlays.*;
  8.  
  9. var map:Map = new Map();
  10. //CREAMOS UNA VARIABLE CON EL TIPO MARKER
  11. var marker:Marker;
  12.  
  13. map.key="ABQIAAAAvvxprSVgDmort-nQvP9UOBRcIBM5SEgUYyuJIuqH4Qf0kgkYgBT_K4sLwopPkxZFAw-tlQLIRz3sTA";
  14. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  15. map.setSize(new Point(stage.stageWidth, stage.stageHeight));
  16. this.addChild(map);
  17.  
  18. function onMapReady(event:Event):void {
  19.     //centramos el mapa a las coordenadas deseadas (-31...,-64...) e indicamos el zoom (12) y tipo de mapa por defecto (MapType.NORMAL_MAP_TYPE)
  20.     map.setCenter(new LatLng(-31.409619,-64.184532), 12, MapType.NORMAL_MAP_TYPE);
  21.     map.addControl(new ZoomControl());
  22.     map.addControl(new PositionControl());
  23.     map.addControl(new MapTypeControl());
  24.     //CREAMOS UN NUEVO OBJETO CON LAS COORDENADAS DEL MARCADOR
  25.     marker=new Marker(new LatLng(-31.409619,-64.184532));
  26.     //Y LO AGREGAMOS A LA VISUALIZACION DEL MAPA
  27.     map.addOverlay(marker);
  28. }

ver ejemplodescargar archivos
categorias: API's , ActionScript 3 Coment.: 1

25

Abr

Lector de RSS 2.0 en Adobe Flash (AS3) para sitios externos

Publicado por: LeoBaraldi

De las tantas consulta que me llegan a mi email y de a poco voy contestando, Nestor Fabio Monrtoya me solicita como se puede realizar un lector de RSS para sitios externos en AS 3.0.
Como lo prometido es deuda te detallo el paso a paso y vas a notar que es realmente una de las cosas más simple de hacer, sea en as3 o as2.
Para los que no sepan que es RSS les recomiendo este excelente sitio sobre todo lo referido a RSS que nos recomienda Roberta!

Clic para ver Texto Plano
Actionscript:
  1. //url que leeremos al iniciar
  2. var urlRssLoad:String = "http://www.clarin.com/diario/hoy/um/sumariorss.xml";
  3. //cargamos la url
  4. function cargarRss() {
  5.     //gestiomamos la peticion URL
  6.     var urlRSS:URLRequest = new URLRequest(urlRssLoad);
  7.     //objeto encargado de los eventos cargalos por url
  8.     var loader:URLLoader = new URLLoader(urlRSS);
  9.     //escuchador para el evento de carga completa
  10.     loader.addEventListener(Event.COMPLETE, loadComplet);
  11.     loader.addEventListener(IOErrorEvent.IO_ERROR,ioError);
  12. }
  13. function ioError(o:IOErrorEvent):void {
  14.     cabecera_txt.text = "No se pudo procesar el RSS, compruebe la URL.";
  15.     noticia_txt.htmlText = "";
  16. }
  17.  
  18. //si se cargo correctamente
  19. function loadComplet(o:Event):void {
  20.     //agregamos el xml al objeto xml
  21.     var miXML:XML =new XML(o.target.data);
  22.     miXML.ignoreWhitespace = true;
  23.     cabecera_txt.text = "";
  24.     //la cabecera del rss
  25.     cabecera_txt.htmlText = "<a href='"+miXML.child(0).title+"' target='_blank'>"+miXML.child(0).title+"</a>";
  26.     cabecera_txt.htmlText += "<font size='10'>"+miXML.child(0).description+"</font>";
  27.  
  28.     noticia_txt.htmlText = "";
  29.     //aca pueden levantar la imagen del rss
  30.     //noticia_txt.htmlText = "<img hspace='0' src='"+miXML.child(0).image.url+"'>";
  31.     //recorremos todos los nodos
  32.     for each (var item:XML in miXML..item) {
  33.         noticia_txt.htmlText += "<font color='#666666' size='10'>"+item.pubDate+"</font><br><u><a href='"+item.link+"'><b>"+item.title+"</b></a></u><br>";
  34.         noticia_txt.htmlText += item.description+"<br><br>";
  35.     }
  36.     myScrollBar.scrollTarget = noticia_txt;
  37. }
  38. //con esto podemos cargar una nueva RSS
  39. leer_btn.addEventListener(MouseEvent.CLICK,onClickLeer);
  40. function onClickLeer(o:MouseEvent):void {
  41.     if (nuevoRss_txt.text !="") {
  42.         urlRssLoad=nuevoRss_txt.text;
  43.         cargarRss();
  44.     }
  45. }
  46. //inicia la primera carga
  47. cargarRss();

ver ejemplodescargar archivos
categorias: ActionScript 3 Coment.: 5

24

Mar

Usando API de Google Maps para Actionscript 3

Publicado por: LeoBaraldi

Hace un tiempo publique un componente de AFcomponet que nos permitía usar Google Maps. Dicho momento dejo de funcionar dado los cambios que propuso Google al publicar su API para flash.

De esa manera ahora no necesitamos de un componente de tercero para poder tener mapas en nuestra web, y este ejemplo viene a colación de las extensas consultas y fallas detectadas en el  componente de AF.

Podrán comprobar que la Api provista por Google es mucho más amigable y simple, también cuenta con una velocidad considerablemente más rápida en lo que se refiere a acceso de datos.

Cuenta también una extensa hoja de referencia lo cual nos va a hacer fácil el desarrollo de cualquier aplicación sea para Flash, AIR o Flex.

1 Antes que todo lo que necesitan es gestionar una llave (Key (1)) para utilizar la API, para ello deben visitar este link: http://code.google.com/intl/es-ES/apis/maps/ es importante que sean usuarios registrados de google (Gmail por ejemplo), y la clave va relacionada directamente con el dominio (2) donde ejecutaran la aplicación.

2 El siguiente paso es instalar el SDK o componente que nos provee Google para conectarse a google maps, la descarga la hacemos desde este link: http://maps.googleapis.com/maps/flash/release/sdk.zip

Una vez descargado des compactamos el archivo y lo pegamos en la siguiente carpeta para los que usamos Windows:
X:Archivos de programa\AdobeAdobe Flash CS3\es\Configuration\Components
Nota: X es la unidad de disco donde este instalado – “es”  es el idioma, en este caso yo lo tengo en español, en ingles seria “en”

Nota: si usas CS4 es en: C:\Archivos de programa\Adobe\Adobe Flash CS4\Common\Configuration\Components

Para los muchachos de Mac así: Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

Si lo hicimos bien abrimos Flash y en la ventana de componentes deberíamos ver algo asi:

3 Ahora con un archivo nuevo en blanco procedemos a arrastrar el componente GoogleMapsLibrary a nuestro escenario.


Abrimos el panel de acciones “F9” y escribimos lo siguiente:

Clic para ver Texto Plano
Actionscript:
  1. // importamos las clases necesarias, están son las básicas para este ejemplo alcanzan. Al final del tutorial les dejo el link de las referencias para que puedan ver cada clase en particular.
  2. import com.google.maps.LatLng;
  3. import com.google.maps.Map;
  4. import com.google.maps.MapEvent;
  5. import com.google.maps.MapType;
  6. import com.google.maps.controls.*;
  7. import com.google.maps.LatLng;
  8.  
  9. //seteamos el ancho y alto de nuestra película
  10. var ANCHO:int = stage.stageWidth;
  11. var ALTO:int = stage.stageHeight;
  12.  
  13. //creamos nuevo objeto Map
  14. var map:Map = new Map();
  15.  
  16. //aquí pegamos el código de la llave que sacamos en el primer paso
  17. map.key = "ABQIAAAAvvxprSVgDmort-nQvP9UOBRcIBM5SEgUYyuJIuqH4Qf0kgkYgBT_K4sLwopPkxZFAw-tlQLIRz3sTA";
  18.  
  19. //seteamos el alto y ancho del mapa
  20. map.setSize(new Point(ANCHO, ALTO));
  21. //agregamos un detector de evento para cuando se completo la carga
  22. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  23.  
  24. //cargamos el mapa a nuestra lista de visualización
  25. this.addChild(map);
  26.  
  27. //este es un poniter que agregue yo, el que viene no me gusta
  28. var pointer:Pointer = new Pointer();
  29. this.addChild(pointer);
  30. pointer.x = (ANCHO/2)-(pointer.width/2);
  31. pointer.y = (ALTO/2)-(pointer.height/2);
  32. pointer.alpha = 0.5;
  33.  
  34. //en este campo vamos a imprimir las coordenadas y zoom actuales, si comentan estas líneas pueden ocultar esta parte
  35. var texto:TextField = new TextField();
  36. var formatoTexto:TextFormat = new TextFormat();
  37. this.addChild(texto);
  38. formatoTexto.font = "Arial";
  39. formatoTexto.size = 12;
  40. formatoTexto.align = TextFormatAlign.LEFT;
  41. formatoTexto.bold = true;
  42. texto.multiline = true;
  43. texto.background = true;
  44. texto.autoSize = TextFieldAutoSize.LEFT;
  45. texto.defaultTextFormat = formatoTexto;
  46.  
  47. //si se cargo todo bien ejecutamos!
  48. function onMapReady(event:Event):void {
  49. //centramos el mapa a las coordenadas deseadas (-31...,-64...) e indicamos el zoom (12) y tipo de mapa por defecto (MapType.NORMAL_MAP_TYPE)
  50. map.setCenter(new LatLng(-31.409619,-64.184532), 12, MapType.NORMAL_MAP_TYPE);
  51. //mostramos el control de zoom
  52. map.addControl(new ZoomControl());
  53. //el control de posicion
  54. map.addControl(new PositionControl());
  55. //el selector de tipo de mapa
  56. map.addControl(new MapTypeControl());
  57. //el evento para reimprimir las coordenadas cuando desplazamos el mapa
  58. map.addEventListener(Event.ENTER_FRAME,coordenadas);
  59. }
  60.  
  61. //imprimimos las coordenadas en el campito de texto
  62. function coordenadas(e:Event):void {
  63. texto.text = "Lat/Lng: "+e.currentTarget.getCenter()+"rZoom: "+e.currentTarget.getZoom() ;
  64. texto.x = (ANCHO-texto.textWidth)-10;
  65. texto.y = (ALTO-texto.textHeight)-10;
  66. }

Bueno hasta ahí como pueden ver muy pero muy simple! Espero que les sea útil.

Referencia de la API
Ejemplos de uso por Google

ver ejemplodescargar archivos
categorias: API's , ActionScript 3 Coment.: 28

Leonardo David Baraldi

Leonardo Baraldi

Nací en Villa Carlos Paz, tengo 33 años y me dedico a desarrollos para la web desde el año 99, preferentemente en las aéreas de ActionScript y CSS. Trabajo para la firma Manifesto Solutions como jefe de producción.

ultimos post

Usa Firefox es mejor che!!!
Copyright © 2008 LeoBaraldi. Todos los derechos reservados.
Designed by LeoBaraldi and powered by Wordpress | RSS Feed
Love WordPress
Manifesto
Manifesto solutions
Sponsort Oficial de LeoBaraldi