Alejandra 26 de junio de 2008 a las 14.01
   Imprimir artículo
elWebmaster.com

Taller de Flash: Sitios en Flash


Flash Icon¡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

  • sitio flashMucha 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

  • sitio flash maloArchivos 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:

  1. Los enlaces deben distinguirse a primera vista.
  2. Muestra una precarga, indicando que la web está cargando.
  3. Al hacer clic sobre un link, éste se debe abrir en la misma ventana.
  4. 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.
  5. Cuando el sitio lo requiera incluye breadcrumbs para que el usuario pueda orientarse (ver imagen Jupiter Wells).
  6. Ubica el control de volumen en un sitio visible, preferentemente en la parte superior.
  7. 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.
  8. Aunque no tengas límites en la diagramación, escoge un modelo de diagramación y apégate a él.
  9. 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.
  10. 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.

jupiter

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):

Good Things Should Never End

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!

los mejores sitios en adobe flash

Paper Critters

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.

mejores sitios en adobe flash

Red Interactive Agency

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…

el mejor sitio flash

schematic 

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.

sitio flash desplazamiento

HBO Voyeur

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.

el mejor sitio flash de la historia

Air Jordan XX2

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.

sitio de nike

Get the Glass!

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

Adobe Developer Center logoEn 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.

FlashEsta 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  

TEMARIO >>


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

Comentarios (13)

  1. Erick dice:

    hola,podrian porfavor explicarme como colocar varias fotos que esten cambiando cada siertos segundos asi como estas http://www.maitei.com.py jejeje

    Saludos

  2. José María Puentes S. dice:

    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

  3. el mau dice:

    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

  4. Rabi dice:

    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.

  5. regalbum dice:

    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

  6. vico dice:

    Requiero Diseñador!!!

  7. daniel dice:

    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.

  8. Alejandra dice:

    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á Untitled Document
    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.

  9. Jaime Bond dice:

    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.

  10. Cristian Rennella dice:

    Gracias por el Taller!!! EXCELENTE TRABAJO!!! los super felicito a todos por el trabajo que hacen en elWebMaster.com!!!

  11. Redcreativa Experiencias Significativas dice:

    Los invitamos a navegar nuestra Website http://www.redcreativaweb.com.ar
    Está realizada totalmente en Flash.
    Esperamos sus comentarios.

  12. eva dice:

    Hola esyupendo este tutorial y gracias. Pero me he quedado con ganas de saber hacer un formulario con asp.
    un saludo

  13. Pablo Herrera dice:

    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 :)

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