El objetivo del artículo es intentar explicar como se puede efectúar la planificación de un proyecto multimedia para la web, explicar en qué consiste un programa multimedia para Internet, en concreto Flash y en que se basa el desarrollo de contenidos sobre esta aplicación.
Comencemos…
Supongo que estaré en lo cierto al afirmar que prácticamente todos los lectores conocen o han visto alguna vez un sitio creado en Adobe Flash®, independientemente de la versión.
Flash permite desarrollo de sitios con un diseño «explosivo» caracterizado por la animación y el sonido, la interactividad y el verdadero concepto multimedia de contenidos. Para muchos lectores flash puede suponer un obstáculo a una navegación fluida, pero diseñando eficientemente una página web puede incluso llegar a ser más fluida su carga que otros muchos sitios creados en HTML. Naturalmente esta herramienta depende en cierta medida del código HTML, puesto que no deja de ser un objeto cliente bajo sus etiquetas OBJECT a efectos del navegador. Además actualmente menospreciada por la falta de soporte en dispositivos Apple y la tendencia del uso HTML5. Flash fue un estándar de facto.
En cuanto a la velocidad, no es cierto que Flash suponga una ralentización del sitio o página web, ya que además del diseño existen otros factores de mucho mérito relativos a la reducción del tamaño de la película o «swf» que se va a generar, permitiendo generar archivos descargables muy reducidos, gracias a los méritos del programador, que dispone de un completo y fácil entorno de desarrollo en Actionscript, dando rienda suelta a su imaginación a través de la «tecla», así como al diseñador la capacidad de expresar sus ideas mendiante el stage o escenario.
Antes de construir un sitio web es necesaria una planificación del proyecto, en concreto un proyecto multimedia requiere unos storyboards que se encargan de orientar al diseñador a la hora de modificar el timeline del proyecto así como al programador preparar la metodología de eventos.
En el storyboard como si de una diapositiva powerpoint se tratase se describen los conceptos y detalles de la animación, para posteriormente animarlos usando las técnicas de interpolación por movimiento y por forma que posee Flash.
El tamaño de la película corresponde con las dimensiones del navegador, no de la resolución (a no ser que se haga a pantalla completa cosa que no convence mucho al internauta) , Flash estira las películas para ajustarlas de manera proporcional al tamaño de la película, esto es una gran ventaja, pero ojo con los textos y las imágenes, ya que es su punto débil de representación sobre todo si no son muy grandes, aunque siempre se puede recurrir a texto dinámico más legible, o a la incorporación de fuentes pixeladas como las Fonts for Flash. También se puede recurir al diseño de sitios de tamaño fijo, ideales para la representación de imágenes, pero con los problemas típicos de resolución del navegador, que un diseñador tiene que solventar.
Continuando con el proceso de construcción del sitio, una vez concluida la fase del storyboard (aunque siempre queda abierta) se agruparan todas las imágenes y sonidos elegidos en carpetas para su posterior retoque con programas fotográficos. Si bien es cierto para poder incluir imágenes con transparencias es vital disponer de otras herramientas que permitan generar archivos de imagen en «swf» o png que es el formato compilado por llamarlo de alguna manera de flash para que la animación de la imagen con transparencia (t-alfa) no sufra distorsiones.
Para que la película generada y para que el resultado del proyecto sea fluido conviene dividir el proyecto en subpelículas tratando que la película principal (la llamadora) sea lo más pequeña posible. Las demás se irán solapando con la principal a través de llamadas entre ellas, pero siempre en el contexto de la película principal.
Seguramente el lector habrá esperado un tiempo antes de poder visualizar un sitio flash en lo que se denomina precarga (preloader) que consiste en el tiempo que la película tarda en cargarse en el navegador. El gran error existente en la planificación de proyecto es incluir toda la película en un único archivo y realizar una precarga de la misma. Es vital que la película principal sea pequeña y que la precarga si existiera debiera indicar el estado de forma atractiva pero rápida del proceso de carga. Aun así Flash incorpora un analizador del ancho de banda que nos da una visión del tráfico o picos de carga existente en el proyecto en un fotograma determinado y a una velocidad determinada kbs.
La posibilidad de dividir la propia película en escenas como si de un director de cine se tratase simplifica y organiza el proyecto, posibilita sus ampliaciones, y cambios en la lógica de ejecución del cabezal reproductor. Este actúa como un puntero, mostrando las diferentes capas del proyecto y de un fotograma en un instante de tiempo determinado.
Con toda la información y la creatividad planificada y plasmada en papel, se comienza el desarrollo multimedia, el desarrollador en base a las ideas anteriores comienza la construcción de la línea de tiempo, que es vital en todo proyecto multimedia. Divide la película en fotogramas rotulados con un nombre, y hace mover el cabezal con comandos Actionscript, desplazándole en función de los eventos que se encargue de disparar el usuario.
El propio programa se encarga de generar el archivo «.swf» a partir del original y editable «.fla». Además de la generación del HTML y del código necesario para la inclusión del objeto.
Las llamadas entre la película principal y las secundarias pueden hacerse de diversas formas ya que las subpelículas pueden cargarse en diferentes planos visuales como si fueran capas o a través de la sustitución de la película principal. No hay que sobrecargar el navegador de animaciones que hacen que el conjunto de la animación sea mas lento, solamente las necesarias. De lo contrario puede que no trasmitamos la idea y distraigamos al internauta.
Uno de los objetivos del desarrollo multimedia sobre Internet es reducir el tamaño lo máximo posible, para ello flash incorpora el concepto de biblioteca (Library) de símbolos, que forman parte de la película y que generan instancias sobre el escenario. El escenario (Stage) es como el papel del animador, se instancian objetos procedentes de la biblioteca para posteriormente animarlos, de esta manera un símbolo puede tener varias instancias pero ocupando el mismo espacio. Sobre estas instancias se pueden aplicar efectos de animación, brillos, alpha, y rutas (Paths) de animación siempre teniendo presente sobre el fotograma donde se realizan. Esta manera de organizar el trabajo es muy ingeniosa y a su vez productiva.
No se si os habréis preguntado como se consiguen todas las animaciones a la vez, o como solamente unas atienden nuestros movimientos mientras otras actúan de forma consecutiva. Esto se consigue gracias a los clips multimedia que son pequeñas películas que se encuentran dentro de la biblioteca y que poseen su propio cabezal de reproducción de tal forma que se pueden insertar como un conjunto dentro del escenario y actuar en función del evento al que se destinen. Esta parte se puede simplificar gracias a la incorporación de botones (únicos elementos que detectan la pulsación del ratón existentes en flash)
Las técnicas de animación son comunes a todos los programas multimedia. Se usan técnicas de animación fotograma a fotograma (frame by frame) como si se tratara de un comic, apoyada en otra técnica llamada papel de cebolla (onion skining) para lograr calcos entre diferentes frames o fotogramas (recordad que el estándar son 12 fotogramas por segundo). Para mejorar la animación y ganar en velocidad en el desarrollo se emplean técnicas de interpolación. Las más conocidas son la interpolación por forma que consiste en cambiar un vector de una forma a otra en el tiempo (tened siempre presente la línea de tiempo) este proceso consume mucha CPU y hay que intentar no abusar de el. La interpolación por forma se apoya en los cuadros de ajuste para crear también Morphing de objetos. Podemos convertir una imagen a vectores a través del trazador que incorpora flash, ya que de esta manera y si el número de vectores generado no es muy grande reducir el tamaño de la película. Un ejemplo consiste el digitalizar una secuencia de video, vectorizar cada fotograma, eliminar vectores innecesarios y crear la animación, os aseguro que el resultado es sorprendente. La otra técnica de interpolación es la de movimiento que es mucho más rápida y permite desplazar una imagen de un punto a otro a través del establecimiento de paths virtuales (este mecanismo es diferente que en Macromedia Director).
Las técnicas de animación cambian el color de los frames afectados, convirtiéndolos en keyframes o modificadores clave y controlables a través de la línea de tiempo.
Recordemos que hay herramientas en Internet que permiten acelerar el proceso de creación de interpolaciones que son muy difíciles de conseguir sobre todo con el texto.
En cuanto a la programación en flash existen gran cantidad de portales solamente de recursos gratuitos para el aprendizaje e inclusive películas editables fla para observar como se a efectuado el proceso de animación, como se ha desarrollado la técnica, y cual es el algoritmo empleado, además de su posible reutilización. Existe una movida flashera en Internet de grandes magnitudes que aglutina a diseñadores y programadores de todo el mundo.
Respecto al sonido, existe la posibilidad de distinguir entre sonidos en streaming y sonidos de clip. El streaming esta orientado a sonidos que generalmente ocupan más espacio y que se pueden ir escuchando a lo largo del tiempo, estos sonidos pueden estar en mp3 y con unas características que permitan que ocupe el menor ancho de banda posible (cambiando la frecuencia y los canales). El sonido en clip es más pequeño y se solapa a un botón. Ambos pueden formar parte del «.swf» en canales especiales de sonido o ser controlados mediante Actionscript. Recomiendo conservar siempre los fuentes.
Adobe ha creado versiones Trial que permiten evaluar el producto, y la documentación traducida al castellano se encuentra disponible en su web. Pero más importante es la documentación técnica de actionscript (recordemos el cambio profundo que ha experimentado el lenguaje), que permiten conocer comando a comando todas sus características tanto en el entorno asistido como el abierto.
Flash se comporta en todos los contextos de forma idéntica, independientemente del navegador usado, como si fuera una «máquina virtual» , ejecuta el código en el cliente, proporcionando mecanismos de seguridad integrados en el propio motor del reproductor.
Os dejo unos proyectos impresionantes para poder analizar esta tecnología.
http://www.ultranoir.com/en/#!/home/
http://www.syfy.com/tinman/oz/
http://mono-1.com/monoface/main.html
http://www.ladesignstudio.com/
¿ Impresionante verdad ?
Os dejo un trabajo mio,
| Primer premio Internet 2004, modalidad iniciativa, Junta Castilla y León |
Pulsa aquí para verlo.
Saludos.
