Sonidos en flash

Para colocar música y efectos de sonido en sus animaciones de flash, tengan en cuenta estos datos:

- Primero (y lo más importante) es importar el sonido que se va a ocupar. Vayan a "archivo", luego a "importar" y escoger "importar en biblioteca" para así agregar el sonido deseado.

[Archivo de sonido importado a biblioteca]

- Luego elijan una capa para colocar el sonido (en la misma animación o vacía) y tomen el archivo de biblioteca y "arrástrenlo" hasta la pantalla. Si lo hicieron bien, tendrán esto.

- Si van a la capa donde está el sonido, verán sus atributos en la sección propiedades.

Efectos: Modificaciones que pueden hacerse al archivo de sonido en flash, un ejemplo de ello son los típicos en los cuales el sonido se apaga al acabar el video. También se puede personalizar.

Sincronización: Comportamiento del sonido en relación a la linea de tiempo. Hay 4 tipos:
- Evento (Event): Se reproduce al llegar al fotograma donde se encuentra el sonido y se sigue reproduciendo aún sin importar si se detiene la animación.
- Inicio (Start): Es lo mismo que evento pero se puede dejar de reproducir con un fotograma programado con la opción Detener (stop).
- Detener (Stop): Detiene sonido (debe ocuparse el mismo para que funcione bien).
- Flujo (Stream): Sonido sincronizado con animación, si se detiene la animación, el sonido también lo hará.

Repetir: Pueden elegir la cantidad de veces que quieran que se repita el sonido. También está la opción de que lo haga indefinidamente.



Aquí un ejemplo simple de lo que puede lograrse con esto.

Enjoy!
-

Algunos consejos de Flash: Color alfa (u opacidad de objetos)

Para que los objetos cambien de opacidad para, por ejemplo, aparecer o desvanecerse en un fondo, hay que seguir los siguientes pasos.

- Convertir el o los objetos en símbolo gráfico.
- Al seleccionar el símbolo, aparece en la sección de propiedades (la que está debajo del escenario) una opción de color. Hay que colocar "Alfa"

La opción alfa sirve para la transparecia de una imagen. Al estar en 100% la imagen está en su máxima opacidad (se ve completa y nítida) y, al ir bajando el porcentaje, se va desvaneciendo.

- Hay que hacer una animación por movimiento y, en ella, el objeto debe estar con alfa 0% en el primer fotograma y con 100% en el último (o viceversa... o con los porcentajes que quieran).

Acá está el resultado:

Páginas de ayuda para infografías + Bonus

Se viene el trabajo de infografías así que acá una recopilación de

http://www.consumer.es/

Página española denominada también "El diario del consumidor". Hay una sección de infografías de temas variados para tener algún tipo de referencia.

Ejemplo: http://www.consumer.es/web/es/salud/prevencion/2009/07/05/187935.php (Infografía de medio siglo de vida de skateboarding).


http://www.criteriondg.info/wordpress/10-consejos-para-hacer-infografias/

10 consejos útiles para considerar a la hora de hacer una infografá (dejaremos que la página hable por sí misma XD)

http://www.serindigena.cl/territorios/recursos/multimedia/infografias/telar_mapuche.htm

Una infografía sobre el telar mapuche.

Bonus track

http://www.newgrounds.com/
Ya que he visto que algunos de ustedes andan un poco aproblemados con flash, acá hay una recopilación de juegos y videos flash de temas muy variados (vienen con rango de edad determinado dependiendo del contenido) para que se animen y pasen un rato agradable con este programa.


Suerte y vamos, flash no muerde :D

ActionScript

Como se dijo en clase, actionscript es un pseudo lenguaje de programación disponible en flash para hacer funcionar los botones y así potenciar la interactividad, entre otras cosas. A continuación veremos cómo acceder a él y cómo aplicarlo.

Acceder

Para acceder a ActionScript, tienes que crear un botón, seleccionarlo e ingresar al ícono indicado en el cuadrado rojo. Ahí se programa el botón escogido.

Si todo sale bien, aparecerá esta ventana, debe tener en un lado una lista con las siguientes cosas:
"Funciones Globales", "Propiedades generales", "Operadores", etc.

Ahora que ya ingresamos a ActionScript... ¡Programemos!

Primero se ingresa a "Funciones globales" y después a "Control Clip de Película". Al ingresar a esto último, tendremos una lista nueva con opciones disponibles. En nuestro caso, hay que ocupar "On". Al elegir "On", tenemos una lista nueva.

De esa lista hay que escoger "release" (o liberar, que es lo que hace el botón al apretarse: "Liberar" una acción).



Y luego de eso, hay que ubicarse entre las llaves que salen ahí para colocar los demás comandos.



Siguiente Paso: Definir función para cada botón.
En este momento, los comandos elegidos dependerán del botón que se esté animando.

En "Funciones Globales" hay una lista de grupos de comandos (entre los cuales está el ya usado "Control de Clip de Película"). Para acceder a algunos de los que necesitaremos hay que entrar a "Control de la línea de tiempo", aunque también hay otros utilizados que se encuentran en el grupo "Navegador/Red".



Aquí está la lista de comandos a utilizar (los que vimos en clases).

Play (Reproducir):

Stop (Parar). Se coloca 1 porque indica que irá al inicio de la animación (fotograma 1):

Pausa:

Foward (Adelantar):

Rewind (Retroceder):

Dirigirse a "x" fotograma. Primero hay que ponerle nombre. Sólo hay que escoger uno y dirigirse al rectángulo plomo que hay abajo. Se coloca nombre en donde dice "etiqueta de fotograma".

Ahora, en el comando del botón para dirigirse a ese fotograma, hay que colocar su nombre entre paréntesis y entre comillas (sino no sirve).

Cargar película externa.
Esta película puede ser bajada de internet o hecha en un archivo aparte (Se recomienda lo último para practicar y/o para cuando no se sepa bajar películas de internet). Debe anotarse el nombre de la película entre paréntesis y comillas, y agregar al final ".swf" ya que es una presentación. Al lado se coloca un número, puede ser 1 para que aparezcan las 2 películas juntas o 0 para que la reemplace:

Cargar escena.
Para crear una escena nueva hay que ir a "agregar escena" (que normalmente se presenta como un signo más) o ir a "ventana", luego a "otros paneles" luego a "escena" y apretar el signo más que aparece en el cuadro que aparezca.

Para el comando, hay que poner el nombre de la escena entre paréntesis o comillas. Dependiendo de la versión de flash que posean, hay que escribirlo en español o en inglés.

Y estos serían los botones que ocuparán por ahora.

Pero acá hay otra utilidad del ActionScript.

Para detener la animación al final de la escena deben ir al último fotograma, apretar con el botón derecho del mouse e ir a "acciones". Luego vayan a "funciones globales", luego "control de línea de tiempo" y después "stop".

Si la acción está correcta, en el fotograma saldrá una "a" minúscula. Con esto se evita el paso automático a la otra escena o que la animación se reproduzca de manera infinita.


¡Mucha suerte y éxito!


Y recuerden, hagan click en las imágenes para verlas más grandes.

Guía de movimiento y máscara

Guía de movimiento:
Sirve para crear un recorrido para un objeto que esté en una animación por movimiento.
Para ello, hay que crear un objeto para convertirlo en símbolo y hacer una animación por movimiento (para recordar cómo se hace, ir acá).

Luego se crea una capa para la guía de movimiento. Se apreta el botón "Añadir guía de movimiento" que aparece señalado en la imagen.

En esta capa se crea una línea (con pluma, lápiz o pincel, da lo mismo) que sea un recorrido para que siga la forma.

Luego hay que dirigirnos al primer y al último fotograma de la animación. En ellos hay que colocar la figura en los extremos respectivos de la guía.

[Primer fotograma]

[Último fotograma]

La línea se puede notar al reproducir el video en el archivo directamente en el tablero de trabajo pero, al verlo en formato swf, la línea desaparece.

Máscara:
Esta sirve para dejar ver sólo una parte de una animación. Para crearla hay que hacer una capa para crear una animación de movimiento (no se olviden de convertir la forma en un símbolo). Luego creen una capa superior y hagan su máscara (puede ser una figura cualquiera).

[Al respetable público le presento mi excusa: Es cualquier figura]

Al tener su "máscara" lista, vayan a la capa donde esta está y la aprietan con el botón derecho del mouse y escogen la opción "máscara".

[Línea de tiempo antes de convertir en máscara]

[Línea de tiempo después de convertir en máscara]

Al ver la presentación directamente en el tablero de trabajo, no se notará el efecto de la máscara pero, al verlo como presentación (apretar Ctrl+Enter) se verá el efecto de la máscara.

Que lo disfruten y sigan ratoneando en flash (y, como ya ven, ahora los tutoriales también tienen videos ^_^)

Clip de película

Ya hemos visto las animaciones por forma, por movimiento y cuadro a cuadro. También hemos visto los símbolos gráficos y de botones. Ahora falta ver el "Clip de película", un símbolo que contiene su animación propia a la vez que participa en una animación general. Vamos a explicarlo a continuación:

1- Convertir una figura en un símbolo "Clip de película" (Ir a "modificar" y a "convertir en símbolo" o apretar f8). Al hacer eso, creen una animación por movimiento común.

2- Al tener su animación (y asegurarse que no tenga alguna falla), hagan doble click en la forma convertida en símbolo para ingresar a su propia línea de tiempo.



Allí pueden hacer cualquier cantidad de animaciones (por forma, movimiento o cuadro a cuadro). Estas se repetirán cíclicamente en la animación general donde estaba el símbolo (por ejemplo, la animación por movimiento que se hizo en un principio).

3- Salir de la línea de tiempo del clip de película para probar la animación. Pero el clip de película se ve sólamente en formato swf. Para verla, apretar ctrl+enter.



Este tipo de símbolo crea animaciones largas sin necesidad de que la línea de tiempo principal tenga muchos fotogramas. Esto ocurre debido a que se trabaja dentro del símbolo.

Botones

Los botones son una de las cosas más importantes que tiene Flash, al programarlos, podemos ocuparlos para hacer funciones variadas en las animaciones que se hagan con dicho programa. Aquí una pequeña guía de cómo hacerlos.

Primero lo primero: Hacer un botón. Puede ser de cualquier forma, un círculo, un cuadrado, una estrella... el punto es tener algo para luego configurarlo. Como ejemplo, tendremos el típico ejemplo de "Play"

Lo siguiente es convertirlo a símbolo "botón". Para ello hay que ingresar a "modificar" y luego a "convertir en símbolo" (o F8 para acortar, acuérdense de seleccionar el futuro botón). Al entrar a dicho menú, eligen "botón". Al hacer eso, en la biblioteca, aparecerá el símbolo.

Ahora a intervenir el botón. Pueden entrar a él en la biblioteca o haciendo doble click diractamente en el botón. Así podrán ingresar a la línea de tiempo propia del botón.

En esta línea hay 4 fotogramas:

- Reposo: El botón propiamente tal.
- Sobre: El botón con la flecha sobre él (la flecha se convierte en mano).
- Presionado: El botón al hacer click sobre él.
- Zona Activa: Parte sensible del botón.

En estos 4 fotogramas se hacen cambios en el botón, ya sean de forma, tamaño o color.

[Reposo]

[Sobre]

[Presionado]

[Zona activa. Para este, sólo se necesita precisar la zona sensible, por lo tanto, la superficie debe tener relleno (el color da lo mismo).]

Después de esto, regresen a la linea de tiempo normal (apretando "Escena 1" debajo de la línea de tiempo).

Introducción a Flash

En estos momentos, comenzaremos a ver el programa Flash, el cual es utilizado para crear infografías, juegos, animaciones, interactividad, entre otras. Este programa cuenta con herramientas tanto vectoriales (encontradas en Illustrator) como de mapa de bits (Como las de Photoshop) y cuenta con un lenguaje de programación llamado "ActionScript".
Otra particularidad que tiene viene a la hora de guardar el archivo, hay 2 tipos de archivos flash:

.fla: Archivo que se ocupa sólamente para trabajar y editar.
.swf: Archivo de presentación.

Al publicar la animación, se puede hacer para versiones antiguas de flash, formato gif, proyectores windows o macintoch, entre otros.

Ahora veremos la ventana de este programa (por favor, hacer click en la imagen para verla más grande):



1- Barra de herramientas
2- Linea de tiempo
3- Propiedades (al elegir una herramienta o al seleccionar el escenario, aparecen la información de esta)
4- Color y muestras.
5- Biblioteca (sirve para tener archivos importados de otros programas como Illustrator y símbolos).
6- Escenario.

-----------------------------------------------------------------------------------
Barra de Herramientas:

Hay herramientas que aparecen en Flash que se repiten en Photoshop e Illustrator. Sin embargo, algunas de ellas adquieren otras características en este programa. Aquí van algunos ejemplos:



Bote de pintura y tintero: Sirven para cambiar el color de la figura sin necesidad de seleccionar el objeto. El bote de pintura sirve para cambiar el color de relleno, mientras que el tintero hace lo propio con el contorno.


Goma: Como en todos los programas, sirve para borrar figuras, sin embargo, se puede elegir qué borrar, por ejemplo, sólo líneas, sólo rellenos, ambos, borrar seleccionados y borrar adentro.


Suavizar contorno: Suaviza los trazos seleccionados (se dijo en clases que la tendencia de este programa es suavizar).


Lápiz: Crea contornos.


Pincel: Crea rellenos.


Color de imágen y de relleno: Se elige color de linea y de relleno pero se necesita del bote de pintura y del tintero para cambiar el color.


Texto: Acá el texto puede dividirse. Para hacerlo hay que ir a "Modificar" y luego a "Separar".

[Texto junto]


[Texto separado]


---------------------------------------------------------------------------------------------

Tipos de animación

Cada uno de ellos consiste en fotogramas y fotogramas clave que se ocupan y la línea de tiempo (hacer click sobre imagen para verla más grande).




Ahora los tipos de animación:

Animación cuadro a cuadro:
Consiste en crear una seguidilla de fotogramas clave, los cuales tienen formas diferentes (ej: en uno un círculo, luego un óvalo, una luna, etc...). Su realización es igual a la del stop motion y es una forma básica de hacer animación (aunque un poco trabajosa por hacer cada fotograma).
Se presenta en la linea de tiempo de esta manera:





Animación por forma:
Se hace un fotograma clave y luego se hace otro a varios fotogramas de distancia. Cuando se elige como alternativa de animación según forma, el programa hace la secuencia intermedia (Ej: En el primer fotograma hay una estrella y en el último un corazón, en la secuencia intermedia se muestra cómo la estrella muta).
La forma en la que representa en la línea de tiempo es en un rectángulo verde agua con un punto en cada extremo y siendo atravesado por una flecha. Si la flecha aparece segmentada significa que la animación tiene un error.




Animación por movimiento:
Este depende de los símbolos (objetos visuales que poseen funciones para volver al programa más eficiente y pueden ser botones, gráficos o clips de película, para crear uno hay que seleccionar la figura en su totalidad, ir a "Modificar" y luego a "Convertir en símbolo).



Se coloca la figura en el primer fotograma clave y luego esta se mueve (en su propio eje o de un lado a otro) y, al elegir el tipo de animación, el programa desarrolla la secuencia. También puede cambiarse forma pero sólo en aspectos más pequeños como proporcionalidad y tamaño.
La forma en la que se representa en la linea de tiempo es igual a la de la animación por forma pero, en vez de verde agua, el color es lila. Nuevamente, si la flecha está segmentada quiere decir que la animación está mala.







Esta fue la recopilación de lo más importante de la clase. ¡Saludos! ^_^