Taller de Flash: Banners, botones y otros usos

Aunque 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.