Alejandra 12 de junio de 2008 a las 17.56
   Imprimir artículo
elWebmaster.com

Taller de Flash: Formatos publicitarios


Icono de Adobe FlashCon Adobe Flash la publicidad online dejó de ser un punto fijo en la pantalla y pasó a ser algo mucho más dinámico generando mayor interacción, sorpresa y nuevas funcionalidades. En esta clase veremos los distintos formatos de publicidades hechas con Adobe Flash y cómo hacerlas.

Banners, expandibles, pop-ups… ¿Qué son? ¿Cuándo usarlos? ¿Qué es un Peel Away? ¿Cómo inicio el contador de clics? Sigue la clase de hoy para ver la respuesta a estos y otros interrogantes. Además: tutoriales, ejemplos y tips.
A diferencia de un banner estático o un gif animado, las publicidades hechas en Adobe Flash están en otro nivel de animación y le dan al usuario la posibilidad de interactuar. Veamos qué cosas se pueden agregar en una publicidad de este tipo:

  • Movimiento: es más fácil generar animaciones y estas pueden ser muy efectivas para llamar la atención de las personas que ingresan en el sitio.
  • Interacción general con el usuario: incorpora elementos con los que las personas pueden interactuar, ya sea “modificando” el ad, generando movimiento, jugando…
  • Fase de contacto: en comerciales de servicios, universidades o incluso portales puede ser muy provechoso incluir un formulario de contacto donde la gente pueda dejar sus datos para solicitar más información.

Además, el hecho de que la publicidad se muestre en otro sitio da la impresión de que no existe ningún compromiso con la empresa. Otra utilidad es el registro de usuarios para el envío de newsletters o publicidad.

Banner

Un banner es el equivalente a una publicidad gráfica en la web.

Las principales características de un banner son:

  1. Cumplen con un formato estándard estático.
  2. Están ubicados en un lugar determinado de un sitio web.
  3. Suelen jugar con la animación para llamar la atención de los usuarios.
  4. En el caso de que exista interacción con los usuarios, esto no modifica o altera el formato del banner.

En el ejemplo vemos un banner de tamaño standard (728 x 90 píxeles) con una animación movida y persistente.

Zip chicoHaz clic para descargar el archivo FLA comprimido con el banner original (344 Kb).

Para abrir el archivo es necesario contar con la versión de Flash 8 o superior.

Expandibles

Estos banners tienen dos componentes esenciales: ampliación e interacción. La idea es generar un banner en un formato estándard pero que tenga la posibilidad de ampliarse cuando la persona pase el mouse por encima de la publicidad.

El principal beneficio de un banner expandible es que permite explotar al máximo el espacio. Pautar un banner de 300 x 300 píxeles que se expande verticalmente un 100% cuesta menos que pautar un banner de 300 x 600.

Las características generales de un banner expandible son:

  1. Cumplen con un formato estándard NO estático.
  2. Están ubicados en un lugar determinado de un sitio web.
  3. Se expanden en sentido vertical u horizontal.
  4. La interacción de los usuarios altera el formato del banner.
  5. Tiene dos instancias visuales.

Para hacer un banner de este tipo es necesario hacer 2 banners. Un SWF con el banner en tamaño original (supongamos 468 x 60 píxeles) y otro SWF con el banner y su ampliación (supongamos que llega a 468 x 180 píxeles). Luego, con JavaScript se programa para que al pasar el mouse por el primer SWF se realice un llamado al segundo SWF.

El ejemplo de la derecha intenta ilustrar lo que sucede en las dos instancias. El fondo negro es el tamaño que tendrá el banner en el sitio.

El banner es más pequeño. Al posar el mouse encima se abre el segundo banner, que se amplía. Al sacar el mouse de encima, vuelve a mostrarse el banner inicial.

En el SWF pequeño es necesario:

  1. Incluir un stop() en el último frame de cualquier capa.
  2. Crear una capa con un botón invisible.
  3. Al botón invisible darle el código para abrir el segundo SWF. Será algo como esto:
  4. on (rollOver) {
    	getURL("javascript:ampliarPeel();");
    }

En el SWF grande deberías:

  1. Hacer una animación con tres instancias: un punto de inicio, un punto final y de nuevo el punto inicial.
  2. En un frame del punto central darle la acción stop().
  3. En una capa nueva, en el frame del punto central crear un botón invisible.
  4. Al botón invisible darle el código para abrir el segundo SWF. Será algo como esto:

    on (rollOut) {
    	getURL("javascript:reducirPeel();");
    }
    
    on (release) {
    	getURL(_root.clickTag, "_blank");
    }

Zip chicoHaz clic para descargar el FLA original comprimido del SWF pequeño (74 Kb)
Haz clic para descargar el FLA original comprimido del SWF grande (74 Kb)
Para abrir los archivos es necesario contar con la versión de Flash 8 o superior.

El código que hemos incluido es orientativo.

Pop-up

Los molestos pop-ups que se abren en una ventana diferente del navegador ya están fuera del circuito: son molestos, anticuados y se ganaron el odio de todos. Sin embargo los pop-ups se siguen usando, pero ahora se hacen con Flash y se abren dentro de la web donde estamos navegando.

Un pop-up nos asegura que sí o sí van a ver nuestra publicidad porque está por encima del sitio. El problema que conlleva esta súbita importancia es que mucha gente (por no decir la mayoría) cierra el pop-up apenas aparece sin siquiera ver el contenido. Está entonces en los diseñadores mostrar un mensaje atractivo, que se lea a simple vista y que detenga al usuario antes de que piense en cerrarlo (un milisegundo). Si el diseñador logra eso, el pop-up será mucho más efectivo que un banner común y corriente.

(En este caso, la cruz no tiene funcionalidad)

Las principales características de un pop-up son:

  1. Tienen un punto de inicio donde aparecen y un punto de llegada, que es donde se detienen.
  2. Quedan estáticos en un lugar determinado de un sitio web.
  3. No tienen un formato estándard determinado.
  4. El mensaje debe ser directo.
  5. El uso de la animación es casi exclusivo para el recuadro del pop-up.
  6. Se incluye una X para que el usuario pueda cerrar la publicidad. Comunmente es la única interacción del ad. En la X deberás incluir el código correcto para cerrar la ventana.

Peel Away

El Peel Away es un tipo de publicidad experimental aún no masiva donde se ve una pequeña solapa en movimiento generalmente en el costado superior derecho de un sitio web. Al desplazar el mouse por encima, la solapa se despliega como la hoja de un libro. De hecho, la traducción literal de Peel Away sería “Deshojar”.

Las principales características de un Peel Away son:

  1. Cumplen con un formato NO estático.
  2. Están ubicados en un lugar determinado de un sitio web.
  3. Se expanden en sentido vertical, horizontal o diagonal.
  4. La interacción de los usuarios altera el formato del banner.
  5. Tiene dos instancias visuales.

El Peel Away es similar al banner expandible en muchos sentidos, pero tiene una diferencia considerable: en su estado inicial es mucho menor y en su estado ampliado suele ser mucho mayor. O sea, es mucho mayor el porcentaje de ampliación.

A la derecha hay un ejemplo reducido de cómo funciona el SWF del Peel Away.

Zip chicoHaz clic para descargar el ZIP con el FLA original comprimido del SWF pequeño (285 Kb)
Haz clic para descargar el ZIP con el FLA original comprimido del SWF grande (303 Kb)
Para abrir los archivos es necesario contar con la versión de Flash 8 o superior.

Ten en cuenta que el uso de imágenes a la hora de realizar un Peel Away puede perjudicarnos en el peso del archivo. Cuando el Peel Away se extiende hasta alcanzar el tamaño máximo de la pantalla el tema del tratamiento de imágenes se vuelve imprescindible.

Código

Para empezar, todas las publicidades hechas en Adobe Flash deben incluir un código que permite el conteo de los clics que se hacen sobre el aviso. ¿Cómo? Sigue los pasos:

  1. Agrega una capa nueva y llámala “Botón”
  2. En esa capa crea un rectángulo que ocupe todo el tamaño del banner.
  3. Convierte el rectángulo en un botón invisible (Ver clase 10: Botones avanzados).
  4. Pega el siguiente código en el botón:

    on (rollOver) {
    	getURL("javascript:ampliarPeel();");
    }

El código puede variar según el servicio de planeamiento y marketing que maneje el responsable de marketing o el SEO de la empresa.

Cuando más cerca estamos del diseño avanzado, se genera una mayor necesidad de involucrarnos con el código, trabajando en conjunto con los programadores o desarrolladores. Muchos de estos avisos tienen un gran componente de JavaScript para que la interacción y el registro de datos sea posible.

Por ejemplo, necesitarás JavaScript para que el banner expandible y el Peel Away funcionen correctamente. Sin Java, todo lo que esté “debajo” del banner ampliado quedará sin funcionalidad… Esto significa que si tienes un Peel Away y no usas JavaScript, todos los enlaces del sitio ubicados debajo de la publicidad abierta quedarán nulos, no se podrán usar. JavaScript además agrega funcionalidad a la publicidad, sirviendo de intermediario entre las acciones del archivo SWF y, por ejemplo, la base de datos de un sitio. Pero eso es tema de los programadores…

<< CLASE ANTERIOR

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (15)

  1. JUAN PABLO ENRIQUEZ MARCILLO dice:

    Excelente clase esta muy interesante esto es lo que estaba esperando espero que pueda aplicar todo y poner a funcionar todos los aportes que nos brindas,muchas gracias.

  2. Juan Pablo Enriquez dice:

    Mira ya descare los archivos pero me pasa lo mismo que en otras clases de las cuales he descargado archivos no se pueden abrir, tengo instalado en mi pc Flash 8 y lo actualizo constantemente pero siempre pasa lo mismo, sera que me puedes colaborar por fa,esta clase esta genial pero quisiera tener en mi pc tus valiosos aportes para aprender mucho mas.Gracias.

  3. JUAN PABLO ENRIQUEZ MARCILLO dice:

    porfavor no te olvides de revisar los archivos fla para poder practicar los he vuelto a descargar y me sigue saliendo en mi programa flash 8 el mensaje que dice: Formato inesperado. colaborame me interesa en realidad esta clase.
    chaito y muchas gracias. me podrias escribir cualquier sugerencia a mi correo te lo agradeceria de todo corazon.

  4. Ricardo soto dice:

    orale exellente sitio, gracias por tus aportación, revisare lo mas posible… saludos

  5. Gustavo Hernández dice:

    Hola, he estado siguiendo tu curso de Flash, me parece excelente. Solo tengo dudas con el codigo de javascript de los flashes EXPANDIBLES y PEEL AWAY. ¿Cómo se aplica este código al HTML? Saludos.

  6. Javier dice:

    Yo tambien tengo dudas sobre el codigo de los banners expandibles, como es ese codigo??

  7. afperea dice:

    hola esta muy buena tu web y los ejemplos de publicidad

  8. KuoDesign dice:

    Estimados, he descargados los fla y me parecen comprensibles, sin embargo al momento de crear mi propi html de ejemplo con estos swf descargados, no funcionan,. ¿Habra algo mas ke hacerles aparte de solo incluir el “despiertate_small.swf”?. Ojala me colaboren. Un abrazote para todos.

  9. Omar dice:

    Gracias por la clase hace mucho que estaba buscando algo así, pero al momento de crear un banner expandible no le muestra, no se si se necesite más código o que es lo que esta pasando, agradecería mucho el que me pudieran ayudar.

  10. orlando dice:

    broth sobre page peel como hago para colocarlo por encima de un banner hecho en flash ?????
    dolanor_24@hotmail.com

    espero que me ayudes please…

  11. JorgePelozo dice:

    Hola, esta muy bueno el flash.. pero en el tuto muestra que el rollOut llama a una funcion javascript. como esta compuesta esa funcion? si me pueden ayudar por favor!

  12. Omar Maluf dice:

    La clase está buena. Pero lamentablemente no se abren los .fla y deberías incluir las funciones javascript para que esté completa. De otra forma sólo nos sirve para saber que tú sí lo has logrado. Con buena onda te lo digo. Gracias.

  13. Nico dice:

    Hola amigos! Muy bueno el curso, aunque es una lástima que la web no se siga actualizando. Les comento a los que no pueden abrir a los archivos, es porque tienen una versión del software Adobe Flash vieja.

  14. Lea dice:

    Hola, mi duda es la misma que la de todos en el banner expandible.. como y donde aplico el codigo java en el html.. gracias lo demas clarisimo..

  15. Oscar González dice:

    En verdad hay gente con pura mala leche. (Omar Maluf por ejemplo). Esta clarísimo el ejemplo, solo tienen que leer bien. El codigo flash, obviamente se pone en ActionScript, dentro del mismo Flash, (ah y descarguense minimo la versión CS3, Flash 8 es obsoleto para el 2011). El código Java no es que esté incompleto, es que tienen que colocarlo en el lugar correcto, en el body, para ser precisos. Y traten de meter sus .swf en div’s… el problema es que mucha gente aquí no sabe nada de HTML y cuando uno no pone el código milimetricamente específico se amargan. Lo que deberían hacer es seguir buscando en más foros lo que les falta, un poco más y nos llaman a la jato para hacerles la chamba.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder