PROGRAMAR CON SCRATCH UNIDAD 3: MODIFICACIONES EN:

Transcripción

1 1 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 2 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 3 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 4 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í: TEMA 2 El fondo 2.1 Botones de control 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. 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 5 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 6 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 7 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): (1) (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 En el próximo tema, veremos cómo añadir efectos entre fondo y fondo.

8 8 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 9 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 10 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! (3) (1) 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 : (2) 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.

11 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 12 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