Squeak en el Aula

Apéndice 10. Animaciones

Animaciones

Una animación es una secuencia de imágenes presentadas a tal velocidad que simula el movimiento. En realidad, las animaciones cinematográficas están formadas por fotogramas presentados secuencialmente.

Con Squeak resulta fácil elaborar la animación de un objeto a partir de varios dibujos modificados del mismo. El objeto Creador de GIFs animados de la categoría Multimedia del Catálogo de objetos (Véase Módulo 8) facilita enormemente la tarea. No obstante, es posible realizar animaciones sin recurrir a esta herramienta, utilizando el Contenedor de objetos y aplicándole guiones.

Con ayuda del Pintor, dibujaremos varias imágenes modificadas de un mismo objeto. En este caso, se ha pretendido simular la forma de un gusano en diferentes posiciones.

 

Imágenes para la animación

Una vez que contamos con las imágenes que nos van a servir para montar la animación, crearemos un proyecto nuevo y arrojaremos al Mundo, desde la pestaña Provisiones un objeto Contenedor.

Objeto Contenedor

El Contenedor es un objeto destinado a albergar otros que se arrojan a su interior. Para facilitar el proceso de introducción de las imágenes que formarán la animación en el Contenedor, en primer lugar, aumentaremos sus dimensiones con la ayuda del botón Tamaño de este objeto.

Nota: Conviene redimensionar el Contenedor de modo que sobre espacio para incluir holgadamente las imágenes que vayan a componer la animación.

El siguiente paso consiste en arrastrar las imágenes hasta el interior del Contenedor. Al hacerlo, las imágenes se deberán ajustar automáticamente al margen izquierdo del mismo y acoplar de forma consecutiva en el interior del Contenedor.

Nota: Si observamos que, al depositar una imagen sobre el Contenedor no se acopla debidamente, la moveremos ligeramente o, en último caso, la incrustaremos dentro del objeto Contenedor seleccionando la opción incrustar > Contenedor del Menú (rojo) de la imagen.

Contenedor con las imágenes de la animación

Una vez que el Contenedor alberga las imágenes de nuestra animación haremos una copia de la primera imagen y la depositaremos sobre el Mundo. De este modo, tendremos por un lado un Contenedor con las imágenes de la animación y, por otro, una de las imágenes que la componen.

Cambiaremos el nombre de esta copia de la primera animación por el de gusano y, sobre él construiremos el guión de la animación. El objetivo de este guión consiste en que el foco del Contenedor (el objeto seleccionado en el contenedor) cambie secuencialmente; y que el objeto gusano “se parezca” al objeto que tiene el foco del Contenedor, es decir, que aparece seleccionado en ese momento dentro del Contenedor.

Objeto gusano

Para comenzar el guión, abrimos el Visor del objeto gusano y, desde la categoría guiones, arrastramos al Mundo un  guión vacío para este objeto.

Guión vacío del objeto gusano

A continuación, abrimos el Visor del Contenedor y, desde la categoría contenedor, arrastramos hasta el guión vacío del objeto gusano la expresión Contenedor cursor <- 1.00, pulsando para ello sobre la flecha de asignación (verde sobre fondo amarillo).

Orden del objeto que tiene el foco del cursor en el Contenedor

El resultado es un guión que incluye una instrucción que fija el foco del cursor (objeto seleccionado) en la primera imagen que contiene.

Inclusión de la expresión Contenedor cursor en el guión del objeto gusano

Para que el objeto seleccionado en el interior del Contenedor cambie secuencialmente, pulsaremos sobre las puntas de flecha que preceden a cursor hasta que la anterior expresión se lea Contenedor's cursor incrementar por 1.00.

Incrementar el valor del orden del objeto seleccionado en el Contenedor

De nuevo, activaremos el Visor del objeto gusano y, desde la categoría misceláneo, seleccionaremos la expresión gusano parécete a punto y la arrastraremos hasta el final del guión.

Expresión  gusano parécete a punto

En estos momentos, el guión del objeto gusano presentará el siguiente aspecto, en el que la palabra punto representa el objeto, aún por determinar, a quien deberá parecerse.

Estado provisional del guión del objeto gusano

Como el objetivo que perseguimos es que el objeto gusano se parezca al objeto que tenga el foco del cursor del Contenedor, es decir, que se encuentre seleccionado dentro del Contenedor, abriremos el Visor del Contenedor.

Desde la categoría Colecciones del Contenedor arrastraremos la expresión Contenedor objeto en el cursor sobre la palabra punto hasta que se muestre en un marco verde.

Asignación de semejanza al objeto seleccionado en el Contenedor

Al liberar el botón del ratón, la expresión se depositará sobre el lugar ocupado por la palabra punto y la instrucción completa podrá leerse como gusano parécete a contenedor's objeto en el cursor, que tiene como efecto que el objeto gusano cambie su aspecto al del objeto seleccionado en el Contenedor.

Con ello hemos establecido dos acciones. La primera hace que el objeto seleccionado dentro del Contenedor cambie secuencialmente. La segunda acción determina que el objeto gusano se parezca o tome el aspecto, del objeto que -en ese momento- esté seleccionado en el Contenedor. El aspecto del guión es el que se muestra en la siguiente imagen.

Guión de la animación

Con ésto hemos concluido el guión de la animación. Ahora únicamente quedará activarla pulsando sobre el icono con forma de reloj analógico o sobre la palabra normal para que el guión tome el estado latiendo. El resultado final es el mismo guión en estado de activación ininterrumpida.

Guión de la animación activada

Una vez construida la animación podemos prescindir del Contenedor en pantalla. Esto lo podemos conseguir de varias formas, una de ellas puede ser ejecutando la instrucción Contenedor ocultar de la categoría misceláneo del Visor del Contenedor.

Nota: Para ejecutar una instrucción de un objeto de forma independiente, sin incluirla en un guión, pulsaremos sobre el icono que precede a la instrucción en el guión.

Otra alternativa consiste en modificar las coordenadas del Contenedor (categorías básico, movimiento o geometría) situándolo fuera de la pantalla.

Nota: Si se elimina el Contenedor la animación habitualmente continuará en funcionamiento puesto que el Contenedor aún permanece en el cubo de basura. Por tanto, esta puede ser otra buena forma de prescindir del Contenedor y quedarnos únicamente con la imagen en movimiento.


La forma descrita de elaborar animaciones no es la única en Squeak. Comprendiendo cómo funciona una animación resulta fácil concebir una presentación secuencial de imágenes utilizando el objeto Libro pero, indudablemente, la más rápida y sencilla es utilizar el objeto Creador de GIFs animados de la categoría Multimedia del Catálogo de objetos (Véase Bloque 8).