Cristalab

Animación de planetas rotando en After Effects
Firefox evitará que Flash cargue sin permiso del usuario por click
Comunicación entre películas usando clases en AS3
Mostrar imagen de día, tarde o noche con Javascript
Un dia normal del foro

Animación de planetas rotando en After Effects

Posted: 13 Apr 2012 07:25 AM PDT

A través de esta práctica simple, aprenderemos el uso de las capas 3D dentro de After Effects, mientras jugamos con planetas y elementos estelares, para recrear una rotación entre ellos, en la que usaremos pequeños trucos que ajustarán la animación de forma eficiente y añadirán nuevos controles y ejes que nos permitirán completar la composición.

Saludos.

Firefox evitará que Flash cargue sin permiso del usuario por click

Posted: 13 Apr 2012 04:47 AM PDT

Jared Wein, uno de los ingenieros de la Mozilla Foundation publicó el anuncio que Firefox 14, la próxima versión de Firefox, no permitirá que Flash cargue en cada página que se abra hasta que el usuario de permiso explicito.

La implementación está aprobada y el desarrollo ya va avanzado, la pregunta que queda es cómo será la interfaz. Las dos opciones son mostrar un cuadrado gris con el texto de clickear para activar (como abajo en la imagen) o una barra amarilla en el header del sitio web, avisando del contenido Flash y dando la posibilidad de activar.

Esta implementación será por URL y por elemento Flash. A menos que se cambie explicitamente en el about:config, todos los SWF requerirán permiso de click para correr.

¿Qué significa esto para los desarrolladores en Flash y Actionscript 3?

Hay 3 tipos de personas que se verán afectados por esta medida: Devs normales de Flash, creadores de banners y sitios que usan Flash de manera invisible.

Para el uso normal de Flash, no significa mucho

A la gran mayoría de las personas que crean en Flash, lo único en lo que los afectará es un click adicional. Si tu sitio es 100% Flash, se verá gris antes que el usuario de el primer click. En algunos casos, esto puede ser imperdonable, en otros, no tan grave.

Aunque a nivel de usabilidad, cualquier click adicional es malo.

Para los creadores de banners: Hora de no usar Flash

En un banner, un click adicional es inviable. Los banners son ultra optimizados para efectividad y rendimiento. Si un banner requiere un click adicional, muertos. PEro lo peor, si un banner NO SE VE sin darle click, ahí ya nos jodimos todos. Con esto, hacer banners en Flash no es rentable ya.

Para quienes usan Flash de manera invisible como "canal"

Grooveshark usa Flash internamente para reproducir la música (Grooveshark no usa HTML5, aunque tienen una versión HTML5). Pandora igual. El audio en HTML5 aun es muy malo (el video no, es genial). Otro ejemplo destacado es Socket.io, que usa Flash en navegadores que no soportan sockets para hacer realtime. Estos casos donde Flash es usado como un "canal invisible" son seriamente afectados. Porque al ser de 1px de tamaño, son Flash invisibles a los que no se les puede hacer click.

¿Soluciones? No tengo ni idea. Hacer visible el SWF y agregar al diseño un "da click aquí para que funcione" es lo que se me ocurre.

¿Para donde va Flash en los desktops?

Repasemos. Flash ya será imposible correr en Windows 8 cuando esté activa la interfaz Metro. Igualmente Safari (aunque sólo se usa en móviles). Adobe abandonó el plugin para móviles y la nueva estrategia de Flash está centrada en el desarrollo de juegos.

Para allá va Flash. Flash será la plataforma cross-device de juegos #1. Ya no una de experiencias interactivas al estilo de GrupoW, 2Advanced o BigSpaceShip, sino juegos móviles en teléfonos y tablets como Angry Birds, Machinarium o Draw Something. Mientras, todavía sirve.

Comunicación entre películas usando clases en AS3

Posted: 23 Mar 2012 01:01 AM PDT

He visto en muchos casos y por experiencia personal, que el manejo de niveles y la carga de archivos externos en AS2 era súper sencillo, y esto ahora se complica un poco al cambiar a AS3, pero no es nada para preocuparse, en este tutorial les explicaré como deben hacer para llamar funciones usando clases en todas las películas del proyecto flash, modificando o llamando desde la película principal a una función en una película cargada dentro de ella o viceversa. No voy a entrar en detalles de cómo funcionan las clases en AS3, para eso ya hay suficiente información en la red.

En este ejemplo voy a tener dos archivos .fla, cada uno con su propia clase (.as). El primero se llama base.fla y el segundo se llama peli.fla (el nombre de las clases es igual al nombre de cada archivo).

En mi base.fla, en la línea de tiempo principal, sólo tengo un movieclip con un campo de texto dentro de él para posteriormente poder cambiarle el nombre, y como nombre de instancia le puse load_btn.

Ahora creamos la clase para base.fla:

...le colocamos como nombre "Base" para crear la clase

Luego damos ok y guardamos en el mismo directorio que el base.fla. Lo siguiente es usar la clase en nuestro archivo flash, para ello nos vamos a Actionscript Settings:

Luego escribimos el nombre de nuestra clase y damos ok.

Ahora vamos a hacer exactamente lo mismo con nuestro archivo peli el cual debe tener una clase que se llama Peli.as. Teniendo esto empezamos con lo importante.

Vamos a irnos a nuestro archivo Base.as. Si algún curioso exportó la película, seguramente habrá visto que sale un error en el compilador de flash, esto es porque primero debemos importar otra clase en la línea 3 de nuestro Base.as donde dice "public class Base" agregaremos "extends MovieClip".

Debe quedarnos algo como esto:

Este paso debe hacerse igual con la clase Peli.as. Lo que queremos conseguir es cargar la película "peli.swf", dentro de nuestra película "base.swf", pero además vamos a llamar una función contenida dentro de "peli.swf" con el botón "load_btn" que tenemos en nuestra línea de tiempo principal y luego, cuando termine la acción que ejecutamos, activaremos un botón en peli.swf para descargarse a sí mismo.

Coloco primero todo el código de Base.as y lo explicaré por partes:

Código :

 package  {    import flash.display.MovieClip;    import flash.display.Loader;    import flash.net.URLRequest;    import flash.events.MouseEvent;    import flash.events.Event;        public class Base extends MovieClip{       public var cargador:Loader;       public var req:URLRequest;       public var pelicula:Object;        public function Base() {          // constructor code          //asignamos a memoria la variable que cargara el archivo          cargador = new Loader() as Loader;          //asignamos la direccion del archivo que se va a cargar          req = new URLRequest("peli.swf");          //colocamos un nombre a load_btn y asignamos un listener para que cargue el archivo al darle click          load_btn.text_btn.text = "cargar";          load_btn.addEventListener(MouseEvent.CLICK, cargar);                 }       function cargar(event:MouseEvent):void{          //cargamos el archivo          cargador.load(req);          //agregamos un listener que espere a que la carga este completa, si esta completa llamara la funcion "fincarga"          cargador.contentLoaderInfo.addEventListener(Event.COMPLETE, fincarga);       }       function fincarga(e:Event){          pelicula = e.currentTarget.content;          //agregamos cargador al escenario para poder visualizar el contenido de peli.swf          addChild(cargador);          //agregamos el listener que llamara a la funcion de peli a load_btn;          load_btn.addEventListener(MouseEvent.CLICK, llamarfuncionpeli);          load_btn.text_btn.text = "mover";       }       //funcion que descarga "peli.swf"       function descargar(){          //descargamos peli.swf          cargador.unload();          //removemos a cargador del escenario          removeChild(cargador);       }       //funcion que llama la funcion dentro de "peli.swf"       function llamarfuncondepeli(event:MouseEvent):void{          //llamamos la funcion dentro de "peli.swf"          pelicula.mover();       }     }     }

Primero importamos las clases necesarias:

Código :

 package  {    import flash.display.MovieClip;    import flash.display.Loader;    import flash.net.URLRequest;    import flash.events.MouseEvent;    import flash.events.Event;

Declaramos la variables que necesitaremos, son 3 para este ejemplo. En la función principal de la clase asignamos sus valores. La primera será la encargada de permitir que flash cargue el archivo "peli.swf", la segunda contendrá el nombre o la dirección del archivo que queremos cargar como un valor string, y por último necesitamos una variable que llamaremos "pelicula" en la cual estará todo el contenido del "peli.swf" luego de que sea cargado.

Código :

 public class Base extends MovieClip{       public var cargador:Loader;       public var req:URLRequest;       public var pelicula:Object;        public function Base() {          // constructor code          //asignamos a memoria la variable que cargará el archivo          cargador = new Loader() as Loader;          //asignamos la direccion del archivo que se va a cargar          req = new URLRequest("peli.swf");          //colocamos un nombre a load_btn y asignamos un listener para que cargue el archivo al darle click          load_btn.text_btn.text = "cargar";          load_btn.addEventListener(MouseEvent.CLICK, cargar);          }

Ahora creamos la función que llamará el botón al darle click y la cual tendrá que cargar el archivo "peli.swf". Además, agregamos un listener que esperará a que la carga esté completa para que en ese momento llame a otra función que se encargará de asignarle el contenido cargado a la variable "pelicula":

Código :

 function cargar(event:MouseEvent):void{          //cargamos el archivo          cargador.load(req);          //agregamos un listener que espere a que la carga este completa, si esta completa llamara la funcion "fincarga"          cargador.contentLoaderInfo.addEventListener(Event.COMPLETE, fincarga);       }       function fincarga(e:Event){                         //asignamos el contenido del swf cargado a la variable tipo objeto          pelicula = e.currentTarget.content;          //agregamos cargador al escenario para poder visualizar el contenido de peli.swf          addChild(cargador);          //agregamos el listener que llamara a la funcion de peli a load_btn;          load_btn.addEventListener(MouseEvent.CLICK, llamarfuncionpeli);          load_btn.text_btn.text = "mover";       }

Aclaro que para poder visualizar peli.swf es necesario agregar al escenario a "cargador" con el método addChild(), mientras que la variable película la estamos usando sólo como referencia para poder llamar las funciones dentro de "peli.swf". Además de asignarle el contenido a la variable "pelicula" también asignamos un nuevo listener a "load_btn" para que llame la función dentro peli.swf.

Ahora en peli.fla tengo lo siguiente:

Solamente es un movie clip que se llama "bola_mc" y otro movie clip que funcionará como botón y lo llamaremos "unload_btn".
Ahora publico todo el código de Peli.as con una breve explicación:

Código :

 package  {    import fl.transitions.Tween;    import fl.transitions.easing.*;    import fl.transitions.TweenEvent;    import flash.events.MouseEvent;    import flash.display.Loader;    import flash.display.MovieClip;        public class Peli extends MovieClip{       var animar:Tween;        public function Peli() {          // ocultamos el boton del escenario          unload_btn.visible = false;       }//funcion para animar la bola       public function mover(){          animar = new Tween(bola_mc, "x", Strong.easeOut, 58, 400, 1, true);          //listener para mostrar el boton en el escenario cuando termine la animacion          animar.addEventListener(TweenEvent.MOTION_FINISH, fin);       }       private function fin(event:TweenEvent){          //agragamos el listner al boton en el escenario que llamara la funcion en "base.swf"          unload_btn.addEventListener(MouseEvent.CLICK, descargame);          unload_btn.text_btn.text = "descargar";          unload_btn.visible = true;       }       public function descargame(event:MouseEvent):void{          //llamamos la funcion en base.swf          (root.loaderInfo.loader.root as Object).descargar();       }     }     }

Importo las clases necesarias y declaro variables:

Código :

 package  {    import fl.transitions.Tween;    import fl.transitions.easing.*;    import fl.transitions.TweenEvent;    import flash.events.MouseEvent;    import flash.display.Loader;    import flash.display.MovieClip;        public class Peli extends MovieClip{       var animar:Tween;

Estoy usando la clase tween para animar por medio de actionscript, por eso la única variable que hay se llama animar. En la función principal de la clase, oculto el botón que descargará la película del escenario:

Código :

       public function Peli() {          // ocultamos el boton del escenario          unload_btn.visible = false;       }

Ahora, ésta es la función que se llama desde "base.swf" y anima a "bola_mc" de un lado a otro:

Código :

                 public function mover(){          animar = new Tween(bola_mc, "x", Strong.easeOut, 58, 400, 1, true);          //listener para mostrar el boton en el escenario cuando termine la animacion          animar.addEventListener(TweenEvent.MOTION_FINISH, fin);       }

La siguiente función espera que termine la animación y muestra el botón que permitirá descargar a peli.swf:

Código :

                 private function fin(event:TweenEvent){          //agragamos el listner al boton en el escenario que llamara la funcion en "base.swf"          unload_btn.addEventListener(MouseEvent.CLICK, descargame);          unload_btn.text_btn.text = "descargar";          unload_btn.visible = true;       }

Y finalmente la función que se usará para llamar a la función que descarga a "peli.swf" y que se encuentra en la línea de tiempo principal, es decir, base.swf.

Código :

                 public function descargame(event:MouseEvent):void{          //llamamos la funcion en base.swf          (root.loaderInfo.loader.root as Object).descargar();       }

Esta línea…

Código :

 (root.loaderInfo.loader.root as Object).descargar();

…es la que se encarga de navegar a través de la jerarquía de flash y encuentra la función en la película principal. A veces, es posible que, además del código que está en la clase, estén usando otro código aparte en el .fla, por esta razón es posible que tengan que navegar un nivel más abajo para encontrar el swf cargador. Para eso, la línea quedaría así:

Código :

 (root.loaderInfo.loader.root.loaderInfo.root as Object).descargar();

Por ahora dejaré hasta aquí el tutorial, pero esta es la base para la comunicación entre películas swf usando clases. Por último les dejo los archivos del tutorial aqui
Espero les sirva de algo, sobre todo a los que están empezando con AS3...
Saludos.

Mostrar imagen de día, tarde o noche con Javascript

Posted: 22 Mar 2012 02:49 AM PDT

Quiero compartir con ustedes un script que diseñé para una web. Dependiendo de la hora de la PC del usuario, una imagen de tarde, noche o día se mostrará. Para los que no saben, Javascript usa la hora local de la PC del usuario.

Usaremos 3 imágenes:

dia.jpg
tarde.jpg
noche.jpg

Y todas estas imágenes las guardamos en una carpeta llamada img. Luego colocamos dentro de las etiquetas <head> </head> nuestro javascript:

Código :

 /* En Javascript new Date(); nos devuelve o nos inicia una nueva fecha y la enviamos a que esté dentro de la variable ahora. */  /* En Javascript: getHours(); nos devuelve la hora de la PC del usuario y la enviamos a que esté dentro de la variable hora. */  <script type="text/javascript">  function mostrarSaludo(){ ahora=new Date();  hora=ahora.getHours();   /*  En estas 4 líneas le decimos que: si la hora de la PC es menor a 12 PM, que muestre el saludo: Buenos Días y a su vez que nos muestre nuestra imagen: dia.jpg . * /  if(hora<12){ texto="Buenos D\u00edas";   imagen="img/dia.jpg"; }   /* Las demás líneas hacen lo mismo: si la hora de la PC es tal, entonces que nos muestre el saludo correspondiente y también su imagen correspondiente. */  if(hora>12 && hora<18){ texto="Buenas Tardes"; imagen="img/tarde.jpg"; }  if(hora>18 && hora<24){ texto="Buenas Noches"; imagen="img/noche.jpg"; }   /* Acá le decimos que nos muestre la imagen (día, tarde o noche) en el destino con ID: tiempo. */ document.images["tiempo"].src=imagen;   /* Acá le decimos que nos muestre el saludo (Buenos días, Buenas tardes o Buenas Noches) en el siguiente destino con ID: saludo. */ document.getElementById('saludo').innerHTML = texto;  }  </script>

Dentro de las etiquetas <body> </body> colocamos nuestros contenedores, capas o divs. De la siguiente manera:

Código :

<body onload="mostrarSaludo()">  <div id="saludo"></div>  <div id="img"><img name="tiempo"></img></div>  </body>

Podemos ver que en la apertura de nuestra etiqueta <body> </body> lo siguiente:

Código :

 <body onload="mostrarSaludo()"> </body>

Pues allí estoy llamando a la función que se creó en Javascript para mostrar las imágenes. Y le estamos diciendo que al hacer un onload (terminar de cargar nuestro body o todo nuestro contenido que está en el body), que cargue el script y que funcione.

VER DEMO

Espero les haya gustado!

Un dia normal del foro

Posted: 19 Nov 2007 04:00 PM PST

"Hordie", esa bella combinación de usuarios nuevos que llega en estampida en las vacaciones, vuelve al hogar, los foros de Clab.

AT boletín - INFORMA

viernes, 13 de abril de 2012

Cristalab

Cristalab

¿Qué significa esto para los desarrolladores en Flash y Actionscript 3?

Para el uso normal de Flash, no significa mucho

Para los creadores de banners: Hora de no usar Flash

Para quienes usan Flash de manera invisible como "canal"

¿Para donde va Flash en los desktops?

No hay comentarios:

Publicar un comentario