introducció a la programació...i modificats per vosaltres mateixos. voleu veure quina pinta té un...

Introducció a la programació 1. Què és Scratch?

2. L'entorn de treball

3. Els nostres primers programes

4. Estructures condicional i iterativa

5. Geometria

6. Presentacions

7. Exemples de programes

SCRATCH. Introducció a la programació

INFORMÀTICA – Àrea de tecnologia – Institut Alt Penedès pàg. 2 / 21

Introducció a la programació

1. Què és Scratch?

És una interfície de programació molt intuitiva i gràfica, que conté una important quantitat de recursos en el propi programa: objectes, personatges, escenaris, etc.

Les accions dels personatges es formen apilant peces com si fos un trencaclosques, amb una visualització instantània del que fem amb el programa. Permet una fàcil interacción amb els objectes i personatges que introduim amb el teclat i el ratolí.

Els treballs que realitzem es poden publicar fàcilment a internet.

Però el primer que haurem de fer és instal�lar el programa, el qual funciona igual de bé amb qualsevol sistema operatiu.

Visitarem http://scratch.mit.edu. Per baixar-vos la versió 1.4 d'Scratch heu d'anar a l'enllaç corresponent (http://scratch.mit.edu/scratch_1.4).

Es crea una carpeta amb tot el que cal per executar Scratch, creant enllaços allà on es necessiten.

Un cop instal�lat, heu de tenir una icona amb un gatet com aquest.

Finalment, en fer doble-clic sobre la icona del gatet se'ns ha d'obrir el programa Scratch que, si tot ha anat bé, tindrà aquest aspecte:



Si el programa no us surt en català, cap problema! Aneu a la icona del món i trieu el Català.

Ara ja es conserva el llenguatge triat, fins que el torneu a canviar.

Un cop tenim el programa obert, ja heu vist l'aspecte que té, podem distingir diverses parts. A grans trets són:

Podem distingir en funció del color amb que hem envoltat cada zona:

• Carbassa: Les diferents categories de les instruccions. • Verd clar: Les instruccions corresponents a la categoria seleccionada • Morat: Botons amb diferents opcions • Vermell: Escenari on tindran lloc les nostres animacions • Marró: Botons per manipular els objectes de l'escenari



• Verd fosc: Zona d'objectes i fons de l'escenari • Blau cel: Característiques de l'objecte triat a la zona d'objectes • Blau fosc: Botons diversos (pantalla completa, editor de dibuixos, etc.) • Blanc: Zona de programació • Rosa: Botons per engegar i aturar l'execució del programa.

Un cop fet això el programa portarà el vostre projecte Scratch al vostre compte ubicat al MIT. Obrir un compte al MIT és molt senzill. Us podeu registrar des del lloc web, o bé la primera vegada que premeu 'comparteix' us donarà l'opció de donar-vos d'alta

Més de dos milions set-cents mil projectes fets per gent de tot el món!! Penseu que tots i cadascun d'aquests projectes poden ser descarregats, executats, analitzats i modificats per vosaltres mateixos.

Voleu veure quina pinta té un programa fet i acabat? Encara que sigui només per satisfer la curiositat, triarem un dels jocs que acompanyen Scratch. No cal instal�lar res, ja ve per defecte. Fixem-nos en el menú de botons envoltat amb el color morat a la figura anterior. Triem l'opció obre del menú Fitxer

i després de triar Exemples obtenim la finestra següent:

Ara triem Games



i després PacMan

I ja podeu jugar a (una versió molt senzilla del) PacMan de tota la vida! Amb la bandereta verda per engegar el joc i el botó vermell per

aturar. Podeu passar una bona estona.

2. L'entorn de treball: elements bàsics

Obrirem el programa Scratch i, si no us surt el gatet carbassa sobre un fons blanc, farem clic sobre del botó Nou. Si demana desar els canvis, respondrem que no. Ara ja tenim l'entorn buit, preparat per a les nostres exploracions.

Posició i direcció dels objectes

La part emmarcada en vermell és l'escenari on les nostres animacions faran el que presumiblement voldrem que facin. Fixeu-vos que podeu capturar (fer clic sobre) el gatet amb el ratolí i (sense deixar de prémer el botó del ratolí) moure'l allà on vulgueu. Mentre feu aquest moviment, fixeu-vos tant en

la zona blau cel com en la zona blau fosc. Veieu que els nombres associats a 'x' i a 'y' van canviant, igual que els nombres associats a 'ratolí x' i a 'ratolí y'

Cada objecte que aparegui a l'escenari està en una posició determinada, que ve donada per les seves coordenades (de fet, les coordenades del seu centre; en parlarem més endavant). On és l'origen? doncs ben bé al mig de l'escenari. L'escenari té 480 píxelsd'amplada per 360 píxels d'alçada i al centre mateix de l'escenari hi ha el punt (0,0). Per tant, la coordenada x prendrà valors que van des de -240 fins a +240, i la coordenada y des de -180 fins a +180. Mireu els valors de les coordenades del ratolí quan el moveu sobre de l'escenari i proveu de posar-lo en els seus valors límit.

A més d'una posició, cada objecte dins de l'escenari té una direcció. Posem el ratolí a sobre del gatet a les característiques de l'objecte. Si movem el ratolí, l'objecte gira sobre el seu centre de rotació i l'apartat 'direcció' de la zona blau cel va canviant de valor:

La direcció de l'objecte, el gatet en el nostre cas, pot prendre valors entre -180 i +180. Ens indicaran els graus des de la vertical, positius en el sentit de les agulles del rellotge i negatius en sentit contrari.



Tots els objectes que apareguin a l'escenari tindran una posició i una direcció.

Duplicar, eliminar, i canviar la mida dels objectes

Els objectes de l'escenari poden ser manipulats fàcilment amb els botons que a la primera figura emmarcàvem amb el color marró.

Aquests quatre botons permeten:

• Tampó: Permet duplicar l'objecte de l'escenari a

sobre del qual apliquem el tampó. A la figura veiem què passa si l'apliquem sis vegades. Fixem-nos que a la zona dels objectes (emmarcada en verd fosc a la primera figura d'aquesta pràctica) n'apareixen de

nous a mida que anem creant-ne.

• Tisores: Permeten eliminar un objecte de l'escenari. Cal seleccionar el botó i posicionar-se sobre de l'objecte tot fent clic.

• Engrandir: El botó amb les fletxes sortint cap a fora de la icona permet fer l'objecte més gran.

• Fer més petit: El botó amb les fletxes entrant dins de la icona permet fer els objectes més petits.

Objectes nous

El que nosaltres hem anomenat 'objectes' Scratch els anomena 'Animacions'. Tant és, el cas és que no només podem treballar amb el gatet!

Els tres botons ens permeten obtenir nous objectes de maneres diferents.

• permet obrir l'eina de dibuix per crear un objecte nosaltres mateixos. Aquest editor de dibuixos funciona com altres editors de dibuixos que segurament ja coneixeu (per exemple el Paint de Windows). Sobre la marxa anirem veient aquells aspectes no estàndard de l'eina.



• permet agafar un dels objectes que ja venen amb l'Scratch (n'hi ha molts!). Si feu clic a sobre, podreu triar entre les diferents carpetes que agrupen els objectes per temes.

• permet obtenir un objecte a l'atzar,

triat entre els que ja venen amb l'Scratch (capsa sorpresa). Proveu de fer clic sobre de la icona de la capsa sorpresa. Veureu com a l'escenari van apareixent objectes diferents. Ja sabeu com manipular-los, no? Vegeu l'apartat anterior.

Ara seria un bon moment per practicar amb els objectes. Vosaltres mateixos podeu jugar amb les tres opcions. De moment, seguiu les vostres intuïcions a l'hora d'utilitzar l'editor de dibuixos. És molt semblant a programes clàssics que més o menys tots hem utilitzat alguna vegada, com el Paint.

3. Els nostres primers programes: estructura seqüencial

Scratch és un entorn per aprendre a programar i això és el que hauríem de començar a fer sense més preàmbuls.

En aquest apartat provarem d'explicar aquelles parts de l'entorn que ens serviran per programar, i també començarem a fer alguns programes senzills.

On programarem?

Les instruccions estan categoritzades segons el que fan. Teniu un marc amb un botó per categoria. Si premeu qualsevol botó d'aquests obtindreu, a la zona de sota, les instruccions corresponents a aquesta categoria.

Les instruccions de cada categoria vénen amb el mateix color que el botó de la categoria: Blau pel moviment, lila per l'aspecte, etc. Aquí teniu un dels punts forts d'Scratch: les instruccions són blocs!, i amb els blocs construirem (literalment!!) programes.



La zona (fins ara) buida és el lloc on posarem els nostres programes. Fixeu-vos que aquesta regió està vinculada estretament a l'objecte sel�leccionat en el llenç que podeu veure remarcat a la zona d'objectes. Quan posem el programa en aquesta regió, aquest serà un programa associat a un objecte específic del llenç. A la figura podeu veure que tenim sel�leccionat el gatet rosa, per tant si féssim un programa, aquest seria un programa associat a aquest gatet.

Programem!

Un programa és una llista organitzada d'instruccions que, en executar-se, fan que l'ordinador es comporti d'una manera determinada. Programar serà, per tant, partir d'una tasca concreta i intentar proporcionar unes instruccions a l'ordinador per a que faci el que nosaltres volem. Penseu que a programar se n'aprèn programant.

Per afegir instruccions a un programa, les arrossegarem de la zona d'instruccions a la zona de programació amb el ratolí (farem clic a sobre de la instrucció i, sense deixar anar el botó del ratolí, mourem la instrucció allà on volem). A la figura hem agafat i arrossegat tres instruccions diferents cap a la zona de programació:

Feu doble-clic a sobre de cadascuna de les tres instruccions a la zona de programació i fixeu-vos en el gatet de l'escenari. Si feu doble-clic sobre la instrucció de moure, veurem el gatet movent-se 10 passos endavant (en la direcció que té associada). Si feu doble-clic sobre la instrucció de girar, veurem com canvia la direcció del gatet, i si feu doble-clic sobre la instrucció d'anar, el gat torna a l'origen.

Aquests espais en blanc amb nombres dins de cada instrucció-bloc són editables. Provem de canviar el 10 de la instrucció de moure per un 100 i feu doble-clic a sobre de la instrucció. Què veieu? Que el gat es mou 100 passos en lloc de 10.

De fet, el que tenim ara són tres programets (cadascun d'una sola instrucció) que afecten al mateix gatet. Els executem (executar és dur a terme la instrucció o instruccions d'un programa) fent doble-clic a sobre.



Però normalment voldrem combinar instruccions per fer programes més llargs i sofisticats. A Scratch, combinarem les instruccions enganxant-les, una a sota de l'altra, de manera que s'executaran primer les que estan més amunt (per ser rigorosos, d'això en direm estructura seqüencial). Com a exemple ara podem combinar les tres instruccions que hem posat fa una estona dins la zona de programació:

Enganxem les instruccions senzillament arrossegant una instrucció fins a posar-la sota de la instrucció que ha d'executar-se abans. A la figura ja hem enganxat la instrucció de moure a la instrucció d'anar, i estem a punt d'enganxar (esquerra) la instrucció de girar. A la dreta veiem el resultat final. Quan estem a punt d'enganxar una instrucció ens apareixerà una ratlla blanca indicant ons'enganxarà la instrucció que estem arrossegant. Més endavant ens serà molt útil.

Tot i això, és més habitual en Scratch executar els programes prement la bandera verda (a dalt a la dreta). És molt fàcil fer-ho, ja que només hem de posar-hi la instrucció corresponent. Fem clic sobre el botó de la categoria d'instruccions 'control' (encerclat vermell a la figura) i arrosseguem a la zona de programes la instrucció 'al prémer la bandera verda' (encerclat verd). Després, arrosseguem el programa a sota de la instrucció que acabem d'afegir (encerclat blau).

Continuem amb el programet que hem començat a fer. Imaginem ara que volem que el gatet faci alguna mena de soroll. Podem triar la categoria 'Sons' i afegir la instrucció-bloc 'tocar so' (triant 'gat' en el desplegable del bloc) al programa.

Ara, quan premeu la bandera verda veureu que el gat fa el que ja sabem i, a més, miola.

Els objectes poden tenir diferents vestits. Sense sortir del programet senzill amb el que

estem treballant, trieu la pestanya 'Vestits'.

Fixeu-vos que el gatet té dos vestits, anomenats 'vestit1' i 'vestit2'



Si tornem a la pestanya 'Programes' i fem clic sobre el botó de la categoria 'Aspecte', podem afegir (arrosseguem des de la llista d'instruccions de la categoria 'Aspecte') al nostre programet la instrucció 'següent vestit'. Fem-ho i veiem què passa.

Premem la bandera verda vàries vegades i fixem-nos que els vestits del gatet s'alternen en cada clic a la bandera verda (i encara va girant cada vegada, ja sabeu el per què?). Aquest canvi de vestits serà la base de les animacions fetes amb Scratch. Encara ens queda, però, una mica de camí per endavant.

Per cert, queda un petit detall. Si volem eliminar de la zona de programació qualsevol instrucció, l'arrossegarem cap a la zona d'instruccions i, sigui quina sigui la categoria seleccionada, desapareixerà! Exactament el mateix podem fer amb un conjunt d'instruccions enganxades.

4. Estructures condicional i iterativa

En aquest apartat començarem a explicar les estructures fonamentals de la programació que ens queden per veure desprès d'haver treballat l'estructura seqüencial a la pràctica anterior.

Estructura iterativa

Repetir és una de les accions que els ordinadors fan millor. Són incansables! A més, és completament necessari poder repetir per poder fer programes. Sense l'habilitat de fer repeticions hi hauria problemes que els ordinadors no podrien resoldre!. Començarem per la repetició més senzilla.

Les estructures de control a Scratch tenen aquesta forma de contenidor obert. En aquest

cas, la repetició 'per sempre', el nom és prou informatiu. Els programes que posarem dins del 'per sempre' es repetiran sense fi.

No cal, però, repetir per sempre. Podem dir a Scratch que volem repetir només un nombre determinat de



vegades (25 a l’exemple). Però pot ser que vulguem repetir només si passa alguna cosa relacionada amb el nostre programa. És a dir, pot ser que la condició per deixar de repetir depengui del que està passant mentre s'executa el programa, i per tant no puguem saber, abans d'executar el programa quantes vegades s'ha de repetir.

Veiem un exemple. El 'repetir fins' té un forat de contorns angulars al costat, per tant, espera que hi posem una expressió lògica…

Expressions

Mireu les categories 'Operadors' o 'Sensors'. Trobareu uns blocs de forma diferent als blocs que hem vist fins ara. Compareu les instruccions com 'moure', les estructures de control com el 'per sempre' i les expressions.

Aquestes expressions van a llocs especialment preparats per col�locar-hi aquests blocs.

Aquesta expressió ens dirà si tenim el ratolí premut i la tecla espai premuda:

Estructura Condicional

En aquest cas tenim una estructura de control que serveix per decidir si un cert conjunt

d'instruccions s'executa, o no, en funció d'una condició (és a dir, d'una expressió lògica).

Suposem ara que volem que el gatet comenci des de l'origen de coordenades i que es mogui i giri a l'atzar com hem vist abans, però volem que mioli només quan pitgem la tecla 'm'. Per a això farem servir una estructura condicional 'si'

És possible que, a vegades pitgeu la tecla 'm' i el gat mioli més d'un cop. No us amoïneu, que això ja és correcte. El que pot passar és que mentre que vosaltres penseu que heu premut la tecla un cop, Scratch ha tingut temps de



llegir la tecla unes quantes vegades i prendre-s'ho com una ordre de prémer la tecla diverses vegades.

Per poder veure exemples del 'si…si no' el millor que podeu fer és pensar-los vosaltres mateixos. Hi ha un component creatiu molt important en la programació!

5. Geometria: Polígons

Volem fer un programa que dibuixi quadrats i polígons regulars de qualsevol nombre de costats. Obrim Scratch i seleccionem un nou projecte, creem una animació que serà la que anirà dibuixant les figures. Anem a la carpeta animacions que es troba a la part inferior de l'àrea de treball, en fer clic se'ns obrirà una nova finestra on seleccionem la carpeta "things"; fem doble clic per obrir-la i apareixerà una col�lecció d'objectes, busquem entre ells un llapis, el seleccionem i acceptem amb el botó inferior. Si a l'àrea de treball encara hi és el gatet, l'eliminem tallant-lo amb les estisores. El llapis apareixerà amb un programa associat, l'eliminem arrossegant-lo fora de l'àrea de programa.

Si no apareix el llapis a la zona de treball, arrosseguem una instrucció "anar a x:0

y:0" a la zona de programa i fem doble clic a sobre d'ella; després ajustem la mida del llapis amb la comanda reduir, aproximadament com es mostra a la imatge

Combinant les instruccions moure i girar, anem a dibuixar un quadrat: escrivim un codi com el que apareix a continuació, les instruccions que dibuixen el quadrat són les que es troben dins del bucle repetir.

Si hem escrit bé el codi obtindrem la següent imatge.

Com ho faríem per dibuixar un hexàgon?

La primera cosa que se'ns acut és que hauríem de fer una repetició sis vegades, una per cada costat, a més, els girs que hem de fer són menors que en el quadrat. Per completar una volta sencera amb sis girs, com que sabem que una volta sencera té 360º, cada vegada hauríem de girar 360/6. Modifiquem el codi adequadament, i si ho hem fet correctament obtindrem la següent imatge.



Ara anem a fer extensible aquesta solució a qualsevol polígon regular.

L'únic que necessitem es substituir el número 6 per una variable que vagi adquirint el valor dels costats del polígon que volem dibuixar. Anem al menú variables, fem clic amb el botó "nova variable" i ens apareixerà un nou menú per a la creació de variables, ens demana el nom per la variable i li donem el nom costats.

En el menú de variables ens apareixen noves instruccions que podem utilitzar en la creació de codi, són les que veiem amb la imatge següent.

La instrucció fixa serveix per assignar un valor a la variable, la instrucció suma incrementa la variable amb la quantitat que li indiquem. També ens apareixerà una peça costats, amb una casella que si està activada farà que el valor de la variable aparegui a la zona de representació gràfica i també apareixeran instruccions per permetre, mitjançant codi, activar i desactivar aquesta representació "amagar i mostrar variable". Si fem clic amb el botó dret del ratolí sobre la representació de la variable, ens apareixerà un menú com el de la següent imatge. Escollint l'opció "lliscador", la imatge de la variable canvia d'aspecte, i podem canviar el valor de la variable movent el lliscador. Si tornem a fer clic amb el botó dret apareixerà un nou menú com el que es mostra a la imatge següent. Triar l'opció "defineix el mínim i màxim del lliscador", amb això podrem acotar els valors que pot prendre la variable. També podem canviar l'aparença de la variable fent-hi doble-clic a sobre.

Creem una altra variable a la que anomenarem 'passos', que ens servirà per controlar la longitud del costat del polígon. Afegim aquestes variables al codi i ens quedarà com la imatge següent. Amb aquest codi, variant el nombre de costats i la seva longitud podem dibuixar qualsevol polígon regular.

Recordeu que cal inicialitzar les variables.



Veiem el que passa amb una petita modificació com la que fem en el codi següent. Proveu amb diferents valors per a les variables:

Reorganitzem i fem espirals

Reorganitzarem el codi perquè cada funció quedi en un bloc separat i construirem els següents blocs: un per inicialitzar el programa, un altre per les funcions que posarem en marxa des del teclat i uns altres per a cada tipus de figura que vulguem dibuixar (quadrats, polígons, espirals). Així aconseguirem tenir un codi més clar i llegible.

A continuació tenim al bloc d'inici, en el qual es fixen els paràmetres inicials: longitud dels costats, posició inicial, color del llapis etc. La penúltima instrucció és la que enllaça amb el bloc següent. Aquesta instrucció la trobarem a l'apartat de control (color groc). Clicant a la petita fletxa que hi ha a la dreta s'obrirà un petit menú, seleccionem nou i s'obrirà una finestra on escriurem inici, com a nom del missatge.

Aquest missatge posarà en marxa tots els blocs que tinguin com a primera instrucció en rebre inici com el que tenim a la nostra dreta.

Analitzem que fa aquest bloc: després de la instrucció d'inici ve una instrucció per sempre, que engloba totes les altres instruccions, això significa que aquestes instruccions es repetiran de forma indefinida i el que aconseguirem amb això és que el programa estigui sempre pendent de si polsem alguna de les tecles que hem escollit per controlar el programa. També hem posat una instrucció esperar 0,1 segons, això ho fem



per tal que la repetició continuada del bloc no bloquegi el programa i per evitar la doble pulsació de les tecles.

Dins del per sempre hi trobem una serie d'instruccions condicionals, és a dir que només s'executaran si es compleix una condició, en aquest cas si una determinada tecla és premuda. La instrucció que s'executa en cadascun dels casos és la d'enviar un missatge que posa en marxa diferents blocs de codi. En aquest exemple els diferents blocs es troben en la mateixa animació, però no sempre és així, perquè podríem estar en altres animacions i ser utilitzats per enviar-se missatges de l'un a l'altre i així concatenar un seguit d'accions. En aquest cas els missatges són quadrat, polígon, espiral que posaran en funcionament els corresponents blocs que executen aquestes accions.

Aquest tipus d'estructures són útils per enviar ordres des del teclat i veureu que es repeteixen en diferents exemples, amb petites variacions.

Veiem ara com queden els diferents blocs que executen aquestes accions.

Aquests dos primers blocs que dibuixen les formes elementals i el seu codi es dedueixen directament del que s'ha explicat anteriorment, ara escriurem el codi d'un bloc que dibuixa formes més complexes; per això, primer crearem dues noves variables, angle i increment. La primera guardarà l'angle de gir del llapis i la segona servirà per augmentar la variable passos a cada repetició. Veiem el codi i, a continuació, analitzem com funciona.

El bloc comença el rebre el missatge espiral, a continuació fixa la variable passos a 0. Ara ve una instrucció nova: repetir fins que es compleixi una condició, en el nostre cas fins que el llapis toqui una vora, d'aquesta manera aconseguim que el dibuix ocupi pràcticament tota la pantalla. La primera instrucció de la repetició és la que mou l'objecte i que determina la longitud del traç, fixeu-vos que, a la primera repetició, la variable pren per valor zero i que, a cada repetició, el seu



valor augmenta el valor de la variable increment. Això fa que la corba tingui forma d'espiral. Feu la prova en un valor per l'angle de 40° i per l'increment 0,4 canvieu ara el angle per 43° després per 61°, 119°… En general, si l'angle escollit correspon a l'angle d'un polígon regular obtindrem una espiral, si és una mica més gran o petit obtindrem figures que es cargolen sobre elles mateixes.

Al final de la repetició posem una instrucció que va canviant el color del llapis cada vegada, per tal d'aconseguir una imatge més vistosa.

Per acabar aquest apartat crearem un altre bloc que servirà per esborrar la pantalla i tornar a situar el llapis a la posició d'inici, sense haver de prémer la bandera verda, sinó que ho farem amb la tecla espai.

En la imatge següent es mostra un possible codi complet d'aquest apartat:



6. Presentacions: l'escenari d'Scratch

L'escenari és el lloc on es col�loquen els diferents objectes d'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 d'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 a un objecte normal.

Exploreu totes les categories de l'escenari i compareu-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 fem això per sempre ja tenim la primera aproximació.



Aquest seria el codi font.

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

Afegir objectes per canviar de fons

Per passar les pàgines de la nostra presentació ho podem fer per temps o mitjançant uns botons que permetin controlar la presentació. Posarem tres 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ó "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".

Fixeu-vos com canvia la descripció de la peça "al rebre Següent" modificant el nom de l'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 és 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, és 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 fns 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 i l'haurem de fabricar. Si examinem 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.

Proveu 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 a 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:

Fixeu-vos què passa quan el fons és 1 i li traiem 1.



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":

7. Exemples de programes

Podeu copiar les instruccions dels primers exemples de programes i provar-les.

Un cop fet això, podeu fer totes les modificacions que creieu oportunes per tal de millorar aquests exemples, així com també els dels programes dels enllaços relacionats tot seguit.

• Triangle



• Polígons

Practicar amb els programes següents, que trobareu a la web del centre o al moodle, secció de tecnologia:

• Presentació simple

• Presentació interactiva: robòtica

• Mandala

• Laberint eòlic

• Pong

introducció a la programació...i modificats per vosaltres mateixos. voleu veure quina pinta té un...

Documents