DeCabeza.net » ActionScript3

Nuevo Video: Creando una Galería de imágenes estilo Picasa

sguidobono — Fri, 16 Jul 2010 00:48:28 +0000

En este video muestro como armar una galería de imágenes al estilo Picasa usando un XML y JPGs externos.
También vemos como asignar clases a elementos de la libreria e interactuar con ellos y las clases.

Nuevo Video: Creando una Galería de imágenes estilo Picasa

Comparte este artículo:

LoaderMax, el nuevo cargador inteligente en AS3 de GreenSock

sguidobono — Thu, 17 Jun 2010 01:14:50 +0000

Acabo de ver un Twitt de @tweenlite donde anuncian un nuevo paquete de clases llamado LoaderMax. Obviamente no tardé ni 5 segundo en entrar a ver de que se trata… y dejenme decirles que parece excelente!

No tuve tiempo de investigarlo mucho, ya que recién lo descubrí, pero por los ejemplo de código y swf que hay en la página parece que va a solucionar y optimizar mucho la creación de preloader o cargadores multiples y simples.

Características a primera vista:

Muy liviano, mucho más que otros sistemas similare o lo que uno puede generar
Integración entre multiples cargas (esto es muy útil y molesto cuando hay que hacerlo)
Análisis automático con la carga via XML (detecta nodos especiales de la libreria y genera acciones, tengo que investigar aún)
Muestra la carga de archivo más pequeños que la mayoria (7k minimo)
Anidar cargas tantas veces como uno quiera
Estableces ancho y alto de la imagen, video o swf y LoaderMax se encarga de acomodarla
Comodidades como suavizado de imágenes, centrar punto de registro, autoplay, nocache, etc
Cambiar la prioridad de cargadores en cualquier momento
Sistema de eventos robusto
Pausar y resumir las cargas
Y mucho más!

Link: LoaderMax de GreenSock

Comparte este artículo:

10 Videos para entender y empezar a usar Flash Catalyst

sguidobono — Wed, 26 May 2010 15:31:08 +0000

AdoveTv publicó 10 videos muy interesantes para entender y empezar a usar Flash Catalyst, una herramienta muy útil para algunos proyectos, que nos permitira optimizar los tiempos de desarrollo…

Welcome to Flash Catalyst (2:40)
Creating a simple wireframe (7:44)
Building multipage wireframes (7:14)
Using the wireframe drawing tools (14:32)
Designing components from wireframe artwork (12:33)
Adding motion and flow using transitions (9:54)
Making iterative changes to your wireframe (7:25)
Building a visual design using Creative Suite 5 (16:10)
Optimizing and publishing your project (6:31)
Partnering with a developer (7:45)

Comparte este artículo:

Prerelease del SDK de Adobe AIR para Android

sguidobono — Fri, 21 May 2010 20:07:04 +0000

Hoy se publicó en el Labs de Adobe la versión beta del SDK de Android, con la que podremos compilar aplicaciones nativas (. APK) para el sistema operativo Android.

En un futuro cercano podremos incluir estas apliacciones en el Market de Android. Lo bueno de esto es que podemos reutilizar proyectos en ActionScript 3, compilandolos con el nuevo SDK

Contenido en ingles
Videos de Demostración
Ejemplos de Aplicaciones
Preguntas Frecuentes

Comparte este artículo:

Componentes para flash gratis

sguidobono — Tue, 09 Mar 2010 18:25:56 +0000

Si estás necesitando componentes para tu aplicación en Flash y no te convencen o alcanzan los que el IDE de Flash te ofrece, este articulo te puede servir.
Minimalcomps se trata de un sitio que provee de forma gratuita un completo set de componentes para Flash. Cuenta con textbox, sliders, controladores de volumen y muchísimos más.

Para utilizarnos contamos con una documentación completa haciendo más simple nuestro trabajo. Así que si estan interesados pueden entrar aquí a verla.

Web: Minimalcomps
Descarga: Set Componentes – (documentación)

Comparte este artículo:

Realidad Aumentada, una realidad en aumento

sguidobono — Thu, 07 Jan 2010 03:29:04 +0000

En lo que fue el 2009 se habló mucho y hubo pruebas de todo tipo, y hasta algunas empresas se animaron a usar la Realidad Aumentada. Esta tecnología se conoce o imagina desde hace muchísimos años. Simplemente nombrando los visores de Chi de Dragon Ball, ya vemos como la gente imaginaba algo que ya es una realidad. Precaria, pero realidad al fin.

En lo que es el 2010 no hay duda que esta tecnología va a aparecer por todos lados. Obviamente, está creciendo, por lo que no pretendamos algo futuristico, pero quien sabe. Lo seguro es que se hablara más que en el 2009 y se verán cosas nuevas y asombrosas.

Para el que no sabe que es la Realidad Aumentada, se trata de una tecnología de superposición de capas sobre video. Dando la posibilidad de ver información en el video sobre la realidad. Por eso mismo su nombre, porque aumenta la realidad y le agrega elementos, tanto información como cualquier cosa.
La utilidad más grande de esto es implementarlo a los dispositivos móviles, para poder tener información en todo momento. Hay un proyecto llamado Layar desarrollado para iPhone y Android que ya podemos bajar gratis para empezar a conocer y ver de qué se trata esto.

Layar nos permite ver a través de la cámara de nuestro celular elementos superpuestos sobre la realidad. Por ejemplo en “Abbey Road”, Londres podemos ver a los Beatles sobre la famosa peatonal en 3D como si estuvieran ahí.

En la página de Layar podemos ver 4 opciones para empezar a probar el desarrollo sobre esta aplicación. Django-layar de James Turk, PorPOIse de Jen de Smit, LayarDoNet de Dylan Philips y Programmer Joe de Joe Ludwig.

Por otro lado totalmente distinto la Realidad Aumentada se uso bastante en la Web en el 2009. Para promocionar autos, películas y mucho más. Para ello una de las mejores opciones es ActionScript 3, PaperVision3D y la librería FLARToolKit. La cual nos permite con un patrón impreso sobre un papel y una webcam, generar elementos sobre el papel, con la posibilidad de mover el mismo, moviendo al mismo tiempo el objeto virtual.

Les dejo a continuación algunos videos de ejemplos y prometo en un futuro algunos tutoriales sobre el tema.

Ejemplo de Layar3D en un celular

Ejemplo de ActionScript3 con PaperVision3D y FLARToolKit

Ejemplo de aplicación de Realidad Aumentada sobre iPhone

Comparte este artículo:

Nuevas características que tendrá Adobe Flash CS5

sguidobono — Tue, 05 Jan 2010 14:09:26 +0000

La próxima versión del tan conocido Flash será la CS5 y viene con muchísimas novedades más que bienvenidas.
Muchas de las que nombre seguramente las hayan leído o escuchado por otros Blogs, pero mi idea es unirlas todas para tener un vistazo general de que nos espera.

Preview de videos en stage
Una de las novedades es que al importar un video al stage vamos a poder ver la preview de como se vería, o sea ver el primer frame del video en el player. Pero eso no es todo, ya que podemos darle play, pausa, moverlo mientras corre y demás. Todo dentro del Flash.
Esto puede ser muy útil a la hora de acomodar un video con el diseño, o si usamos un video con transparencia para acomodarlo correctamente con el entorno.
Además nos permite personalizar fácilmente los skins predeterminados de Flash.

Paquete de desarrollo para iPhone
La más conocidad de las novedades es la posibilidad de generar aplicaciones para iPhone, algo que todos estamos esperando probar y usar, pero ya se habló mucho por otros lados de esto.

Mejora de ventana de importacion de caracteres
Otra de las novedades es respecto al texto. En este punto el Flash CS5 va a ser un salto que venimos esperando hace mucho, que es mejorar el manejo de texto.
Por un lado el panel de “embed” o importar nuestras Fuentes cambió sustancialmente. En el podemos ver las fuentes ya importadas y reutilizarlas sin necesidad de importarlas para cada caja de texto.

Unión de cajas de texto
Siguiendo con el texto, esta nueva versión de Flash trae la posibilidad de linkear cajas de texto. ¿A que me refiero con esto? Bueno, podemos tener 3 cajas de texto separadas y unirlas de tal forma que al pegar un texto en la primera continúe en las demás. Como se ve en la imagen.

Columnas en texto
También tenemos la posibilidad de dividir en columnas nuestro texto, dentro de la misma caja de texto. Otra opción de la cual se venía hablando hace rato en Adobe.

Idiomas Orientales
Otra novedad con respecto al texto es la compatibilidad 100% con caracteres e idiomas como japonés, árabe y demás. Respetando su orientación de lectura y otras utilidades.

DOM del proyecto en XML
También contamos con DOMDocumente.xml, un archivo que se genera con cada proyecto donde podemos ver en formato XML todo nuestro proyecto en detalle. Fuentes importadas, Multimedia usada (fotos, videos), propiedades de la película y prácticamente todo sobre el proyecto está ahí.

Atajos de código
Por otro lado, contamos con un panel de atajos de código, o Code Snippets. Con solo buscar y arrastrar ya tendremos escrito un bloque de código, como podrían ser, animaciones, loads, eventos, arrastrar un elemento y muchas cosas más.
También mejoraron muchísimo el panel de código, agregando la función de tener la ayuda al escribir de todas las clases que usamos en el proyecto, al estilo Flex.

Flash y Flash Builder
La unión con Flash Builder (ex Flex) también mejoro, ya que con definir una “Main Class” en el stage de Flash, podemos elegir si vamos a trabajar el código desde el mismo Flash o si preferimos usar Flash Builder (100% recomendable). De esta forma quedan unidos, con la comodidad de dar Ctrl + Enter en Flash Builder y que compile y abra en Flash. Y al cerrar la ventada de compilación, volvemos al Flash Builder.
Actualmente esta forma de trabajar yo la uso con FlashDevelop, pero no duden que me cambiaré a Flash y Flash Builder cuando lo tenga en mis manos.

Historial de SWF
Para finalizar les cuento que también hay un historial del SWF, el cual nos muestra como va aumentando o disminuyendo su peso el SWF según las cosas que vamos agregándole, sean imágenes, videos , fuentes u otros elementos.

Vale aclarar que hay muchísimas mejoras más, pero acá solo les conté las que personalmente me parecen más destacables.
Espero les sirvan y espero comentarios sobre que les parecen y que otra cosa agregarían.

Fuente: GotoAndLearn

Comparte este artículo:

De MonsterDebugger – debugger para Flash, Flex y AIR

sguidobono — Wed, 30 Dec 2009 13:57:06 +0000

Esta es una herramienta que uso hace bastante tiempo, y hace rato quiero escribir sobre ella. Hoy es el día.
De MonsterDebugger es, como el título lo dice, un debugger open source para Flash, Flex y AIR desarrollado por el estudio De Monsters en Flex y AIR.

Con esta herramienta podemos hacer trace de cadenas, números, objetos, matrices, XML e incluso clases personalizadas.

Una de las características que más uso, y creo más útil es la del “trace en vivo”, que nos permite ver los trace del debugger en nuestra aplicación o página corriendo fuera del flash.
Esta utilidad es excelente para hacer pruebas online o para tener el registro de errores sin necesidad de abrir el flash y ver qué pasa.

Otra característica interesante del debugger es poder modificar propiedades de nuestro proyecto en tiempo de ejecución. O sea, mientras vemos nuestra página ya publicada, podemos desde el panel del debugger, cambiar las propiedades que queramos, como rotación, tamaño o la variable que queramos y ver su efecto en vivo y en directo. Algo útil e interesante.

También, siguiendo con las acciones en vivo, podemos ejecutar nuestras funciones o métodos para probarlas en cualquier momento mientras vemos el proyecto ya compilado, también extremadamente útil.

¿Cómo funciona:
Les dejo 4 pasos básicos publicados en la página del debugger para empezar a usarlo.

1. En primer lugar es necesario tener Adobe AIR instalado.
2. Una vez descargado De MonsterDebugger basta con abrir la descarga y AIR hará el resto.
3. Una vez que esté funcionando De MonsterDebugger, necesita importar las clases de cliente para establecer la conexión con De MonsterDebugger. Las clases de cliente está incorporado en De MonsterDebugger y se pueden guardar en cualquier ubicación seleccionando Archivo> Exportar cliente de clase. Guarde la carpeta en la carpeta raíz de su aplicación o donde tengas tus clases.
4. Ahora todo lo que tiene que hacer es importar la clase en tu proyecto. A continuacion ejemplos de Flash y Flex.

Ejemplo Flash:

^?Ver código ACTIONSCRIPT

package {
 
	import flash.display.Sprite;
        // Importamos el debugger
	import nl.demonsters.debugger.MonsterDebugger;
 
	public class Main extends Sprite {
 
		// creamos la instancia del debugger
		private var debugger:MonsterDebugger;
 
		public function Main() {
 
			// iniciamos el debugger
			debugger = new MonsterDebugger(this);
 
			// enviamos un simple trace
			MonsterDebugger.trace(this, "Hello World!")
		}
	}
}

Ejemplo Flex:

^?Ver código ACTIONSCRIPT

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
	<mx:Script>
		[CDATA[
 
		// Importamos el debugger
		import nl.demonsters.debugger.MonsterDebugger;
 
		// creamos la instancia del debugger
		private var debugger:MonsterDebugger;
 
		private function onInit():void
		{
			// iniciamos el debugger
			debugger = new MonsterDebugger(this);
 
			// enviamos un simple trace
			MonsterDebugger.trace(this, "Hello World!");
		}
		]]>
	mx:Script>
mx:Application>

Link: De MonsterDebugger
Descarga: MonsterDebugger version 2.5.1 (incluye ejemplos)

Comparte este artículo:

Usar Google Map con ActionScript 3

sguidobono — Thu, 10 Dec 2009 18:58:08 +0000

Usar Google Map con ActionScript 3

En este video mostramos como agregar Google Map en nuestro proyecto con ActionScript 3, usando el API que Google nos proporciona.
Vemos como agregar los controles del mapa y como agregar una marca.

Comparte este artículo:

Como funciona BasicView de PaperVision 3D 2.0

sguidobono — Tue, 06 Oct 2009 15:29:14 +0000

En este tutorial quiero mostrarles como funciona la clase BasicView de PaperVision 3D 2.0.
Esta clase nos facilita muchisimo a la hora de empezar un nuevo proyecto con esta herramienta.

En proyectos de PV3D se repiten siempre varias acciones, como importar clases básicas como Camera, Scene, Viewport, etc.
También repetimos la creacion de funciones que son si o si necesarias. Como la que renderize nuestra escena en un enterFrame o la que inicie todo los objetos. Por eso, la gente de PV3D decidió acertadamente crear esta clase incluida en la versión 2.0. que se puede extender en cualquier clase y nos ahorra todos esos pasos comentados.

Acá les dejo un ejemplo de como se usaría, explicando en los comentarios algunos detalles:

^?Ver código ACTIONSCRIPT

package {
    import flash.events.Event;
    import org.papervision3d.view.BasicView; // importamos la clase
 
    public class ClasePrueba extends BasicView // extendemos nuestra clase a BasicView
    {
        public function ClasePrueba ()
        {
            stage.frameRate = 40; //seteamos los cuadros por segundos.
            init(); // este metodo inicia todos los elementos.
            startRendering(); // comenzamos a renderizar.
        }
 
        private function init():void
        {
            // dentro de este metodo creamos todos los elemento 3d y demás cosas antes de empezar a renderizar.
        }
 
        override protected function onRenderTick(e:Event=null):void
        {
            // este metodo lo reescribimos sobre el de BasicView, por eso usamos "override protected".
            // todo lo que pongamos dentro de este metodo sería como un EnterFrame, o sea podemos mover nuestros objetos desde aquí
            super.onRenderTick(); // es necesario llamar al super de la clase.
        }
    }
}

Espero quede claro, cualquier consulta pueden usar los comentarios o el twitter.
De a poco voy a ir agregando nuevas cosas sobre PV3D.

Saludos

Comparte este artículo:

Llega Adobe Flash Platform Services

sguidobono — Mon, 21 Sep 2009 16:14:22 +0000

Adobe Flash Platform Services es una nueva herramienta que nos permite a los desarrolladores añadir capacidades sociales y de colaboración a las aplicaciones, o sea agregar nuestras aplicaciones hechas en flash en redes sociales de forma muy simple. Ya que agrega un panel para linkear fácilmente a las redes sociales más utilizadas.

Además permite a las empresas distribuir y monetizar sus aplicaciones. Adobe Flash Platform Services es escalables y de fácil implementación. Ya que contamos con componentes para Flash CS4, Dreamweaver CS4, Flex / Flash Builder y también una clase por si no queremos usar los componentes.

En resumen nos permite (extraido de Adobe.com):
- Crear aplicaciones atractivas, con la integración de redes sociales y la colaboración en tiempo real
- Distribuir sus aplicaciones a los clientes en los medios de comunicación social, dispositivos móviles y de escritorio
- Seguir la distribución y la participación a través de análisis detallados.
- Gana dinero con sus aplicaciones

Vale la pena investigarlo bien. Yo estoy en eso, cuando le tome la mano voy a explicar más sobre el tema ya que parece muy interesante.

Pueden ver algunos tutoriales en esta página: http://www.adobe.com/devnet/flashplatform/services/distribution/#tutorials

Comparte este artículo:

Open Source Media Framework – Nuevo componente de video

sguidobono — Sun, 23 Aug 2009 23:28:01 +0000

Open Source Media Framework (OSMF), actualmente en prerelease, es un nuevo framework Open Source, como su nombre lo dice, creado por Adobe, en unión con Open Video Player, que nos permite crear reproductores de video a través de componentes muy fáciles de conectar entre sí.

Estos reproductores pueden ser programados con sus componentes a través de ActionScript 3 o MXML. Generando aplicaciones de alta calidad que nos permitan la carga de stream de video, descargas progresivas, implementación de interfaz de usuario, y muchas más cosas.

Una herramienta muy interesante teniendo en cuenta el gran crecimiento de los últimos años en la utilización de material audiovisual en blogs, diarios, portales y demás sitios.

Sitio oficial: Open Source Media Framework
Documentación del framework
Especificaciones de OSMF

Comparte este artículo:

Cursos de ActionScript 3 en Buenos Aires

sguidobono — Fri, 10 Jul 2009 14:14:28 +0000

Estamos preparando cursos de ActionScript 3 presenciales de 4 personas en Buenos Aires. A cargo del instructor Sebastián Guidobono.
Los cursos se harán en el estudio de 4060, con un aula perfectamente equipada.

Las fechas se irán armando según las inscripciones.
El curso está dividido en 23 modulos. Pensados para entregar uno por clase, pero pueden extenderse a dos clases.
Se profundizará en los elementos y las formas de trabajar con la última versión del famosos lenguaje de programación del Adobe Flash. ActionScript 3.

Para consultar precios y fechas disponibles hace click acá o escribinos a cursos@decabeza.net

MODULOS:

1. Fundamentos básicos de ActionScript:
Introducción a los elemtos del lenguaje. Interface del Flex 3 y como conectarlo con Flash CS4. Variables, Funciones, Eventos.

2. Clases Personales:
Estructura de las clases, donde guardarlas, subclases, conexión entre clases.

3. Entorno de tiempo de ejecución:
Detectar las configuración del sistema, configuración del swf, menú contextual, posibilidad de video y audio, Seguridad del sistema.

4. Números y Matemática:
Bases de números, operacions matemáticas, Formatear monedas, medidas, etc. Convertir entre medidas, etc.

5. Arrays:
Introducción, propiedades y metodos de los Array. Agregar, modificar, eliminar y ordenar elementos en el Array. Arrays multidimensionales.

6. Lista de Visualización:
Añadir, eliminar y mover elemntos en la lista. Crear clases visuales personalizadas. Cargar e interactuar con Imagenes y Películas externas. Interacciones con el Mouse. Arrastrar y soltar.

7. Dibujos y mascaras:
Establecer estilos de bordes y rellenos. Dibujar lineas y formas básicas. Scripts para generar mascaras dinamicas.

8. Mapa de Bits:
Objeto BitMap. Añadir BitMap a la lista de visualización. Dibujar con mapa de bits. Manipular pixeles. Crear y copiar pixeles. Efectos y acciones sobre los mapa de bits.

9. Texto:
Tipos de textos. Opciones de los textos. Distintas formas de mostrar textos. Eventos de textos. Formatear textos. Incorporar fuentes. Textos de introducción y sus opciones. Anti-aliasing.

10. Filtros y Transformaciones:
Aplicar cambios de matiz y de color. Torcer. Aplicar filtros básicos y avanzados. Cambiar brillo, saturación, contraste, etc. Efectos a través de filtros.

11. Animación por programación:
Mover objetos, cambiar propiedades, utilizar trigonometrís básica. Paquetes de animación como TweenMax, Caurina, etc.

12. Cadenas de Textos:
Operaciones con cadenas de textos. Propiedades y metodos de las cadenas. Modificar y analisar las cadenas. Convertir entre cadenas. Extraer, eliminar y editar textos.

13. Expresiones Regulares:
Introducción, entender que son y como funcionan las expresiones regulares. Comprobar con expresiones regulares. Eliminar y reemplazar cadenas de textos. Validar entradas de texto.

14. Fechas y horarios:
Averiguar, recuperar y utilizar los elementos de fecha y hora. Formatear fecha y hora. Convertir entre tipos de datos. Utilizar temporizador. Calcular tiempos trascurridos.

15. Programar sonidos:
Crear objetos de sonidos. Iniciar y detener sonidos. Configurar sonidos, buffer. Bucle de sonidos. Leer etiquetas ID3. Eventos de sonidos. Leer espectro de sonidos. Crear una aplicación de sonido.

16. Videos:
Cargar y configurar videos externos. Crear controles de video, duración, etc. Gestionar configuración del video. Eventos de videos.

17. Almacenar datos persistentes:
Crear, abrir objetos compartidos locales. Escribir datos en los objetos. Guardar cambios en objetos compartidos. Leer datos. Clases personalizadas en serie. Compartir datos.

18. Comunicación entre películas:
Crear conexiones locales. Enviar datos. Validar comunicaciones sobre conexiones locales. Aceptar comunicaciones locales de otros dominios.

19. Enviar y cargar datos:
Cargar variables de un archivo de texto. Cargar variables de un script del servidor. Cargar bloque de texto. Acceder a los datos decargados. Enviar y gestionar datos con sus resultados.

20. XML:
Entender estructura del XML. Crear XMLs. Editar XML. Leer elementos y árbol del XML. Encontar elementos por nombre. Leer atributos. Cargar y buscar en los XML. Caracteres especiales en XML.

21. Servidores Web y Flash Remoting:
Gestionar e invocar métodos de servicios web. Gestionar respuestas de Flash Remoting.

22. Administración de archivos:
Descargar archivos. Detectar archivo seleccionado por el usuario. Monitorizar el proceso de descarga. Navegar en busqueda del archivo. Filtrar archivos. Subir archivos y monitorizar sus eventos.

23. Programación de sockets:
Conectarse y desconectarse a un seridor socket. Enviar y recibir datos. Saludar a un servidor socket. Gestionar errores del socket.

Comparte este artículo:

Menú dinámico en XML y ActionScrip 3

sguidobono — Mon, 22 Dec 2008 15:49:28 +0000

Menú dinámico en XML y ActionScrip 3

Con este nuevo video tutorial vamos a aprender a crear un menú dinámico desde un xml con ActionScript 3.
De esta forma podemos cambiar el contenido del menú editando el .xml y sin la necesidad de compilar nuevamente nuestro .fla.
Agregando, quitando o modificando la cantidad de botones.

Algo muy útil y que sirve de base para muchas otras aplicaciones del mismo método.

Espero les sirva, cualquier cosa pueden comentar, preguntar o criticar.

Comparte este artículo:

Nuevo Video Tutorial – SWFAddress 2 con AS3

sguidobono — Wed, 17 Dec 2008 17:10:35 +0000

Nuevo Video Tutorial – SWFAddress 2 con AS3

En este nuevo video explicamos como usar la libreria de Flash y AJAX SWFAddress, que nos permite tener una navegación de nuestro proyecto usando los botones de siguiente y anterior del navegador y al mismo tiempo cambiando la URL según la sección o estado del flash en el que estemos.

Es muy útil para proyectos en los que se quiera que el usuario pueda ingresar a contenidos determinados directamente. Y además permite un indexado mucho mejor de un proyecto integro en Flash.
Espero les sirva y cualquier recomendación pueden comentar acá o en el topic del foro correspondiente.

Comparte este artículo:

Cargar SWF externo en AS3 (Video Tutorial)

sguidobono — Sat, 22 Nov 2008 04:20:15 +0000

Cargar SWF externo en AS3 (Video Tutorial)

Con este video vamos a aprender como cargar un SWF externo con AS3 en nuestra pélicula usando un preloader.

Comparte este artículo:

Efecto lupa con zoom en ActionScript 3

sguidobono — Fri, 11 Jul 2008 04:11:07 +0000

Este es un efecto muy utilizado en varios tipos de desarrollo. Como puede ser en un catálogo de productos, ejemplo clásico si los hay.
Se me ocurrió armar una clase en AS3 para esta utilidad, a modo de simplificar el trabajo.
De paso les dejo una hermosa imagen del calendario Maya. Gran civilización si las hubo!

Mové el mouse sobre la imagen para ver el efecto.

A continuación les dejo la clase completa. Vale destacar los cuatro métodos con namespace en “protected”.
Estos métodos pueden ser reescritos si la clase es extendida… De manera tal que se puedan manejar los eventos de progreso de carga, y de la carga completa. Para poder sumarle un preloader tanto a la imagen chica, como a la grande por ejemplo.

^?Ver código ACTIONSCRIPT

package weedo.fx {
 
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.display.Loader;
import flash.events.*;
import flash.net.URLRequest;
import flash.ui.Mouse;
 
public class Lupa extends Sprite
{
     private var imgURL:String;
     private var imgBigURL:String;
     private var mascara:DisplayObject;
     private var small:Sprite;
     private var big:Sprite;
     private var cargaCompleta:Boolean;
 
     public function Lupa(_imgURL:String, _imgBigURL:String, _mask:DisplayObject):void
     {
          imgURL = _imgURL;
          imgBigURL = _imgBigURL;
          mascara = _mask;
 
          this.mouseChildren = false;
          this.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
          this.addEventListener(MouseEvent.ROLL_OUT, onOut);
          this.addEventListener(MouseEvent.ROLL_OVER, onOver);
 
          cargarImg();
     }
 
     private function cargarImg():void
     {
          var loaderImg:Loader = new Loader();
          loaderImg.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteImg);
          loaderImg.contentLoaderInfo.addEventListener(Event.INIT, onInitImg);
          loaderImg.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressImg);
          loaderImg.load(new URLRequest(imgURL));
     }
 
     private function cargarImgBig():void
     {
          var loaderImgBig:Loader = new Loader();
         loaderImgBig.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteImgBig);
          loaderImgBig.contentLoaderInfo.addEventListener(Event.INIT, onInitImgBig);
          loaderImgBig.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressImgBig);
          loaderImgBig.load(new URLRequest(imgBigURL));
     }
 
     protected function onProgressImg(e:ProgressEvent):void
     {
          trace("img: "+Math.round((e.bytesLoaded*100)/e.bytesTotal));
     }
     protected function onProgressImgBig(e:ProgressEvent):void
     {
          trace("imgBig: "+Math.round((e.bytesLoaded*100)/e.bytesTotal));
     }
     protected function onInitImg(e:Event):void
     {
          trace("termino img");
     }
     protected function onInitImgBig(e:Event):void
     {
          trace("termino imgBig");
     }
 
     private function onCompleteImg(e:Event):void
     {
          small = new Sprite();
          e.target.content.x = -(e.target.content.width*.5);
          e.target.content.y = -(e.target.content.height*.5);
          small.addChild(e.target.content);
 
          addChild(small);
          cargarImgBig();
     }
 
     private function onCompleteImgBig(e:Event):void
     {
          big = new Sprite();
          e.target.content.x = -(e.target.content.width*.5);
          e.target.content.y = -(e.target.content.height*.5);
          big.addChild(e.target.content);
          big.mask = mascara;
          big.visible = false;
 
          addChild(big);
          addChild(mascara);
          cargaCompleta = true;
     }
 
     private function onMove(e:MouseEvent):void
     {
          if(cargaCompleta){
               mascara.x = mouseX;
               mascara.y = mouseY;
 
               big.x = -((big.width * small.mouseX)/small.width) + small.mouseX;
               big.y = -((big.height * small.mouseY)/small.height) + small.mouseY;
          }
     }
 
     private function onOut(e:MouseEvent):void
     {
          if(cargaCompleta){
               big.visible = false;
               Mouse.show();
          }
     }
 
     private function onOver(e:MouseEvent):void
     {
          if(cargaCompleta){
               big.visible = true;
               Mouse.hide();
          }
     }
 
     public function cambiarMascara(_tg:DisplayObject):void
     {
          if(cargaCompleta){
               mascara = _tg;
               big.mask = mascara;
          }
     }
 
 }
}

Para implementar la clase en el IDE de Flash deberían escribir algo así:

^?Ver código ACTIONSCRIPT

import weedo.fx.Lupa;
 
var sh:Shape = new Shape();
sh.graphics.beginFill(0x000000,1);
sh.graphics.drawCircle(0, 0, 50);
sh.graphics.endFill();
 
var lp:Lupa = new Lupa("small.jpg", "big.jpg", sh);
lp.x = stage.stageWidth * .5;
lp.y = stage.stageHeight * .5;
addChild(lp);

En este ejemplo importamos la clase en la primer linea. Luego creamos un Shape circular y por último creamos nuestra lupa con sus 3 parametros.
Primero la imagen pequeña, luego la grande y por último la máscara que usaremos como lupa.
En este caso la máscara es un Shape circular. También podría ser un rectangulo y hasta un movieclip con la forma que querramos.
Ojo que el punto de registro siempre tiene que estar en el medio de nuestra máscara.

Por ejemplo si queremos usar un rectangulo, el código debería ser así:

^?Ver código ACTIONSCRIPT

var sh:Shape = new Shape();
sh.graphics.beginFill(0x000000,1);
sh.graphics.drawRect(-25, -25, 50, 50);
sh.graphics.endFill();

Fijense como uso el “-25″ para correr el punto de registro.

Bueno espero les sirva, acá les dejo también los archivos del ejemplo:

Archivos del ejemplo

Comparte este artículo:

Carga Externa de XML con AS3 (Video Tutorial)

sguidobono — Wed, 25 Jun 2008 18:53:25 +0000

Carga Externa de XML con AS3 (Video Tutorial)

En este video tutorial muestro como cargar un XML externo con ActionScript 3. Algo bastante simple, pero necesario para hacer cosas más complejas.
Pido perdón como siempre por el audio, mis colgadas hablando (esta como siempre sin editar) y la informalidad del video.
Para los que les interese el tema pueden profundizar mucho buscando informacion sobre XML, E4X y ECMAScript.

Ojalá les guste y espero comentarios sobre que otros temas básicos de AS3 les gustaría que hiciera videos.

Comparte este artículo:

Lista de Visualización en ActionScript 3, algo de lo nuevo.

sguidobono — Tue, 29 Jan 2008 20:26:12 +0000

Para comenzar con este tema hay que aclarar que el modelo de renderización de ActionScript 3.0 y Flash Player 9 es muy diferente a las versiones anteriores.

Anteriormente toda película SWF contaba con un MovieClip raíz, llamado escenario o _root desde el código. Estos MC podían contener MC hijos, y a su vez estos tener otros MC hijos dentro. El concepto de profundidad se usaba para controlar el orden de renderización o dibujo de estos elementos para dar la apariencia de estar “encima” o “debajo” de otros elementos.

Antes se usaban metodos muy conocidos como createEmptyMoviClip(), attachMovie(), duplicateMovieClip(), para ordenar y crear estos MC. Siempre que se creaba un nuevo MC este aparecia por encima de los ya existentes. No podían ser movidos a lugares diferentes dentro de las jerarquías existentes, sino que se debían destruir y crear nuevamente. por ejemplo si yo tenia un MC dentro de otro llamado “objeto1″ no podia moverlo a un MC llamado “objeto2″. Debía borrarlo y volver a crearlo dentro del otro MC.

El nuevo sistema de render sigue siendo jerárquico, pero es mucho mas flexible y simple al momento de rendriza. Este nuevo modelo o sistema se centra en lo que se llama “Lista de Visualización” que se encuentra centrado en la clase flash.display.
Esta lista de visualización contiene todos los objetos que hay en nuestro SWF, por lo que cualquier objeto que no se encuetre en esta lista no sera renderizado en nuestra película.

Esta jerarquía se separa en 3 tipos de objetos:
El escenario: es un objeto raíz único de cada película, el cual contiene un solo hijo, la clase de aplicación principal del SWF. Se puede acceder a traves de la propiedad stage.
Contenedores del objeto de visualización: como su nombre lo indica es el objeto encargado de contener los objetos de visualizacion. El escenario sería uno de estos objetos, como también los conocidos MovieClip y el nuevo Sprite. Vale aclarar que si un Contenedor es eliminado, todos sus hijos se eliminan también.
Objetos de visualización: Algunas clases funsionan tanto como objetos de visualización como contenedores, como puede ser el caso del MovieClip, quein contiene pero a la vez puede representarse visualmente.
Hay otras clases como el caso del TextField, que unicamente funsionan como objetos visuales (o sea no pueden contener nuevos objetos como hijos).

una vez explicado esto vamos a pasar a lo que a la mayoría les interesa, los ejemplos.
Como podemos añadir un elemento a nuestra lista de visualización?
La solución es utilizar los nuevos metodos addChild() y addChildAt().

^?Ver código ACTIONSCRIPT

1
2
3

var textoHola:TextField = new TextField();
textoHola.text = "Hola Mundo!";
addChild(textoHola)

Con este ejemplo estamos creando un elemto de texto (TextField) que nos dice “Hola Mundo!”. Si no escribiriamos la última linea, el texto no se mostraria en nuestra película, ya que no fue guardado en la lista de visualización. Por lo tanto, hubiera sido creado en memoria, pero no renderizado.
En este ejemplo estamos agregando el elemento a un Conetenedos, que seria el escenario en si. Tambien podriamos crear un Contenedor (MovieClip, Sprite) e incluir el texto ahi dento.

^?Ver código ACTIONSCRIPT

var textoHola:TextField = new TextField();
textoHola.text = "Hola Mundo!";
 
var contenedor:Sprite = new Sprite();
addChild(contenedor)

De esta forma tenemos un contendor y un texto como hijo del mismo.

Otro cambio importante es el orden de nuestros elemntos. La lista de visualización, como su nombre lo indica es una lista como cualquier Array. O sea tiene ordenados los elemntos de la posición 0 a la que sea necesario. Por lo tanto si yo creo dos circulos y los agrego al escenario ocuparían las posicones 0 y 1, y si creo un tercero ocuparía la posición 2.
Ahora bien, si yo quisiera que el nuevo circulo este entre el 0 y 1 como hago?. Ahí entra addChildAt().
Veamos un ejemplo y luego lo explico:

^?Ver código ACTIONSCRIPT

var rojo:Shape = createCircle(0xff0000, 10);
rojo.x = 10;
rojo.y = 20;
var verde:Shape = createCircle(0x00ff00, 10);
verde.x = 15;
verde.y = 25;
var azul:Shape = createCircle(0x0000ff0, 10);
azul.x = 20;
azul.y = 20;
 
// hasta acá creamos en memoria los circulos, pero no son renderizados.
 
addChild(rojo);
addChild(azul);
 
// acá ingresamos en la lista de visualización el circulo rojo y azul, por lo tanto rojo es 0 y azul es 1.
 
addChildAt(verde, 1);
 
// por último ingresamos en la lista a circulo verde, pero en la posición 1 como se ven en los parametros, por lo que desplaza al circulo azul, que estaba en 1 a la posición 2.
 
// createCircle sería un metodos para dibujar los circulos
function createCircle (color:uint, radio:Number):Shape{
var shape:Shape = new Shape();
shape.graphics.beginFill(color);
shape.graphics.drawCircle(0,0,radio);
shape.graphics.endFill();
return shape;
}

Como se explica en el código cuando un elemento es ingresado en una posición ya utilizada, corre todos los demás elemento una posición hacia “arriba”. Esto es muy util y bueno, ya que no es necesario como antes poner un elemento en un nivel 1 y otros en 20, para dejar espacio por las dudas en el medio. Por lo tanto de esta forma tenemos la lista con las posicones necesarias y ordenadas pefectamente sin numeros salteados.

Para eliminar un objeto se utiliza el metodo removeChild() y removeChildAt() de una manera muy simple.

^?Ver código ACTIONSCRIPT

//creamos el elemento.
var textoHola:TextField = new TextField();
textoHola.text = "Hola Mundo!";
addChild(textoHola);
 
// lo eliminamos
removeChild(textoHola);

Obviamente si ejecutamos este código, no se verá nada, ya que el elemento se crea y elimina en el momento.
Con removeChild() debemos pasarle como parametro el nombre del objeto creado. En cambio con removeChildAt(), lo que pasamos como parametro es la posición dentro de la lista de visualización. Por ejemplo:

^?Ver código ACTIONSCRIPT

//creamos los elementos.
var texto1:TextField = new TextField();
texto1.text = "Hola Mundo 1!";
addChild(texto1);
 
var texto2:TextField = new TextField();
texto2.text = "Hola Mundo 2!";
addChild(texto2);
 
// eliminamos el primer texto
removeChildAt(0);

Ahora bien veamos como podemos mover un elemento de un lugar a otro. Esto es muy simple y se hace con el metodo setChildIndex(). Y con la ayuda de los metodos getChildIndex() y getChildAt() para saber la posción de los elementos. Por ejemplo:

^?Ver código ACTIONSCRIPT

var rojo:Shape = createCircle(0xff0000, 10);
rojo.x = 10;
rojo.y = 20;
var verde:Shape = createCircle(0x00ff00, 10);
verde.x = 15;
verde.y = 25;
var azul:Shape = createCircle(0x0000ff0, 10);
azul.x = 20;
azul.y = 20;
 
addChild(rojo);
addChild(azul);
addChild(verde);
 
//ahora movemos el circulo verde atras de todo
setChildIndex(verde, 0);
 
// createCircle sería un metodos para dibujar los circulos
function createCircle (color:uint, radio:Number):Shape{
var shape:Shape = new Shape();
shape.graphics.beginFill(color);
shape.graphics.drawCircle(0,0,radio);
shape.graphics.endFill();
return shape;
}

De esta forma el ciruclo verde que estaba adelante de todo pasa al fondo, desplazando todos los demás una posición hacia adelante.
Ahora bien si queremos moverlo a la posción del medio, o sea del circulo azul y no sabemos el número de posición, podemos hacer lo siguiente:

^?Ver código ACTIONSCRIPT

var rojo:Shape = createCircle(0xff0000, 10);
rojo.x = 10;
rojo.y = 20;
var verde:Shape = createCircle(0x00ff00, 10);
verde.x = 15;
verde.y = 25;
var azul:Shape = createCircle(0x0000ff0, 10);
azul.x = 20;
azul.y = 20;
 
addChild(rojo);
addChild(azul);
addChild(verde);
 
//ahora movemos el circulo verde atras de todo
setChildIndex(verde, getChildIndex(azul));
 
// createCircle sería un metodos para dibujar los circulos
function createCircle (color:uint, radio:Number):Shape{
var shape:Shape = new Shape();
shape.graphics.beginFill(color);
shape.graphics.drawCircle(0,0,radio);
shape.graphics.endFill();
return shape;
}

Donde getChildIndex(azul) nos devolvería el número de posición del elemento llamado azul.

Nos quedaría ver el metodos getChildAt() el cual nos devuelve a traves de un número pasado como parametro el nombre de un elemnto.
Podemos usarlo en un ejemplo donde pasamos el elemento que esta atras de todo para adelante de todo. Veamos:

^?Ver código ACTIONSCRIPT

var rojo:Shape = createCircle(0xff0000, 10);
rojo.x = 10;
rojo.y = 20;
var verde:Shape = createCircle(0x00ff00, 10);
verde.x = 15;
verde.y = 25;
var azul:Shape = createCircle(0x0000ff0, 10);
azul.x = 20;
azul.y = 20;
 
addChild(rojo);
addChild(azul);
addChild(verde);
 
//ahora movemos el circulo rojo adelante de todo
setChildIndex(getChildAt(0), numChildren -1);
 
// createCircle sería un metodos para dibujar los circulos
function createCircle (color:uint, radio:Number):Shape{
var shape:Shape = new Shape();
shape.graphics.beginFill(color);
shape.graphics.drawCircle(0,0,radio);
shape.graphics.endFill();
return shape;
}

En este ejemplo a trasves de getChildAt(0) obtenemos el nombre “rojo”, el cual movemos a la ultima posición, la cual obtenemos con el metodos numChildren – 1 (ya que la primera es 0).

Es un tema muy extenso que intente resumirlo lo mejor posible, así que espero les sirva un poco esto y cualquier duda escriban en los comentarios.

Fuente de inspiración: Libro ActionScript 3.0 para desarrolladores Flash.

Comparte este artículo:

Resumen sobre OOP en ActionScript 3

sguidobono — Wed, 09 Jan 2008 19:11:08 +0000

Vale aclarar antes de comenzar, que esto no es un resumen de OOP (Programación Orientada a Objetos), sino de como se aplica y se usa esta forma de programar con AS3 en el IDE de Flash CS3. Por lo que se tiene que tener una idea de lo que es OOP.

Introducción:
ActionScript 3 nos permite seguir programando en la linea de tiempo como lo haciamos con AS2, pero es mucho más eficiente y profesional usarlo a través de Clases.
En AS todos los objetos nativos de Flash son Clases u Objetos (el objeto en si es una instancia de una Clase), por ejemplo MovieClip, TextField, MovieClipLoader, etc.
La idea de trabajar con Clases es generar nuestras propias Clases, como podría ser una Clase BotonSimple.as (como ejemplo simple), o una Clase GaleriaDeFotos.as (como ejemplo mas complejo), la cual seguramente usaría otras Clases más simples.

Ubicación de las Clases:
La Clases pueden estar ordenada dentro de carpetas y subcarpetas, las cuales suelen llamarse paquetes, estos paquetes nos permiten organizarnos de manera prolija, por ejemplo para un proyecto de mi pagina decabeza.net tendria organizado el paquete de una forma donde tendria la carpeta net, dentro la carpeta decabeza y dentro de esta carpetas, fx (donde por ejemplo guardaria las clases de efectos especiales), text (donde guardaria las clases de efectos y utilidades de textos) y utils (donde guardaria las clases de utilidades en general, como preloaders, botones, etc).

Para indicarle al IDE de Flash donde guardamos nuestras Clases (ClassPath) podemos hacerlo a 2 niveles:
Nivel Proyectos: donde la indicación de ruta es solo para ese proyecto.
Nivel Global: donde la indicación de ruta afectara a todos las peliculas que creemos con nuestro Flash.

Para el primer caso entramos dentro de “Settings” en las propiedades de nuestro proyecto, ahi clickeamos en el boton “Settings” al lado de “ActionScript Version” y en esa ventana agregamos nuestras Classpath (ruta de nuestro disco donde estan las clases).
Para el segundo caso vamos a “Edit” / “Preferences”, seleccionamos la categoria “ActionScript” y clickeamos el boton “ActionScript 3.0 Settings” y en la ventana que nos abre ingresamos nuestras Classpath (ruta de nuestro disco donde estan las clases).

Podemos agregar la cantidad de Classpath que querramos, lo que hara que flash al compilar busque las clases que usamos en nuestro proyecto en todas esas carpetas.
En mi caso suelo usar dos Classpath a nivel Global.
“C:\Proyectos\Clases” que es donde guardo las Clases comunes a todos los proyectos y “./com” que indicaria que busque en una carpeta llama “com” en el directorio donde esta ubicado mi proyecto. En esa carpeta guardo las Clases especificas de ese proyecto.

Clase Main:
Lo que suelo hacer personalmente es usar una Clase “Main”, algo muy común para los que programen en Java u otros lenguajes similares.
Esta Clase va a ser la Clase madre que se ejecute antes que todo y se va a encargar de ejecutar y manejar las demás Clases y todo lo que suceda en mi proyecto (sería como el primer frame lleno de programación clásico en AS2).
Para eso se genera un archivo Main.as y en nuestro .fla de AS3 lo ingresamos en las propiedas del proyecto donde dice “Document Class:”
De esta manjera le indicamos a Flash que Main.as sera nuestra Clase Principal.
Acá les dejo un buen video tutorial sobre este tema.

Asignar una Clase a un MovieClip:
Muchas veces nos puede ser útil asignarle una Clase a un MovieClip, por ejemplo si queremos hacer un Menú dinámico que duplica varias veces un mismo botón. Lo que podemos hacer es tener un MC en la libreria, el cual tendrá asignada una Clase llamada BotonSimple, la cual manejará los eventos de RollOver, Click y lo que querramos sumarle.
De esta forma todos los botones responderán a una misma clase por lo que si hacemos algún cambio afectará a todos lo botones.

Para hacer esto lo que hacemos es darle click derecho al MC en la librería y seleccionar la opción “linkage”, en la ventana que se abre tildamos la opción de “Export for ActionScript” y le escribirmos el nombre de nuestra clase donde dice Class.
También podríamos escribir el nombre donde dice “Base Clase” siempre y cuando la clase que vayamos a usar extienda a un MovieClip.
Esto nos sería útil si queremos asignar una misma clase a varios MC distintos en la librería, ya que el campo “Class” debería tener un valor único.
Vale destacar que si nuestra clase está en un paquete “net/decabeza/utils” deberíamos escribirlo de esta forma “net.decabeza.utils.BotonSimple.as”.

Clases Personalizadas:
También podemos tener Clases personalizadas que usaremos en nuestra Clase “Main.as” que no sea asignadas a un MovieClip.
Por ejemplo podríamos tenes una Clase llamada “LoadJPG.as” la cual cargue un jpg en nuestro proyecto.
Para llamar a esta clase desde Main o desde cualquier lado deberíamos crear una instancia (a no ser que sea una clase estática).

^?Ver código ACTIONSCRIPT

1	var cargador:LoadJPG = new LoadJPG();

Asi creamos la instancia “cargador” la cual nos permitira ejecutar todos los métodos de nuestra clase.
Eso si, antes de usar una clase personalizada, como cualquier otra clase, en AS3 debemos importar la clase, para eso vamos a escribir una linea similar a esta, arriba de nuestra clase Main.

^?Ver código ACTIONSCRIPT

1	import net.decabeza.utils.LoadJPG

También podríamos importar todas las Clases de un paquete de esta forma

^?Ver código ACTIONSCRIPT

1	import net.decabeza.utils.*

Ahora si estaríamos en condiciones de usar nuestra Clase.

Bueno, hasta ahora esto es todo, faltarían millones de cosas por explicar, pero creo que es un buen comienzo, espero comentarios y preguntas para ir contestando y tal ves de alguna pregunta surja un nuevo artículos básico de AS3.

Saludos!

Comparte este artículo:

DeCabeza.net » ActionScript3

Nuevo Video: Creando una Galería de imágenes estilo Picasa

También te puede interesar:

LoaderMax, el nuevo cargador inteligente en AS3 de GreenSock

También te puede interesar:

10 Videos para entender y empezar a usar Flash Catalyst

También te puede interesar:

Prerelease del SDK de Adobe AIR para Android

También te puede interesar:

Componentes para flash gratis

También te puede interesar:

Realidad Aumentada, una realidad en aumento

También te puede interesar:

Nuevas características que tendrá Adobe Flash CS5

También te puede interesar:

De MonsterDebugger – debugger para Flash, Flex y AIR

También te puede interesar:

Usar Google Map con ActionScript 3

También te puede interesar:

Como funciona BasicView de PaperVision 3D 2.0

También te puede interesar:

Llega Adobe Flash Platform Services

También te puede interesar:

Open Source Media Framework – Nuevo componente de video

También te puede interesar:

Cursos de ActionScript 3 en Buenos Aires

También te puede interesar:

Menú dinámico en XML y ActionScrip 3

También te puede interesar:

Nuevo Video Tutorial – SWFAddress 2 con AS3

También te puede interesar:

Cargar SWF externo en AS3 (Video Tutorial)

También te puede interesar:

Efecto lupa con zoom en ActionScript 3

También te puede interesar:

Carga Externa de XML con AS3 (Video Tutorial)

También te puede interesar:

Lista de Visualización en ActionScript 3, algo de lo nuevo.

También te puede interesar:

Resumen sobre OOP en ActionScript 3

También te puede interesar: