Hello Purr (1)

L’objectiu és crear un botó amb una imatge d’un gat, i programar el botó per a que soni un meu de gat quan es premi el botó.

Obre l’espai de disseny o l’editor de Blocs de l’App Inventor.

Baixeu els fitxers necessaris 
Haureu de baixar-vos a l’ordinador una imatge d’un gat (kitty.png) i un fitxer d’audio (meow.mp3). A continuació disposeu dels dos fitxers esmentats:

• Kitty picture: kitty.png (click a l’enllaç +  botó dret a la imatge i click a Guardar imagen como…)
• Meow sound: meow.mp3 (click a l’enllaç +  botó dret a la imatge i click a Guardar audio como…) 

Deseu els dos fitxers sobre l’escriptori o allà on els podeu trobar fàcilment.

Seleccioneu els components per dissenyar l’app 

Els components es poden seleccionar a la secció, disponible a la dreta de la pantalla de l’App Inventor.

 

Per utilitzar un component a la teva app, cliqueu-lo de la secció Palette i arrossegueu-lo cap a la secció Viewer(#1), situada al mig de la pantalla. Llavors, també apareixerà a la secció Components (#2). També apareixeran a la secció Properties (#3) les propietats corresponents al component que estigui seleccionat.

Passos per seleccionar components i ajustar les seves propietats.

Per obtenir un botó que mostri la imatge del gat haureu de fer això:

1. Des de la secció User Interface de la Palette, arrossega un Button cap a la secció Viewer (#1) 

2. Per tenir una imatge al botó, a la secció Properties a la propietat Image, feu click al text None… i click "Upload File…" (#2). Click a Examinar i tria la imatge kitty.pngque abans us vau baixar (#3).

3. Canvia la propietat Text: Esborra "Text for Button1", deixant en blanc aquesta propietat per a que no hi hagi res escrit a sobre la cara del gat. L’aspecte hauria de ser el següent:

4. Des de la secció User Interface de la Palette, arrossegueu una etiqueta (Label) al Viewer (#1), a sota mateix de la imatge del gat. L’etiqueta apareixerà a la llista de components amb el nom de Label1.

5. A la secció Properties, canvia la propietat Text de l’etiqueta Label1 per a que es llegeixi “Pet the kitty!” (#2).

6. Canvia el tipus de lletra (Fontsize) del text a tamany 30 (#3).

7. Canvia el color de fons (BackgroundColor) de Label1 (#4) al color que vulguis. 

8. Canvia el color de text (BackgroundColor) de Label1 (#5) al color que vulguis.

9. A Palette, click a la secció Media, i arrossega un component Sound al Viewer (#1). Apareixerà a sota del visor com a component no visible.

10. Click Upload File... (#2) i selecciona el fitxermeow.mp3 per carregar-lo al nostre projecte (#3). 

11. A la secció Properties, a la propietat Source, click la paraula None… i selecciona el fitxer meow.mp3 (#4).

Veure a continuació la part 2 d'aquesta entrada...