1

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

UNIDAD 3 Modificaciones: 6 horas

Tema 1: En el escenario Qué es el escenario Cómo modificarlo Programa asociado

Tema 2: En el fondo

Botones de control Código de envío Código respuesta Código de Inicio

Tema 3: Los efectos de transición

Transición entre pantallas Efectos Código de los efectos Interacción Retoques Programa final

Ejercicios Unidad 3

E3.1 Control de presentaciones E3.2 Creación de historias Evaluación de la unidad 3: 10 preguntas tipo test

2

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

TEMA 1 El escenario

1.1 Qué es el escenario

El escenario es el lugar donde se colocan los distintos personajes de Scratch. Puedes imaginar el escenario como una hoja en blanco que vamos rellenando, lugar donde se desarrolla la acción de nuestro programa. El escenario tiene estas dimensiones: 480 puntos de ancho por 360 de alto (480x360). Se utiliza un sistema de coordenadas (x,y) donde el centro del escenario representa el punto (0,0).

Ya sabes donde se ubica el escenario. Puedes ver las coordenadas del personaje en la zona de programación parte superior derecha, ahí se muestran las coordenadas exactas y a la derecha del personaje de Scratch (en la imagen gato seleccionado), entre el escenario y el espacio para los personajes, al pasar el ratón por encima del escenario se indica la posición (x,y) exacta donde se encuentra el puntero.

3

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

1.2 Como modificarlo

Accede a tu Scratch y abre un proyecto nuevo. Por el momento no elimines el gato. (Mientras lees debes ir accediendo constantemente a tu proyecto para poder ver y comparar)

Para modificar el escenario hacemos clic con el ratón sobre el icono del escenario situado a la izquierda del espacio de los objetos (personajes). El escenario tiene tres pestañas parecidas a las de cualquier personaje de Scratch: Programas, Fondos y Sonidos. Sólo varía la de "Fondo" en sustitución de la de "Disfraces". De hecho se puede considerar el escenario como un personaje más con ciertas peculiaridades. Si nos fijamos en la categoría “movimiento” veremos que está vacío, no hay instrucciones que se puedan seleccionar, o en la categoría “lápiz” sólo encontramos la instrucción "Borrar”. Otras categorías tienen menos bloques que los correspondientes a un personaje normal.

Explora todas las categorías del escenario y compáralas con las de un personaje normal, como el gato.

Es importante entender que el escenario puede tener programas, no es sólo un elemento fijo que sirve de contenedor. De hecho la primera aproximación es hacer una presentación tan sencilla como esta: cambiar el fondo del escenario.

Para ello primero eliminamos el gato y a continuación vamos a la pestaña "Fondos" del escenario. Aquí podemos ir añadiendo todas las pantallas de nuestra presentación con la función "Importar".

Scratch puede importar imágenes en formato JPG, BMP, PNG o GIF. Si la imagen es un GIF animado importará todas las secuencias de la animación. Si la imagen es mayor de 480x360 la adaptará a estas dimensiones.

También puedes dibujar tu propia pantalla utilizando el botón "Dibujar nuevo objeto" o cualquier combinación de las dos técnicas.

En el caso que nos ocupa hemos añadido los 5 fondos de los castillos que tiene la biblioteca de Scratch, pero tú puedes poner el número y tipo de fondos que más te convenga.

Una vez tengas los fondos preparados… ¿Cómo deben comportarse? En el caso que nos ocupa, queremos que los fondos, al pinchar en uno de los botones, vayan hacia adelante, atrás o al inicio. Vamos a empezar.

4

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

1.3 Programa asociado al escenario

Ya sabes que a cada personaje se le debe asociar el programa necesario para que haga lo que le indiquemos. En este caso queremos que los fondos vayan cambiando cuando se pulse un botón. Para ello pinchamos en la pestaña “programas” del escenario y le decimos que al pulsar la banderita verde vayan apareciendo los distintos fondos a intervalos de tiempo, por lo que deberemos acceder a la categoría “Eventos” y arrastrar la instrucción “Al presionar” a la zona de programas. Seguidamente pinchamos en la categoría "Apariencia" y ahí vemos las instrucciones disponibles para manipular el fondo. Utilizaremos "cambiar fondo a…." en el desplegable elegimos el primer fondo que queramos que salga. A continuación pinchamos en la categoría “Control” y añadimos la estructura “por siempre”. Como nos interesa que de fondo a fondo pasen algunos segundos, dentro del “por siempre” añadiremos la expresión “esperar 2 segundos” de la categoría “Control” y a continuación la expresión “siguiente fondo” de la categoría “Apariencia”. El programa quedaría así:

Hemos añadido la instrucción "cambiar fondo a..." escogiendo el fondo concreto con el que queremos que empiece la presentación (en este caso castle5) y está fuera de “por siempre” porque “al presionar” aparecerá, por tanto no es necesario que esté dentro del bucle.

Pincha en la banderita verde (de tu programa) y verás que cada 2 segundos cambia el fondo. Pero el caso es que el control de esos cambios, queremos hacerlo mediante botones concretos. En el siguiente tema Vamos a seguir trabajando con los botones de control del fondo.

TEMA 2 El fondo

2.1 Botones de control

Para pasar las páginas de nuestra presentación lo podemos hacer por tiempo, como en el apartado anterior, o mediante unos botones que permitan controlarla. Para ello debemos añadir tres personajes así que, pincha en nuevo objeto y en el editor dibuja o inserta los tres personajes que necesitamos: uno para ir hacia adelante (Siguiente), uno para ir hacia atrás (Anterior) y uno para volver a la página de inicio. (Inicio). No olvides que son tres personajes distintos. Ya sabes que puedes alinearlos y situarlos en el lugar que prefieras del escenario.

5

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

Una vez tengas los personajes (botones) creados, vamos a ver qué misión tiene cada uno de ellos. Debes tener en cuenta que hay muchas formas de dar instrucciones para que el programa funcione. Aquí veremos una de ellas, pero tú puedes investigar y hacer todas las variaciones que quieras.

Empezaremos por ver los programas asociados a los botones que son los encargados de cambiar el escenario: "Siguiente", “Inicio” y “Anterior”, Para ello usaremos la instrucción "Siguiente fondo" pero esta instrucción pertenece al Escenario (no se encuentra en la categoría “Apariencia” de los personajes y para usarla tendremos que encontrar un mecanismo que comunique el personaje “botón” con el “escenario”. El mecanismo que nos permite comunicar ambos, es el de envío de mensajes, del que ya hemos hablado en la unidad 2. Por tanto deberás crear un mensaje para cada botón. Recuerda que las instrucciones necesarias para crear mensajes las encontramos en la categoría "Eventos".

2.2 Código de envío

El código de los botones que cada personaje debe enviar al fondo es bastante sencillo. Simplemente hemos de dar la orden de enviar el mensaje cuando se pulse el botón "Siguiente" o “Inicio”, o “anterior”

Los códigos para enviar el mensaje según el botón que se pulse son:

1. Sitúate en la pestaña programas del botón “siguiente” y añade este código

2. Sitúate en la pestaña programas del botón “inicio” y añade este código

3. Sitúate en la pestaña programas del botón “anterior” y añade este código

6

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

Como ves, al final de cada uno de los bloques de código, hemos añadido la instrucción "detener este programa" como finalización. En este caso no es del todo necesario, pero es conveniente acostumbrarse a definir remates por bloques de código.

Enviando estos mensajes dejamos la responsabilidad de cambiar de página al escenario, que por otra parte, en este caso, es quien debe hacerlo. El escenario ha de interceptar este mensaje y hacer el trabajo. En la ventana siguiente veremos cómo hacerlo.

2.3 Código de respuesta de los mensajes

Para que los fondos cambien al recibir los distintos mensajes, en primer lugar debemos crear una variable con la que poder dar las instrucciones necesarias. Pincha en Datos y crea la variable “fondo”.

Cada mensaje que envían los distintos personajes (siguiente, inicio, anterior) es recibido por el fondo por lo que este, deberá tener una respuesta para cada uno de ellos. Sitúate en la pestaña programas del escenario y añade estos códigos:

La respuesta por parte del escenario cuando se pulse el botón “Siguiente” debe cambiar el fondo y esperar pero ¿esperar a qué?... a que se pulse uno de los botones. Por tanto será este es el código adecuado.

El código de respuesta del botón "Inicio" debe fijar el primer fondo de pantalla. Por tanto, en este caso, usaremos la instrucción "fijar fondo a 1" de la categoría "Datos". Pero como a lo largo de la presentación deben estar todos los fondos disponibles hay que añadir la instrucción “cambiar fondo a” de la categoría Apariencia y dentro, incluir la variable “fondo”.

Para cambiar el fondo al “Anterior” usaremos la instrucción “cambiar fondo a previous backdrop” esta instrucción no está traducida. (La encontrarás al final del desplegable)

La variable “Fondo” puede tomar valores mayores que la cantidad de fondos que tengamos en el Escenario, e incluso valores negativos. Todo funciona porque la instrucción "cambia el fondo a..." en realidad lo que hace es una operación de módulo con el valor que aplicamos.

Con este código situado en su sitio, inicia el programa pinchando en la banderita verde y verás que los botones funcionan perfectamente.

7

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

2.4 Código de inicio de la presentación

Hasta este punto, el código que domina la presentación es el que añadimos al principio (1), pero como con el mensaje “enviar inicio” ya tenemos definido como ir a la pantalla de inicio, no necesitamos este código (1) por tanto vamos a simplificarlo y lo cambiamos por este (2):

RESUMEN: Hasta el momento, estos son los programas asociados a cada personaje de la presentación que estamos realizando:

Programa del Escenario

Programa del Botón Inicio

Programa del botón Anterior

Programa botón Siguiente

(2)

(1)

En el próximo tema, veremos

cómo añadir efectos entre

fondo y fondo.

8

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

TEMA 3 Los efectos de transición

3.1 Transición entre pantallas

Scratch permite añadir efectos de transición entre las diferentes pantallas de nuestras presentaciones. Para ello usaremos los efectos gráficos predeterminados de Scratch. Estos se pueden aplicar tanto a los fondos como a los personajes.

Estos efectos gráficos se encuentran en la categoría "Apariencia" y tenemos tres instrucciones que los controlan. Podemos elegir entre siete tipos de efectos diferentes. Pulsando sobre las instrucciones "cambiar efecto...por…." o "establecer efecto... a..." podemos ver directamente el efecto que se produce. El número representa la rapidez con la que se producirá el efecto, cuanto mayor sea el número más lentamente y viceversa. La instrucción "quitar efectos gráficos" restablece la imagen del escenario a su estado original, sin ningún efecto aplicado.

3.2 Efecto pixelar

El primer efecto que probaremos será “pixelar”. Este efecto va aumentando el tamaño de los puntos que componen la imagen, hasta que prácticamente no se puede reconocer. Cuando la imagen esté en este estado, cambiaremos y le aplicaremos el efecto contrario para volver al aspecto original pero con el siguiente fondo. De esta forma estamos creando una especie de transición entre diapositivas.

Para hacer el efecto más suave y más dinámico haremos una repetición. Debemos usar la instrucción "repetir..." que se encuentra en la categoría de control. Dentro debemos poner el código que queremos repetir y en la casilla, las veces que lo haremos. Veamos cómo hacerlo

9

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

3.3 Código del efecto pixelar

La estructura del código para realizar el efecto, es esta:

Hemos puesto una espera de 0,1 segundos entre cambio y cambio que podemos modificar en función de nuestras preferencias. El código anterior hace la primera parte del efecto y deja la imagen pixelada. Es el momento de cambiar de fondo y hacer el proceso contrario. Habrá que añadir "cambiar efecto pixelizar por -15". El código completo del efecto sería el siguiente:

Es importante que el número de repeticiones y los valores de los cambios de efecto sean los mismos para que la imagen quede en su estado original. ¿Pero… cual es el “Evento” que desencadena este efecto? Lo vemos en la ventana siguiente.

3.4 Integración de efectos

El evento que desencadena los efectos, en este caso es “al recibir” por tanto la integración de los efectos a la presentación, deberá ser distinta para cada mensaje, es decir cada mensaje debe tener su propio código. Por tanto duplicamos la estructura anterior y le añadimos la instrucción que le corresponda a cada una. Así pues, el código de los botones "Anterior" y "Siguiente" será:

10

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

Llegado a este punto del proyecto, si pinchas en la banderita verde verás que los botones responden, pero las transiciones entre fondo y fondo no se corresponden a lo que cabe esperar. Si te fijas, al pinchar en cada uno de los botones, no sale de inmediato el fondo, en un primer instante aparece el mismo fondo y sin detenerse aparece el fondo esperado. Esto es debido a que hay órdenes contradictorias. Vamos a ver que debemos modificar para que el programa responda bien.

3.5 Algunos retoques

Esta imagen corresponde al programa del fondo tal como lo tenemos en este momento. Fíjate que en uno de los “al recibir Siguiente” le decimos “cambiar a siguiente fondo y esperar” (1) y en el otro (2) le decimos “cambiar fondo a siguiente fondo”. Lo mismo pasa para la instrucción “al recibir Anterior” ¿Qué debe hacer?... ¿cambiar y esperar?... ¿cambiar sin esperar?... ¡que lio!

La solución pasa por eliminar, de los bloques al recibir Siguiente (1) y Anterior (3): “cambiar fondo a siguiente fondo y esperar”… Y en su lugar añadir de la categoría “Datos”: “cambiar fondo a 1” (Siguiente) (1) y “cambiar fondo -1” (Anterior). (3) Con estos cambios el programa queda tal como se muestra a continuación.

(1)

(2)

(3)

11

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

3.3 Programa final

El programa completo del fondo queda así:

Los programas correspondientes a cada uno de los botones están especificados en el apartado 2.4 de este tema. (Página 6)

Una alternativa sería utilizar diferentes efectos y duración, por ejemplo:

Cambia el efecto pixelizar del “recibir Anterior”, por el ojo de pez y comprueba que pasa.

Sustituye el 15 y -15 del efecto pixelar por 20 y -20.

12

PROGRAMAR CON SCRATCH

UNIDAD 3: MODIFICACIONES EN:

Ejercicios del tema 3

E3.1 Control de presentaciones

El sistema que usa Scratch para cambiar de disfraz o fondo, es cíclico. Cuando establecemos un valor del disfraz mayor que los disfraces que tiene el objeto o menor que 1, se hace una operación módulo. Por ejemplo; si tenemos un objeto con 3 “disfraces” y elegimos el 4, este disfraz será el primero. Si ponemos 0 el valor será el último disfraz, en este caso el tercero. Debes establecer un control de inicio y de final de la presentación, de modo que si estamos en la última diapositiva y pulsamos "siguiente" no haya ningún cambio, y si estamos en la primera y pulsamos "anterior" tampoco pase nada. (Puedes usar el ejemplo que has realizado en esta unidad 3 o empezar uno de nuevo).

E3.2 Creación de historias

En este ejercicio puedes elegir entre dos opciones:

A) Hacer una presentación que no sea lineal, es decir, que pueda seguir distintos caminos en función de las decisiones del usuario. Podríamos aplicar la técnica de ocultar y mostrar objetos y enlazar las diferentes partes con mensajes.

B) Otra posibilidad es hacer una animación o pequeña historia interactiva combinando respuestas del usuario o cambios automáticos de pantallas. Un ejemplo sin interactividad pero muy elaborado se puede encontrar en el proyecto. Day Dream. Puedes buscar otros proyectos para “pillar” ideas

Enviar un pantallazo de los programas de cada uno de los personajes que han intervenido en el juego