Sep 16

Parar la linea de tiempo por x segundos y luego seguir, flash as 2.0

AS2 No Comments »

Cuando se animan banners, a veces es necesario que un frame se muestre por determinado tiempo, la solución para esto es agregar frames calculando un tiempo de duración, esto puede ser molesto o demorado según el caso. Si queremos estar seguros del tiempo de duración del frame, agregamos el siguiente script en el frame que necesitamos una pausa por un determinando tiempo en segundos.

Nota: Cada que se requiera una pausa, se recomienda cambiar el nombre a la función seguir.

PLAIN TEXT
Actionscript:
  1. stop();
  2. seg = 5;
  3. function seguir(){
  4. //Poner accion a seguir ejemplo play();
  5. }
  6. setTimeout(seguir,seg*1000);

Uso:

seg: Cunatos segundos se va a parar la linea de tiempo
Dentro de la función, poner la instrucción que se ejecuta cuando pasa el tiempo, por ejemplo play, gotoAndPlay("frame").

Escrito por @lasmovies \\ tags: , , , ,

Dec 01

Optimizar banners por medio de programación

AS2 No Comments »

Cuando un cliente realiza una campaña que va a estar presente en diferentes medios web, la mayoria (portales, periodicos, revistas, entre otros). Exigen un peso mínimo del banner que se va a mostrar según sus dimensiones.

Generalmente esto restringe demasiado la interacción del banner si se realiza del modo tradicional, es decir con animción por línea de tiempo con interpolación.

Para no limitar la creatividad y para cumplir con requisitos de peso, acá dejo unos tips que pueden ser muy utiles para sacar una campaña exitosa.

  1. No se debe crear banners compuestos de más de tres pasos.
  2. Optimizar las imágenes fotografías a una calidad del 90%
  3. Utilizar gráficos vectoriales, vale la pena sobretodo porque las campañas manejan diferentes tamaños.
  4. Animar por programación.
  5. Evitar cargas externas de archivos (Posiblemente a algunos usuarios no les funcione) .

A continuación les dejo un pequeño ejemplo, el reto era crear un banner de 336x850, con animación y con un peso total de 60 kb.

Modifique las imagenes del original, acá pongo un banner que pesa 5,74 KB, aplicando los tips anteriores.

This movie requires Flash Player 8

El código utilizado para animar los copies es el siguiente:

PLAIN TEXT
Actionscript:
  1. import mx.transitions.Tween;
  2.  
  3. /*
  4. SCRIPT BY: Andrés Bedoya Tobón
  5. email: lasmovies@gmail.com
  6. page: www.lasmovies.com/blog
  7. */
  8.  
  9. function hideImages()
  10. {
  11.  
  12.     copy1._visible = false;
  13.     copy2._visible = false;
  14.     copy3._visible = false;
  15.  
  16. }
  17.  
  18. hideImages();
  19. playBanner();
  20.  
  21. function playBanner()
  22. {
  23.    
  24.     var met = mx.transitions.easing.Back.easeIn;
  25.     hideImages();
  26.     copy1._visible = true;
  27.     copy2._visible = false;
  28.     copy3._visible = false;
  29.     //t1 = new Tween(img1, "_x", met, 541, 0, 0.5, true);
  30.     t1 = new Tween(copy1, "_y", met, -100,copy1._y, 0.5, true);
  31.    
  32.     t1.onMotionFinished = function()
  33.     {
  34.        
  35.         setTimeout(frame2,3000);
  36.         //frame2();
  37.     }
  38.    
  39. }
  40.  
  41. function frame2()
  42. {
  43.     var met = mx.transitions.easing.Strong.easeIn;
  44.     copy1._visible = false;
  45.     copy2._visible = true;
  46.     copy3._visible = false;
  47.    
  48.     //img2.swapDepths(1);
  49.     //t2 = new Tween(img2, "_x", met, -541, 0, 0.5, true);
  50.     t2 = new Tween(copy2, "_y", met, 400, copy2._y, 1, true);
  51.     t2.onMotionFinished = function()
  52.     {
  53.         setTimeout(frame3,3000);
  54.     }
  55.    
  56.    
  57. }
  58.  
  59. function frame3()
  60. {   
  61.    
  62.     var met = mx.transitions.easing.Bounce.easeIn;
  63.     copy1._visible = false;
  64.     copy2._visible = false;
  65.     copy3._visible = true;
  66.    
  67.    
  68.     t3 = new Tween(copy3, "_y", met,-100,copy3._y, 0.5, true);
  69.     t3.onMotionFinished = function()
  70.     {   
  71.     }
  72.    
  73. }

Y para animar las bolas cayendo, se utiliza un script que se explica en uno de los post anteriores:

http://www.lasmovies.com/blog/efecto-de-objetos-cayendo-v1/

Nota: He trabajado en campañas masivas de marketing, los tips que se explican acá son utiles para la mayoría de medios en Colombia. Para el caso del exterior o dependiendo de los requerimientos para medir el éxito de la campaña se debe utilizar obligatoriamente animación por línea de tiempo, este es el caso de las campañas que exigen reporte de click utilizando motif ad kit.

Escrito por @lasmovies \\ tags: , , , ,

Nov 21

Navegación condicional

AS2 No Comments »

Muchas veces necesitamos crear funcionalidades en un menú o en una sección que queremos habilitar sólo si se cumple con un parámetro en particular. En el siguiente ejemplo se tiene en cuentaque las secciones se habiliten sólo si cumple con la condición del día, que va dado por un número así (lunes 1, martes 2, ...)

This movie requires Flash Player 8

Para pasarle el parametro con la líbreria swfObject así:

PLAIN TEXT
HTML:
  1. <script src="swfobject.js" type="text/javascript"></script>
  2. <script type="text/javascript">
  3. var s1 = new SWFObject("tanga.swf","ply","849","629","9","#FFFFFF");
  4. s1.addVariable("dias","2");
  5. s1.addParam("wmode","transparent");
  6. s1.write("container");
  7. </script>

Escrito por @lasmovies \\ tags: , , ,

Nov 19

Navegación por tabs

AS2 No Comments »

Hola, por acá les dejo un ejemplo de navegación por pestañas en un cabezote hecho en flash. ideal para cabezotes de blog o sitios híbridos flash + css + xhtml.

Referencia a herramientas utilizadas:
Librería swfObject, http://blog.deconcept.com/swfobject/

This movie requires Flash Player 8

Para abrir el menú con una opción preseleccionada, se le pasa el parámetro seccion al flash,

PLAIN TEXT
HTML:
  1. var s1 = new SWFObject("tabs.swf", "mymovie", "550", "50", "8", "#336699");
  2. s1.addVariable("seccion","1");
  3. s1.addParam("wmode","transparent");
  4. s1.write("container");

Este parámetro se interpreta así:

1 intrucciones
2 premio
3 tu deseo
4 ver deseos

Sólo queda cambiar el parametro que se le pasa a la función getURL, para que abra la sección determinada.

Escrito por @lasmovies \\ tags: , , , ,

Oct 22

Actividad de halloween, para otro sitio.

AS2 No Comments »

A continuación se pueden ver los pantallazos principales de una actividad que actualmente se encuentra al aire, La idea es ofrecer a los usuarios de un sitio la posibilidad de crear personajes (avatar) que caractericen monstruos, y luego se los puedan enviar a sus amigos por medio de correo o por facebook a su lista de amigos.

Primero entramos y vemos una galeria de todos los monstruos que han creado los usuarios, esta parte es de uso público, los usurios pueden ver los personajes y pueden votar por sus preferidos.

Luego si el usuario quiere crear un personaje, es necesrio que este registrado en el sitio...

Luego del logeo en el sitio es necesario descontar claves o puntos, los cuales se consiguen en los empaques de la marca que patrocina la actividad.

Una vez pasa esta parte de autorización, puede acceder a crear su personaje, ingresando diferentes características de su monstruo. (En este caso se pide primero el nombre del usuario y el nombre de su monstruo)

Luego esta la parte central de la actividad, es la posibilidad de poner las diferentes partes de su personaje, se puede escoger entre diferentes tipos de ojos, cuerpos, bocas y categoria varios.

Acá se ve como el usuario previsualiza su creación.

Cuando termina de crear el personaje, sale la opción de enviarlo a una amiga, esta operación pide el nombre del amigo y el email para enviarle una invitación. o lo envía a facebook, donde lo puede compartir con su lista de amigos.

Si el usuario decide ir a publicarlo a facebook, primero se visualiza su creación y luego se puede ir a seleccionar los amigos o los monstruos que desea enviar.

Esta es la pantalla que permite configurar y persoanlizar el envío de monstruos en facebook.

Para realizar esta aplicación se empleo un tiempo apróximado de dos semanas y de una diseñadora, y dos ingenieros.

Para ver la actividad click aquí, estará disponible por el mes de octubre y principios de noviembre.

Escrito por @lasmovies \\ tags: , , , , , ,

Previous Entries