domingo, 12 de junio de 2011

¿Que es una Animación Flash?

Flash es un programa básicamente orientado a la animación, de ahí la gran importancia de este tema. No obstante, para ir creando animaciones cada vez más complicadas se necesita, sobre todo, mucha práctica, aparte de conocer bien las herramientas.

En este tema y los sucesivos mostraremos las técnicas básicas de animación en Flash. La unión de estas técnicas será la que nos permita crear las más variadas y vistosas animaciones.

En el tema de la animación, Flash ofrece unas facilidades muy grandes, consiguiendo efectos que normalmente requieren ciertos conocimientos y espacio de almacenamiento para ser creados, como es el caso por ejemplo de los GIF animados o lenguajes de programación como JavaScript, de una manera muy sencilla, sin necesidad de excesivos conocimientos y ocupando muy poco espacio en disco.

Aunque Flash ofrece técnicas mejores, también se pueden crear animaciones a modo de GIF animado. Se les denomina animaciones Fotograma a Fotograma. Estas son las animaciones más básicas y conviene conocerlas.

A continuación veremos distintos tipos de animaciones que el creador de películas Flash deberá tomar como guía inicial. Cabe destacar que podremos aplicar varias de estas animaciones colocándolas en distintas capas. Con esto es con lo que conseguiremos los efectos más espectaculares a la par que útiles.

Desde el punto de vista del diseño general de una página web es muy importante tener claro un concepto: no se debe crear animaciones en páginas que no lo necesitan ni crear animaciones que distraigan al que visualice nuestros documentos de lo realmente importante, el mensaje.

En esta versión de Flash CS4 ha habido un cambio importante en las animaciones, lo que hasta ahora se llamaba interpolación de movimiento, pasa a llamarse interpolación clásica y la interpolación de movimiento actual es totalmente nueva, más potente y versátil.

En nuestra guía de Tutoriales voy a demostrar los pasos de los diferentes Tipos de Animación que podemos crear por medio de Flash

Introducción a Flash

En este tutorial mostraremos los componentes básicos que podemos encontrar en Flash antes de poder trabajar en el:



Animaciones de Movimiento

Al realizar una interpolación clásica el fotograma inicial y final deberán ser diferentes, en caso contrario no se creará ningún tipo de animación.

Observa en las siguientes imágenes dónde está situada la pelota en el primer fotograma de la animación y su posición final en el último fotograma:






















En el siguiente vídeo puedes ver cómo realizar una interpolación clásica.



Si el objeto con el que queremos hacer la interpolación clásica no está convertido a símbolo nos encontraremos con algo así...


... y la animación no funcionará.

También podemos realizar la interpolación de otra forma, sin convertir previamente el objeto a símbolo, ya que Flash lo convierte a símbolo automáticamente si no lo hacemos, dándole el nombre "Animar" más un número. Esto quizá no sea lo más conveniente en películas grandes, debido a lo que ya comentamos de la gran cantidad de símbolos que pueden aparecer y la confusión que crean muchos símbolos con nombres parecidos.

Para crear una interpolación de este tipo, basta con tener un fotograma clave. Hacemos clic con el botón derecho sobre el fotograma en la línea de tiempo, y seleccionamos Crear Interpolación Clásica. Ahora, creamos un nuevo fotograma clave donde queremos que finalice la interpolación, y modificamos los símbolos en los fotogramas clave.

Veremos que si seleccionamos uno intermedio, se muestran los símbolos en su transición al fotograma final. Podemos decidir cómo mostrar el símbolo en ese fotograma, por ejemplo moviéndolo. Al hacerlo automáticamente se crea un fotograma clave. Esto hace que el movimiento ya no sea recto, y pueda ser en zig-zag.

Para entender mejor este concepto recomendamos que mires el siguiente tutorial  donde te demostrare como pasar un Objeto a un Símbolo Gráfico para las animaciones que realizaremos en Flash.






Interpolación Guiada

Anteriormente hemos visto como las interpolaciones de movimiento incluyen por defecto el trazado con la trayectoria del objeto, y que este trazado puede modificarse fácilmente, sin embargo las interpolaciones clásicas no lo incluyen. Si deseamos que el objeto siga una trayectoria no rectilínea en una animación clásica hemos de crear una capa guía de movimiento.


Una guía es una capa especial que marca una trayectoria para los símbolos de la capa a la que afecta, para que dichos símbolos la sigan, durante el movimiento. Esta capa es invisible durante la reproducción y permite dibujar cualquier tipo de dibujo vectorial, que nos permitirá crear un movimiento no forzosamente rectilíneo.

Crear un movimiento mediante esta técnica es bastante sencillo. Partimos de una capa con una interpolación clásica:

Sobre la capa en la línea de tiempo, hacemos clic derecho y seleccionamos Añadir guía de movimiento clásica.

Creamos el trazado de la guía en la nueva capa, por ejemplo dibujando con el Lápiz.

Y para acabar, hacemos coincidir el fotograma final de la interpolación con el final del trazado de la guía. Es importante que el símbolo esté encontacto con la guía. No es necesario colocarlos al principio del trazado ya que Flash lo hace automáticamente.

Vemos como la capa a la que se asocia la guía aparece debajo y indentada a la derecha.


Aquí se puede ver cómo realizarlo.




Interpolación por Forma

Cuando lo que queramos no sea cambiar la posición de un objeto en el escenario, sino su forma de manera progresiva (o ambas cosas a la vez), Flash CS4 nos ofrece la técnica de la Interpolación por Forma, que consiste simplemente en ir transformando el contorno de un objeto creado en su interfaz hasta que sea igual que el contorno de otro objeto distinto.

Realizar una interpolación por forma, es muy semejante a crear una interpolación de movimiento. Flash genera fotogramas intermedios en los que va variando ligeramente la forma del fotograma anterior. Así como hacíamos en el tema anterior, sólo necesitamos dos fotogramas clave. Colocaremos en el primer fotograma el objeto con su aspecto original, y en el último la apariencia final que queremos que tenga.

Esta vez, es importante destacar que para que una Interpolación por Forma funcione como es debido aquellos objetos que intervengan deberán ser objetos vectoriales (no símbolos Flash).

Debemos tener también dos aspectos en cuenta:

1) Separar en distintas capas los objetos fijos y los que estarán animados.

2) Poner en distintas capas objetos que vayan a ser transformados con formas distintas, ya que Flash transformará todos los objetos vectoriales del primer fotograma en aquello que haya en el último fotograma de la interpolación.

Si realizamos la interpolación por forma correctamente la línea de tiempo tendrá este aspecto:


Las consideraciones sobre la velocidad y el número de fotogramas que vimos en las interpolaciones de movimiento se pueden aplicar también a la interpolación por forma y a cualquier animación hecha con Flash.

Si hay algún fallo en los parámetros necesarios para que la interpolación se ejecute bien, como por ejemplo, que uno de los objetos en capa sea un símbolo, se mostrará algo así en la línea de tiempo:


Para crear la interpolación, una vez tengamos los fotogramas de inicio y fin de la animación hacemos clic derecho en alguno de los fotogramas intermedios, y seleccionamos la opción del menú Crear interpolación de forma.

Recuerda que podemos alterar el fotograma final todo lo que queramos.

En el siguiente tutorial podemos observar cómo realizar una interpolación por forma.



También podemos realizar interpolaciones de forma en varias fases de manera análoga a como lo hacíamos en el tema anterior. De esta forma podemos hacer que un determinado objeto de convierta en otro antes de adoptar su forma definitiva.


Transformar textos

Debido a la importancia de los textos, es importante comentar las aplicaciones que tienen los cambios de forma sobre ellos. Añadimos así una posibilidad más para realizar logotipos o presentaciones vistosas y transmitir información de manera espectacular.

Recordemos que para realizar una interpolación de forma es necesario que el objeto sea de tipo vectorial. Este no es el caso de los textos, que se basan en fuentes y son creados en función de los valores de la tabla ASCII y un tipo de letra asociado. Para solucionar este problema, deberemos transformar el texto previamente en un objeto vectorial, es decir, como si hubiéramos repasado con la herramienta lápiz el contorno de cada letra.

¿Posibilidades de esta técnica en textos? Muchísimas, aunque puede llevar a confusiones si no se hace adecuadamente. Por ejemplo debemos asegurarnos de dar suficientes fotogramas de margen para que se note la transición. También es conveniente dar un tiempo para que cada letra sea mostrada y pueda ser visualizada y "entendida" por aquel que vea la película, porque si no lo hacemos corremos el riesgo de que la animación parezca sólo un garabato revolviéndose.

Cuando creemos interpolaciones de forma y queramos incluir textos deberemos actuar de un modo especial dado que un objeto de texto no se considera como una forma. Para ello, y una vez tengamos la animación creada con una forma en el fotograma inicial y un texto en el final veremos que la interpolación aparece como incorrecta. Deberemos, entonces seleccionar el fotograma donde se encuentre el texto y seleccionarlo.

Haremos clic en el menú Modificar → Separar para convertir el texto en un conjunto de puntos que creen una forma. Y la interpolación ya estará lista.


Consejo: Cuando vayas a aplicar el comando Separar sobre una palabra completa observa que primero lo que hace es separar la palabra en letras individuales. Deberás ejecutar de nuevo el comando para que estas letras se separen y creen una forma.


En el siguiente tutorial mostramos cómo realizar una animación de este tipo.



Notas y Referencias:

sábado, 4 de junio de 2011

Herramientas On-line

A continuación les dejo 4 sitios donde podrá disponer de una gran variedad de HERRAMIENTAS ON-LINE GRATIS, que le ayudará en el diseño de su blog, o sitio web, donde podrás crear, botones, banners, menús así como la administración del mismo y mucho más....


Para los que andan buscando hacer un diseño en flash, aquí les dejo 2 sitios para descargar PLANTILLAS FLASH GRATIS, todos muy buenos y la mayoría de descargar directa es decir no necesitan registrarse.

De mismo modo si desean diseños flash más detallados y únicos, en los mismos sitios pueden encontrar plantillas Premium con un costo claro está, pero seguro lo vale.

Adobe Flash CS4 Professional

 

Adobe ® Flash ® CS4 Profesional es el software líder en la industria medio ambiente de autoría para la creación de realizar experiencias interactivas. Crea experiencias envolventes para entregarlas al público a través de plataformas y dispositivos.

Novedades

Nuevas funciones
Las características siguientes son nuevas en Adobe® Flash® CS4 Professional.

     -Animación basada en objetos
Logre un control absoluto sobre todos y cada uno de los atributos de la animación con el método basado en objetos, que aplica directamente a éstos las interpolaciones en lugar de a los fotogramas. Efectúe con sencillez cambios a las rutas de movimiento mediante los selectores de Bézier.

     -Transformación 3D
Anime objetos bidimensionales en un espacio tridimensional con las nuevas herramientas de traslación y rotación 3D, que permiten elaborar las animaciones a lo largo de los ejes X, Y y Z. Aplique transformaciones locales o globales a cualquier objeto.

     -Cinemática inversa con la herramienta de huesos
Cree efectos de animación similares a los de elementos encadenados con una serie de objetos vinculados unos a otros, o distorsione con sorprendente rapidez una forma cualquiera mediante la nueva herramienta de huesos.

     -Editor de movimiento
Utilice el nuevo Editor de movimiento para lograr un control exhaustivo de los parámetros de los fotogramas (como rotación, tamaño, escala, posición o filtros, entre otros). Utilice la visualización de los gráficos para obtener resultados más precisos con la aceleración.

     -Modelado de procesos con la herramienta decorativa y el pincel rociador
Convierta cualquier símbolo en herramientas de diseño instantáneo. Aplique los símbolos de formas diversas: obtenga con rapidez efectos caleidoscópicos y emplee rellenos mediante la herramienta decorativa; u opte por rociar símbolos de forma aleatoria en un área definida mediante la herramienta del pincel rociador.

     -Compatibilidad con metadatos (XMP)
Añada metadatos a los archivos SWF mediante el nuevo panel de XMP. Asigne rápidamente etiquetas para lograr una colaboración mejorada y un uso más eficaz de los dispositivos móviles.

     -Creación para Adobe AIR™
Añada las ventajas del contenido interactivo a su escritorio con la nueva función integrada que permite efectuar la publicación en el tiempo de ejecución de Adobe AIR. Amplíe aún más su audiencia abarcando más dispositivos (Web, dispositivos móviles y, ahora, de escritorio).

     -Editor de movimiento
Utilice el nuevo Editor de movimiento para lograr un control exhaustivo de los parámetros de los fotogramas (como rotación, tamaño, escala, posición o filtros, entre otros). Utilice la visualización de los gráficos para obtener resultados más precisos con la aceleración.

Entorno de Flash CS4

Incremente la eficacia de su trabajo con un acoplamiento intuitivo de paneles y comportamientos que emulan los de elementos accionados por resortes; con ellos, su interacción con las herramientas de todas las ediciones de Adobe Creative Suite será más fluida porque tiene la ventaja de que es similar a los otros programas de Adobe  (Photoshop, Dreamweaver, Illustrator...), todo esto hace más fácil aprender Flash y más rápido su manejo y dominio. Esto es lo que nos encontraremos al abrir Flash CS4 por primera vez:



     -Linea de Tiempo

La línea de tiempo organiza y controla el contenido de un documento a través del tiempo en capas y fotogramas. Al igual que en las películas, los documentos de Flash dividen el tiempo en fotogramas. Las capas son como varias bandas de película apiladas unas sobre otras, cada una de las cuales contiene una imagen diferente que aparece en el escenario. Los componentes principales de la línea de tiempo son las capas, los fotogramas y la cabeza lectora.

Las capas de un documento aparecen en una columna situada a la izquierda de la línea de tiempo. Los fotogramas contenidos en cada capa aparecen en una fila a la derecha del nombre de la capa. El encabezado de la línea de tiempo situado en la parte superior de la línea de tiempo indica los números de fotograma. La cabeza lectora indica el fotograma actual que se muestra en el escenario. Mientras se reproduce el documento, la cabeza lectora se desplaza de izquierda a derecha de la línea de tiempo.

La información de estado de la línea de tiempo situada en la parte inferior de la misma indica el número del fotograma seleccionado, la velocidad de fotogramas actual y el tiempo transcurrido hasta el fotograma actual.



     -Inspector o Ventana de Propiedades
El inspector de propiedades facilita el acceso a los atributos más utilizados de la selección actual, ya sea en el escenario o en la línea de tiempo. Puede modificar los atributos del objeto o documento en el inspector de propiedades sin acceder a los menús o paneles que contienen estos atributos.

El inspector de propiedades muestra información y la configuración del elemento que está seleccionado, que puede ser un documento, un texto, un símbolo, una forma, un mapa de bits, un vídeo, un grupo, un fotograma o una herramienta. Cuando hay dos o más tipos de objetos seleccionados, el inspector de propiedades muestra el número total de objetos seleccionados.



     -Barra de Herramientas y de Edición
La barra de menús, situada en la parte superior de la ventana de la aplicación, contiene menús con comandos que sirven para controlar funciones.

La barra de edición, situada en la parte superior del escenario, contiene controles e información para editar escenas y símbolos, así como para cambiar el grado de aumento del escenario.


Información general del panel Herramientas
Las herramientas del panel Herramientas permiten dibujar, pintar, seleccionar y modificar ilustraciones, así como cambiar la visualización del escenario. El panel Herramientas se divide en cuatro secciones:

  • La sección de herramientas contiene las herramientas de dibujo, pintura y selección.
  • La sección de visualización contiene herramientas para ampliar y reducir, así como para realizar recorridos de la ventana de la aplicación.
  • La sección de colores contiene modificadores de los colores de trazo y relleno.
  • La sección de opciones contiene los modificadores de la herramienta actualmente seleccionada. Los modificadores afectan a las operaciones de pintura o edición de la herramienta.

Notas y Referencias:

Adobe Flash Professional

Adobe Flash Professional es una aplicación de creación y manipulación de gráficos vectoriales con posibilades de manejo de código mediante el lenguaje ActionScript en forma de estudio de animación que trabaja sobre "fotogramas" y está destinado a la producción y entrega de contenido interactivo para las diferentes audiencias alrededor del mundo sin importar la plataforma. Es actualmente desarrollado y comercializado por Adobe Systems Incorporated y forma parte de la familia Adobe Creative Suite, su distribución viene en diferentes presentaciones, que van desde su forma individual hasta como parte de un paquete siendo estos: Adobe Creative Suite Design Premium, Adobe Creative Suite Web Premium y Web Standard, Adobe Creative Suite Production Studio Premium y Adobe Creative Suite Master Collection. Su uso en las diferentes animaciones publicitarias, de reproducción de vídeos (como ocurre en YouTube) y otros medios interactivos que se presentan en casi todas las páginas web del mundo le han dado la fama a éste programa dándoles el nombre de "Animaciones Flash" a los contenidos creados con éste.

Adobe Flash utiliza gráficos vectoriales y gráficos rasterizados, sonido, código de programa, flujo de vídeo y audio bidireccional (el flujo de subida sólo está disponible si se usa conjuntamente con Macromedia Flash Communication Server). En sentido estricto, Flash es el entorno de desarrllo y Flash Player es el reproductor utilizado para visualizar los archivos generados con Flash. En otras palabras, Adobe Flash crea y edita las animaciones o archivos multimedia y Adobe Flash Player las reproduce.

Los archivos de Adobe Flash, que tienen generalmente la extensión de archivo SWF, pueden aparecer en una página web para ser vistos en un navegador web, o pueden ser reproducidos independientemente por un reproductor Flash. Los archivos de Flash aparecen muy a menudo como animaciones en sitios web multimedia, y más recientemente en Aplicaciones de Internet Ricas. Son también ampliamente utilizados como anuncios en la Web.

Breve historia de Flash

Macromedia fue una empresa de software de gráficos y desarrollo web con centrales en San Francisco, California. Macromedia fue formada en 1992 por la fusión de Authorware, Inc. (creadores de Authorware) y MacroMind-Paracomp (creadores de Macromind Director). Sus centrales están en San Francisco, California.


Macromedia continuó siguiendo el rastro de M&A y en diciembre de 1999 adquiría la compañía de software de análisis de tráfico Andromedia. La compañía de desarrollo Web Allaire fue adquirida en 2001, y Macromedia añadió varios productos populares de servidor y desarrollo Web a su lista.

En 2003, Macromedia adquirió la compañía de conferencia por Web Presedia y continuó desarrollando y realzando su producto de colaboración y presentación on-line basado en Flash, ofrecido bajo el nombre de Breeze. Después, en ese mismo año, Macromedia también adquirió la compañía de software de ayuda de autoría eHelp Corporation, cuyos productos incluían RoboHelp, RoboDemo (Ahora Captivate), y RoboInfo.

El 18 de abril de 2005, Adobe Systems anunció un acuerdo para adquirir Macromedia en una transacción valorada en, aproximadamente, 3400 millones de dólares. (Nota de Prensa de Macromedia, Nota de Prensa de Adobe).

El 5 de diciembre del 2005, Adobe Systems completa la adquisición de Macromedia.

Versiones de Flash


Iniciando Internet no existía ninguna aplicación que permitiera la creación de gráficos animados. Recuerdo la web de principio de los noventa cargada de gifs animados y applets Java. Flash convirtió un entorno plano y gris (Internet) en un mundo maravilloso plagado de ambientes multimedia generadores de emociones y sensaciones.

En 1993, en Sandiego (California – USA), una pequeña firma llamada FutureWave Software creó un programa de dibujo vectorial llamado SmartSketch el cual se posicionó como número uno en Japón bajo plataforma Macintoch.

En 1995 la firma decidió incorporar la posibilidad de realizar animaciones vectoriales y su nombre cambió a FutureSplash Animator (Ver el primer splash screen), un programa para animadores web. Poco tiempo después Macromedia adquiere FutureWave y cambia su nombre a Flash, momento en el cual inicia la evolución de la aplicación. El actual software Flash mantiene aún hoy herramientas maravillosamente útiles como las características del "Pencil tool", "straighten", "smooth" e "ink". Al momento de importar elementos hacia nuestro Flash, llámese vía Stage o Library, podemos ver "Flash Movie" (*swf, *spl), éste último el formato de archivo en que trabajaba el antiguo y no tan difunto FutureSplash Animator (vive dentro de Flash). Esto es una clara muestra que Macromedia quiso conservar la historia intacta ya que el ".spl" era poco útil pero seguía viniendo incorporado en Flash; Adobe mantiene esa tradición hasta la fecha.

Las versiones 2 y 3 de Flash mostraron la visión de Macromedia y la evolución de la herramienta. Se iniciaba el camino hacia lo que actualmente se conoce como un standard mundial.

Flash 4 dió un paso gigante hacia las posibilidades para creación de animaciones con un nivel de complejidad nunca antes visto en Internet. Particularmente, al Flash 4 le saqué mucho jugo.

Flash 5, desde mi óptica dió paso a una "época de oro" ya que grandes firmas y creativos implementaron su tecnología, sumado a la utilización masiva del usuario standard. Flash iniciaba con mucha fuerza el camino al éxito. Actionscript ampliaba las posibilidades del creador web para generar aplicacionesmás robustas, incorporando la posibilidad de acceder a datos externos (.XML).

Flash 6 (MX) fué una buena noticia para la comunidad de diseñadores y desarrolladores web ya que Actionscript venía robusto y cargado de opciones. Esta versión viene como parte de una suite llamada Macromedia Studio MX, la cual incorpora e integra herramientas como Dreamweaver, Fireworks (nunca ví su utilidad), Coldfusion y Freehand.

Flash 7 trae enormes mejoras donde sobresale la programación orientada a objetos (OOP) que el Actionscript 2 potencia. Una de esas sorpresas poco amables que traía esta versión es la desaparición del Modo normal, lo cual obliga al usuario a componer los scripts manualmente. Macromedia nos puso a voltear a todos con ésta nueva versión. Particularmente me costó la adaptación.

Desde la versión 8 hasta la fecha, Flash ha continuado evolucionando como herramienta pasando de las manos de un propietario (Macromedia) a otro (Adobe) pero siempre posibilitando la construcción de una web más amable, luchando por mejorar en pro de las técnicas para la Optimización de Web sites para Buscadores (SEO).

Y en el 2005 Adobe compra Macromedia y junto con ella sus productos, entre ellos Flash, que pasa a llamarse Adobe Flash perteneciendo a las versiones estables de los Adobe Creative Suite o comunmente conocidas como CS.


Notas y Referencias:
http://www.wikipedia.org/
http://cortesmedia.com/