Alejandra 29 de mayo de 2008 a las 16.06
   Imprimir artículo
elWebmaster.com

Taller de Flash: Banners, botones y otros usos


Adobe FlashAunque es posible crear un sitio completamente con Adobe Flash, su principal función es hacer esas cosas que HTML y CSS no nos permiten. La ventaja de Flash es que es fácil de usar y su calidad visual es excelente. Dentro de una página web Flash se puede ver en un menú, una botonera, como una presentación animada del sitio… Es muy frecuente para banners, ya sean publicitarios o no.

¿Qué más se te ocurre que puede hacer Adobe Flash por tu sitio? Bueno, los reproductores actuales de video están hechos en Flash… En esta clase voy a darte ideas y ejemplos de los usos más comunes de Flash en la web y cómo implemetarlos.
Dado que Flash nos permite generar animaciones sin necesidad de escribir código, complicarnos la cabeza con programación o invertir mucho tiempo, casi cualquier cosa que requiera una mínima animación puede hacerse con Flash. ¿Es lo ideal? Lo mejor es no abusar de este recurso, pero en pequeñas dosis se puede enchular un sitio fácilmente. Veamos…

Banners

Quizás sea el uso de más frecuente de Flash, especialmente en portales como periódicos online. Los banners pueden contener:

1. Publicidad externa de un producto/servicio/sitio web

La publicidad externa de un producto, servicio o sitio web que no son nuestros generalmente es diseñada por otra persona no vinculada a nuestro sitio. Es un swf que puede ser interactivo o no. Generalmente tiene mucho despliegue de movimiento y están linkeados a otro sitio web.

Los formatos en píxeles más comunes de banners son:

  • 728 x 90 (Alternativa pequeña: 468 x 60)
  • 700 x 300
  • 336 x 280 (Alternativa pequeña: 300 x 250)
  • 160 x 600 (Alternativa pequeña: 120 x 600)
  • 250 x 250 (Alternativa pequeña: 200 x 200)

Aquí un ejemplo de una publicidad en formato 468 x 60 px promocionando a National Geographic:

2. Publicidad interna de alguna sección de nuestro sitio

Los banners publicitarios internos los diseñamos nosotros y tienen un estilo que concuerda con el de nuestra web. Se nota que pertenecen al sitio y actúan como un link. Se usan para llevar tráfico a una parte de nuestra web que queremos activar. Están linkeados a otra sección de nuestra web.

En el sitio oficial de la cantante Pink se puede ver de manera muy destacada un banner con publicidad sobre tours, un DVD que lanzó y el último video. El primero es un link a la sección Eventos del sitio y los otros dos enlazan a la sección Videos.

3. Presentación sobre el contenido del sitio/productos de la empresa

Las presentaciones que se ven en un sitio informan al usuario sobre algún contenido o producto actual y novedoso. Suelen estar linkeados a contenido relacionado.

En las páginas de las revistas de cine mexicanas Cine Premiere y CINEMANÍA puedes ver un banner superior presentando los últimos estrenos en materia de cine. Los banners están linkeados a una página con información sobre las películas que presentan.

Botonera y menú

Aunque no es muy usual, algunos diseñadores prefieren hacer sus botoneras y menúes en Flash, generando efectos únicos que llamen la atención. Suele suceder que muchos diseñadores principiantes utilizan Adobe Flash cuando podrían lograr los mismos efectos con CSS o JavaScript. Para ellos Adobe Flash es la respuesta a muchas cosas que querrían hacer y que de otra manera no podría.

Además de los efectos de fade, esta botonera no dice mucho. Hershey’s en cambio tuvo que ingeniárselas para acomodar su larga lista de ricos productos en un mismo menú. La página oficial de Hershey’s muestra en su parte inferior un menú con desplazamiento lateral que resulta una muy buena solución (hecha en Flash, claro ;)):

El menú de Cartoon Network lo tiene todo. Sino miren:

Introducciones

Las introducciones cayeron en desuso por ser molestas para los usuarios. Dado que en Internet el tiempo es más que oro, una animación de varios segundos es casi un crimen. Personalmente aconsejo dejar de lado las introducciones. Ahora en algunos sitios web se están viendo mini-intros dentro del home. Son como banners a gran escala que funcionan como introducciones dando información sobre las cosas más importantes que tiene el sitio… Vendrían a ser grandes banners de presentación, pero no más que eso.

Las introducciones por otra parte siguen apareciendo con frecuencia en sitios construidos casi por completo en Flash, pero cada vez más los diseñadores se avivan y utilizan las animaciones en los preloaders para hacernos más amena la espera de la carga…

Otros usos

La combinación de HTML y Flash puede separar conceptualmente dos o más secciones de un mismo sitio. En el sitio de HP existe una sección llamada Print Studio (un asistente de impresión) vinculada al diseño. En este caso, la sección está integramente construida en Flash. Esto permite otro tipo de interacción con el usuario y da la sensación de estar en una parte especial de esta web.

En respuesta a la necesidad de espacios con mayor interactividad con el usuario, los diseñadores incorporan elementos de Adobe Flash a sus sitios. El sitio de Lonely Planet ha incluido en la portada un mapa interactivo donde el usuario puede escoger el continente al cual desea viajar:

Esto se ve mucho en las webs destinadas a niños, con un formato HTML de marco y secciones de juegos creadas con Flash.

Espero que esta clase les haya gustado… La clase que viene los espero con un capítulo dedicado al uso de Adobe Flash en publicidad.

<< CLASE ANTERIOR

CLASE SIGUIENTE >>


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

Comentarios (11)

  1. nacho dice:

    Que bueno todo, no tienen los archivos de esta clase? me interesa el de cartoon

  2. damaris quevedo dice:

    este es el mejor taller que he visto, me ha sido super util, lo unico que cuando llegue al tema de Banners, botones y otros usos, ya no me permite seguir, se quita el hiperlink de clase siguiente, me gustaria que chequearan eso y lo permitieran. Gracias.

  3. alex dice:

    solo faltan 4 clases vamos, hasta ahora lo han hecho bien

  4. vicente dice:

    Excelente las lecciones, esperando ver los archivos para ver como se hace una animación, porque este ejemplo nos permitirá hacer nuestras propias animaciones. En base a estudiar un modelo podemos aprender más, es decir observando la linea de tiempo y practicando. Quiero avisarles que como agradecimiento a sus apoyo, estoy poniendo un aviso publicitario gratuitamente, en mi sitio web.
    Gracias nuevamente.

  5. RONALD VALLECILLA dice:

    Esto era lo que andaba buscando, una excelente herramienta para hacer una buena pagina web o un excelente portal. me gustaria que avanzaran para alimentarnos mas.

  6. Maximiliano dice:

    Como andan? Antes que nada muy buenos cursos. Sería muy importante, de ser posible, que estén dispoible para descargar algún archivo que contenga una botonera como la de Cartoon Network (de ese estilo) y si puede ser también un archivo con los componentes de la parte multimedia (de audio y video) con los respectivos action screep para poder utilizarlos.
    Muchas gracias

  7. Alejandra dice:

    Si quieres puedo enviarte los swf que están incluidos en esta clase. Sin embargo no contamos con los archivos “.fla” ya que todas las animaciones presentadas aquí son meros ejemplos de lo que publicamos en el tutorial. ¡Puedes probar hacer el tuyo propio desde cero!

  8. Mauricio dice:

    Muchas Gracias , por este gran aporte. Hace un mes que comence en el mundo del desarrollo web. Ya he recorrido html,dhtml,css, javascript y desde hace una semana investigo flash cs4 y estas clases me despejaron dudas basicas de este producto.
    Nuevamente gracias y sigan adelante……………..

  9. G3rardo dice:

    ahhhhh hasta aquí llegan las clases por ahora, bueno estaré pendiente de la próxima clase, gracias por tan excelente aporte a la WebMaster.

  10. Morton dice:

    Hola, G3erardo:
    El Taller de Flash continúa aquí: http://www.elwebmaster.com/editorial/taller-de-flash-flash-publicitario
    Ya fue corregido el enlace roto.
    Saludos!

  11. G3rardo dice:

    ok. Gracias Morton muy amable, saludos.

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