Ejercicio: Storytelling

De Edutec Wiki
Saltar a: navegación, buscar

Introducción

En este ejercicio aprenderemos a crear historias animadas en Scratch. Es un ejemplo adecuado para todas las edades, ya que puede complicarse tanto como se desee.

Además, se trata de un ejercicio transversal, en el sentido en que puede adaptarse la historia para aplicarlo a cualquier asignatura, o utilizarse la misma técnica para crear presentaciones interactivas.

Definir la historia

Programar historias animadas en Scratch es como orquestar una obra de teatro. Hay que definir los personajes, sus diálogos e interacciones, los escenarios, y los cambios de escena.

Para este ejercicio, nos basaremos en el cuento de los tres cerditos, para el cual hemos elaborado este cuadro de escenas:

Escena Escenario Personajes y otros objetos Interacciones
Presentación Bosque Cerdito pequeño
Cerdito mediano
Cerdito mayor
El cerdito mayor explica que, para resguardarse del lobo, ha pensado que deberían construirse una casa.
El cerdito mediano y el pequeño contestan que están de acuerdo, y salen de la escena.
Construcción cerdito pequeño Claro del bosque 1 Cerdito pequeño
Casa de paja
El cerdito pequeño dice que va a construir su casa de paja para terminar antes y poder irse a jugar.
Aparece la casa de paja.
Construcción cerdito mediano Claro del bosque 2 Cerdito mediano
Casa de madera
El cerdito mediano construye su casa de madera, ya que cree que la paja no es lo suficientemente resistente pero igualmente quiere terminar rápido.
Contento con el resultado, se va del escenario para ir a jugar con su hermano menor.
Construcción cerdito mayor Claro del bosque 3 Cerdito mayor
Casa de ladrillos
El cerdito mayor construye su casa de ladrillos.
La escena acaba sin estar la casa terminada todavía.
Lobo y casa de paja Claro del bosque 1 Cerdito pequeño
Cerdito mediano
Lobo
Casa de paja
Mientras los dos hermanos juegan, llega el lobo.
Ambos hermanos se esconden dentro de la casa.
El lobo sopla y la casa vuela por los aires.
Los dos hermanos se marchan corriendo para a la casa de madera.
Lobo y casa de madera Claro del bosque 2 Cerdito pequeño
Cerdito mediano
Lobo
Casa de madera
Llegan los dos hermanos y se refugian dentro de la casa.
Llega el lobo.
El lobo sopla y también esta casa vuela por los aires.
Los dos hermanos se van corriendo para a la casa de ladrillos.
Lobo y casa de ladrillos Claro del bosque 3 Cerdito pequeño
Cerdito mediano
Cerdito mayor
Lobo
Fuego
Casa de ladrillos
Llegan los dos hermanos y se refugian dentro de la casa.
Llega el lobo.
El lobo sopla pero la casa resiste.
El lobo trepa por la pared e intenta entrar por la chimenea.
Se prende la chimenea y el lobo se quema y desaparece.
Los dos hermanos menores dan las gracias al hermano mayor y se avergüenzan de no haber trabajado tan duro como él en sus casas.

Buscar escenarios

Dependiendo de la edad de los alumnos, una de las tareas que más tiempo nos llevará en este tipo de ejercicio es la búsqueda de imágenes para los escenarios y los personajes.

Para importar imágenes externas y usarlas a modo de escenario, consultad el artículo Importar Imágenes en Scratch de la guía de referencia de Scratch.

Si se quiere ahorrar tiempo, es interesante intentar aprovechar los escenarios que Scratch nos proporciona. Para la historia de los tres cerditos, necesitamos cuatro escenarios de bosque distintos. Busquemos en la galería, en concreto en la categoría de Naturaleza:

Storytelling 01.png

Hay unos cuantos fondos que pueden servirnos para recrear los cuatro lugares del bosque que necesitamos, en concreto nosotros hemos elegido:

  • Bosque: forest
  • Claro del bosque 1: hay field
  • Claro del bosque 2: hill
  • Claro del bosque 3: gravel desert

Una vez importados todos estos escenarios en nuestro proyecto, es muy importante darles un nombre significativo. Tengamos en cuenta que habrá muchos escenarios y personajes en esta historia, y si los nombres de los elementos no son lo suficientemente claros podemos tener problemas a la hora de programar.

Storytelling 02.png

Buscar personajes

De la misma forma que los escenarios, también necesitaremos buscar imágenes para todos los personajes. Para este cuento, vamos a necesitar tres cerditos (que pueden ser el mismo si le aplicamos transformaciones de tamaño), un lobo, las tres casas y un fuego.

Lamentablemente, en la galería de Scratch no encontramos ninguna imagen que nos sirva para estos personajes, así que vamos a tener que importarlas.

Adjuntamos aquí las imágenes de todos los personajes, con distintos disfraces para cada uno:

Lobo

Storytelling 03.png Storytelling 04.png Storytelling 05.png Storytelling 06.png

Cerdito

Storytelling 07.png Storytelling 08.png Storytelling 09.png

Los tres cerditos

Es muy importante que creemos tres copias del cerdito, y les cambiemos el tamaño mediante la instrucción de fijar tamaño (Storytelling 20.png). En nuestro caso, hemos elegido 60% para el cerdito mediano, y 30% para el cerdito pequeño.

Recordad que para realizar copias de un objeto, podemos utilizar la instrucción duplicar del menú contextual:

Storytelling 21.png

Los tres cerditos deberían tener una apariencia similar a esta:

Storytelling 22.png

Casa de paja

Storytelling 12.png

Casa de madera

Storytelling 14.png

Storytelling 13.png

Casa de ladrillos

Storytelling 11.png

Storytelling 10.png

Fuego

Storytelling 15.png

Nombres, nombres, y más nombres

Recordad la importancia de asignar los nombres adecuados a todos los objetos y disfraces:

Storytelling 16.png

Storytelling 17.png

¡Que empiece la función!

El mecanismo que utilizaremos para orquestar la obra de teatro es muy simple. Cada escena empezará cuando sus escenarios y personajes reciban un determinado mensaje, que llevará el nombre de la escena para mayor claridad. Este mensaje deberá enviarlo el último elemento que participe en la escena anterior, ya que será el único que pueda "saber" con certeza que la escena ha terminado y hay que dar paso a la siguiente.

En cada escena, además, los distintos personajes y objetos irán turnándose el protagonismo mediante otros mensajes.

Puede que la explicación parezca un poco complicada, pero el procedimiento es muy sencillo. Veámoslo con el funcionamiento de la primera escena.

El primer fondo del escenario

Al hacer clic sobre la bandera verde, el escenario mandará un mensaje indicando que empieza la primera escena:

Storytelling 18.png

Además, el escenario deberá adoptar el fondo adecuado, el bosque en este caso. Consultad la tabla que hemos elaborado antes de empezar el ejercicio para orientaros.

Storytelling 19.png

Personajes participantes

En la primera escena deben ocultarse todos los personajes excepto los tres cerditos, de forma que en los objetos que representan cada cerdito deberemos incluir estos bloques:

Storytelling 23.png

Mientras que en el resto de los objetos (fuego, casas, lobo) deberemos incluir estos:

Storytelling 24.png

Si hemos seguido los pasos correctamente, al presionar la bandera verde deberíamos ver solamente los tres cerditos y el fondo del bosque, aunque, probablemente, los cerditos no aparecerán en la posición que nos gustaría.

Para que los tres cerditos siempre aparezcan en la posición que deseamos al comenzar la historia deberemos también definir su lugar inicial.

Posición inicial de los personajes

Recordad que, en Scratch, podemos mover los objetos por el escenario simplemente arrastrándolos con el ratón. Coloquémoslos en un lugar que nos guste:

Storytelling 25.png

Fijaos como, en la categoría de movimiento, tenemos un bloque llamado "ir a x: y:", los valores del cual se actualizan automáticamente cuando arrastramos un objeto con el ratón. Simplemente, coloquémoslo en el programa de cada cerdito así:

Storytelling 26.png Storytelling 27.png Storytelling 28.png

Ahora podemos comprobar el correcto funcionamiento de nuestro programa. Arrastrad los cerditos a cualquier lugar del escenario y pulsad la bandera verde. Todos deberían regresar a su lugar inicial:

Storytelling 25.png

Tal como definimos en la tabla, en la primera escena, el cerdito mayor es quien habla primero. Añadamos pues el bloque necesario para que así sea:

Storytelling 29.png

Para que el cerdito mayor le ceda el turno a los otros, usaremos también la técnica de enviar un mensaje:

Storytelling 30.png

Fijaos como, también en los mensajes, los nombres son muy importantes. Especialmente en programas como este, en que vamos a utilizar decenas de ellos.

Los otros dos cerditos, deberán actuar al recibir este mensaje, de una forma similar a esta:

Storytelling 31.png

Movimento de los personajes y cambio de escena

El siguiente paso es conseguir que los tres cerditos se vayan caminando y se salgan del escenario. Para ello, fijémonos en la instrucción Storytelling 32.png. Esta instrucción nos permite animar el movimiento de un objeto hasta una posición determinada. Al igual que la instrucción de posicionar objetos, que hemos utilizado en un subapartado anterior, podemos simplemente arrastrar los personajes con el ratón hasta la posición deseada, y el bloque de deslizar se actualizará automáticamente con las coordenadas correctas:

Storytelling 33.png

Es un buen momento para probar el programa completo pulsando sobre la bandera verde, y ajustar a nuestro gusto los valores de tiempo en los bloques de diálogo y desplazamiento.

Una vez los dos cerditos han salido del escenario, es momento de cambiar de escena. Cualquiera de los dos puede lanzar el mensaje, por ejemplo el mediano:

Storytelling 34.png

Segunda escena: Construcción del cerdito pequeño

Al recibir el mensaje que indica que comienza la segunda escena, diversos elementos deberán reaccionar. El escenario deberá cambiar de acorde con la tabla que definimos antes de iniciar el ejercicio:

Storytelling 35.png

Asimismo, los cerditos mayor y mediano deberán ocultarse:

Storytelling 36.png

En cambio, el cerdito pequeño deberá posicionarse en algún lugar adecuado, a nuestro albedrío:

Storytelling 37.png

En esta escena, el cerdito pequeño construye su casa de paja en un periquete. Una vez construida sale de la escena diciendo que, como ha terminado pronto, se va a jugar por el bosque.

Programemos la parte del cerdito:

Storytelling 38.png

Fijémonos como el sistema para ceder el turno a otros objetos es siempre el mismo: mediante mensajes.

Ahora le toca a la casa de paja aparecer en el escenario:

Storytelling 39.png

Si la casa es demasiado grande, podemos ajustar sus medidas mediante el bloque de fijar tamaño (Storytelling 20.png). Una vez ajustada, la colocaremos donde más nos guste. El escenario debería quedar parecido a este:

Storytelling 40.png

Para darle un respiro a la escena, haremos que la casa espere un segundo, y luego le pase el turno al cerdito pequeño:

Storytelling 41.png

El cerdito pequeño recibirá el mensaje y se irá a jugar al bosque, lanzando el mensaje de fin de escena:

Storytelling 42.png

Tercera escena: Construcción del cerdito mediano

Ya deberíamos saber empezar esta escena sin ayuda. El escenario debe cambiar al fondo "Claro del bosque 2" al recibir el mensaje "Construcción del cerdito mediano", el cerdito pequeño debe ocultarse, y el cerdito mediano debe aparecer en algún lugar del escenario que nos guste.

Para esta escena, la única novedad será que la casa va a tener dos disfraces para simular que su construcción está en proceso.

Programemos el cerdito mediano:

Storytelling 43.png

Y programemos la casa de madera (recordad que hay que ajustar sus medidas y posición):

Storytelling 44.png

El cerdito mediano deberá también actuar al recibir este mensaje, tal como venimos haciendo ya en las anteriores escenas:

Storytelling 45.png

Cuarta escena: Construcción del cerdito mayor

Ya deberíamos tener el procedimiento bastante arraigado, así que solamente proporcionaremos el código para esta escena.

Escenario

Storytelling 46.png

Cerdito mayor

Storytelling 47.png

Casa de ladrillos

Storytelling 48.png

Quinta escena: Lobo y casa de paja

En esta escena, el lobo llega al primer claro del bosque, donde los cerditos mediano y pequeño juegan tranquilamente. Al ver el lobo, deben ocultarse dentro de la casa, esto se puede conseguir ya sea usando el bloque de ocultar objetos o el bloque 'ir ( ) capas hacia atrás'. Nosotros preferiremos el segundo, ya que refleja mejor la realidad (los cerditos se ocultan dentro de la casa), y nos permitirá evitar un bloque extra de mostrar objeto cuando el lobo sople la casa por los aires.

Escenario

Storytelling 49.png

Cerdito mediano

Storytelling 50.png

Cerdito pequeño

Storytelling 51.png

Casa de paja

Storytelling 52.png

Lobo

Storytelling 53.png

Corregir algunos errores

Todo parece correcto, pero si volvemos a probar el programa, veremos que la casa de paja aparece fuera del escenario, y siempre por delante de los cerditos. Siempre que modifiquemos la posición u otras propiedades visibles de los objetos, deberemos tener en cuenta que, probablemente, tendremos que añadir código para restablecerlas. En nuestro caso, habrá que revisitar los siguientes objetos:

Casa de paja

Storytelling 54.png

Cerdito mediano

Storytelling 55.png

Cerdito pequeño

Storytelling 56.png

Sexta escena: Lobo y casa de madera

Como ya venimos haciendo en las anteriores escenas, es preferible que intentéis solucionar esta escena por vuestra cuenta, y consultéis el código que ofrecemos solamente en caso de duda. Fijémonos en como, al haber descubierto algunos de los errores típicos en el apartado anterior, ya los podemos corregir antes de que ocurran en este apartado:

Escenario

Storytelling 57.png

Lobo

Storytelling 58.png

Casa de madera

Storytelling 59.png

Cerdito pequeño

Storytelling 60.png

Cerdito mediano

Storytelling 61.png

Escena final: Lobo y casa de ladrillos

La dinámica de la escena final es la misma, aunque hay alguna animación extra para el lobo, e interviene el fuego como objeto nuevo. Intentad desarrollar este ejercicio sin la ayuda de la wiki, y consultad el resultado final para comparar.

Escenario

Storytelling 62.png

Casa de ladrillos

Storytelling 63.png

Cerdito pequeño

Storytelling 64.png

Cerdito mediano

Storytelling 65.png

Cerdito mayor

Storytelling 66.png

Lobo

Storytelling 67.png

Fuego

Storytelling 68.png

Ejercicios adicionales

Hasta aquí, el ejercicio queda terminado con un resultado aceptable. Podéis consultar el programa completo en este enlace:

Los tres cerditos en Scratch 2.0

Como ejercicios adicionales, es interesante intentar solucionar una serie de problemas menores que presenta este programa, así como añadir algunas animaciones para mejorar su apariencia.

Listamos estas mejoras en orden de dificultad. Los alumnos más pequeños podrán realizar solamente los primeros ejercicios, mientras que los mayores deberían poder llegar hasta el final.

De hecho, para alumnos de 16 a 18 años, puede ser interesante partir del ejercicio terminado e implementar todos los cambios listados en este apartado.

Ajustar posiciones

En algunos casos los cerditos se solapan. Solucionad el problema añadiendo código que coloque los cerditos en posiciones adecuadas.

Ajustar tiempos

Algunos diálogos y animaciones no tienen las duraciones adecuadas. Corregid los tiempos para darle más aire y realismo a la historia.

Simular el habla

De todos los disfraces que hemos importado para cada objeto, solamente unos cuantos han terminado siendo usados en el programa. Este ejercicio consiste en utilizar algunos de los disfraces que no hemos usado para simular distintos comportamientos.

Cambiad el código de todos los personajes para que cambien parezca que abren la boca cuando les toca el turno de palabra.

Pantalla de fin

Cread un fondo con la palabra FIN y añadidlo a la historia. Haced que todos los personajes se oculten cuando se muestre este fondo.

Pantalla de presentación

Cread un fondo con el nombre del cuento y haced que aparezca primero antes de empezar la historia. No debería verse ningún personaje hasta que la historia comience.

Caminar

Realizad cambios en el código de forma que todos los personajes alternen sus disfraces cuando caminan para simular que mueven los pies.

Presentación de diapositivas

Utilizad las técnicas aprendidas en este proyecto para crear una presentación de diapositivas explicando algún tema de una asignatura no directamente relacionada con la informática, como música, inglés, historia o matemáticas.

Snap!

Volved a programar este proyecto en Snap!, e intentad generalizar mediante bloques personalizados el máximo de comportamientos posibles. Por ejemplo, convertid el código de las animaciones de caminar en un bloque genérico llamado "Caminar en () segs a x: () y: ()", que realice la misma operación que el bloque de deslizar, pero animando el personaje alternando sus disfraces.