Pràctica 1. L'Escenari d'Scratch

L'escenari és el lloc on es col·loquen els diferents objectes de l'Scratch. Podem pensar l'escenari com el full en blanc que anem emplenant o l'indret on es desenvolupa l'acció del nostre programa. L'escenari té unes dimensions de 480 punts d'amplada per 360 d'alçada que s'escriu 480x360. Es fa servir un sistema de coordenades XY on el centre de l'escenari representa el punt 0.

Es podem veure les coordenades del ratolí dins de l'escenari a la dreta de la finestra de l'Scratch entre l'escenari i l'espai pels objectes.

Per fer modificacions a l'escenari premem amb el ratolí sobre la icona de l'escenari situada a l'esquerra de l'espai dels objectes. L'escenari té tres pestanyes semblants a les de qualsevol objecte de l'Scratch: Programes, Fons i Sons. Només varia la de "Fons" en substitució de la de "Vestit". De fet es pot considerar l'escenari com un objecte més amb certes peculiaritats. Si ens fixem en la categoria de moviment veurem que no hi ha cap bloc que es pugui seleccionar. O a la categoria llapis només trobem "esborrar". Altres categories tenen menys blocs que els corresponents amb un objecte normal.

Explorar totes les categories de l'escenari i comparar-les amb les d'un objecte normal, com ara el gat.

És important entendre que l'escenari pot tenir programes, que no és només un objecte fixe que serveix de contenidor. De fet la primera aproximació a fer una presentació serà tan senzilla com canviar el fons de l'escenari.

Per això anem a la pestanya "Fons" de l'escenari. Aquí podem anar afegint totes les pantalles de la nostra presentació fent servir l'opció "Importar". Scratch pot importar imatges en format JPG, BMP, PNG o GIF. Si la imatge és un GIF animat importarà totes les seqüències de l'animació. Si la imatge és més gran de 480x360 l'adaptarà a aquestes dimensions. També podríem dibuixar les nostres pròpies pantalles fent servir el botó "Dibuixa" o qualsevol combinació de les dues tècniques, com ara aprofitar un fons i dibuixar a sobre fen servir el botó "Editar".

Ara només ens falta afegir el codi. Per això anem a la categoria "Aspecte" (color lila) i veiem les instruccions que tenim per manipular el fons. Farem servir "següent fons de pantalla" que va canviant el fons de l'escenari pel següent i quan arriba a l'últim continua pel primer. Si esperem una estona entre "diapositiva" i "diapositiva" i fent això per sempre ja tenim la primera aproximació.

El codi seria el següent:

Hem afegit la peça "canviar el fons a …" emplenant amb el valor del primer fons per començar sempre pel primer.

Pràctica 2.

Afegint els objectes per canviar de fons

Per passar les pàgines de la nostra presentació ho podem fer per temps, com a la pràctica anterior, o mitjançant uns botons que permetin controlar la presentació. Posarem 3 objectes un per anar cap endavant, un per anar cap enrere i un per tornar a la pàgina d'inici.

L'Scratch disposa de 3 botons per crear un objecte nou:

El botó de l'esquerra obre l' "Editor de dibuixos" que permet dibuixar el nostre objecte, el botó del mig ens deixa escollir una animació que ja tinguem a l'ordinador i el botó dret crea un objecte amb una animació a l'atzar de les que venem quan instal·lem l'Scracth. Per aquesta pràctica farem unes fletxes senzilles i un botó d'Inici.

Començarem pel botó "Següent" que hauria de canviar el fons de l'Escenari, fem servir la mateixa instrucció que teníem a la pràctica 1 "Següent fons de pantalla". Però aquesta instrucció no la trobarem dins de la categoria "Aspecte" del nostre objecte. Aquesta instrucció pertany a l'Escenari i per fer-la servir haurem de trobar un mecanisme per comunicar el botó i l'escenari. Aquest mecanisme és el d'enviament de missatges. A la categoria "Control" (color groc) hi trobarem les peces "envia a tots Missatge", "envia a tots Missatge i espera " i "al rebre Missatge".

Per crear un nou missatge polsem la fletxa que desplega la llista de missatges, on l'última opció es "nou…". Ens sortira una finestra per introduir el nom del missatge.

Una vegada hem creat el missatge "Següent" el codi del botó és força senzill. Simplement hem d'enviar el missatge quan es premi el botó "Següent" fem servir la peça "al prémer Següent" que trobarem a la categoria "Control".

Veure com canvia la descripció de la peça "al rebre Següent" modificant el nom del nostre objecte.

El codi per enviar el missatge seria aquest:

Hem afegit una peça "aturar el bloc" com acabament del nostre codi. En aquest cas no es del tot necessari, però és convenient acostumar-se a definir acabaments pels blocs de codi.

Enviant aquest missatge deixem la responsabilitat de canviar de pàgina a l'escenari, que per altra banda es qui ho sap fer. L'Escenari ha d'interceptar aquest missatge i fer la feina. El codi és molt simple, només hem de respondre al missatge "Següent" amb la instrucció "següent fons de pantalla". Per escriure aquest codi hem de prémer sobre l'Escenari i escollir la pestanya "Programes".

El codi per a la resposta de l'Escenari seria el següent:

El mateix hem de fer pels altres dos botons de control de la presentació. El botó "Inici" enviarà el missatge "Inici" i el botó "Anterior" el missatge "Anterior".

El codi de resposta del botó "Inici" ha d'establir el fons de pantalla al primer. Hem de fer sevir la peça "canvia el fons a fons1" de la categoria "Aspecte".

El codi de resposta de l'Escenari al missatge "Inici" seria:

Per canviar el fons a l'anterior podríem pensar en fer servir la instrucció "anterior fons de pantalla", però no existeix a Scratch. L'haurem de fabricar. Si examinen les instruccions referents a l'aspecte de l'Escenari tenim una peça que és "#fons'. Aquesta peça conté el número de fons que està mostrant l'Escenari. És a dir, si l'Escenari només té un fons tindrà sempre valor 1, i si en té més anirà canviant cada vegada que fem "següent fons de pantalla". Podem veure el valor marcant a la casella que hi ha al costat de la peça. Veurem que apareix un quadre a la pantalla de presentació de l'Scratch.

Provar les opcions del visualitzador del fons que surten quan premem el botó dret del ratolí.

Si aconseguim restar 1 al valor que tingui el fons i canviem el fons per aquest nou valor ja tenim la "peça" que ens canvia al fons anterior. Per això hem de fer servir la resta de la categoria "Operadors" (color verd). Hem de posar com operadors el fons i un 1.

Ja ho tenim. Només hem d'introduir aquesta operació a la peça "canvia el fons a …" .

El codi de resposta al missatge "Anterior" per par de l'Escenari seria el següent:

Veure què passa quan el fons és 1 i li traiem 1.

A vegades haurem de treballar solucions d'aquest tipus per implementar accions que no existeixen a l'Scratch. Això també ens demostra la facilitat d'extensió d'Scratch amb un nombre de peces reduït però molt ben escollit.

Finalment seria interessant definir un punt d'entrada pel nostre programa que podria ser simplement establir el fons de pantalla al primer o forçar l'enviament d'un missatge d'Inici.

Codi pel començament:

Codi equivalent aprofitant la resposta al missatge "Inici":

Pràctica 3. Com afegir efectes de transició

Podem afegir efectes de transició entre les diferents pantalles de les nostres presentacions fetes en Scratch. Per això farem servir els efectes gràfics que es poden aplicar a l'escenari i també a qualsevol objecte. Els efectes gràfics es troben a la categoria "Aspecte" i tenim 3 peces que els controlen. Podem escollir entre 7 tipus d'efectes diferents. Si premem sobre les peces "augmenta… l'efecte …" o "fixa l'efecte … a …" podem veure directament l'efecte que es produeix. La peça "treu els efectes gràfics" restableix la imatge de l'escenari al seu estat original, sense cap efecte aplicat.

Provar els diferents efectes sobre un fons importat a l'escenari.

El primer efecte que fabricarem serà pixelar. Aquest efecte va augmentant la mida dels punts que composen la imatge, fins que pràcticament no es pot reconèixer. Quan la imatge estigui en aquest estat, la canviarem i l'hi aplicarem l'efecte contrari per tornar a l'aspecte original però amb la imatge canviada. D'aquesta forma estem creant una mena de transició entre diapositives.

Per fer l'efecte més suau i més dinàmic farem una repetició. Hem de fer servir la peça "repeteix …" que podem trobar a la categoria de control. Les repeticions tenen forma de forquilla; a dins hi posem el codi que volem repetir i a la casella, les vegades que ho farem. L'estructura del codi per realitzar l'efecte seria la següent:

Hem posat una espera de 0,1 segons entre canvi i canvi que podem modificar en funció de les nostres preferències.

Variar les repeticions i els temps d'espera entre canvis.

Aquest codi faria la primera part de l'efecte i deixaria la imatge com desfeta. És el moment de canviar d'imatge i fer el procés contrari, canviar "augmenta -20 l'efecte pixelar".

El codi complet del nostre efecte seria el següent:

És important que el nombre de repeticions i els valors dels canvis d'efecte siguin els mateixos perquè la imatge quedi en el seu estat original. Si volem fer petites variacions podríem acabar amb una peça "treu els efectes gràfics".

Podem fer diferents efectes canviant els blocs "augmenta … l'efecte …". En aquesta pràctica en farem un altre amb l'efecte mosaic que dóna resultats interessants.

Provar els diferents efectes de l'Scratch amb aquest codi.

Per integrar els efectes a la pràctica hauríem de fer que la instrucció del mig que canvia el fons de pantalla fos diferent si el missatge l'envia el botó anterior o el següent. Per això farem servir una variable que es digui "Fons". Anem a la categoria "Variables" (color taronja) i premem el botó "Nova variable". El valor de la variable el canviarem abans de fer l'efecte i el farem servir al mig del mateix. Per passar al següent fons farem servir "suma 1 a Fons" i per l'anterior farem "suma -1 a Fons".

El codi del botó "Següent" i el codi del efecte serà:

El codi pel botó "Anterior" serà molt semblant:

Noteu que hem fet que l'efecte sigui diferent quan anem cap endavant o cap enrere.

Finalment restaria el codi del botó "Inici" que és el més senzill de tots. Només hem de posar el valor 1 a la variable "Fons" i canviar el fons. Podem aprofitar aquest codi per inicialitzar l'aplicació.

El codi es el següent:

La variable fons pot prendre valors majors que la quantitat de fons que tinguem a l'Escenari i fins i tot valors negatius. Tot funciona perquè la peça "canvia el fons a …" en realitat el que fa és una operació de mòdul amb el valor que apliquem.

Desa l'arxiu com M4Pràctica3NomiCognom.sb

Pràctica 4.

Més efectes, elements especials i música

Si volem crear altres tipus d'efectes per la nostra presentació trobarem que el sistema que hem fet servir és una mica limitat. Per exemple, un tipus d'efecte molt habitual com pot ser desplaçar la diapositiva actual per descobrir la que hi ha a sota no es pot fer fàcilment amb l'escenari. El problema bàsic es que l'escenari, com ja vam veure, té una serie d'instruccions limitades. Per poder accedir a més possibilitats hem de variar una mica el sistema de treball.

La clau està en considerar les diapositives com vestits d'un objecte o objectes en comptes de fons de l'escenari. En aquest cas podem fer servir instruccions com ara fixar posicions, amagar i mostrar, treballar per capes i fins hi tot mostrar missatges de text. I continuem tenint els mateixos efectes gràfics.

Les diferents "diapositives" de la nostra presentació ara seran vestits d'un objecte. Per fer-ho, anem a la pestanya "Vestits".

En aquesta pràctica hem aprofitat l'escenari per fer una mena de fons comú per a totes les diapositives, que ocuparan només la part central de la pantalla. A la part de dalt hem posat una petita capçalera i a la part de sota una zona reservada pels botons de navegació. Per això les nostres pantalles tenen una alçada de només 240 píxels dels 360 possibles.

La distribució de la pantalla amb una diapositiva que es mou cap a l'esquerra serà la següent:

Per fer aquest efecte hem de col·locar l'objecte el més a la dreta possible i, desprès moure'l cap a l'esquerra. Hauríem de posar la x a 480 però l'Scratch no permet posar objectes totalment a la dreta perquè no desapareguin completament. Abans de canviar de vestit hem de fer una estampació de l'objecte ja que si no ho fem es veuria el fons. Per això fem servir la instrucció "estampa" de la categoria "Llapis". Finalment hem de canviar el vestit; fem servir una variable "Vestit" que canviarem abans de fer l'efecte.

La primera part del codi del nostre efecte seria la següent:

Comprovar que l'Scratch no permet posicionar les pantalles més enllà d'un valor de 460 (per no fer desaparèixer totalment els objectes).

Ara només queda la part de moure l'objecte. Podríem fer-ho repetint unes quantes vegades un canvi de posició de la coordenada x. Però l'Scratch té una instrucció que es "llisca … segons a x: … y: …" de la categoria "Moviment", que ja ens fa la feina. Simplement afegint "llisca 1 segons a x: 0 y: 0" aconseguim l'efecte desitjat. Aquesta instrucció ens dóna la possibilitat de fer efectes en totes les direccions i fins i tot en diagonal. El temps ens permet regular la velocitat de l'efecte. Per al nostre exemple farem servir un valor de 0,8 segons.

El codi dels efectes a la dreta i l'esquerra seria el següent:

Ara que tenim molts efectes disponibles hauríem d'incloure un bloc que ens permeti canviar d'efecte de forma aleatòria cada vegada que canviem de diapositiva. Per fer-ho generem un nombre aleatori amb la instrucció "nombre al atzar entre … i …" de la categoria "Operadors". En aquesta pràctica hem generat 4 efectes, per tant farem un nombre entre 1 i 4. El nombre el guardarem a una variable "NumEfecte" i desprès amb simples comparacions farem un efecte o un altre.

El codi per canviar d'efecte seria el següent:

El codi per canviar de pantalla és molt semblant al de la pràctica anterior. Bàsicament s'ha d'establir el valor de la variable "Vestit" i després enviar el missatge de canviar l'efecte. En el cas del botó "Inici" establim el valor del "Vestit" al primer i ho canviem. Podem aprofitar per inicialitzar posicions o treure efectes gràfics.

El codi del tres botons serà el següent:

Ara que tenim el control de les pantalles, provarem d'afegir elements especials a la nostra presentació. És molt fàcil afegir un objecte extra a una determinada pantalla. Per exemple podem col·locar el gat de l'Scratch que només surti a la segona pantalla. Començarem afegint un nou objecte, el gat de l'Scratch. Farem servir les instruccions "mostra" i "amaga" de la categoria "Aspecte" dintre d'un bloc que comprovi que el vestit sigui el segon.

El codi per controlar aquest element serà el següent:

Per fer un element mes dinàmic hem posat un parell de vestits al gat, que canviem cada 0,2 segons, aconseguint que sembli que el gat camina.

Aquest apartat no el podeu fer al cole:

És possible afegir música de fons a la nostra presentació. Ho podem fer a l'escenari o a qualsevol dels nostres objectes. Per incorporar o gravar els nostres sons anem a la pestanya "Sons" . Amb el botó "Importa" podem llegir arxius en format MP3, WAV, AIF i AU. També podem gravar el nostres propis sons fen servir el botó "Grava".

Exercici 1. Controlar l'inici i el final de la presentació

S'hauria d'establir un control d'inici de presentació i de final. El sistema que fa servir Scratch per canviar de vestit o fons és cíclic. Quan establim un valor del vestit més gran que els vestits que té l'objecte o més petit que 1, es fa una operació mòdul. Per exemple; si tenim un objecte amb 3 vestits i hi posem 4, el vestit escollit serà el primer. Si posem 0 el valor serà l'últim vestit, en aquest cas 3. Hauríem de fer un control a "Següent" per veure que estem a l'última i a "Anterior" per veure que estem a la primera.

El codi per "Anterior" podria ser el següent:

Per controlar quan hem arribat a l'últim vestit no tenim cap propietat que ens digui el número de vestits que té un objecte. Haurem de posar el número directament o aprofitar la operació mòdul que fa servir Scratch per calcular el valor del vestit.

Desa l'arxiu com M4Exercici1NomiCognom.sb

Exercici 2. Grups de diapositives

Podem implementar algun sistema de grups de diapositives o de diapositives amb un sol vestit, però amb certa funcionalitat afegida. Per això hem d'establir algun sistema perquè els objectes s'amaguin i responguin als missatges "Anterior" i "Següent" en funció de si estan ocults o no. Podem fer servir les instruccions "mostrar" i "amagar" de la categoria "Aspecte" i fer servir una variable local "Visible" per guardar l'estat. Per enllaçar un grup amb l'altre es podem definir un parell de missatges com ara "AmagarGrup#" i "MostrarGrup#.

Aquí teniu un parell de fragments de codi d'un grup amb 2 diapositives que demostren aquesta tècnica:

Desa l'arxiu com M4Exercici2NomiCognom.sb

Exercici 3. Presentacions no lineals

També podríem fer presentacions que no fóssin lineals, és a dir, que pugin seguir diferents camins en funció de las decisions de l'usuari. Podríem aplicar la mateixa tècnica d'amagar i mostrar objectes i enllaçar les diferents parts amb missatges.

Aquí teniu una captura dels objectes d'un exemple amb una combinació de totes les tècniques explicades:

El grup 1 té 3 diapositives, el segon 2 diapositives i al tercer surten dues mans on hem d'escollir un camí o un altre. En funció de la decisió surt el grup 4 o el 5. Tot això amb diferents efectes de transició, amb la possibilitat d'anar cap endavant i cap enrere i controlant l'ordre de començament i l'acabament.

Desa l'arxiu com M4Exercici3NomiCognom.sb

Exercici 4. Crear histories

Un altre camí a explorar seria la possibilitat de fer animacions o petites histories interactives combinant respostes de l'usuari o canvis automàtics de pantalles. Un exemple sense interactivitat però molt elaborat es pot trobar al projecte "Day Dream" que ve amb l'Scratch a la carpeta "Animation".

Podeu mirar el codi que s'ha fet servir per agafar idees.

Realitza una animació explicant una història a la teva elecció, pots ajudar-te de les animacions d'exemple de l'Scratch i veure com estan fetes. desa el fitxer com M4Exercici4NomiCognom.sb