Com baixar vídeos de Youtube

Per baixar vídeos de Youtube podeu utilitzar la pàgina web www.descargaryoutube.com

Tutorial VideoPad

A continuació disposeu d'un video que us ensenya l'ús bàsic del VideoPAD:

MoleMash

En aquest enllaç es troben les instruccions en anglès per construir el programa del joc MoleMash.

Tot seguit s'explicarà, en Català, com realitzar el programa.

Què volem fer?

Al joc MoleMash, un talp va apareixent en posicions aleatòries del camp de joc. El jugador aconseguirà marcar punts quan aonsegueixi colpejar el talp abans que aquest salti. 

El talp es mourà cada mig segon. Si és tocat, el marcador suma un punt més, i el telèfon vibra. Quan es prem el botó RESET el marcador es posa a zero.

Aquesta serà la superfície de joc:

Per començar

1. Entrar a la web d'AppInventor i comença un nou projecte. 

2. El nom del projecte ha de ser MoleMash_NomCognom1.

3. El Title de la pantalla serà MoleMash_NomCognom1.

4. Baixeu-vos la imatge del talp i desa-la a l'ordinador.

Primers components

1. Un Canvas anomenat MyCanvas. Aquesta és l'àrea de moviments del talp. Dimensions: 300pxls wide x 300pxls high

2. Una Label (etiqueta) anomenada "ScoreLabel", que mostra el marcador amb el nombre de vegades que el jugador ha colpejat el talp.

3. El text de l’etiqueta ScoreLabel ha de ser Score: --

4. Un botó anomenat "ResetButton". El text del botó serà RESET

5. Afegir un component de so i anomena'l Noise. Utilitzarem Noise per fer vibrar el mòbil quan el talp és colpejat.

6. Arrossega cap al Viewer el component Clock des de la secció Sensors de la Palette i anomena’l MoleTimer. Aquest component servirà per fer saltar el talp cada 500milisegons. Per a fer això, hem d’establir el valor 500 a la propietat TimerInterval del MoleTimer. Assegureu-vos que la propietat TimerEnabled està activada.

7. Per afegir el talp hem d’utilitzar un sprite. Arrossega un ImageSprite des de la secció Drawing and Animation  cap a MyCanvas al Viewer.  A continuació, estableix les propietats següents:

• Picture: mole.png
• Enabled: activat
• Interval: 500
• Heading: 0
• Speed: 0.0
• Visible: Activat
• Width: Automatic
• Height: Automatic

Un cop afegits els components a l'entorn de treball, ens quedarà una pantalla com la següent:

Especificar el comportament dels components

Què és un procediment (Procedure) en AppInventor? Es tracta d’una seqüència d’events que es poden produir més d’un cop durant l’execució d’un programa.

Definirem dos procediments:

• MoveMole: Mou el sprite del talp a una nova aleatòria posició dins del MyCanvas.
• UpdateScore: Mostra el marcador amb el resultat (score) a travès del text de l’etiqueta ScoreLabel.

Definir el procediment MoveMole

1. A l’editor de blocs, a la secció Built-In, obre el calaix de procediments (Procedures), arrossega un bloc to procedure i canvia l’etiqueta procedure per MoveMole.

2. A continuació es mostra el bloc to MoveMole, que és on s’estableixen les accions del procediment, que són establir les coordenades X i Y de la posició del talp. El valor de les coordenades serà una fracció aleatòria de la diferència entre el tamany de MyCanvas i el tamany del talp (Mole).

Definir el procediment UpdateScore

1. Definir una variable score, que contindrà el marcador del resultat obtingut a cada instant. Inicialment, la variable creada haurà de tenir valor zero:

2. A l’editor de blocs, a la secció Built-In, obre el calaix de procediments (Procedures), arrossega un bloc to procedure i canvia l’etiqueta procedure per UpdateScore.

3. Arrossegueu un bloc de text des del calaix de Text, i poseu el text “Score:”.

4. Afegeix un bloc join per ajuntar el text “Score:” al valor de la variable global score:

Afegir un Timer

Per fer que el talp es mogui hem d’utilitzar el Clock MoleTimer. 

A l’editor de Blocs, seleccionem l’event when MoleTimer.Timer. Aquest event cridarà el moviment del talp (procediment MoveMole) cada 500ms (TimeInterval).

Afegir l’acció de Tocar el talp

Crearem una rutina when Mole.Touched que faci el següent:

1. Incrementar el marcador (valor de la variable score).

2. Cridar la rutina call UpdateScore per mostrar el nou marcador.

3. Fer vibrar el telèfon durant 100 milisegons cada segon.

4. Cridar la rutina call MoveMole per a que el talp es mogui inmediatament, enlloc d’esperar al timer.

Posar el marcador a zero

Fer que el botó ResetButton canviï el valor de la variable score (marcador) a zero i cridi call Update score

Programa complet:

Paint Pot (2)

I ara què fem?

A partir de l'aplicació PaintPot ja creada, farem una evolució que ens permeti, a més a més, pintar punts de diferents tamanys.

L'objectiu és aprendre a utilitzar les variables globals.

Als llocs web següents disposes dels tutorials del PaintPot1 i PaintPot2 en anglès:

http://appinventor.mit.edu/explore/ai2/paintpot-part1.html 

http://appinventor.mit.edu/explore/ai2/paintpot-part2.html

Pantalla de l'App

Hem de crear una pantalla per a la nostra app com la que es veu a continuació.

La pantalla ha d'afegir, als controls que teníem abans, un botó per afegir punts petits i un altre botó per afegir punts grans. Vegeu l'exemple:

Pantalla de Blocks

A continuació tenim el programa que hem de realitzar a la secció de Blocks:

Estudi del programa: Funcionament dels botons

• Quan cliquem el botó VERMELL (RedButton), s'agafa el color vermell com a color de pintura (PaintColor) per al Canvas.
• Quan cliquem el botó BLAU (BlueButton), s'agafa el color blau com a color de pintura (PaintColor) per al Canvas.
• Quan cliquem el botó VERD (GreenButton), s'agafa el color verd com a color de pintura (PaintColor) per al Canvas.
• Quan cliquem el botó Wipe (ButtonWipe), es crida l'ordre d'esborrat de qualsevol traç que hi hagi al Canvas.

Estudi del programa: Variables i botons de variables

En primer lloc, el programa inicialitza les variables small, big i dotsize, i les inicialitza als valors 2, 8 i 2 respectivament.

A continuació, el boto ButtonBig es programa per a que, en ser clicat, prengui el valor de la variable global big i l'adjudiqui a la variable global dotsize.

De la mateixa manera, el botó ButtonSmall es programa per a que, en ser clicat, prengui el valor de la variable global small i l'adjudiqui a la variable global dotsize.

Estudi del programa: Pintar punts i línies

Vegeu que la part del programa que dibuixa els punts és igual que la realitzada per al programa PaintPot (1), amb la diferència que el radi no s'obté directament d'un bloc numèric, sino que s'obté de la variable global dotsize.

D'altra banda, la part del programa que dibuixa les línies és idèntica a la realitzada al programa PaintPot (1).

Com introduir al programa les variables globals

Per inicialitzar (crear-les i donar-les un valor inicial) les variables globals procedirem com s'indica als dibuixos següents:

PaintPot (1)

Què farem?

Crear una aplicació que ens permeti:

• Ficar el dit en un pot de pintura virtual per a poder pintar
• Arrossegar el dit per la pantalla del mòbil per dibuixar una línia
• Fer copets a la pantalla per dibuixar punts
• Esborrar les línies i punts dibuixades prement un botó d’ESBORRAR
• Afegir una imatge com a dibuix de fons (background)

Per començar

Obre un projecte now (Start new project) i anomena’l Paintpot_NomCognom

A la secció Components selecciona Screen1. Llavors, a la secció de propietats (Properties), canvia el Title per Paintpot_NomCognom.

Seleccionar els components

Els components a utilitzar seran:

• 3 Buttons per a seleccionar pintura RED, BLUE o GREEN + un altre Button per ESBORRAR.
• Un llenç (Canvas) o superfície de dibuix. Aquest Canvas ha de tenir una imatge de fons (BackgroundImage), disponible en aquest enllaç.
• Un HorizontalArrangement per a alinear els 3 botons.

Col·locar els botons a la pantalla de l’app

1. Des de la categoria Layout de la secció Palette, arrossega el HorizontalArrangement a la secció Viewer.
2. Situa els botons dins de l’ HorizontalArrangement, com es mostra a la figura següent. 
3. A la secció Components canvia el nom dels components als mostrats a la figura següent.

Col·locar el Canvas i el botó ESBORRA a la pantalla de l’app

1. Des de la secció Drawings and animation de la Palette, arrossega un Canvas al Viewer.
2. Canvia el nom del Canvas per DrawingCanvas. Ajusta el seu ample (Width > Fill Parent) i l’alçada (Height a 300 pixels).
3. Afegeix una imatge de fons (Background Image) al Canvas: Fes click al camp Image que conté el text None...  Adjunta una imatge d’un gat diferent de la del fitxer kitty.png.
4. Des de la Palette, secció User Interface, arrossega l’últim botó a sota de la imatge. Es dirà el botó ESBORRAR (ButtonWipe).

Afegir comportaments als components

Primer establirem que els botons canviïn el color de la pintura. Després afegirem blocs que permetin pintar quan algú toca o arrossega el dit per la pantalla del mòbil.

A l’editor de blocs:

1. Selecciona el calaix del botó vermell (ButtonRed) i arrossega el bloc when ButtonRed.Click.
2. Selecciona el calaix del Canvas (DrawingCanvas). Arrossega el bloc set DrawingCanvas.PaintColor to i situa’l al bloc when ButtonRed.Click.
3. Del calaix de colors, selecciona el color vermell i connecta’l al bloc set DrawingCanvas.PaintColor to.
4. Repeteix aquests passos per a la resta de botons de colors.
5. Selecciona el calaix del botó ESBORRA (ButtonWipe) i arrossega el bloc when ButtonWipe.Click a la pantalla del editor. Del calaix del botó DrawingCanvas,arrossega el bloc call DrawingCanvas.Clear a dins del bloc when ButtonWipe.Click

Ens ha de quedar un programa com el següent:

Ara afegirem blocs que permetin pintar punts quan algú toca la pantalla del mòbil.

Ara heu de muntar, al mateix àrea de blocs, el programa següent, que ens dibuixarà un cercle de radi 5 cada cop que fem un toc sobre el Canvas a les coordenades del punt on s’ha tocat:

Ara afegirem blocs que permetin pintar línies quan algú arrossega el dit per la pantalla del mòbil.

Ara munteu el programa següent, que serveix per pintar línies cada cop que arrosseguem el dit per la pantalla. El programa va prenent coordenades X i Y dels punts pels quals passa el nostre dit, i va dibuixant una línia amb els punts obtinguts.