Publicar una película

Para mostrar mis películas a la audiencia, Flash me permite elegir entre distintos formatos.

Una vez que terminé mi película, voy a: Archivo >Configuración de publicación, selecciono formato:

.exe para hacer un archivo autoejecutable, o sea que el usuario no necesitará tener instalado el programa Flash en su computadora para poder ver la película. 

Quick Time (.mov) es muy utilizado, pero no permitirá que se vea la interacción. En el caso de una película de secuencia lineal, no presenta inconvenientes.

Prueben a publicar en distintos formatos.

.swf, es un formato que se puede abrir con cualquier navegador como el Mozilla o el Explorer.

Vean las diferencias de peso que hay en cada uno de estos archivos, el más liviano termina siendo el swf.

Máscara, ejercicio

1 Con una capa, donde he dibujado formas, seleccionada, agrego una capa nueva a la línea de tiempo y le asigno el nombre Máscara.

2 En la caja de herramientas, selecciono la herramienta Rectángulo y dibujo un rectángulo menor al tamaño del escenario. Este rectángulo es la forma de la máscara. Todo lo que se encuentre bajo el rectángulo será visible.

3 Hago clic con el botón derecho del ratón (Windows) o clic mientras presiono la tecla Control (Macintosh) en el nombre de la capa Máscara en la línea de tiempo y elijo Máscara en el menú contextual.

La capa se convierte en una capa de máscara, señalada por un icono de una flecha hacia abajo. La capa situada inmediatamente debajo está vinculada a la capa Máscara y su contenido se muestra a través del área rellenada de la máscara. El nombre de capa de máscara aparece con sangría y su ícono cambia a una flecha que apunta a la derecha. La ilustración del lienzo ya no está visible en el escenario.

Las capas de máscara deben estar bloqueadas para que se muestre el efecto Máscara. Para editar las formas, puedo desbloquear las capas Máscara y Formas. Cuando acabe de editar la ilustración, bloqueo las capas de nuevo para invocar la máscara.

4 Guardo el archivo.

Insertar Sonidos, ejercicio

Prueben a colocarle otra capa al botón e insertarle sonidos en las distintas instancias:

1 Vuelvo al modo de edición de botón, haciendo doble clic sobre el icono del botón en la biblioteca

2 Inserto una nueva capa y la nombro sonidos.

3 http://www.freesound.org/, esta es la web de sonido donde te podés registrar gratuitamente, tendrás un nombre de usuario y una contraseña que te permitirá bajarte todos los sonidos que quieras, de este modo te podés hacer una carpeta en mis documentos, nombrarla sonidos y guardar los que te gusten.

4 Importo el sonido elegido: archivo > importar a biblioteca.

5 Selecciono el fotograma reposo de la capa sonidos.

6 Arrastro el sonido seleccionado desde la biblioteca hasta el escenario, de este modo se coloca en el fotograma que he seleccionado.

7 Hago lo mismo con los otros estados del botón, insertando F7 o fotograma clave vacío.

Observen ahora en la ventana propiedades los distintos parámetros que podemos modificar del sonido, selecciono un fotograma de sonido, miro en la ventana propiedades, veo que dice sonido y está el nombre del que he seleccionado para ese fotograma, si despliego esa ventana, puedo cambiar desde ahí el sonido, me pone todos los sonidos que tengo en la biblioteca.

Luego está efectos, prueben las distintas opciones.

Y abajo está sinc, desplieguen y vean y prueben lo que sucede con las distintas opciones.

Pruebo la película.

Creación de botón + interactividad, ejercicio

La característica destacable de Flash es la interactividad, lo que se dice enlazar por medio de un nodo (botón) una escena con otra.

Los botones SON SÍMBOLOS, como los gráficos y los clip de película.

Tienen cuatro estados:

1 El primero es la imagen que vemos cuando el cursor está fuera del área del botón (REPOSO o UP).

2 El segundo es el que vemos cuando nos situamos por encima (SOBRE o OVER), por lo general, desearemos avisarle al usuario que se halla encima de algo que lo conectará con otra cosa, en ese momento aparece la "manito" que me indica que hay interactividad.

3 El tercer estado se da cuando picamos sobre él (PRESIONADO o DOWN ).

4 El cuarto estado (ZONA ACTIVA o HIT) define los límites del botón, es el área que reconoce los movimientos del mousse  y que hará funcionar mi botón.

Para esto, con un archivo nuevo, voy a:

1 INSERTAR >  NUEVO SIMBOLO > selecciono: BOTON , le doy un nombre: BOTON  > ACEPTAR.

Por más obvio que les parezca, nombrar los símbolos es de gran ayuda.

Flash me presenta el modo de edición de botón, en el escenario aparece una capa y sobre la línea de tiempo CUATRO FOTOGRAMAS nombrados como : REPOSO o UP, SOBRE o OVER, PRESIONADO o DOWN Y ZONA ACTIVA o HIT. 

FLASH EMPLAZA AUTOMÁTICAMENTE UN FOTOGRAMA CLAVE VACÍO en el fotograma   REPOSO.

2 Seleccionen el fotograma REPOSO en la línea de tiempo. Creen un objeto simple (un círculo o un cuadrado) que esté con el centro en la cruz del escenario, este es un indicador para poder emplazar los cuatro estados en el mismo sitio.

3 Seleccionen el fotograma SOBRE en la línea de tiempo, coloquen un fotograma clave (F6 o insertar > fotograma clave).

Háganles pequeños cambios, como de color o de forma, puede ser algo más grande que el anterior.

4 Seleccionen el fotograma PRESIONADO en la línea de tiempo. Inserten un fotograma clave. Hagan algunos cambios.

5 Seleccionen el fotograma ZONA ACTIVA en la línea de tiempo. Inserten un fotograma clave, ESTE FOTOGRAMA NO SE VÉ, sólo sirve para indicar

la zona DONDE SE ACTIVARÁ MI BOTÓN, así que puede ser negro, para que lo puedan comprobar.

6 PARA HABILITAR EL BOTÓN SOBRE EL ESCENARIO TENGO QUE IR A CONTROL > HABILITAR BOTONES SIMPLES.

7 Ya tengo mi botón, vuelvo a la escena, y compruebo que mi símbolo botón está en la biblioteca. Selecciono el primer fotograma de la capa 1 de la escena. Arrastro el botón desde la biblioteca al escenario y lo coloco en un costado. Nombro a esta capa botón. Le agrego a esta capa 30 fotogramas, insertar > fotograma. Creo una capa nueva y con la herramienta texto escribo en el primer fotograma: escena 1, le agrego 30 fotogramas.

8 Inserto una nueva escena, voy a insertar > escena. Le agrego 20 fotogramas. Con la herramienta texto escribo en el primer fotograma: escena 2, le agrego 20 fotogramas.

Para ir a de una escena a otra, podemos hacerlo desde el ícono que está a la

derecha arriba del escenario, (hay dos íconos: el primero es para ir de una escena a otra, el segundo para ir de un símbolo al otro), o si no podemos abrir la ventana ESCENA, desde el menú ventana, y picar sobre cada una de ellas.

Ahora debo indicarle al programa dos acciones fundamentales para que suceda la interactividad.

Por más que yo coloque un botón en la escena 1, si no le indico a Flash que se detenga en el final de esta escena, la reproducción seguirá corriendo hasta la escena 2 sin más. Y volverá a empezar en un ciclo ininterrumpido.

Lo puedo comprobar haciendo control + intro.

Para que se detenga en el final de la escena 1 y pueda accionar mi botón, debo comenzar a colocar ACCIONES.

HAY DOS TIPOS DE ACCIONES (en principio) :

ACCIONES DE FOTOGRAMA Y ACCIONES DE BOTON.

9 Vamos a empezar por indicarle a Flash que queremos que la película se detenga cuando llegue al fotograma 30 de la escena 1.

Para esto creamos una capa nueva y la nombramos acciones, le ponemos un fotograma clave VACIO en el fotograma 30.

Vamos a usar por vez primera la ventana ACCIONES (es la que está abajo del escenario). 

La desplegamos.

Vean que dice: ACCIONES - FOTOGRAMA, lo que me indica que estoy en condiciones de dar una acción a un fotograma (otra vez, la obviedad, pero verán más adelante que esto puede ser muy útil).

10 Seleccionamos el fotograma clave vacío 30 de la capa acciones y con la ventana ACCIONES abierta, veremos un signo +, picamos sobre él y vamos a ACCIONES > CONTROL DE PELICULA > STOP. Automáticamente aparece la indicación

stop();

en la ventana acciones y una pequeña a minúscula por encima del fotograma clave que me indica que este fotograma contiene una acción.

ESTO ES MUY IMPORTANTE PARA SABER DÓNDE HEMOS COLOCADO LA ACCIÓN Y RECORDAR CUÁLES son los FOTOGRAMAS que CONTIENEN ACCIONES.

Con sólo picar sobre el fotograma aparece la acción determinada en la ventana acciones.

11 Ahora vamos a probar la película, (control + intro). Vean que se detiene al finalizar la escena.  

12 Entonces vamos por la segunda acción, la del botón:

Estamos en la escena 1, seleccionamos el botón SOBRE EL ESCENARIO, (si tengo habilitado el control de botón sobre el escenario y me aparece la manito que no me permite seleccionarlo, voy a CONTROL > HABILITAR BOTONES SIMPLES Y LO DESELECCIONO.)

Ahora en la ventana ACCIONES dirá al lado BOTÓN. Pico sobre el signo + y voy a

ACCIONES > CONTROL DE PELICULA > GOTOANDPLAY.

Vean que aparece en la ventana acciones un cuadro con distintas opciones. Por defecto aparece seleccionado IR A Y REPRODUCIR, lo dejamos así. Debajo dice: ESCENA,

selecciono ESCENA 2, QUE ES A DONDE QUIERO QUE ME CONECTE EL BOTÓN.

Debajo dice TIPO: número de fotograma, lo dejo así, y debajo FOTOGRAMA : 1 , este será el fotograma por donde comenzará a reproducirse la ESCENA 2. el TEXTO COMPLETO de las acciones de botón DICE:

on (release) {

    gotoAndPlay("Escena 2", 1);

}

13  Ahora puedo probar mi película, la reproducción se detendrá cuando llegue al fotograma 30 de la ESCENA 1, y si pico sobre mi botón se reproduce la ESCENA 2 desde el comienzo. Y vuelve a la escena 1.

LO LOGRARON???

LOS FELICITO!!!

14 PARA TERMINAR, VIERON QUE AL FINALIZAR LA ESCENA 2, la película vuelve sola al fotograma 1 de la ESCENA 1, si yo quisiera detener la reproducción AL FINALIZAR LA ESCENA 2, CÓMO LO HARÍA?

Ya lo saben...

A ver quién lo logra....!!!!!

Bueno, si estás con dudas, harás lo siguiente: 

15 Agregar una capa de acciones a la escena 2.

16 Insertar un fotograma clave en el 20 de esta capa, asignarle acción de fotograma: stop.

17 Crear una capa nueva en esta misma escena, nombrarla botón, emplazar otra instancia del botón que hemos creado en el fotograma 1, asignarle la acción al botón, seleccionándolo desde el escenario, pero ahora indicando que vaya a la escena 1.

Ahora mi película debe correr hasta el fotograma 30 de la escena 1, accionando el botón comienza a correr la escena 2, se detiene en el fotograma 20 y accionando el botón vuelve a la escena 1.

Recuerden que para cada cosa utilizo una capa diferente, una para el texto, otra para las acciones de fotograma, y otra para el botón.

Guía de movimiento, ejercicio

Una guía de movimiento 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 que nos permitirá crear un movimiento no forzosamente rectilíneo.

Vamos a utilizar el clip de película pájaro que hemos realizado anteriormente para agregarle una capa de guía de movimiento y hacer que el pájaro se desplace por el escenario de un lado al otro, entrando desde fuera de escena y saliendo de ella, modificando su tamaño en ingreso (mayor) y en salida (menor) para dar un efecto de perspectiva aérea.

1 Tengo una capa con el clip de película pájaro con 40 fotogramas, le voy a poner algo más, para esto voy sobre la línea de tiempo sobre el fotograma 60 u 80, pico sobre éste y voy a INSERTAR > FOTOGRAMA CLAVE.

2 Pico sobre la capa de pájaro con botón derecho y selecciono agregar guía de movimiento, automáticamente aparece la capa de guía de movimiento asociada a la de pájaro, con una sangría, que me indica que está asociada, y un fotograma clave vacío en el fotograma1.

3 Selecciono este fotograma y con la herramienta lápiz dibujo un trazado que atraviese la escena.

4 Bloqueo la capa guía picando sobre el candado y muevo la instancia de pájaro del fotograma 1 de la capa pájaro para que se “enganche” a la guía con la herramienta transformación libre.

Cuando selecciono un símbolo con la herramienta transformación libre, en el centro de éstos aparece un círculo blanco que es el lugar desde donde se asocian a las guías, verán que con sólo acercarlo, se “engancha” a ésta.

Lo agrando con la herramienta transformación libre y lo coloco fuera de la escena, por ejemplo hacia la derecha.

5 Ahora tengo que enganchar la instancia del símbolo del último fotograma clave de la capa pájaro en el final del trazado de la guía. Lo achico y lo coloco fuera de escena hacia la izquierda, cuidando que también se enganche a la guía desde el centro.

6 Ahora puedo probar mi película picando CONTROL + INTRO a la vez o DESDE ARCHIVO > CONTROL > PROBAR PELÍCULA.

Clip de película, ejercicio

Para hacer este clip de película, voy a necesitar dos símbolos gráficos: uno será el ala del pájaro, y el otro el cuerpo, con la cabeza, el pico, el ojo, etc.

Con estos dos símbolos gráficos voy a formar mi pájaro, utilizando dos instancias del símbolo ala, en capas separadas.

1 Desde un archivo nuevo, voy a INSERTAR > NUEVO SIMBOLO > GRAFICO (le pongo un nombre: ala) > ACEPTAR.

2 Aparece en el escenario, al lado de ESCENA 1- ala (con el icono de símbolo gráfico), una cruz en el centro del escenario, estoy en el modo de edición de símbolos. NO ESTAMOS SOBRE EL ESCENARIO de la película principal.

Dibujo el ala de mi pájaro con el pincel o el lápiz, lo pinto, etc.

Para ver qué símbolos he creado, siempre me conviene tener la ventana BIBLIOTECA abierta: VENTANA > BIBLIOTECA.

3 Ahora voy a crear otro símbolo gráfico para el cuerpo, voy a INSERTAR > NUEVO SIMBOLO > GRAFICO (le pongo un nombre: cuerpo) > ACEPTAR.

Dibujo el cuerpo completo de mi pájaro sin las alas, le hago ojos, pico, etc.

4 Ya tengo los dos símbolos gráficos que necesito, recién ahora voy a crear mi clip de película.

Voy a INSERTAR > NUEVO SIMBOLO > CLIP DE PELICULA (le pongo un nombre: pájaro) > ACEPTAR.

5 Aparece en el escenario, al lado de ESCENA 1- PAJARO (con el icono de clip de pelicula), una cruz en el centro del escenario, estoy en el modo de edición de símbolos.

Otra vez NO ESTAMOS SOBRE EL ESCENARIO de la película principal.

¿CUAL ES LA DIFERENCIA ENTRE ANIMAR SOBRE EL ESCENARIO Y HACER UN CLIP DE PELÍCULA? LA DIFERENCIA ESTÁ EN QUE EL CLIP DE PELICULA SE REPRODUCE INDEPENDIENTEMENTE DE LO QUE

SUCEDE SOBRE EL ESCENARIO

Ahora voy a crear 3 capas, una para el cuerpo y dos para las alas.

Selecciono el fotograma 1 de la capa del medio, y coloco una instancia del símbolo gráfico cuerpo sobre el escenario, arrastrándolo desde la biblioteca hasta la escena. Doble clic sobre la capa y la nombro: cuerpo.

Por qué sobre la capa del medio? Porque el cuerpo estará entre las dos alas del pájaro!

6 Selecciono el fotograma 1 de la capa de arriba, y coloco una instancia del símbolo gráfico ala sobre el escenario, arrastrándolo desde la biblioteca hasta la escena. Doble clic sobre la capa y la nombro: ala adelante.

7 Hago lo mismo con la capa de abajo, coloco otra instancia de ala y nombro a la capa: ala atrás.

8 Bloqueo las capas ala adelante y cuerpo para mover y girar ligeramente el ala de atrás para que se vea (con la herramienta transformación libre), y puedo modificar un poco el brillo de la instancia para darle un efecto de profundidad, bajándole el brillo, o cambiándole la tinta a una más oscura, seleccionando el símbolo desde el escenario, voy a la ventana propiedades, color, etc.

9 Ahora voy a hacer volar al pájaro: selecciono el fotograma 40 de las tres capas a la vez: pico sobre el fotograma 40 de la capa de más arriba, sostengo shift y pico sobre el fotograma 40 de la capa de más abajo, así tengo seleccionados los fotogramas 40 de las 3 capas. Voy a INSERTAR > FOTOGRAMA CLAVE.

Las 3 capas quedan con 40 fotogramas cada una y un fotograma clave al final idéntico al primero.

10 En el fotograma 20 de la capa ala adelante inserto un fotograma clave (INSERTAR > FOTOGRAMA CLAVE o F6), bloqueo las otras dos capas para evitar movimientos que no deseo, tengo ya el fotograma para modificar, cambio la orientación del ala, la bajo por ejemplo, con la herramienta TRANSFORMACION LIBRE (recuerden que  cuando selecciono cualquier objeto con esta herramienta, aparece un pequeño círculo en el centro que es mi eje de rotación o de movimiento).

Pongo el eje de rotación pegado al cuerpo del pájaro, donde estaría la articulación del ala con el cuerpo.

Es MUY IMPORTANTE que el eje de rotación esté en el mismo lugar en el fotograma 1 y en el 40, cerca del cuerpo del pájaro, de lo contrario, cuando le aplique la intrerpolación de movimiento, se vería desarticulada.

11 Selecciono cualquier fotograma entre el 1 y el 20 de la capa ala que acabo de modificar y le aplico la interpolación de movimiento:  VENTANA PROPIEDADES > ANIMAR > MOVIMIENTO. Se crea una flecha del fotograma 1 al 20 sobre un fondo celeste. Chequeo lo que hice con enter.

12 Hago lo mismo con la capa ala atrás, (INSERTAR > FOTOGRAMA CLAVE o F6), bloqueo las otras dos capas, muevo el ala de este fotograma buscando una simetría en el movimiento, por ejemplo las dos alas ahora quedaron hacia abajo.

13 Pruebo lo que hice con ENTER, o deslizando la barra roja de deslizamiento hacia delante y atrás de la línea de tiempo.

14 Recién ahora voy a entrar a ESCENA 1 ( PICO SOBRE ESCENA 1 ARRIBA DEL ESCENARIO A LA IZQUIERDA).

Llevo una instancia de mi símbolo clip de película pájaro arrastrándolo de la biblioteca hasta el escenario.

Verán que no necesito más que un fotograma en la escena para que mi clip se reproduzca, ya que los clip tiene su línea de tiempo independiente de la escena.

Pruebo mi película picando CONTROL + INTRO a la vez o DESDE    ARCHIVO > CONTROL > PROBAR PELÍCULA.

ASÍ VERÉ MI PÁJARO VOLANDO.

Interpolación de movimiento, ejercicio

1 Creo un círculo con la herramienta óvalo sosteniendo shift.

2 Selecciono el objeto (todavía desagrupado) picando en el fotograma clave o seleccionándolo con la flecha negra, voy a insertar > convertir en símbolo > gráfico. Nombrarlo: pelota.

3 Nombro la capa pelota (doble clic sobre capa). Ponerle el candado!

4 Pico con botón derecho sobre la capa pelota y selecciono: añadir guía de movimiento. (Automáticamente aparece otra capa encima de ésta con el nombre guía: pelota.)

5 Seleccionar el fotograma 1 de la capa guía: pelota y dibujo un trazado con la herramienta lápiz, puedo seleccionar suavizar, abajo en opciones de herramienta lápiz, para un dibujo sin líneas rectas, prueben las distintas opciones!!

6 Saco el candado de capa pelota e inserto fotogramas claves en 20, 40, 60 y 80.

7 Selecciono con la herramienta flecha (negra) el fotograma 20 y ubico a la pelota en el lugar adecuado, en este caso es el lugar donde la línea se quiebra (siempre debe tener contacto el centro del símbolo gráfico (pelota) con la guía de movimiento, para que el símbolo se adose a la guía). Hacer el mismo procedimiento con los otros fotogramas claves.

8 Selecciono sobre la línea de tiempo de la capa pelota todos los fotogramas y picando con botón derecho voy a crear interpolación de movimiento.

Observen que le podemos dar distintas visualizaciones a la instancia pelota, seleccionando sobre el escenario a la pelota (coincidiendo con un fotograma clave), en la ventana propiedades puedo modificar: la tinta, el valor alfa, el brillo o el color avanzado, así como los porcentajes de estos valores.

Estas modificaciones se irán también interpolando a medida que pase la pelota de un fotograma clave a otro.  
9 Para publicar la película: Ir a archivo > configuración de publicación. Seleccionar formato flash, publicar, aceptar.   
10 Verás tu pelota rebotando!

Interpolación de forma, ejercicio

A diferencia de la interpolación de movimiento, la interpolación de forma se aplica sobre  objetos desagrupados!! (o sea que no son ninguna de las opciones de símbolos que nos permite crear flash).

En esta sección aprenderá a realizar las tareas siguientes:

• Dibujar con herramientas de Flash.

• Insertar fotogramas claves.

• Interpolación de formas.

1 Selecciono un color de relleno y otro de contorno desde el mezclador de colores. Dibujo con el lápiz cualquier forma. Con herramienta cubo de pintura relleno la forma dibujada.

2 Pico sobre el fotograma 15 SOBRE LA LÍNEA DE TIEMPO e inserto un fotograma clave con F6 o desde el menú: insertar > fotograma clave.

3 Selecciono el fotograma 15 picando sobre él, y cambio la forma utilizando la flecha negra. Van a ver que si acerco la flecha negra a la línea del dibujo, aparece una curva pequeña adosada a ésta, si estoy sobre una curva o una recta, o aparece un ángulo recto si estoy sobre una arista. Esto me indica que si yo "tironeo" con la flecha por los bordes del dibujo, puedo deformarlo. Si selecciono el dibujo con la flecha blanca sucede otra cosa bien diferente, aparecen los "nodos" del dibujo y puedo transformarlo tirando de estos nodos.

4 Pico entre el fotograma 1 y el 15 con botón izquierdo, voy a la ventana propiedades (abajo) y en animar, elegir FORMA.

Interpolación de forma por capas separadas

Les quiero mostrar cómo hacer una animación por capas separadas con interpolación de forma.

1 Dibujo cada una de las partes de una cara en capas separadas, cada una en el fotograma 1.

2 Selecciono A LA VEZ todos los fotogramas número 10 de todas las capas e inserto un fotograma clave o F6.

Me queda entonces un fotograma clave en 1 y un fotograma clave en 10 en cada capa, con fondo gris ( todavía no le dí interpolación!)

3 En el fotograma 10, cambio las expresiones de cada parte con la flecha negra.

4 Aplico interpolación de forma en cada capa, voy a la ventana propiedades (abajo) y en animar, selecciono FORMA.

Símbolos

Qué son los símbolos

Los Símbolos son objetos reutilizables. Estos objetos al ser transformados en símbolos, son incluídos en una biblioteca en el momento en que son creados, lo que permite que sean utilizados en varias ocasiones, ya sea en la misma o en otra película. Hay tres tipos de símbolos, que definiremos según su comportamiento o lo que deseamos que haga en la película:
símbolo gráfico, botón y clip de película

Cómo crear un símbolo

Seleccionamos el objeto que queramos convertir en símbolo. Abrimos el panel de Propiedades de Símbolo, accediendo al menú Insertar > Convertir en Símbolo o simplemente pulsando F8.

Una vez hecho esto nos aparecerá una ventana. Introducimos el nombre del símbolo que vamos a crear.

Sólo nos queda seleccionar el tipo de símbolo o comportamiento en que queremos convertir nuestro objeto. Podemos elegir entre Clip (película), Botón y Gráfico.

Bastará con pulsar OK para tener nuestro símbolo creado.