actividad 2 - introducción a wick editor

Wick Editor es un editor de animaciones en 2D que funciona totalmente online, de tal modo que no es necesario instalar nada en el ordenador para poder utilizarlo.

Accede a Wick Editor a través de la página https://www.wickeditor.com y después haz clic en el enlace create o Launch Web Editor. Accederás a una interfaz como la siguiente:

Tenemos que quedarnos con 2 conceptos básicos:

• Capas o layers. Permiten añadir dibujos y elementos a la animación que se podrán animar por separado. Cada elemento que queramos animar deberá estar en su propia capa.

• Fotogramas o frames. Un frame o fotograma se puede describir como la cantidad de veces en que el ordenador es capaz de redibujar la pantalla en 1 segundo. Esto quiere decir que si, por ejemplo, trabajamos a 15 frames por segundo (FPS), se redibujará la pantalla 15 veces cada segundo.

De esta manera, en Wick Editor cada numerito que podemos apreciar en la capa representará un frame. Cuando empiece la animación, comenzará a dibujarse el frame 1, acto seguido pasará al 2, al 3, al 4, al 5... y así hasta que lleguemos al último frame donde tengamos un dibujo.

En el siguiente ejemplo vemos como Wick Editor va dibujando la posición y el tamaño de la pelota de cada frame, de tal forma que al mostrar uno detrás del otro se puede apreciar la animación siguiente.

En esta actividad debemos conseguir la siguiente animación como resultado. Para ello, utilizarás la imagen SVG que realizaste en la anterior actividad.

4. A continuación, y teniendo seleccionado el dibujo, haz clic en el botón azul "Break Apart" que aparece en la parte derecha de la pantalla (en el Inspector). Puede que te toque volver a redimensionarlo. Esto lo que hace es separar el dibujo en sus componentes más básicos. Podemos hacerlo gracias a que es un SVG (esto no es posible hacerlo con imágenes de mapas de bits como JPG o PNG).

5. Si ahora con el cursor dibujas un área alrededor del dibujo podrás ver como se seleccionan por separado los diferentes componentes (el círculo rojo y el cuadrado azul).

6. Vamos a dibujar nuestro nombre y apellidos debajo del dibujo. Para ello, crearemos una nueva capa y le llamaremos "Nombre".

7. Creamos un nuevo frame en la capa "Nombre", seleccionamos la herramienta de texto y escribimos nuestro nombre justo debajo del dibujo.

8. Con el cursor seleccionamos todo el dibujo y a continuación hacemos clic en el botón de copiar (Copy) del menú de edición del dibujo (7). Lo tendremos que pegar en el frame 2 de la capa "Layer". Para ello, seleccionamos dicho frame y hacemos clic en el botón de pegar (Paste).

9. A continuación (en el frame 2) debes utilizar la herramienta Path cursor (selector de caminos) para modificar la curvatura de las aristas del cuadrado.

También debes modificar, utilizando el cursor normal, el tamaño del círculo (hazlo más grande) y su opacidad (puedes modificarla en las opciones del Inspector al seleccionar el círculo).

A continuación tienes un vídeo muy cortito (30s) donde muestro cómo hacerlo.

10. Continúa realizando lo mismo por lo menos hasta llegar al frame 10. Sigue las siguientes pautas:

• En cada frame debes aumentar muy poco el tamaño del círculo y curvar muy poco las aristas del cuadrado, para que el efecto quede mejor.

• Disminuye en más o menos 0.1 o 0.2 la opacidad del círculo en cada frame.

• Si ves que el círculo se queda sin opacidad, en los siguientes frames vuelves a incrementársela gradualmente.

Si ves que no puedes editar bien la curvatura puedes modificar el orden de los objetos (poner el cuadrado por encima del círculo) de forma temporal y luego volverlos a reordenar. En el siguiente vídeo de 1 minuto te muestro cómo hacerlo:

11. Una vez hayas acabado, deberías tener la animación solicitada.

Puede que cuando la ejecutes en el botón de reproducir el nombre solo se vea durante un instante, esto es porque solo lo tienes en el primer frame. Para solucionarlo, debes extender el primer frame de la capa "Nombre" hasta el último frame de la animación.

Si ves que la animación es muy rápida, dirígete a la rueda dentada que encontrarás en la parte superior derecha de la ventana y modifica el Frame rate (FPS) para que no se ejecuten tantos frames por segundo (bájalo por ejemplo a 6 u 8).

Aprovecha y cámbiale también el nombre al proyecto, ponle de nombre "Actividad 2"

12. Por último, no te olvides de guardar el proyecto (botón save de la parte superior derecha). Se te habrá descargado un archivo con extensión .wick al ordenador. Este archivo debes subirlo a la entrega de aules.

13. Exporta también el archivo en formato GIF haciendo clic en el botón export y, a continuación, Export GIF. Sube también el archivo con extensión .gif descargado a la entrega de aules.

Si todo ha ido bien, deberías haber conseguido una animación similar a esta: