Archive for the ‘Flash CS3’ Category

Flash Player 10.1 en Android 2.2 y Android Apps en AIR

Jueves, Mayo 20th, 2010

Todos lo sabían, pero sigue siendo una gran noticia. Android tendrá instalado por defecto Flash Player 10.1 y podrá reproducir, tal como funciona en un desktop, todos los sitios y aplicaciones hechas en Flash o Flex. Nada del bullshit de Steve Jobs. Flash corre perfecto en dispositivos móviles touch, no es un "drenador" de batería y no requiere recodear toda la web. Simplemente funciona.

Apps nativas hechas en Flash en el market de Android

En el sandbox muestran también varias apps nativas de Androids que se instalan desde el market, pero que fueron construidas con Flash y compiladas con AIR. Tal como funcionaba el compilador para iPhone, un developer puede crear una app en Flash y ponerla en el market de Android, la Ovi Store de Nokia o el Market de Blackberry.

Para el usuario, ambas experiencias son nativas y transparentes. Para los desarrolladores, la vida es más fácil.

Enviar comentario

On2 VP8, codec libre de video para HTML5

Miércoles, Mayo 19th, 2010

Google anunció hoy en el Google I/O 2010 el codec de video On2 VP8 y el proyecto WebM. La razón por la que Google compró On2. VP8 es un codec que competirá contra H.264 por dominar el video en el tag <video> de HTML5.

H.264 es un codec patentado, licenciado y MUY caro (5 millones de dolares le habría costado a Macromedia implementarlo en el 2008) de un consorcio del cual hacen parte Apple y Microsoft. Ellos ganan ese dinero cuando se crean aplicaciones con H.264.

On2 creó VP6, que fue por años el codec del video en Flash, .FLV. Es el codec en el que está todo el video de Youtube. Flash ahora soporta Sorenson Spark, On2 VP6, H.264 y On2 VP8.

On2 VP8 de Google es un codec libre, abierto, sin patentes, sin licencias, protegido contra demandas. Está apoyado por Adobe, Firefox, Opera, Wikipedia, Youtube, Android, Chrome.


En el Google I/O 2010, el CEO de Mozilla muestra el soporte de On2 VP8 en Firefox (L4C.me io2010)

La web del futuro estará divida entre Safari Mobile, Safari e Internet Explorer implementando H.264 y Google Chrome, Webkit, Opera y Firefox con On2 VP8. Una guerra similar a BluRay vs. HD-DVD.

La wikipedia anunció soporte exclusivo de On2 VP8. Youtube soporta On2 VP6, H.264 y On2 VP8. Otros publishers de video probablemente implementarán H.264 y On2 VP8 al mismo tiempo. Muchos seguirán usando Flash normalmente para reproducir video, ya que Flash soporta todos los codes y todos los browsers.

¿Quien creen que gane la batalla por el video en la web?

Enviar comentario

Uso de Code Snippets en Flash CS5

Viernes, Mayo 14th, 2010

Entre las novedades de Flash CS5 está la nueva ventana de Code Snippets, que no es más que código listo para usar, esto es muy usual en muchos lenguajes de programación que ayuda a ganar tiempo reutilizando líneas de programación que necesitemos a lo largo de un proyecto. Esta versión inicial, solo está disponible para código utilizado en la línea de tiempo, no en archivos actionScript.

Para empezar crearemos un archivo nuevo en Flash CS5 y buscaremos en el menú Windows>Code Snippets o haremos click al ícono correspondiente, veremos:

Aquí podemos apreciar los códigos predeterminados que viene con Flash CS5 y como has visto, hay una gran variedad. Para el ejemplo inicial usaremos código de la carpeta Actions.

Si deseamos abrir una URL o dirección web, solo tendríamos que seleccionar en el escenario el botón que deseamos dispare el evento, seguido de Snippets y listo, veremos como en la ventana de acciones tendremos lo siguiente:

Otro ejemplo es el famoso Drag&Drop de los juegos, esto también viene aquí:

Conclusión hasta aquí, esto es una gran ayuda para los diseñadores que quieren un código simple y efectivo, además de fácil de usar. Ergo, los que nos dedicamos al código el 150% de nuestras vidas no podríamos estar contentos sólo con esto, para eso podemos crear nuestros propios Snippets. Para eso en la pestaña de la esquina damos click y seleccionado Create New Code Snippets.

Luego aparecerá una ventana para llenar el código que queramos, con título y toolTip, yo hice un for básico y quedó así:

En este caso no necesito de seleccionar un elemento del escenario para que funcione, así que sólo le hago click y en la ventana de acciones veremos:

De la misma forma podemos exportar o importar nuestros códigos para poder compartirlos sin problemas, o en su defecto, volver a la versión por defecto.

Por otro lado, podemos editar el XML que genera al crear los Code Snippets.

Ahí puedes darle grabar y regrescar :) espero les sea útil o por lo menos saber de su existencia.

Enviar comentario

Flash vars, ad servers y clicktag en Actionscript 2

Sábado, Abril 24th, 2010

Los clickTags son una metodología standard de las compañías que sirven banners (ad servers) para hacer rastreo (tracking) de efectividad de los banners. Aunque los clickTags fueron definidos por Macromedia hace varios años aún hay muchos errores sencillos que afectan el desarrollo de los banners.

En este video tutorial se enseña:

  1. la teoría y el funcionamiento básico de los clickTags a través de FlashVars,
  2. la implementación de los clickTags,
  3. los principales problemas con los que se enfrenta el diseñador a la hora de hacerlo y como solucionarlos.


El video tutorial es impartido por Emmanuel Ulloa Adobe Certified Instructor y Adobe Certified Associate Educator, vive en Costa Rica con su esposa, y trabaja en la empresa digital Arbor como Flash Senior Developer e Instructor del Instituto Cyber U.

Enviar comentario

Encuestas en AS2 y PHP

Sábado, Abril 17th, 2010

A pedido Diego Oscar Romero hago este tip en donde vamos a ver como crear encuestas en AS2 utilizando PHP. Se puede votar una sola vez por número IP, y muestra los resultados en barras de porcentaje.

Parte 1


Parte 2


Parte 3


Descargar archivos del tutorial

Enviar comentario

HYPE una manera simple de programar con Actionscript

Martes, Abril 13th, 2010

HYPE es un nuevo framework desarrollado por Joshua Davis y Branden Hall que tiene como principal objetivo ayudar a los artistas gráficos a volver a involucrarse con el código, ya que desde actionscript 3, el enfoque de programacion orientada a objetos, es mucho mas difícil de entender que el antiguo as2 y código en la linea de tiempo. HYPE brinda un conjunto de clases para el fácil y rápido desarrollo de funcionalidades, tales como, sound analysis, object pooling, swarm behaviours, shape layout, grid layout y un extenso etc.
Claramente esto no limita a los programadores a usar HYPE, a mi modo de ver es un gran conjunto de utilidades, fácilmente extendible y rehusable.

Descarga e instalación de HYPE

Primero que todo, deben descargar la libreria, desde la pagina oficial o directamente desde haciendo click aquí, también pueden hacerlo desde el repositorio en github.

Para poder usarlo en nuestros proyectos hay varias formas de configurar en ambiente, la primera que mencionare es el archivo MXP que se lo pueden instalar directamente a su Flash IDE usando "Adobe Extension Manager CS4", si no saben como, pueden dar un vistazo en la pagina de instalacion. Otra forma es setear el path al source de la librería en los "source path" del Flash IDE. (edit - preference - actionscript - Actionscript 3.0 settings), otra manera muy recomendable es incluir el source de la librería dentro de su proyecto, de esta manera es fácil compartir el proyecto con mas gente y este sera compilable desde su carpeta, no serán necesarias configuraciones de librerías externas. Con esto ya pueden usar HYPE en sus proyectos.

Descripción de clases en HYPE

  • BitmapCanvas: Captura un DisplayObject en un Bitmap, esto nos permite dibujar en el Bitmap muy fácilmente.
  • FilterRhythm: Aplica un array de filtros a un BitmapData con un ritmo especifico.
  • DirectionalVibration: Hace vibrar una propiedad en una dirección dada.
  • ColorPool: Permite manejar una lista de colores y colorear objetos con colores al azar desde el listado.
  • GridLayout: Permite crear una malla de manera simple.
  • ObjectPool: Crea y maneja pools de objetos.
  • Oscillator: Oscila una propiedad con una onda especifica.
  • ShapeLayout: Permite posicionar objetos en una forma dada.
  • SoundAnalyzer: Facil manejo de las frecuencias de sonido.
  • Swarm: Permite que lo objetos se muevan hacia un punto.
  • MouseFollow: Hace que un objeto dado siga al mouse.

Como verán HYPE tiene clases para todo, esta muy bueno para jugar un rato. Cuando se lo descarguen veran que hay una carpeta con ejemplos de todas las clases. Así que no da mucho para explicar la manera de usarlo.

Un primer ejemplo de HYPE

Les dejo un ejemplo de como usar HYPE, este es el resultado, y mas abajo pueden descargar el código.


Descarga el ejemplo o mira más ejemplos en mi sitio web.

Ojala les sirva de algo este dato, yo personalmente se los recomiendo, pueden obtener muy buenos resultados, sin saber mucho de programación.

Enviar comentario

Ejemplo Actionscript 3 - Fisica para 3D con JigLibFlash

Lunes, Abril 12th, 2010


Jiglibflash es un motor de fisica para 3D. Su sitio oficial es http://code.google.com/p/jiglibflash/
Para empezar voy a detallar un poco los conceptos para los que no están muy interiorizados con el tema. JigLibFlash es un motor de física 3D. Por lo tanto NO! es un motor de 3D. JigLib es solo la parte que simula la física dentro de una scena en 3D. Es por esto que primero que todo deben tener un motor de 3D, tal como Papervision3D, Away3D, Sandy, etc. Para este ejemplo voy a utilizar Papersivion3D que es el motor que vengo usando hace ya un tiempo.

Lo primero es configurar la parte 3D, en papervision3D se necesita un viewport, una cámara, un render engine y una scena. Para hacer esto rápidamente vamos a extender la clase principal de la clase BasicView que ya implementa todo este sistema para poder renderear en 3d. La idea de esto es no tener que explicar muchas cosas que son netamente de pv3d y ver directamente lo que a JigLib refiere.

Bueno nuestra clase debería verse asi. La función startRendering() hace que comience a renderear pv3d, esto hace que la función onRenderTick sea llamada en cada frame.

Código :

package
{
   import flash.events.Event;
   import org.papervision3d.view.BasicView;

   public class Main extends BasicView
   {
      public function Main()
      {
         super(0, 0, true);

         startRendering();
      }

      override protected function onRenderTick(event:Event = null):void
      {
         super.onRenderTick(event);
      }

   }

}

Con esa base ya podemos comenzar a integrar lo necesario para simular la física. JibLibFlash trae unas classes plugin para interactuar con cada motor 3d especifico. Dentro de la librería van a encontrar una clase que se llama Papervision3DPhysics, esta clase encapsula todo lo necesario para que JigLib funcione, ademas de brindarnos algunas funciones para crear objetos de manera sencilla.

Continuando con el ejemplo, vamos agregar una instancia de esta clase.

Código :

package
{
   import flash.events.Event;
   import jiglib.plugin.papervision3d.Papervision3DPhysics;
   import org.papervision3d.view.BasicView;

   public class Main extends BasicView
   {
      private var _physics:Papervision3DPhysics;

      public function Main()
      {
         super(0, 0, true);

         initPhysics();
         startRendering();
      }

      private function initPhysics():void
      {
         _physics = new Papervision3DPhysics(scene, 7);
      }

      override protected function onRenderTick(event:Event = null):void
      {
         _physics.step();
         super.onRenderTick(event);
      }
   }
}

De acá solo dos lineas a destacar), la creación de la instancia recibe en el constructor la scena(Scene3d de pv3d) y la velocidad, la velocidad es una constante para toda la librería. Y la otra linea es fundamental _physics.step(); que debe hacerse en cada frame para ir actualizando todo, es por esto que esta dentro de la función onRenderTick y antes del super() para que primero actualice todos los valores relacionados a la física y luego renderee los objetos.

Con esas pocas lineas tenemos lo necesario para el ejemplo. Ahora solo resta agregar objetos a la scena, para esto la clase Papervision3DPhysics tiene algunas funciones para hacer esto de manera sencilla.

Crear Suelo

Código :

private function createGround():void
{
   var mat:WireframeMaterial = new WireframeMaterial(0xCCCCCC);
   var ground:RigidBody = _physics.createGround(mat, 1000, 0);
}

Crear Cubos

Código :

private function createBox():void
{
   var materials:MaterialsList = new MaterialsList();
   materials.addMaterial(new WireframeMaterial(0xFF4444), "all");
   var box:RigidBody;
   for (var i:int = 1; i < 5; i++) {
      box = _physics.createCube(materials, 100, 100, 100, 3, 3, 3);
      box.y = 300 * i;
   }
}

Crear Esferas

Código :

private function createSphere():void
{
   var ball:RigidBody;
   for (var i:int = 1; i < 4; i++) {
      ball = _physics.createSphere(new WireframeMaterial(0xFF44FF), 50);
      ball.z = -200;
      ball.y = 300 * i;
   }
}

Estas son las 3 posibilidades que nos ofrece la clase Papervision3DPhysics. También es posible crear los objetos de manera mas abstracta pero no voy a tocar ese tema. Así concluyo con este tip, espero que a alguien le sea de ayuda.

VER EJEMPLO
DESCARGAR ARCHIVOS DEL TUTORIAL

Enviar comentario

Videotutorial Flash-15. Desarrollo Web en Actionscript 2

Martes, Marzo 23rd, 2010

-
En este videotutorial vemos una simple introducci�n al mundo del desarrollo web en Flash. M�s adelante cuando veamos Actionsctipt 3 vamos a ver bien profundo este tema.

Enviar comentario



Flash Builder 4 por fin disponible

Lunes, Marzo 22nd, 2010

-
Por mucho tiempo los desarrolladores que creamos RIA’s con Flash, Flex y/o AIR esperamos la salida del Adobe Flash Builder 4 (antes Adobe Flex) y hoy por fin se dio al ver que en el Labs de Adobe ya te dirigía al sitio oficial. Aunque muchos de nosotros hemos estado jugando con esta versión, la lista de los bug reportados fueron solucionados, obviamente no todos, pero una gran parte si y eso gracias a la colaboración de los desarrolladores que han venido reportando las fallas o problemas.


Lo nuevo de Flash Builder 4

Sin duda una de las mejores cosas que hay en esta versión es la integración a datos de una forma más simple y rápida, utilizando componentes Drag&Drop podrás enlazar tu aplicación frontEnd a servicios proporcionados por Java, PHP, ColdFusion, REST, SOAP, entre otros.

El soporte nativo para Adobe AIR es algo que ya hemos venido comentando en cristalab.

Un pedido a gritos por parte de la comunidad fue la mejora de la refactorización que es tan necesaria y muchas veces nos dio dolor de cabezas, en esta versión fue extremadamente mejorada.

Facilidad en el uso con Adobe Flash Catalyst hizo que el diseño visual de nuestras aplicaciones sean aun mejor, y ahora aumentando su capacidad con la integración de Illustrator, Fireworks o Photoshop.

Gran integración entre Flash y Flash Builder permite a los desarrolladores de componentes personalizados en Flex un flujo de trabajo eficaz.

Entre otros, tenemos el Network Monitor que permite un detallado listado de transmisión de datos que tu aplicación está transfiriendo o utilizando logrando ayudar a la optimización o depuración.

Utilización de línea de comandos para automatizar procesos así como la unidad de pruebas de Flex.

Todos sabemos el uso de WebOrb o amfphp, pero realmente pocos saben el potencial existente en BlazeDS y LiveCycle que es mejorado en Flash Builder 4, eso quiere decir un mejor rendimiento, entre otras cosas.

Los estilos y el aspecto final de nuestras aplicaciones fue altamente reforzado en esta versión.

De hecho podemos encontrar más detalles al respecto o comparando con otras versiones en este link

Si quieres tener más información al respecto puedes visitar el sitio de Adobe Flash Builder 4.

Enviar comentario

Videotutorial Flash-14. Preload Flash en Actionscript 2

Sábado, Marzo 20th, 2010

-
En este videotutorial vamos a aprender a crear preloads (precargas) en Actionscript 2. Un preload es una animaci�n que se muestra al principio del proyecto informando al usuario sobre el progreso de la carga de la animaci�n. Esto es muy utilizado en p�ginas web que tengan componentes Flash, o que la web este hecha totalmente en Flash.

Parte 1:

Parte 2:

Enviar comentario