unijimpe » ActionScript http://blog.unijimpe.net Desarrollo Web, SEO, Adsense Mon, 28 Nov 2011 03:18:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Depurar Flash con Firebughttp://blog.unijimpe.net/depurar-flash-con-firebug/ http://blog.unijimpe.net/depurar-flash-con-firebug/#comments Mon, 16 May 2011 04:57:20 +0000 unijimpe http://blog.unijimpe.net/?p=1268 Depurar flash en el ambiente de desarrollo es sencillo a través del método trace que muestra un texto de forma semejante a la función alert de javascript. El problema radica cuando tenemos que depurar los SWFs …

]]> Depurar flash en el ambiente de desarrollo es sencillo a través del método trace que muestra un texto de forma semejante a la función alert de javascript. El problema radica cuando tenemos que depurar los SWFs ya publicados en una pagina pues trace solo funciona en el Flash IDE.

Creando un trace personalizado

La solución es sencilla, para ello vamos a crear una función en flash llamada tracer que además de hacer el trace normal utilice la función console.log de Firebug con lo cual podemos imprimir el resultado de cualquier parámetro en el navegador.

  1. import flash.external.ExternalInterface;
  2. function tracer(msg:String) {
  3.     trace(msg);
  4.     ExternalInterface.call( "console.log" , msg);
  5. }

Utilizar esta función es sencilla, tiene la misma sintaxis de la función trace. Por ejemplo si deseamos imprimir un texto tendríamos:

  1. tracer("Start...");

También se puede utilizar dentro de bucles o estructuras condicionales:

  1. for (var i=0; i<10; i++) {
  2.     tracer("-> " + i);
  3. }

Otra forma de depurar Flash en el navegador es utilizando la extensión para Firefox llamada Flashbug pero necesita tener instalado la versión Debug de Flash Player, mientras que la versión que hemos presentado es mucho mas sencilla y no requiere instalar extensiones ni otra versión del player. También funciona en Safari pues este soporta el comando console.log().

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/depurar-flash-con-firebug/feed/ 4 Youtube Video Player: tubePlayer 1.0 (beta)http://blog.unijimpe.net/tubeplayer-1-0-beta/ http://blog.unijimpe.net/tubeplayer-1-0-beta/#comments Mon, 25 Oct 2010 05:25:41 +0000 unijimpe http://blog.unijimpe.net/?p=1238 Después de algún tiempo tenemos el agrado de presentar la nueva versión de tubePlayer el reproductor de vídeos de Youtube personalizado. Todo esto gracias a los comentarios y sugerencias de los visitantes a este blog, con …

]]> Después de algún tiempo tenemos el agrado de presentar la nueva versión de tubePlayer el reproductor de vídeos de Youtube personalizado. Todo esto gracias a los comentarios y sugerencias de los visitantes a este blog, con lo cual hemos logrado un mejor rendimiento del player.

Características

En esta nueva versión se ha reescrito completamente el reproductor utilizando YouTube ActionScript 2.0 Player API el cual corrige algunos problemas de la versión anterior y mejora características solicitadas por nuestros visitantes.

  • Reescrito completamente en ActionScript 2.0 con OOP.
  • Opción para autoplay de vídeos.
  • Opción para el volumen por defecto.
  • Se puede desplazar al cualquier parte del vídeo.
  • Imagen de previsualización del vídeo.
  • Mensaje de error si el vídeo esta bloqueado o eliminado.
  • No se muestra publicidad en los vídeos.
  • No se muestran las anotaciones en los vídeos.
  • Corregido el autoescalado del vídeo de acuerdo al tamaño del player.
  • Reproducción en pantalla completa.

ActionScript 3.0 es muy potente pero el API es AS3 tiene el problema que muestra la publicidad en los vídeos, por lo cual decidimos trabajar con AS2 para mostrar los vídeos sin publicidad. Además de ello estamos trabajando para integrar tubePlayer a un plugin para WordPress que permita utilizar este player de forma sencilla en los blogs.

Como utilizar tubePlayer

Primero debes descargar la ultima versión del player y subir el archivo tubeplayer.swf a tu servidor web. Luego lo incluyes en tu página como cualquier SWF pero con tres parámetros por medio de flashVars:

  • videoId (Requerido)
    Identificador del vídeo de Youtube a reproducir.
  • autoPlay (Opcional)
    Define si el vídeo se reproducirá automáticamente. Acepta valores true o false.
  • volume (Opcional)
    Volumen inicial del vídeo. Acepta valores enteros de 0 a 100.

Podemos embeber el video utilizando el tag de HTML :

  1. <object width="510" height="320">
  2.    <param name="movie" value="http://domain/path/tubeplayer.swf" />
  3.    <param name="flashVars" value="videoId=6hzrDeceEKc&autoPlay=true" />
  4.    <param name="allowFullscreen" value="true" />
  5.    <embed src="tubeplayer.swf" width="510" height="320"
  6.    flashVars="videoId=pa14VNsdSYM" allowFullscreen="true" />
  7. </object>

También podemos utilizar SWFObject para incluir el player:

  1. <div id="divmovie">tubePlayer</div>
  2. <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
  3. <script type="text/javascript">
  4.    swfobject.embedSWF("http://domain/path/tubeplayer.swf", "divmovie", "510", "320", "9", "",
  5.    {videoId: "6hzrDeceEKc"}, {allowFullscreen: "true"});
  6. </script>

Pueden ver el player funcionando en tubePlayer 1.0 (beta) demo, donde pueden ingresar rl identificador del vídeo que desean visualizar.

Sugerencias

Este player esta en versión beta y esperamos nos hagan llegar su observaciones y sugerencias para de esta forma lograr un buen player que nos beneficie a todos.

Pueden dejar sus sugerencias en nuestro formulario de comentarios. En el transcurso de esta semana estaremos trabajando en la mejora del player y la otra semana estaremos lanzando la versión final que incluye un plugin para WordPress.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/tubeplayer-1-0-beta/feed/ 7 Publicar Videos de Youtube en Flashhttp://blog.unijimpe.net/publicar-videos-de-youtube-en-flash/ http://blog.unijimpe.net/publicar-videos-de-youtube-en-flash/#comments Fri, 04 Dec 2009 04:53:58 +0000 unijimpe http://blog.unijimpe.net/?p=1126 Compartir vídeos de Youtube es una tarea común y sencilla en HTML con el código que ofrece Youtube el cual se coloca en el código html. Veamos como publicar vídeos de Youtube en páginas hechas en …

]]> Compartir vídeos de Youtube es una tarea común y sencilla en HTML con el código que ofrece Youtube el cual se coloca en el código html. Veamos como publicar vídeos de Youtube en páginas hechas en Flash, para ello utilizaremos el API YouTube ActionScript 2.0 Player API Reference el cual brinda métodos para embeber los vídeos en Flash.

Cargando Videos de Youtube
Para cargar un vídeo de Youtube se debe cargar como si fuera un MovieClip normal, para ello se puede utilizar los métodos de la clase MovieClipLoader. Para la ruta de los vídeos se puede utilizar el URL: http://www.youtube.com/v/ID Donde ID es el identificador del vídeo que se desea visualizar. Entonces si tenemos un MovieClip llamado clip donde deseamos mostrar el vídeo tendríamos el siguiente código:

  1. var tload:MovieClipLoader = new MovieClipLoader();
  2. tload.loadClip("http://www.youtube.com/v/Jmhpy8c8hbw", clip);

El vídeo se carga correctamente pero con dimensiones de 480 x 385 pixels. Si deseamos cargar los vídeos con un tamaño especifico sin deformar el vídeo es necesario crear un detector de eventos para ejecutarlo cuando el player del video se ha cargado completamente.

  1. var tinte:Number;
  2. var tlist:Object = new Object();
  3. tlist.onLoadInit = function() {
  4.     tinte = setInterval(checkVideo, 250);
  5. }
  6. var tload:MovieClipLoader = new MovieClipLoader();
  7. tload.addListener(tlist);
  8. tload.loadClip("http://www.youtube.com/v/Jmhpy8c8hbw", clip);

Una vez que se ha cargado player de Youtube, utilizamos la función checkVideo que se encarga de verificar que el player, una ver cargado el player asignamos las dimensiones con el método setSize. Notar que al inicio hemos ocultado el player asignándole transparencia 0, al final después de haber redimensionado el player volvemos a mostrar el video cambiando la transparencia a 100.

  1. clip._alpha = 0;
  2.  
  3. var tinte:Number;
  4. var tlist:Object = new Object();
  5. tlist.onLoadInit = function() {
  6.     tinte = setInterval(checkVideo, 250);
  7. }
  8. var tload:MovieClipLoader = new MovieClipLoader();
  9. tload.addListener(tlist);
  10. tload.loadClip("http://www.youtube.com/v/Jmhpy8c8hbw", clip);
  11.  
  12. function checkVideo() {
  13.     if (clip.isPlayerLoaded()) {
  14.         clip.setSize(348, 278);
  15.         clip._alpha = 100;
  16.         clearInterval(tinte);
  17.     }
  18. }

Listo, tenemos nuestro vídeo cargado y con las dimensiones deseadas en Flash. Les dejo los archivos fuentes para que lo descarguen y hagan sus pruebas.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/publicar-videos-de-youtube-en-flash/feed/ 40 Insertar Google Maps en Flashhttp://blog.unijimpe.net/insertar-google-maps-en-flash/ http://blog.unijimpe.net/insertar-google-maps-en-flash/#comments Mon, 05 Oct 2009 06:18:41 +0000 unijimpe http://blog.unijimpe.net/?p=1092 Google Maps permite incluir cualquier mapa en tu web utilizando algunas sentencias de Javascript, también ofrece Google Maps API for Flash para incluir los mapas en Flash utilizando ActionScript.

Para hacer uso de este API lo …

]]> Google Maps permite incluir cualquier mapa en tu web utilizando algunas sentencias de Javascript, también ofrece Google Maps API for Flash para incluir los mapas en Flash utilizando ActionScript.

Para hacer uso de este API lo primero es registrarse gratuitamente un obtener Google Maps API Key el cual nos permitirá mostrar los mapas en nuestra web. Además es necesario instalar el componente map.swc en el editor de Flash.

Instalando el Componente
Para instalar la librería es necesario descargar los archivos desde http://maps.googleapis.com/maps/flash/release/sdk.zip. Luego de extraer el archivo ubicamos el archivo map_x_y.swc en la carpeta lib, donde x e y indican la versión actual del componente. Creamos una carpeta llamada Google y copiamos el archivo .swc:

Windows:
C:\Program Files\Adobe\Adobe Flash CS3\language\Configuration\Components
MAC:
Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

Utilizando el componente
Una vez instalado el componente, en el Panel de Componentes de Flash se puede ver un nuevo item llamado GoogleMapsLibrary. Para poder utilizarlo podemos jalar el componente al escenario o podemos jalarlo directamente a la librería de nuestro archivo flash.

flash-gmap

Creando nuestro primer Mapa
Lo primero es incluir las clases necesarias (com.google.maps.*) para incluir y manejar los mapas, definimos la latitud, longitud y zoom que vamos a utilizar. Luego de ello creamos una instancia de la clase Map, asignamos nuestro KEY. Definimos el ancho y alto de nuestro mapa con el método setSize.

  1. import com.google.maps.*;
  2.  
  3. var lat:Number = -12.04144;
  4. var lon:Number = -77.023188;
  5. var zoom:int = 17;
  6.  
  7. var map:Map = new Map();
  8. map.key = "tu_api_key";
  9. map.setSize(new Point(500, 350));
  10. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  11. this.addChild(map);
  12.  
  13. function onMapReady(event:Event):void {
  14.     map.setCenter(new LatLng(lat,lon), zoom, MapType.NORMAL_MAP_TYPE);
  15. }

En el ejemplo hemos creado un mapa de 500x350 pixels con un zoom de 17 y estamos mostrando el mapa normal.

Respecto a los tipos de mapas disponibles tenemos los siguientes:

  • HYBRID_MAP_TYPE: Mapa con fotografías satelitales y nombres las vías.
  • NORMAL_MAP_TYPE: Mapa normal con nombre de las vías.
  • PHYSICAL_MAP_TYPE: muestra el mapa físico.
  • SATELLITE_MAP_TYPE: mapa con las fotografías satelitales.

Agregando controles a nuestros Mapas
Para incluir los controles es necesario incluir las clases com.google.maps.controls.*, luego de ello podemos agregar los controles de Zoom y de posición a nuestros mapas de la siguiente forma:

  1. import com.google.maps.*;
  2. import com.google.maps.controls.*;
  3.  
  4. var lat:Number = -12.04144;
  5. var lon:Number = -77.023188;
  6. var zoom:int = 17;
  7.  
  8. var map:Map = new Map();
  9. map.key = "tu_api_key";
  10. map.setSize(new Point(500, 350));
  11. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  12. this.addChild(map);
  13.  
  14. function onMapReady(event:Event):void {
  15.     map.setCenter(new LatLng(lat,lon), zoom, MapType.HYBRID_MAP_TYPE);
  16.     map.addControl(new PositionControl());
  17.     map.addControl(new ZoomControl());
  18. }

Con este ejemplo tenemos un zoom inicial de 17 pero ya podemos hacer zoom a nuestro gusto y además tenemos los controles para mover el mapa.

Agregando Marcadores
Si queremos personalizar nuestros mapas podemos hacer uso de los marcadores para indicar una posición determinada e incluso sus descripciones. Para ello incluimos las clases com.google.maps.overlays.* con lo cual podemos utilizar los métodos para mostrar los marcadores.

  1. import com.google.maps.*;
  2. import com.google.maps.controls.*;
  3. import com.google.maps.overlays.*;
  4.  
  5. var lat:Number = -12.04144;
  6. var lon:Number = -77.023188;
  7. var zoom:int = 17;
  8.  
  9. var map:Map = new Map();
  10. map.key = "your_api_key";
  11. map.setSize(new Point(500, 350));
  12. map.addEventListener(MapEvent.MAP_READY, onMapReady);
  13. this.addChild(map);
  14.  
  15. function onMapReady(event:Event):void {
  16.     map.setCenter(new LatLng(lat,lon), zoom, MapType.SATELLITE_MAP_TYPE);
  17.     map.addControl(new PositionControl());
  18.     map.addControl(new ZoomControl());
  19.    
  20.     var marker:Marker = new Marker(new LatLng(lat, lon));
  21.     marker.addEventListener(MapMouseEvent.CLICK, function(event:Event):void {
  22.         marker.openInfoWindow(new InfoWindowOptions({title: "Plaza de Toros de Acho", content:"Lima, Perú"}));
  23.     });
  24.     map.addOverlay(marker);
  25. }

Ahora tenemos un marcador en nuestro mapa y al hacerle click mostramos un mensaje personalizado que puede indicar el lugar que estamos visualizando.

Más Información
Hemos visto con con sentencias sencillas podemos incluir los mapas de Google Maps en nuestros archivos Flash sin ningún problema, obviamente hay muchas mas opciones para personalizar estos mapas las cuales por cuestion de tiempo no podemos discutir aca, pero les dejo los enlaces para que puedan ampliar este tema.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/insertar-google-maps-en-flash/feed/ 36 Google Analytics para Flashhttp://blog.unijimpe.net/google-analytics-para-flash/ http://blog.unijimpe.net/google-analytics-para-flash/#comments Sat, 22 Nov 2008 16:44:55 +0000 unijimpe http://blog.unijimpe.net/?p=969 Acaban de lanzar una versión del código de seguimiento de Google Analytics, llamado gaforflash escrito en AS3 especialmente preparado para facilitar el seguimiento de páginas Flash. Este componente contiene toda la funcionalidad del código Javascript de …

]]> Acaban de lanzar una versión del código de seguimiento de Google Analytics, llamado gaforflash escrito en AS3 especialmente preparado para facilitar el seguimiento de páginas Flash. Este componente contiene toda la funcionalidad del código Javascript de Google Analytics y es 100% compatible con las últimas versiones del código de seguimiento ga.js.

En anterior oportunidad habíamos comentado sobre Google Analytics y Flash, una técnica que utiliza getURL para comunicar Flash con Javascript y por ello comunicar Flash con las funciones contenidas en ga.js. Pero esta nueva versión no requiere el uso de la librería ga.js y el uso Google Analytics es mucho mas sencillo pues se provee de funciones que se pueden llamar directamente con AS3.

Instalar el Componente
Para hacer uso del código de seguimiento en Flash, hace falta instalar un componente, para ello es necesario descargar los archivos desde gaforflash downloads. El siguiente paso es crear una carpeta llamada Google en el directorio de componentes de Flash.

  1. // For Windows:
  2. C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components
  3. // For Mac OS X:
  4. Macintosh HD/Applications/Adobe Flash CS3/Configuration/Components

Luego, extraemos el archivo recién descargado y copiamos el archivo analytics.swc a la carpeta recién creada, con esto ya esta instalado el componente y ya estamos listo para hacer uso de sus propiedades y métodos.

Utilizando el Componente
Lo primero es importar las clases necesarias para hacer el seguimiento, esto lo hacemos al inicio de todo el código:

  1. import com.google.analytics.AnalyticsTracker;
  2. import com.google.analytics.GATracker;

El siguiente paso es crear una instancia del objeto GATracker, este objeto permite definir como se comportará el seguimiento de eventos en nuestro flash y cuya sintaxis es la siguiente.

  1. new GATracker( display, "gaID", "mode", debug );

Donde se tienen los siguiente parámetros.

  • display: Referencia al actual objeto display.
  • gaID: es tu código de Google Analytics para registrar las visitas.
  • mode: es el modo de tracking (Bridge o AS3)
  • debug: modo de depuración (true o false).

Luego de ello creamos una variable del tipo GATracker y posteriormente lo utilizamos para hacer el seguimiento cada vez que se hace click a un botón.

  1. import com.google.analytics.AnalyticsTracker;
  2. import com.google.analytics.GATracker;
  3. var tracker:AnalyticsTracker;
  4. tracker = new GATracker( this, "UA-XXXXXX-X", "AS3", true );
  5.  
  6. playGame.addEventListener( MouseEvent.CLICK, onButtonClick );
  7. function onButtonClick ( event:Event ):void {
  8.    tracker.trackPageview("/section");
  9. }

Esta es una nueva opción que no solo sirve para hacer el seguimiento de visitas de páginas Flash si que también permitirá hacer el seguimiento de eventos en archivos SWFs individuales sin necesidad que estén incluidas en un HTML.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/google-analytics-para-flash/feed/ 9 trim en ActionScripthttp://blog.unijimpe.net/trim-en-actionscript/ http://blog.unijimpe.net/trim-en-actionscript/#comments Tue, 14 Oct 2008 04:41:31 +0000 unijimpe http://blog.unijimpe.net/?p=929 La función trim es una función muy común utilizada en la mayoría de lenguajes de programación la cual se encarga de eliminar los espacios en blanco al inicio y al final de una cadena. ActionScript por …

]]> La función trim es una función muy común utilizada en la mayoría de lenguajes de programación la cual se encarga de eliminar los espacios en blanco al inicio y al final de una cadena. ActionScript por defecto no incluye esta función por lo cual tendremos que construirla manualmente.

La forma mas común de implementar esta función es crear dos funciones una para eliminar los espacios en blanco al inicio y otra al final de la cadena y luego unirlas, en esta ocasión les presento dos funciones preparadas para ser rápidas y eficientes.

trim en ActionScript 2.0

Es función fue creada por frog style web engineering con una serie de funciones adicionales. La función recorre los elementos desde el inicio y desde el fin eliminando los espacios en blanco, saltos de linea, tabuladores obteniéndose de esa forma la función trim.

  1. function trim(str:String):String {
  2.     for(var i=0; str.charCodeAt(i)<33; i++);
  3.     for(var j=str.length-1; str.charCodeAt(j)<33; j--);
  4.     return str.substring(i, j+1);
  5. }

Luego de ello podemos utilizar la función de forma sencilla, como se muestra a continuación.

  1. var txt:String = "    Hola trim!!  ";
  2. trace(trim(txt));

trim en ActionScript 3
Ahora en el caso de ActionScript 3 se puede hacer uso de las expresiones regulares, esta función publicada en AStorm - Devblog busca como en el caso anterior los espacios en blanco y los elimina pero con una expresión regular.

  1. function trim(str:String):String {
  2.     return str.replace(/^\s*(.*?)\s*$/g, "$1");
  3. }

Nuevamente podemos hacer las pruebas y verificar que efectivamente tenemos nuestra función trim que elimina los espacios en blanco al inicio y al final de una cadena.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/trim-en-actionscript/feed/ 5 JSON con Flashhttp://blog.unijimpe.net/json-con-flash/ http://blog.unijimpe.net/json-con-flash/#comments Tue, 05 Aug 2008 05:40:21 +0000 unijimpe http://blog.unijimpe.net/?p=874 Como comentabamos hace poco en JSON con Mootools, JSON es un formato para intercambio de datos que a diferencia de XML es mucho mas ligero pues se transmite la información como un objeto Javascript. En …

]]> Como comentabamos hace poco en JSON con Mootools, JSON es un formato para intercambio de datos que a diferencia de XML es mucho mas ligero pues se transmite la información como un objeto Javascript. En esta oportunidad veremos como utilizar JSON con Flash.

Obteniendo los Datos
Los datos en formato JSON para nuestro ejemplo lo obtendremos del servicio Google Ajax Search API del cual hemos comentado en un post anterior, para ello creamos un proxy el cual se encargará de hacer el cambio de dominio para poder acceder a esta información.

  1. $apiQue = "Google"; // variable a consultar
  2. $apiKey = "tu_key_google"; // key para acceder al servicio
  3. $apiUrl = "http://ajax.googleapis.com/ajax/services/search/web";
  4. if (isset($_GET['query'])){
  5.    $apiQue = urlencode($_GET['query']);
  6. }
  7. readfile($apiUrl."?v=1.0&key=".$apiKey."&q=".$apiQue);

Utilizando JSON con ActionScript 3
Por defecto Flash no puede interpretar JSON, pero para ello utilizaremos la librería as3corelib el cual contiene una gran variedad de clases para extender la funcionalidades del AS3 entre ellas un parser de JSON. Entonces descargamos los archivos y utilizamos las clase ubicadas en la carpeta com.

En nuestro archivo fla lo primero que hacemos es importar las clases necesarias para el funcionamiento de nuestro script.

  1. import com.adobe.serialization.json.*;

Lo siguiente es leer el archivo que contiene la respuesta en JSON del servidor, esto lo hacemos con la clase URLLoader, luego agregamos un listener para detectar que se ha completado la carga para luego ejecutar la función decodeJSON.

  1. var loader:URLLoader = new URLLoader() ;
  2. var request:URLRequest = new URLRequest() ;
  3. request.url = "proxy.php?query=unijimpe";
  4. loader.load(request) ;
  5. loader.addEventListener(Event.COMPLETE, decodeJSON) ;

Luego definimos al función decodeJSON, la cual se ejecutará inmediatamente después de completarse la carga de los datos, aquí utilizamos el método JSON.decode el cual se encarga de convertir el texto en formato JSON a un objeto que sera fácilmente manipulable con ActionScript.

  1. function decodeJSON(event:Event):void {
  2.    var loader:URLLoader = URLLoader(event.target); 
  3.    var data:Object = JSON.decode(loader.data);
  4.    var results = data.responseData.results;
  5.    for (var i=0; i<results.length; i++) {
  6.       var tmp = results[i];
  7.       trace(i + " --> " + tmp.title + "\n" + tmp.url);
  8.    }
  9. }

Unimos estos elementos y tenemos un parser de JSON de manera sencilla, como podemos ver lo que se hace es convertir el texto cargado en un objeto que es muy fácil de manipular en Flash.

Completando nuestra aplicación
En el ejemplo anterior, solo hemos trazado los resultados, es momento de agregar un campo de texto para ingresar el criterio de búsqueda y otro campo de texto para mostrar los resultados, con lo cual obtenemos el siguiente código.

  1. import com.adobe.serialization.json.*;
  2.  
  3. var vPath:String = "proxy.php?query=";
  4. var vRequ:URLRequest = new URLRequest();
  5. var vLoad:URLLoader = new URLLoader();
  6. vRequ.url = vPath+"unijimpe";
  7. vLoad.load(vRequ);
  8. vLoad.addEventListener(Event.COMPLETE, onLoaded);
  9.  
  10. function onLoaded(event:Event){
  11.    var rpta:URLLoader = URLLoader(event.target);   
  12.    var json:Object = JSON.decode(rpta.data);
  13.    var data:Array = json.responseData.results;
  14.    var vcon:String = "";
  15.    for (var i:Number=0; i<data.length; i++) {
  16.       var tmp = data[i];
  17.       vcon+= "<a href='"+tmp.url+"'>"+tmp.title+"</a>";
  18.       vcon+= "<br>"+tmp.content+"<br><br>";
  19.    }
  20.    txtcontent.htmlText = vcon;
  21.    scroller.scrollTarget = txtcontent;
  22. }
  23.  
  24. btsearch.addEventListener(MouseEvent.CLICK, onClick);
  25. btsearch.buttonMode = true;
  26. function onClick(e:Event) {
  27.    txtcontent.htmlText = "Loading...";
  28.    vRequ.url = vPath+escape(txtQuery.text);
  29.    vLoad.load(vRequ);
  30. }

El resultado de este ejemplo lo pueden ver al inicio de este post, como se observa ingresamos el criterio de búsqueda y obtenemos el resultado deseado. Finalmente les dejo los archivos fuente de este ejemplo para que lo descarguen y puedan realizar sus pruebas.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/json-con-flash/feed/ 2 Precarga multiple en AS3http://blog.unijimpe.net/precarga-multiple-en-as3/ http://blog.unijimpe.net/precarga-multiple-en-as3/#comments Tue, 03 Jun 2008 04:49:05 +0000 unijimpe http://blog.unijimpe.net/?p=855 BulkLoader es una clase escrita en AS3 que te permitirá cargar y manejar múltiples archivos de manera sencilla. Esta clase te permitirá cargar múltiples archivos de diferente tipo en una interface unificada, accediendo a los eventos …

]]> BulkLoader es una clase escrita en AS3 que te permitirá cargar y manejar múltiples archivos de manera sencilla. Esta clase te permitirá cargar múltiples archivos de diferente tipo en una interface unificada, accediendo a los eventos de carga en la misma instancia.

Utilizando BulkLoader
Lo primero es descargar la ultima versión de BulkLoader, extraen los archivos y en la carpeta src se encuentran las clases necesarias para el uso de esta librería.

Lo primero es importar las clases BulkLoader y BulkProgressEvent y posteriormente creamos una instancia de la clase BulkLoader, al cual le asignamos un nombre, en este caso mainLoader:

  1. import br.com.stimuli.loading.BulkLoader;
  2. import br.com.stimuli.loading.BulkProgressEvent;
  3.  
  4. var loader:BulkLoader = new BulkLoader("mainLoader");

A continuación agregamos los items o elementos que deseamos cargar, pueden ser archivos jpg, gif, png, xml, mp3, flv, etc. Para ello utilizamos el método add donde asignamos la ruta a cargar y un nombre de id para recuperar los datos cargados posteriormente.

  1. loader.add("background.jpg", {id: "bg"});
  2. loader.add("menu.xml", {id:"menu"});
  3. loader.add("sound.mp3", {id: "sound"});

El siguiente paso es agregar los detectores de eventos o listeners (COMPLETE, PROGRESS, ERROR) con los cuales podemos detectar el progreso de la carga y el termino de la misma.

  1. // para la carga de todos los archivos
  2. loader.addEventListener(BulkLoader.COMPLETE, onLoaded);
  3. loader.addEventListener(BulkLoader.PROGRESS, onProgress);
  4. loader.addEventListener(BulkLoader.ERROR, onError);
  5. // para la carga de uno de los elementos
  6. loader.get("bg").addEventListener(Event.COMPLETE,onBgLoaded);
  7. loader.get("bg").addEventListener(Event.PROGRESS,onBgProgress);
  8. loader.get("bg").addEventListener(Event.ERROR,onBgError);

Luego iniciamos la carga utilizando el método start.

  1. loader.start();

Finalmente implementamos las funciones asociadas a los detectores de eventos y obtenemos los archivos cargados, para ello podemos utilizar getBitmap, getSound, getXML, getText, getNetStream, getSound, getMovieClip de acuerdo al archivo que estemos cargando.

  1. function onLoaded(evt:Event) {
  2.    // extraemos la imagen
  3.    var mcBg:Bitmap = loader.getBitmap("bg");
  4.    addChild(mcBg);
  5.    // extraemos el sonido
  6.    var sonido:Sound = loader.getSound("sound");
  7.    sonido.play();
  8.    // extraemos el XML
  9.    var xmlMenu:XML = loader.getXML("menu");
  10.    trace(xmlMenu);
  11. }

Luego uniendo todos los elementos, obtenemos nuestro precargador de múltiples archivos.

  1. import br.com.stimuli.loading.BulkLoader;
  2. import br.com.stimuli.loading.BulkProgressEvent;
  3.  
  4. var loader:BulkLoader = new BulkLoader("mainLoader");
  5. loader.add("background.jpg", {id: "bg"});
  6. loader.add("menu.xml", {id:"menu"});
  7. loader.add("sound.mp3", {id: "sound"});
  8.  
  9. loader.addEventListener(BulkLoader.COMPLETE, onLoaded);
  10. loader.addEventListener(BulkLoader.PROGRESS, onProgress);
  11.  
  12. function onLoaded(evt:Event) {
  13.    // extraemos la imagen
  14.    var mcBg:Bitmap = loader.getBitmap("bg");
  15.    addChild(mcBg);
  16.    // extraemos el sonido
  17.    var sonido:Sound = loader.getSound("sound");
  18.    sonido.play();
  19.    // extraemos el XML
  20.    var xmlMenu:XML = loader.getXML("menu");
  21.    trace(xmlMenu);
  22. }
  23. public function onAllItemsProgress(evt:BulkProgressEvent) {
  24.    trace(evt.bytesLoaded + " - " + evt.bytesTotal);
  25. }

Como pueden ver es muy sencillo el uso de esta clase y puede facilitar y ahorrar tiempo en la implementación de sitios con acceso a múltiples tipo de datos.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/precarga-multiple-en-as3/feed/ 4 Precargar archivos en AS3http://blog.unijimpe.net/precargar-archivos-en-as3/ http://blog.unijimpe.net/precargar-archivos-en-as3/#comments Tue, 27 May 2008 05:19:51 +0000 unijimpe http://blog.unijimpe.net/?p=845 ActionScript 3 trae nuevos métodos, propiedades y eventos para implementar nuestras aplicaciones, en esta ocasión crearemos un precargador de archivos en AS3, para ello ahora estan disponibles nuevas clases: URLRequest y Loader.

La clase URLRequest…

]]> ActionScript 3 trae nuevos métodos, propiedades y eventos para implementar nuestras aplicaciones, en esta ocasión crearemos un precargador de archivos en AS3, para ello ahora estan disponibles nuevas clases: URLRequest y Loader.

La clase URLRequest nos permitirá asignar el archivo que deseamos cargar y la clase Loader nos permitirá hacer el seguimiento en el proceso de la carga.

  1. var mcRequ:URLRequest = new URLRequest("image.jpg");
  2. var mcLoad:Loader = new Loader();

Luego de ello iniciamos la carga del archivo utilizando el método load de la clase Loader.

  1. mcLoad.load(mcRequ);

Luego el siguiente paso es agregar los detectores de eventos, en esta caso detectaremos el inicio de la carga, el progreso de la carga y el fin de la carga.

  1. mcLoad.contentLoaderInfo.addEventListener(Event.OPEN, onOpen);
  2. mcLoad.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
  3. mcLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

Nótese que hemos agregado las funciones onOpen, onProgress y onComplete que se ejecutarán al inicio, progreso y fin de la carga. Entonces lo que hace falta es implementar estas funciones.

  1. function onOpen(event:Event):void {
  2.     txtload.text = "CARGANDO 0%";
  3. }
  4. function onProgress(event:ProgressEvent):void {
  5.     var bLoad = event.bytesLoaded;
  6.     var bTot = event.bytesTotal;
  7.     txtload.text = "CARGANDO "+Math.round(100*bLoad/bTot)+"%";
  8. }
  9. function onComplete(event:Event):void {
  10.     txtload.text = "";
  11.     mcclip.addChild(mcLoad);
  12.     mcclip.width = 400;
  13.     mcclip.height = 134;
  14. }

En este paso hay que notar como se obtienes los valores de los bytes cargados (bytesLoaded) y los bytes totales (bytesTotal) para hacer el calculo del porcentaje de carga. Además de ello txtload es un campo de texto y mcclip un MovieClip que están en el Stage en donde se cargará la imagen. Finalmente una vez cargado la imagen la agregamos al MovieClip mcclip y luego lo escalamos para que encaje en nuestra película.

Uniendo todos los elementos, tenemos nuestro precargador de archivos en ActionScript 3, el cual fácilmente se puede convertir en una clase para poder utilizarla para precargar cualquier archivo.

  1. var mcRequ:URLRequest = new URLRequest("image.jpg");
  2. var mcLoad:Loader = new Loader();
  3.  
  4. mcLoad.load(mcRequ);
  5. mcLoad.contentLoaderInfo.addEventListener(Event.OPEN, onOpen);
  6. mcLoad.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
  7. mcLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
  8. function onOpen(event:Event):void {
  9.     txtload.text = "CARGANDO 0%";
  10. }
  11. function onProgress(event:ProgressEvent):void {
  12.     var bLoad = event.bytesLoaded;
  13.     var bTot = event.bytesTotal;
  14.     txtload.text = "CARGANDO "+Math.round(100*bLoad/bTot)+"%";
  15. }
  16. function onComplete(event:Event):void {
  17.     txtload.text = "";
  18.     mcclip.addChild(mcLoad);
  19.     mcclip.width = 400;
  20.     mcclip.height = 134;
  21. }

Como pueden ver, no es muy complicado solo hay que entender la logica de funcionamiento de AS3 y el correcto uso de los detectores de eventos. Para finalizar les dejo los archivos fuentes para que puedan descargar y hacer sus pruebas.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/precargar-archivos-en-as3/feed/ 5 Como utilizar Flashvarshttp://blog.unijimpe.net/como-utilizar-flashvars/ http://blog.unijimpe.net/como-utilizar-flashvars/#comments Mon, 28 Apr 2008 00:23:28 +0000 unijimpe http://blog.unijimpe.net/?p=821 Flashvars es un propiedad de Flash Player que ofrece un método eficaz para enviar variables desde HTML al archivos SWF, esta función fue implementada a partir de Flash Player 6, en esta ocasión veremos como utilizarla …

]]> Flashvars es un propiedad de Flash Player que ofrece un método eficaz para enviar variables desde HTML al archivos SWF, esta función fue implementada a partir de Flash Player 6, en esta ocasión veremos como utilizarla en AS2 o AS3.

Pasando variables FlashVars
Si estas usando el método tradicional de insertar SWFs, pueden asignarlos en un parámetro adicional al cual deben llamar flashvars y cuyo valor debe contener todas las variables a pasar codificadas en url.

  1. <object width="200" height="100">
  2.    <param name="movie" value="movie.swf" />
  3.    <param name="FlashVars" value="var1=valor1&var2=valor2" />
  4.    <embed src="miSwf.swf" width="100" height="100
  5.     FlashVars="var1=valor1&var2=valor2"/>
  6. </object>

Si estas utilizando SWFObject, puedes pasar las variables separadas utilizando el método addVariable, entonces el ejemplo anterior se vería de la siguiente forma:

  1. <script type="text/javascript">
  2. var so = new SWFObject("movie.swf", "my", "200", "100", "8", "");
  3. so.addVariable("var1", "valor1");
  4. so.addVariable("var2", "valor2");
  5. so.write("divmovie");
  6. </script>

Accediendo a FlashVars desde AS2
Cuando uno utiliza Flashvars, estas pasan a ser variables del _root de nuestra película principal. Luego podemos acceder de manera sencilla a estas variables anteponiendo la palabra _root.

  1. trace(_root.var1); // imprime "valor1"
  2. trace(_root.var2); // imprime "valor2"

Accediendo a FlashVars desde AS3
En AS3 las variables externas están contenidas en la propiedad LoaderInfo, entonces lo primero es tomar esta propiedad de la cual extraemos las variables contenidas en el método parameters.

  1. var param:Object = LoaderInfo(this.root.loaderInfo).parameters;
  2. trace(param["var1"]); // imprime "valor1"
  3. trace(param["var2"]); // imprime "valor2"

Como pueden observar es sencillo de acceder a estas variables, esto es muy practico cuando deseamos comunicar datos entre HTML y Flash.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.


]]> http://blog.unijimpe.net/como-utilizar-flashvars/feed/ 24