Cargando



Fundamentos Básicos Flash CS6: Mi primera película de Flash

Ejercicio práctico con los fundamentos básicos para realizar animaciones en 2d.


ago 28 2015 16:54
Intermedio
ago 28 2015 21:41
Flash CS6 nos ofrece un entorno muy completo para realizar animaciones, la aplicación de dichas animaciones van desde banners para páginas web hasta presentaciones multimedia. En el presente tutorial se cubren los aspectos básicos que nos permitirán hacernos de los conocimientos básicos para animar objetos vectoriales, imágenes y añadir archivos de audio a nuestras animaciones.

Requisitos:


1. Haber completado el tutorial Fundamentos Básicos Flash CS6: Conociendo el entorno de trabajoen donde se explican las características generales de la aplicación.
2. Conocer y ser conscientes de los elementos y conceptos de animación, dicha información se puede encontrar en Fundamentos Básicos Flash CS6: Elementos y conceptos de animación.
3. Descargar los archivos que compondrán la animación.

Paso 1: Creación y configuración del documento / Importar archivos multimedia

A) En la pantalla de bienvenida el programa vamos a menú Archivo / Nuevo o presionando CTRL + N y creamos un nuevo documento y cambiamos los valores del ancho y alto del espacio de trabajo como muestra la imagen a continuación.

2.jpg


B) Consiguientemente importamos los archivos necesarios para la animación, para ello vamos a menú Archivo Importar / Importar a librería. Se abrirá una ventana que nos permitirá seleccionar los archivos a importar.



Paso 2: Creación y asignación de capas

A) Para mantener el orden en el espacio de trabajo y hacer más fácil la edición de los elementos en la sección de capas crearemos 5 capas, una para el nombre de la banda, una para el nombre de la pista de audio, una para la pista de audio y otra para la imagen de fondo. Es muy importante tener en cuenta que se necesita crear una capa por cada elemento que vayamos a animar, para cambiar el nombre de la capa solo es necesario hacer doble click sobre el nombre de la misma.


4.jpg


B) Ya con nuestros archivos multimedia importados, añadirlos es tan sencillo como en la capa correspondiente seleccionar en la línea de tiempo el fotograma en donde aparezca el elemento, arrastrarlos desde el panel librería y soltarlos en el espacio de trabajo. Es importante recordar que hay que crear o añadir cada elemento en su capa correspondiente.



Para evitar que el fondo se mueva podemos bloquear el elemento activando el icono candado como se muestra en la imagen.


6.jpg


Paso 3: Animación de elementos

A) El primer elemento que animaremos será el logo de la banda, para este caso ya se contaba con el mismo en Illustrator, podemos copiar el logo con CTRL + C y pegarlo en la capa correspondiente de nuestro proyecto de Flash CS6. Aparecerá una ventana para designar opciones, introduciremos las que se muestran en la imagen.


7.jpg


B) Como se puede observar el elemento que acabos de pegar es de color negro y esta agrupado de forma que no nos permite modificar el color, por ejemplo. Los símbolos nos permiten regular el comportamiento de los elementos y utilizar la aplicación de una manera más óptima. Para ello seleccionamos los objetos que deseamos convertir en símbolos y vamos a menú Modificar / Convertir en símbolo o presionando la tecla F8, se abrirá una ventana emergente, para este caso el colocaremos por nombre al símbolo “Logo” y seleccionaremos “Gráfico” en tipo de símbolo.



Ya con el logo convertido a símbolo cambiar el color será tan sencillo como seleccionar le símbolo en nuestro espacio de trabajo, abrir el panel de propiedades y en la sección de efectos de color seleccionar “Tinta” y asignarle blanco, es importante seleccionar 100% en la cantidad de tinta.


9.jpg


C) Para hacer la animación correspondiente al logo hay que tener en cuenta que una animación consiste en designar un fotograma inicial que será el punto de partida del objeto y un fotograma final que será el punto de llegada o el cambio en la apariencia del mismo, recordemos igualmente que cada objeto a animar debe estar en una capa separada.

Cuando creamos el archivo de Flash CS6 hay un parámetro de configuración llamado FPS (fotogramas por segundo). Aquí estamos indicando cuantos fotogramas aparecerán por cada segundo de animación, en este caso hemos designado un total de 24 fotogramas por segundo.

Antes de aplicar animaciones es bueno tomar en consideración cuanto tiempo tomará un objeto en iniciar y finalizar la animación. Para el logo que estamos animando se ha decidido que la animación tendrá una duración de medio segundo, quiere decir que proporcionalmente 12 fotogramas serán suficientes para este cometido.

D) Como el logo es el primer elemento a animar, en la capa que hemos creado para realizar la animación seleccionamos el primer fotograma y ubicamos el elemento fuera del espacio del lienzo ya que la animación consiste en hacerlo llegar desde arriba, en la imagen mostrada a continuación
se ilustra lo anteriormente explicado.



Existen 3 tipos de fotogramas claves que nos ayudarán en la tarea de reproducir fotogramas para realizar las animaciones:


-Fotograma clave 11.jpg : en este fotograma se ubicará el elemento en su estado inicial o en el estado final en la animación. Para crear un fotograma clave solo es necesario ubicarse en la capa en donde previamente se emplazó el elemento y presionar la tecla F6.

- Foto clave vacío 12.jpg : como su nombre lo indica es un fotograma que no contiene ningún elemento y es útil cuando en una determinada capa no deseamos animar el objeto o la animación ya ha sido completada. Para crear un fotograma clave vacío solo es necesario ubicarse en la capa en donde previamente se emplazó el elemento y presionar la tecla F7.

- Fotograma de continuación 13.jpg : este fotograma nos permite repetir el estado del último fotograma clave, ya sea que contenga algún objeto o sea un fotograma clase vacío. Para crear un fotograma de continuación solo es necesario ubicarse en la capa en donde previamente se emplazó el elemento y presionar la tecla F6.

E) Siendo conscientes de los tipos de fotogramas clave, solo resta aplicar lo explicado para empezar a realizar la animación del logo utilizando la interpolación de movimiento:

1- En la capa correspondiente al logo ubicamos el cursor en el fotograma 12 y presionamos F5 para repetir el estado del elemento hasta ese fotograma.



2- Seleccionamos el fotograma clave (fotograma 1 en la capa logo en la línea de tiempo) y seleccionamos menú Insertar / Interpolación de movimiento. Reconoceremos el cambio aplicado por el color azul claro que tendrá el segmento a animar.



3- Seleccionamos el fotograma en donde concluirá el movimiento (fotograma 12 en la capa logo de la línea de tiempo) y crear un fotograma clave (tecla F6). El segmento animado en la línea de tiempo deberá verse como en la imagen mostrada a continuación.


16.jpg


4- Lo que resta por hacer es ubicarse nuevamente en el fotograma 12, en donde hemos creado un fotograma clave y mover el logo en donde queremos que finalice el movimiento. Para este caso la animación concluirá en la parte superior del lienzo como se ilustra en la imagen mostrada.



Adicionalmente podemos suavizar la animación seleccionando el primer fotograma en donde iniciamos la animación y vamos a panel propiedades en la opción suavizar. Los valores negativos harán que la animación se suavice en el inicio, los valores positivos harán que la animación se suavice al finalizar. Para este caso colocaremos valores positivos para que la animación finalice con sutilmente.



Nota: para visualizar el fondo a lo largo de toda la animación, solo basta con ubicarse en la capa correspondiente al fondo y presionar la tecla F5 hasta el fotograma en donde deseamos que se vea.


19.jpg


D) Para realizar la animación para el texto que contiene el nombre de la pista de audio, nos ubicamos en la capa texto, ya que deseamos que el título de la canción aparezca justo después de que el logo finalice su movimiento, nos ubicamos en el fotograma 12 de la línea de tiempo y presionamos la tecla F6, esto creará un fotograma clave vacío en donde dibujaremos la caja de texto en donde irá la información.


Es altamente recomendable convertir cualquier caja de texto en símbolo gráfico para evitar algunos errores de renderización en el objeto animado. Para ello con la caja que deseamos convertir seleccionada vamos a menú Modificar / Convertir en símbolo o simplemente presionando la tecla F8, aparecerá una ventana emergente en donde seleccionaremos los valores mostrados a continuación:



Ahora con la caja de texto convertida en símbolo gráfico realizaremos la animación en la misma cantidad de de tiempo que el logo (0.5 segundos o 12 fotogramas) utilizando interpolación clásica:

1- En la capa correspondiente al texto ubicamos el cursor en el fotograma 24 y presionamos F6 para repetir el fotograma clave.


2- Seleccionamos el fotograma clave del inicio de la animación (fotograma 12 en la capa texto en la línea de tiempo) y seleccionamos menú Insertar / Interpolación clásica. Reconoceremos el cambio aplicado por el color lila que tendrá el segmento a animar.



3- En fotograma en donde inicia el movimiento (fotograma 12 en la capa texto de la línea de tiempo) modificaremos la transparencia mediante el panel de propiedades para hacer que el objeto vaya apareciendo poco a poco en nuestro lienzo. Para ello en la opción Efectos de color en estilo seleccionaos transparencia y le asignamos 0%. Sabremos que el efecto ha sido aplicado satisfactoriamente porque veremos las líneas que delimitan el símbolo gráfico pero no podremos ver su contenido.



E) Resta incluir en la línea de tiempo el archivo de audio que hemos importado previamente, para ello nos ubicamos en la el primer fotograma de la capa audio y desde la librería arrastramos al lienzo el archivo de audio, el fotograma colocará un onda para indicar que contiene una pista de audio, deberá verse como la imagen mostrada a continuación



Ya habremos terminado de incluir todos los objetos que hacen parte de la animación, como se puede observar la pista de audio tiene una duración aproximada de 2:40 minutos. Si no extendemos la duración de la película más allá de las animaciones de los objetos que hemos realizado se cortará el audio y se reiniciará la película de una forma abrupta.
Para solucionar esto movemos la barra de desplazamiento a la derecha hasta el fotograma 640 y seleccionando cada capa en ese fotograma específico presionaremos la tecla F5 para repetir el estado de los elementos animados hasta ese fotograma, la imagen mostrada ilustra lo que se quiere obtener



Paso 4: Publicar archivo

Para finalizar publicaremos el archivo para generar una película de flash. Para ellos vamos a menú Archivo / Configuración de publicación y asignaremos los valores mostrados en la imagen, en la opción “archivo de salida” seleccionaremos el nombre para el archivo y el lugar en donde deseamos publicar el archivo en nuestro computador, hacemos click en el Publicar y después en Aceptar.


En este punto ya habremos realizado nuestra primera animación en Flash CS6, reconocido los elementos que nos permiten realizar animaciones y exportado el archivo ejecutable.
Con estos conocimientos ya estamos preparados para abordar proyectos de animación con un mayor grado de complejidad en Flash CS6.

¿Te ayudó este Tutorial?


4 Comentarios

Te sigo porque me encantan tus tutoriales. son muy útiles para aprender.


Raul Mendez
ago 31 2015 11:50

Genial tutorial, gracias Freedy


Fran Pazos
ago 31 2015 12:31
Gracias Freddy, nos tienes acostumbrados a tutoriales geniales

Freddy Polanía
sep 12 2015 03:21
Que les sean utiles es lo importante :)
No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X