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