Hoy vamos a aprender como crear una animación enlazando escenas. Ésto nos servirá para entender el funcionamiento del Timeline, que no es difícil, pero al principio cuesta un poco de entender.
Vamos a enseñaros cómo animamos la piruleta de Átlas en Cuentomidas. Las animaciones os serán de gran utilidad en vuestros proyectos.
Comenzamos añadiendo la imagen sobre la que aplicaremos la animación, en nuestro caso la piruleta. Fijaos que el número 3 queda fuera de la zona blanca de trabajo, por lo que no saldría en la pantalla del iPhone.
Hacemos click en la imagen, y en la parte superior izquierda de la pantalla (área de timeline) vemos como el nombre de la imagen queda resaltado.
Ahora vamos definir la duración de la acción. Para ello haremos doble click junto al nombre de la imagen bajo el tiempo que deseemos que dure la animación. Aparecerá un punto en blanco. En nuestro caso, hemos marcado que nuestra acción dure 2 segundos, por ello aparece un punto blanco bajo el número 2 junto al nombre de Piruleta, que es nuestra imagen.
En la línea de tiempo vemos dos puntos marcados:
El primero, que se crea automáticamente, nos indica el estado de la imagen (dimensiones, posición, opacidad...) en el tiempo inicial.
El segundo nos indica el estado final de la imagen, que es al que se llegará cuando le apliquemos la acción. Parece difícil pero ahora verás como no es para tanto.
Hacemos un click sobre el punto que se encuentra bajo el segundo 2. En el panel de la derecha, en Properties > Transforms, hacemos click sobre el triángulo de la izquierda de Rotate, con lo que se despliega un menú.
Puesto que nuestra acción será rotar la imagen sobre el eje de la Y (eje vertical), seleccionaremos junto a la letra Y “360”, que son los grados que tiene una vuelta completa. Si deseáramos que la piruleta diese dos vueltas, pondríamos “720”.
Rebobinamos la animación clickeando sobre el icono a la izquierda de “play” y damos al “play”. Veremos como la línea de tiempo avanza lentamente, y la piruleta realiza la acción que le hemos indicado, en este caso rota sobre su eje vertical.
Ahora vamos a enlazar esta animación con otra escena. Para ello haremos click en la escena 1 (parte inferior) para marcarla (aparecerá un recuadro azul), iremos al menú Scenes y pulsaremos Duplicate. Ahora tenemos una copia íntegra de la escena 1.
Hacemos click en la escena 2 y vemos que también se ha duplicado la acción en la línea temporal. Para eliminarla seleccionaremos uno de los dos puntos y pulsaremos Delete en nuestro teclado.
Ahora deseamos que la piruleta arrastre la página 1 del cuento. Para ello, en el área de trabajo de la escena 2 vamos a colocar la primera página del cuento, que es una imagen. Al añadir la imagen, la primera página del cuento queda sobre el resto de los elementos de la escena (nos damos cuenta porque tapa el número tres de la piruleta). Por lo que, en la parte superior de la pantalla, donde se indica el nombre de las imágenes, haremos click sobre la imagen que ahora se encuentra arriba, y sin soltar la arrastraremos hasta última posición.
Lo mejor de este punto, es que ya sabes como hacerlo. No tienes más que crear las acciones de subir hacia arriba tanto en la piruleta como en la página del cuento.
Para ello debes marcar en la línea temporal, junto al nombre de las dos imágenes, un punto haciendo doble click bajo el tiempo que desees que dure la animación.
Selecciona el punto final de la primera imagen y arrastra la imagen de la piruleta hacia arriba, hasta la posición que desees.
Repite el mismo proceso con la página del cuento.
Al pulsar “Play” verás como las imágenes van de la posición inicial, a la final que has establecido.
Tan sólo nos queda enlazar las dos escenas. Para ello pulsa click en la escena 1 (parte inferior izquierda) y en el panel de la derecha, en el menú Actions, junto a “End” selecciona “Go to Next Scene”. Con ésto le indicas que cuando finalice la acción que has definido previamente, pase a la siguiente escena.
Si deseas ver tus resultados en la web pulsa CMD+ENTER.
