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.
- No se debe crear banners compuestos de más de tres pasos.
- Optimizar las imágenes fotografías a una calidad del 90%
- Utilizar gráficos vectoriales, vale la pena sobretodo porque las campañas manejan diferentes tamaños.
- Animar por programación.
- 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.
El código utilizado para animar los copies es el siguiente:
-
import mx.transitions.Tween;
-
-
/*
-
SCRIPT BY: Andrés Bedoya Tobón
-
email: lasmovies@gmail.com
-
page: www.lasmovies.com/blog
-
*/
-
-
function hideImages()
-
{
-
-
copy1._visible = false;
-
copy2._visible = false;
-
copy3._visible = false;
-
-
}
-
-
hideImages();
-
playBanner();
-
-
function playBanner()
-
{
-
-
var met = mx.transitions.easing.Back.easeIn;
-
hideImages();
-
copy1._visible = true;
-
copy2._visible = false;
-
copy3._visible = false;
-
//t1 = new Tween(img1, "_x", met, 541, 0, 0.5, true);
-
t1 = new Tween(copy1, "_y", met, -100,copy1._y, 0.5, true);
-
-
t1.onMotionFinished = function()
-
{
-
-
setTimeout(frame2,3000);
-
//frame2();
-
}
-
-
}
-
-
function frame2()
-
{
-
var met = mx.transitions.easing.Strong.easeIn;
-
copy1._visible = false;
-
copy2._visible = true;
-
copy3._visible = false;
-
-
//img2.swapDepths(1);
-
//t2 = new Tween(img2, "_x", met, -541, 0, 0.5, true);
-
t2 = new Tween(copy2, "_y", met, 400, copy2._y, 1, true);
-
t2.onMotionFinished = function()
-
{
-
setTimeout(frame3,3000);
-
}
-
-
-
}
-
-
function frame3()
-
{
-
-
var met = mx.transitions.easing.Bounce.easeIn;
-
copy1._visible = false;
-
copy2._visible = false;
-
copy3._visible = true;
-
-
-
t3 = new Tween(copy3, "_y", met,-100,copy3._y, 0.5, true);
-
t3.onMotionFinished = function()
-
{
-
}
-
-
}
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.
