¡Lo hicimos! Llegamos a la última clase del taller inicial de Adobe Flash y los pongo a prueba ¿DÃganme para qué sirve concretamente Flash? Es una pregunta un poco complicada para responder… pero básicamente su función es la de hacer animaciones interactivas y eso incluye: sitios web (enteros o partes), publicidades, cartoons y juegos. ¿Te conviene concretar tu proyecto en Flash? ¿DeberÃas hacer todo el sitio en Flash o sólo una parte?
En esta clase intentaré despejar el dilema de cuándo usar Flash, con algunos ejemplos de sitios y animaciones que lo han hecho muy bien.
Aciertos y desaciertos de sitios Flash
Adobe Flash tiene limitaciones y ventajas. El desafÃo del diseñador es tener en mente las posibles limitaciones que tendremos en un futuro con el sitio web, pero también anticipar las ventajas y exprimirlas. Por eso, previendo las limitaciones muchos diseñadores prefieren evitar Adobe Flash para la arquitectura del sitio, el diagrama, la programación en general, y usarlo únicamente para el aspecto gráfico, lo que podrÃa ser una botonera, banners, videos…
¿Y lo bueno? Mi hermana es ilustradora y me sorprendió ver que muchos de sus colegas han hecho su portfolio en Flash. Cada vez son más los artistas que se animan a mostrar sus trabajos usando Flash. Con Adobe Flash se puede hacer un sitio sencillo y muy vistoso en pocas horas sin grandes conocimientos de código.
Entre los aciertos y desaciertos del uso de Flash para hacer sitios web completos, destaco:
Aciertos
Mucha rapidez al hacer un sitio básico (no más de 5 secciones).- La apariencia de los objetos en la web es la misma que al momento de diseñar en Flash.
- Animación de elementos sin necesidad de conocer código.
- Uso de elementos vectoriales como componentes de un sitio.
- Resultados más “artesanales”.
- No tienes restricciones de encolumnado o ubicación de elementos en la diagramación del sitio.
Desaciertos
Archivos generalmente pesados = cargas lentas.- Edición lenta y manual del sitio debiendo ingresar al archivo FLA.
- Poca interacción con lenguajes de programación.
- Abuso de la animación.
- La URL suele no cambiar mientras se navega el sitio.
- Graves problemas de posicionamiento.
10 convenciones de Flash
XHTML y Flash son formatos que se trabajan diferente y proponen una diagramación y visualización distinta de los sitios web. Asà como en XHTML hay convenciones que indican que los links van subrayados o que al hacer clic sobre un enlace, éste recargará la página, en Flash existen otras convenciones a seguir:
- Los enlaces deben distinguirse a primera vista.
- Muestra una precarga, indicando que la web está cargando.
- Al hacer clic sobre un link, éste se debe abrir en la misma ventana.
- En un árbol de navegación normal, el nombre y/o logo del sitio debe estar en un lugar destacado y servir como enlace a la página inicial.
- Cuando el sitio lo requiera incluye breadcrumbs para que el usuario pueda orientarse (ver imagen Jupiter Wells).
- Ubica el control de volumen en un sitio visible, preferentemente en la parte superior.
- Señala y destaca las partes donde el usuario puede interactuar con el sitio. Maneja con diferente estética, color, diseño las animaciones que son interactivas de las que no lo son. Puede ser frustrante intentar interactuar con una animación sin resultados. Evita el uso de animaciones no interactivas a gran escala.
- Aunque no tengas lÃmites en la diagramación, escoge un modelo de diagramación y apégate a él.
- Mantén una coherencia de diseño entre las páginas del sitio: paleta de colores, tipografÃa, elementos gráficos, animación, sonido, etc.
- Además: las reglas de usabilidad son como los diez mandamientos de los diseñadores web y se aplican a TODOS los sitios web, incluso a los hechos con Adobe Flash.
Sitios de referencia
A continuación te dejo un listado con sitios Flash muy valiosos por la forma en que fueron utilizadas las herramientas y recursos. Para que uses de inspiración (no copia, jeje):
Un sitio con una botonera simple y un diseño vertical muy original, pero a la vez útil: algo que llama la atención y funciona. También es para destacar el uso del color y la animación mÃnima de los detalles. ¡Prestar atención en el scroll hacia abajo!
Es para tener de referencia a la hora de crear aplicaciones donde el usuario interviene para crear cosas nuevas, en este caso monstruos. También es válido para inspirarnos si nuestro sitio está dividido en dos secciones independientes. Ver la idea de una presentación inicial y luego la pantalla para seleccionar la sección.
Es “el ejemplo” de un portfolio creado en Adobe Flash donde no hay grandes animaciones ni colores vibrantes o un tratamiento del espacio muy original. Lo rescatable está en el uso de Flash para resaltar los detalles. Un sitio que bien podrÃa lograrse con CSS pero que en Flash tiene un giro de tuerca…
Otro sitio institucional donde Flash reemplaza a un posible y prolijo CSS. Sorprende la diagramación y el pasaje de una sección a otra, además del fino tratamiento de imágenes.
Aquà la interactividad pasa únicamente por seleccionar lo que queremos ver (de ahà voyeur), lo rescatable de HBO Voyeur es el tratamiento de la animación real. No son más que escenas (creadas por la mano de un genio) agrupadas prolijamente en una misma pantalla. Para no copiar: carga pesada y lenta sin avisar cuánto falta o sin una animación que nos entretenga mientras esperamos.
Entendamos primero que la funcionalidad de este sitio web es la presentación de un producto nuevo: las zapatillas Air Jordan XX2, con Michael Jordan como cara de campaña. En este caso lo que vale es la calidad de imagen, el impacto en la animación personalizada y los efectos. Lo mejor: la posibilidad de “arrastrar la pantalla” y la combinación de la animación Flash con videos online.
La Cámara de Empresarios Lecheros de California que juntos crearon la campaña Got the Milk? para concientizar a la población de la importancia de tomar leche. En función de la propuesta se creó un sitio El sitio que es una mezcla de branding, juegos para niños e información nutricional y de salud. ¡Todo rescatable! Actualmente, el juego Get the Glass! (Toma el vaso) creado en Flash, es lo más promocionado.
Muchos de estos sitios fueron galardonados por FWA.
Adobe te da más
En el sitio de Adobe hay varias secciones con recursos, tutoriales, ejemplos y descargas para inspirarte, mejorar tus conocimientos de Flash y resolver dudas. Aquà van:
- Flash CS3 Resources (Recursos de Flash CS3)
GuÃas para principiantes, componentes, ActionScript básico y ejemplos. - Flash Design Center (Centro de Diseño Flash)
Tutoriales y recomendaciones para diseñados Flash. - Flash Exchange (Intercambio Flash)
El sitio donde los flasheros comparten sus creaciones y trucos. - Flash Developer Center (Centro de Desarrollo en Flash)
Para flasheros avanzados, con recursos, tutoriales y ejemplos de aplicaciones, animaciones y ActionScript. Además: programación orientada a objetos, Adobe AIR, accesibilidad, videos, tecnologÃa móvil, etc.
Esta es nuestra última clase asà que me voy despidiendo. Pero no sin antes decirles que nada de esto hubiera sido posible sin Flash, un muñequito de plástico que me han prestado por unos dÃas mientras terminaba el taller y que ha sido toda una inspiración. Gracias Lucas por prestarme a tu superhéroe.
Espero que el taller les haya servido para dar sus primeros pasos en Flash, mejorar o encontrar una solución a problemas que no podÃan resolver. Les agradezco a todos haber seguido las clases…
El espacio queda abierto asà que si tienes una duda, déjala en los comentarios y trataré de ayudarte como pueda…
| << CLASE ANTERIOR |
Sábado, 28 de Junio de 2008 a las 23.31
hola,podrian porfavor explicarme como colocar varias fotos que esten cambiando cada siertos segundos asi como estas http://www.maitei.com.py jejeje
Saludos
Lunes, 30 de Junio de 2008 a las 14.07
Para elwebmaster en general, y para Alejandra en particular, muchas gracias por este excelente curso; permÃtanme hacer una pregunta: si en el temario anuncian 30 semanas, y esta semana, o clase es la número 22, ¿que pasó con las números 23 - 24 - 25 y siguientes?
De todas maneras gracias por este agradable curso.
Para alejandra mis votos y ruegos a Dios para que le de muchos años de buena salud con sabidurÃa.
Sinceramente JMP
Jueves, 18 de Septiembre de 2008 a las 21.26
esta muy bueno su sitio, y sólo comento que ya existe el SWF ADRESS con el que la URL de cada sección en un sitio flash cambia. Saludos
Sábado, 20 de Septiembre de 2008 a las 04.37
No he visto el curso, sólo llegué a esta página buscando “inspiración”. Me llaman la atención los comentarios acerca de las ventajas y desventajas de flash, asà que decidà platicar acerca de mi propia experiencia.
Comencé a diseñar en flash a regañadientes, básicamente por exigencias de un cliente que a fuerza querÃa tener su sitio elaborado en flash. Eso fue hace más de seis años, y de entonces a la fecha debo decir que ahora me cuesta más trabajo diseñar en html.
Por desgracia hemos sido testigos de un gran abuso de esta tecnologÃa, lo que da por resultado sitios horripilantes, con escasa navegabilidad y muy pesados, pero también está el otro lado de la moneda: con flash se pueden hacer sitios sencillos, altamente interactivos y muy vistosos.
Cuando uno piensa en sitios realizados en flash inmediatamente nos remitimos a trabajos muy vistosos visualmente, como los ejemplos que vemos en estas páginas, que implican un enorme trabajo, pero no necesariamente reflejan las posibilidades que ofrece flash para los pequeños diseñadores como yo.
Una de los grandes problemas que tiene flash es que los buscadores no indexan sus contenidos, pero se puede hacer uso de un truquito que hace años encontré en http://www.cristalab.com/blog/11092/indexar-paginas-hechas-en-flash-en-buscadores.html y que realmente funciona. Se basa en colocar los contenidos en archivos html externos, de tal manera que los buscadores lo van a encontrar y remitirán al sitio correspondiente.
Sé que para muchas y muchos, flash sigue siendo un mal necesario. Yo creo que es como cualquier otra herramienta de diseño, que bien utilizada nos brinda la posibilidad de simplificar nuestro flujo de trabajo, sin detrimento de la calidad ni de la experiencia del usuario final, quien es, en última instancia, a quien deben estar dirigidos los esfuerzos del diseñador.
Finalmente, pongo como ejemplo una página que recientemente realicé en menos de 24 horas: http://www.villasalamandra.com.