Taller de Flash: Optimizando tus SWF a partir de una estructura

Empecemos desde el principio ¿Para qué diseñamos un sitio o una animación de Flash?. La finalidad de nuestra “obra” es siempre un ansioso internauta, una persona que navega en Internet con tiempo limitado. Y es ahí cuando el diseñador debe resolver el problema de que su sitio sea lento, evitando tiempos muertos, precargas innecesarias, objetos muy pesados. En esta clase veremos cómo hacer para que tu SWF vuele…
Antes del diseño en sí, tenemos un deber como diseñadores: proyectar lo que vamos a hacer de manera estructural. Así como el arquitecto garabatea su primer plano a mano alzada, nosotros haremos un listado de todos los elementos que irán en nuestro SWF.

Así como un sitio tiene secciones, una animación puede tener escenas. Esa va a ser la forma estructural de nuestros SWFs. Pensemos en el sitio Hilados & Lanas que hemos estado diseñando… Allí se ve una estructura lineal de 5 secciones bien marcadas:

1. Quienes somos
2. Hilados
3. Lanas
4. Tejidos
5. Contacto

Decimos que la estructura es lineal porque ninguna sección es más importante que otra. Todas están al mismo nivel. Esa fue mi manera de resolver la estructura del sitio. Pero otros diseñadores podrían haber dado con otras soluciones igualmente válidas, generando una estructura bastante diferente.

Aquí tenemos dos ejemplos de estructuras en dos niveles. En el primer ejemplo, el nivel 1 supone ya una división entre lo que sería “Materia prima” y “Confección” y en el nivel 2 se ven los productos relacionados, pero en el nivel 1 siguen habiendo items con contenido directo. En el otro ejemplo, no hay contenido directo en el nivel 1. Para acceder al contenido es necesario llegar al nivel 2.

En este tercer ejemplo, la división es aún más profunda: a 3 niveles. En general intentamos que un trabajo sea “accesible” para la persona que interactúa, poniéndole la menor cantidad de obstáculos posibles. Los niveles de profundidad pueden ser vistos como un obstáculo porque de alguna manera entorpecen la navegabilidad del sitio. Se utilizan este tipo de menúes cuando existen muchas secciones dentro del sitio. Es el diseñador junto con el cliente quienes definen cuántas secciones tendrá la web. Teniendo en cuenta la importancia de las secciones, tómate el trabajo de proyección o el maquetado como uno de los pasos más significativos del proceso de creación de la página.

Archivos externos, archivos livianos

En nuestro sitio Hilados & Lanas tenemos mucha gráfica y todos sabemos la regla de cuantas más imágenes tengamos, más pesado será un archivo. Como no podemos dejar de utilizar imágenes, sólo tenemos una opción: optimizar la carga de los archivos.

Supongamos que tengo un archivo SWF externo donde he diseñado una galería con 10 imágenes. Entonces tengo:

10 imágenes + 10 thumbs = 20 imágenes

50 kb cada imágen

5 kb cada thumb

50 kb X 10 imágenes = 500 kb

5 kb X 10 thumbs = 50 kb

Total = 550 kb

Tenemos un archivo con un peso mayor a 550 kb. ¿Te das cuenta la importancia de que la galería sea un archivo externo y se cargue aparte? Tenemos que resolver este problema:

Solución 1

Creamos una movie externa por cada detalle (como hicimos en la clase 11). Le agregamos una precarga a cada movie y listo…

Ahora, supongamos que en mi sitio no tengo sólo una galería, sino que tengo 4. Si cada listado de thumbs pesa 50 kb, todas las galerías (sin los detalles) pesarán 200 kb, lo que es bastante para la carga inicial de un sitio.

Solución 2

Creamos una movie externa por cada detalle y una movie externa por cada galería (en este caso, una sección del sitio). Le incorporamos la precarga a cada movie externa y listo…

Lo que logramos es que el archivo que contiene al home del sitio no sea tan pesado. Más bien quedará como un archivo estructural y cuando el usuario haga clic para ver alguna de las secciones, aparecerá (por medio de ActionScript) la movie corriespondiente a esa sección. De esta manera me queda una home liviana.

Precargas innecesarias

Ahora bien, por más que las imágenes estén en archivos separados, a veces son livianas y se cargan casi instantáneamente. Si esto es así hay que evaluar el uso de precargas. Cuando incluimos una precarga en un SWF, esta va a verse siempre y por más que tarde sólo 3 segundos en mostrarse, son 3 segundos que con el tiempo molestan… Si todas mis imágenes muestran una precarga de 3 segundos, el usuario (créelo, es así) va a pensar dos veces antes de hacer un clic porque no querrá toparse con estos mini obstáculos en su camino. Por eso es bueno también ser más selectivos a la hora de utilizar este recurso y hacerlo sólo cuando la carga de un SWF tarde más de… 2 o 3 segundos en abrir, o el tiempo que consideres.

Algo que pocos piensan es en las precargas de la home. Si la home es pesada y, lógicamente, tiene una precarga, cada vez que ingrese al sitio me voy a topar con ella. Muchos optan por hacer una precarga tan buena, que no sólo no moleste, sino que además nos distraiga. Pero no todos tienen el presupuesto, la inventiva o la opción de hacer una precarga genial. Y si la precarga es aburrida y el sitio tarda mucho en cargarse, la verdad es que ya voy a tener una mala impresión de la web que esté visitando…

Por eso: no uses el mismo tipo de precargas para el home o las secciones que para cosas más básicas como la carga de una imagen.

El home en español del sitio de American Airlines tarda bastante en cargar y para colmo la precarga es aburridísima. ¡Chicos: más inventiva! Por otro lado, la gente de SectionSeven Inc. se hizo con una idea bastante original. La precarga no es gran cosa, pero cumple su función: nos indica cuánto falta para que se termine de cargar el sitio y además nos distrae.

Peso de las imágenes

Flash es un programa gráfico, visual. Aquí las imágenes lo son todo. Hay dos tipos de imágenes que puedes utilizar: vectoriales o de píxel. Pero Adobe Flash es un programa vectorial, por lo tanto trabajar con vectores me garantiza mayor calidad y menor peso en mis archivos.

De todas maneras es muy probable que quieras trabajar con imágenes de píxel. En el caso que importes imágenes a la biblioteca, el peso de esa imagen formará parte del peso final del archivo, sin importar que en el escenario de trabajo hayas achicado la imagen. Para eso es útil importar las imágenes al escenario y no a la biblioteca. O… importarlas a la biblioteca en el tamaño final en el que se verán ¿Capisce?

Bueno, eso fue todo por hoy. ¡Hasta el próximo jueves! Mucha suerte con sus precargas y a ver si pueden reducir las cargas lentas de sus proyectos…