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