¡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.
Miércoles, 8 de julio de 2009 a las 21.52
recien pude revisar todo el curso de flash y simplemente bueno, se agradece a los creadores de este site x hacer este curso tan facil de explicar, ahora solo queda seguir practicando… gracias
por favor, seria bacan, bueno, xevere, excelente si pudieran hacer de illustrator, after effects, css, xml, jejeje creo q’ estoy volando.
gracias
Viernes, 17 de julio de 2009 a las 18.26
Requiero Diseñador!!!
Martes, 17 de noviembre de 2009 a las 22.33
Hola, he visto todo el taller, y me agrado, tengo conocimientos básicos en flash (8), y me gustarÃa saber si me pueden ayudar, he creado un sitio, el cual he subido sin problemas y todo bien, la duda o consulta es la siguiente, como puedo cambiar el titulo de mi sitio, pues al verlo publicado en la web, sale con titulo: index.html… y la mayorÃa de los sitios tienen un titulo acorde a su sitio wed, he estado viendo otros sitios, y la verdad, no he encontrado nada… agradecerÃa me puedan ayudar.
Jueves, 19 de noviembre de 2009 a las 11.59
Perdón, no entiendo exactamente a qué te refieres. Una cosa es el tÃtulo del sitio y otra la URL. Si lo que quieres es cambiar el tÃulo, ten en cuenta que aunque tu sitio está hecho en Flash, está publicado en un HTM o HTML que llama al SWF. Ese archivo HTML es al que tienes que ponerle un nombre. Para hacerlo, abre el archivo HTML con el bloc de notas o el programa que quieras. Vas a ver que en las primeras lÃneas aparecerá
Bueno, en este caso tu página tendrá como nombre “Untitled Document”. Reemplázalo por el texto que desees como tÃtulo.
Si no es eso lo que quieres, avÃsame y veré como ayudarte.
Viernes, 22 de enero de 2010 a las 21.56
No se si el objeto de este taller sea tambien el de solucionar problemas de novatos en flash. Si asi es, les agradecerÃa ayudarme pues estoy desarrollando un sitio en Flash CS3 y tengo que introducir un codigo html, pero no he logrado saber como.
El codigo html es el siguiente:
…
var obj = new buscador();
obj.id = 1000082;
obj.auth = “TYFDSERF”;
obj.background_color = “3732AA”;
obj.heading_background_1 = “3732AA”;
obj.heading_background_2 = “FF781E”;
var m = buscar(obj);
document.write(m);
…
Hay alguna forma de incluirlo? La idea es que hay ese código permite capturar unos campos para hacer una búsqueda y debe hacerlo dentro del website hecho en flash.
Jueves, 4 de febrero de 2010 a las 15.36
Gracias por el Taller!!! EXCELENTE TRABAJO!!! los super felicito a todos por el trabajo que hacen en elWebMaster.com!!!
Viernes, 5 de febrero de 2010 a las 20.59
Los invitamos a navegar nuestra Website http://www.redcreativaweb.com.ar
Está realizada totalmente en Flash.
Esperamos sus comentarios.
Miércoles, 2 de febrero de 2011 a las 22.09
Hola esyupendo este tutorial y gracias. Pero me he quedado con ganas de saber hacer un formulario con asp.
un saludo
Miércoles, 6 de marzo de 2013 a las 03.03
Acabo de aprender flash (casi) desde cero con este taller. Muchas gracias por compartirlo, por el tiempo que le dedicaste, por tu esfuerzo didáctico y por armar todo con un diseño simple, una estructura intuitiva y una ortografÃa formidable