Flex, AS3, AS2, flash, css
Archivo de octubre, 2007
Flex 2. Mapa del tiempo.
26 oct
Vamos a realizar un mapa del tiempo interactivo para mostrar cómo acceder a la biblioteca de un archivo swf (película Flash) desde Flex e instanciar sus símbolos.
Flash CS3. Acceder a la biblioteca y a las animaciones contenidas en un archivo swf desde AS3
22 oct
La clase “Loader” de ActionScript 3 permite cargar archivos swf (películas de Flash) dentro de la aplicación que estemos desarrollando. Finalizada la descarga, a través de la propiedad “content” podemos acceder a cualquier elemento del archivo swf, ya sean símbolos de la biblioteca, objetos instanciados o animaciones.
Nos vamos a servir de un ejemplo que muestra el contenido de un archivo Xml en forma de menú para mostrar las posibilidades de esta clase. Toda la parte gráfica y de animación se obtendrá del archivo “Biblioteca.swf” que cargamos con un “Loader”.
Junto al código fuente encontrarás el archivo “Fla” donde se han realizado las animaciones que aparecen en el menú.
Como firmar un Applet — VNCViewer
19 oct
Java implementa en sus applets un modelo de seguridad por capas del tipo ‘sandbox’. Esto provoca que muchos desarrolladores se encuentren incapaces de escribir aplicaciones realmente útiles al no poder leer/escribir en disco o de abrir conexiones a otras máquinas.
Para conseguir que un applet tenga verdadera funcionalidad, los usuarios de la aplicación Java tienen que garantizarle el acceso a los recursos. Para realizar este proceso, los usuarios necesitan un mecanismo que les permita saber de dónde (de quién) proviene el applet al que van a permitir acceso a su sistema.
A continuación explicaremos como firmar applets para que se puedan ejecutar sin restricciones en el sistema del usuario, siempre que el usuario confíe en el autor de la firma del applet.
VNCViewer Applet
Para el ejemplo utilizaremos una aplicación muy útil y extendida en internet como es VncViewer.
VncViewer es un applet implementado por el proyecto TightVNC, que posibilita la conexión a un servidor VNC.
Nuestro objetivo era desligar el applet VncViewer del programa servidor con el que se distribuye, y alojarlo en un servidor web de manera independiente, con el fin de tener un cliente VNC que nos posibilitara conectarnos a cualquier servidor.
Al realizar las primeras pruebas, hemos comprobado que no funcionaba alegando un problema de seguridad.
Para solucionarlo sólo tenemos que firmar el applet.
¿Como firmar un applet?
Para firmar un applet necesitaremos 2 pequeños programas: keytool y jarsigner. Estos programas no están disponibles en las distribuciones del jdk más modernas. Yo los encontré en la distribución java sdk 1.5.0_06.
El primer paso es utilizar la herramienta keytool crea un par de claves públicas y privadas. Le daremos una validez de 365 días. Y le asignaremos un alias a nuestra elección, en este caso ‘coconnut’.
keytool -genkey -alias coconnut -validity 365 -v
Una vez generado el par de claves, utilizaremos el programa jarsigner para firmar nuestro applets. Para ello habrá que especificarle al nombre del jar a firmar y el alias del conjunto de claves creado con anterioridad.
jarsigner nombre.jar coconnut -verbose
Una vez firmado, podremos ejecutar nuestro applet sin restricciones. Siempre que el usuario confíe en el autor de la firma.
Ejemplo
flex 2 + cairngorm 2.2.1 + amfphp – WHATISMYIP con amfphp
16 oct
El típico WHATISMYIP en flex. Para implementarlo he usado el framework cairngorm y amfphp.
Amfphp es un RPC que nos permite comunicar datos entre el cliente (Flash, Flex, …) y el servidor (PHP).
Esta es la clase PHP que utiliza el programa:
[ftf w="640" h="230"] /* Ip.php */
class Ip {
function Ip() {
$this->methodTable = array(“getIP” => array(“description” => “Get IP..”, “access” => “remote”, “return” => “array”,));
}
function getIP() {
$rest = array();
$sIP = $_SERVER [ 'REMOTE_ADDR' ] ;
array_push($rest, $sIP);
return $rest;
}
}
?>
/* Ip.php */[/ftf]
Como se puede ver en el código hay que añadir una tabla de métodos que describa todos los métodos de la clase.
El archivo hay que instalarlo en nuestro servidor AMFPHP, dentro de las carpetas yourserver.com/amfphp/services/com/coconnut/common/Ip.php
Flex 2. Efecto de profundidad de campo con Papervision 3D y el filtro BlurFilter
15 oct
En este ejemplo vamos a aprovechar las posibilidades que ofrece el filtro “BlurFilter” para simular el desenfoque que se produce en una cámara real debido a la profundidad de campo.
Ver ejemplo y código fuente >>
La clase que implementa el efecto se encuentra en el paquete jel.com.efectos:
EfectoDesenfoque.as
Por su volumen, las clases de Papervision 3D necesarias no van en el código fuente. Puedes descargarlas del siguiente enlace:
Descarga clases Papervision 3D
Descargar biblioteca compilada Papervision3D 1.7 >>
Para simular el efecto de profundidad de campo (a mayor apertura de diafragma, menor profundidad de campo, reduciendose la extensión de espacio en el que los objetos aparecen enfocados) hemos repartido aleatoriamente por un espacio 3D, unas esferas semitransparentes a las que aplicamos un filtro “BlurFilter” más o menos intenso dependiendo de su lejanía o proximidad a la cámara.
Las esferas no son objetos 3D, sino sprites (objetos planos con aspecto de esfera) que miran constantemente a la cámara. Este truco permite llenar el espacio con multitud de esferas sin saturar la capacidad de cálculo de Flash player.
Para girar las esferas en el espacio nos hemos servido de unos “dummys” (DisplayObject3D vinculados a un “nodoRaiz”, que es el que realmente rotamos) que tienen la misma posición en el espacio que las esferas. Así, como todos los “dummys” son hijos de “nodoRaiz”, al girar este último giran con él y actualizan la posición de los sprites esféricos.
Guía de Migración y hojas de referencia AS3
15 oct
Aquí tenéis una guia de migracion de AS2 a AS3.
y unas hojas de referencia para AS3 de Papervision y de AIR
Flex 2 + Cairngorm 2.2.1 – Image Explorer
14 oct
Cairngorm es un framework estructural para el desarrollo de RIAs que fomenta el uso de determinados patrones y potencia la escalabilidad y el crecimiento de las aplicaciones. Es ideal para el desarrollo de grandes aplicaciones en las que colaboren varios desarrolladores.
Podeis encontrar más información en:
http://www.madeinflex.com/2006/10/15/cairngorm-i-introduccion/
http://labs.adobe.com/wiki/index.php/Cairngorm
La aplicación de ejemplo es un explorador de imagenes configurado a través de XML.
Flex 2. Ejemplo de utilización de Papervision 3D en Flex.
8 oct
Vamos a crear una pequeña aplicación en Flex que muestra un album de fotografías en un entorno 3D. Nos va a servir de excusa para desarrollar una aplicación basada en Papervision 3D (public alpha 2.0, Great White).
Ver ejemplo y código fuente >>
Si quieres conocer más sobre este nuevo proyecto puedes visitar la página oficial de Papervision 3D o su blog.
En el código fuente encontrarás todas las clases necesarias para desarrollar una aplicación basada en Papervision 3D. Si te quieres bajar la última versión estable de las mismas puedes hacerlo desde la página de descarga del proyecto:Clases Papervision 3D >>
Si te has descargado el código fuente, sigue los siguientes pasos :
1. Crea un proyecto Flex.
2. Descomprime el archivo zip dentro de la carpeta del proyecto.
3. Define el documento Galeria.mxml como la aplicación por defecto para el proyecto Flex.
Para no hacer muy pesada la descarga, las imágenes que aparecen en la galería no se han añadido al archivo zip. Si repasas el código verás que la aplicación lee un archivo xml del que extrae una lista de imágenes: debes crearte uno similar con la ruta de las que quieras utilizar.
Flex 2 Como usar el History Manager
4 oct
El HistoryManager nos permite salvar el estado de nuestra aplicación en un momento dado de manera que podamos volver a ese estado utilizando el boton retroceder y avanzar de nuestro navegador.
Para ponerlo en funcionamiento hay que implementar el interface mx.managers.IHistoryManagerClient y registrar los componentes utilizando HistoryManager.register.
