actividad 4 - Animación del LOGO UNDERGROUND CON wick editor

En esta actividad trabajaremos sobre el logo creado en la anterior actividad con Inkscape y conseguiremos la siguiente animación:

2. Arrástralo hasta el canvas (área de dibujo). Es muy posible que el texto quede desajustado, como en la siguiente captura.

3. Selecciona el dibujo con la herramienta del cursor y haz clic en el botón azul de la derecha "Break Apart". Esto lo que hará es separar el dibujo en sus componentes más básicos (el texto, los círculos blanco y rojo el rectángulo azul) para poder manipularlos de forma separada.

4. Selecciona el texto "UNDERGROUND" y con las flechas del teclado colócalo justo encima del rectángulo azul (con el ratón es posible que no puedas moverlo).

5. Cámbiale el color al texto (por alguna razón se habrá hecho negro). Ponlo blanco y darle más grosor ("Weight --> "bold"), desde el panel de la derecha habiendo seleccionado el texto previamente con el cursor.

6. Selecciona el recuadro exterior que envuelve el dibujo, ya que nos va a molestar para procesar las animaciones. Una vez seleccionado SOLO ESE RECUADRO, bórralo.

7. Con la herramienta del cursor selecciona todos los componentes y hazlos más grandes (arrastrando desde las esquinas), para que ocupen bastante parte del canvas.

8. A continuación comenzaremos a preparar el dibujo para poder hacer la animación. Para ello, tenemos que aislar cada uno de los elementos del dibujo en su propia capa. Por tanto, tendremos que conseguir un total de 4 capas:

• Capa texto

• Capa rectángulo azul

• Capa círculo blanco

• Capa círculo rojo

Para conseguirlo, debemos hacer lo siguiente. Por ejemplo, comenzamos con el círculo blanco:

1. Nos situamos en la capa actual. Seleccionamos el círculo blanco con la herramienta del cursor.

2. Cortamos el elemento (atajo de teclado Ctrl. + X).

3. Creamos una nueva capa (le damos de nombre "círculo blanco").

4. Copiamos el elemento copiado (Ctrl. + V).

Esto lo repetimos para cada uno de los elementos del dibujo. Nota importante: las capas deben estar en el orden correcto para que ningún elemento tape a otro que debería estar por encima. Aquí tienes un vídeo muy corto (poco más de 1 min.) donde puedes ver cómo separar todos los elementos del dibujo en su propia capa.

9. Comenzaremos con la animación del rectángulo azul. En primer lugar, debemos extender el primer frame hasta el 30, ya que lo que queremos es que el rectángulo comience al principio a la derecha del dibujo y se vaya desplazando hacia el centro. Para ello, sitúate a la derecha del frame 1 en la capa del rectángulo azul y estira desde el borde hasta que llegues al frame 30.

10. Ahora nos colocamos de nuevo en el frame 1, e indicamos que ahí queremos añadir un Tween. Un Tween es, por así decirlo, un punto temporal que añadimos en Wick Editor, y en el cual decidiremos dónde estará el elemento en ese punto temporal.

Si nos fijamos en el resultado final de la animación, el rectángulo azul debe estar a la derecha del dibujo. Además, debe tener una opacidad inicial de 0 (es decir, transparencia total). Para ello:

1. Indicamos que queremos añadir un Tween en el frame 1 de la capa del rectángulo.

2. En ese momento, cogemos el rectángulo, lo situamos a la derecha del dibujo y le damos opacidad 0.

11. Ahora, debemos marcar otro punto temporal (añadir otro tween), en este caso en el frame 20. Colocaremos el rectángulo ahora en el centro del dibujo y le daremos opacidad de 1 (nada de transparencia).

Básicamente, lo que estamos haciendo es decirle a Wick Editor que:

• En el frame 1 (al inicio de la animación) queremos que el rectángulo esté a la derecha y sea transparente.

• En el frame 20 queremos que el rectángulo esté en el centro y no sea transparente.

De esta forma, Wick Editor será capaz de procesar la animación por nosotros de forma automática.

12. Si queremos ver bien cómo queda, deberemos extender el resto de capas también hasta el frame 30, para que tengan la misma duración en la animación. Si lo hacemos y le damos al play, la animación que tenemos ahora mismo es la siguiente:

13. Si nos fijamos en el resultado, el texto debe desplazarse desde arriba y bajar hasta el centro del dibujo, coincidiendo de forma exacta con el rectángulo azul. Para ello, nos colocamos en la capa texto, añadimos un tween en el frame 1 y desplazamos el texto hasta arriba.

14. Ahora, añadimos un tween en el frame 20 y desplazamos el texto para que coincida con el rectángulo azul en el centro del dibujo.

15. Para conseguir el efecto de que el texto se mueva un poco para abajo cuando llega al centro, añadimos primero un tween en el frame 23 y rotamos un poco el texto:

16. No debemos olvidarnos de devolver el texto al centro para que haga el efecto de rebote. Esto lo podemos hacer añadiendo un tween en el frame 26 y volviendo a colocar el texto recto dentro del rectángulo azul.

La animación que tenemos ahora mismo es la siguiente:

Esta parte de la práctica debes realizarla tú según lo que has aprendido hasta ahora. Ten en cuenta que el círculo rojo es muy grande y transparente en el frame 1, y se debe ir haciendo más pequeño y más opaco (menos transparente) hasta el frame 20 (en el cual debe quedar como en el dibujo original).

Para hacerlo, debes tener en cuenta que el círculo blanco es muy pequeño y transparente en el frame 1, y se debe ir haciendo más grande y más opaco (menos transparente) hasta el frame 20 (en el cual debe quedar como en el dibujo original).

• Crea una capa nueva donde escribas tu nombre y apellidos con una fuente que te guste. Debe quedar más o menos debajo del dibujo.

• Para hacer la animación debes tener en en cuenta que el texto es más pequeño y transparente en el frame 1, y se debe ir haciendo más grande y más opaco (menos transparente) hasta el frame 20.

Una vez hayas realizado todo, el resultado debe ser similar al siguiente: