Tag Archives: HorizontalArrangement

Animali parlanti

Libro di testo – pagine 294…301


GUI



Componenti


  1. Screen > Screen1
    1. Title=Cane a gatto
  2. User Interface > Label > Label1
    1. FontSize=20
    2. Text=Animali parlanti
  3. User Interface > Button > bu_Cane
    1. Height=101
    2. Image=cane-che-sorride.jpg
    3. Text=
    4. Width=128
  4. User Interface > Button > bu_Gatto
    1. Height=92
    2. Image=gattino-che-sorride.jpg
    3. Text=
    4. Width=128

Componenti non visibili


  1. Media > Sound > so_Cane
    1. Source=Dog2.wav
  2. Media > Sound > so_Gatto
    1. Source=Meow2.wav

Cerca 2 foto e 2 file audio di animali…


Blocchi


Un pulsante risponde al clic attivando il suono corrispondente



Pagina 302 – Numero 1 – Colore di sfondo



  1. Screen > Screen1
    1. BackgroundColor=Gray


Pagina 302 – Numero 2 – Etichette



Componenti


  1. Screen > Screen1
    1. Title=Cane a gatto
  2. User Interface > Label > la_Titolo
    1. FontSize=20
    2. Text=Animali parlanti
  3. User Interface > Button > bu_Cane
    1. Height=101
    2. Image=cane-che-sorride.jpg
    3. Text=
    4. Width=128
  4. User Interface > Label > la_Cane
    1. Text=Sofia
  5. User Interface > Button > bu_Gatto
    1. Height=92
    2. Image=gattino-che-sorride.jpg
    3. Text=
    4. Width=128
  6. User Interface > Label > la_Gatto
    1. Text=Alice

Componenti non visibili


  1. Media > Sound > so_Cane
    1. Source=Dog2.wav
  2. Media > Sound > so_Gatto
    1. Source=Meow2.wav

Cerca 2 foto e 2 file audio di animali…



Pagina 302 – Numero 3 – Pulsante e testo di Help



Componenti


  1. Screen > Screen1
    1. Title=Cane a gatto
  2. User Interface > Label > la_Titolo
    1. FontSize=20
    2. Text=Animali parlanti
  3. User Interface > Button > bu_Cane
    1. Height=101
    2. Image=cane-che-sorride.jpg
    3. Text=
    4. Width=128
  4. User Interface > Label > la_Cane
    1. Text=Sofia
  5. User Interface > Button > bu_Gatto
    1. Height=92
    2. Image=gattino-che-sorride.jpg
    3. Text=
    4. Width=128
  6. User Interface > Label > la_Gatto
    1. Text=Alice
  7. User Interface > Button > bu_Help
    1. Text=Help
  8. User Interface > Label > la_Help
    1. Text=

Componenti non visibili


  1. Media > Sound > so_Cane
    1. Source=Dog2.wav
  2. Media > Sound > so_Gatto
    1. Source=Meow2.wav

Cerca 2 foto e 2 file audio di animali…


Quando il pulsante Help viene attivato con un clic appare il contenuto dell’etichetta sottostante


Pagina 302 – Numero 4 – Disposizione orizzontale



Componenti


  1. Screen > Screen1
    1. Title=Cane a gatto
  2. User Interface > Label > la_Titolo
    1. FontSize=20
    2. Text=Animali parlanti
  3. Layout >HorizontalArrangement > ha_Cane
  4. User Interface > Button > bu_Cane
    1. Height=101
    2. Image=cane-che-sorride.jpg
    3. Text=
    4. Width=128
  5. User Interface > Label > la_Cane
    1. Text=Sofia
  6. Layout >HorizontalArrangement > ha_Gatto
  7. User Interface > Button > bu_Gatto
    1. Height=92
    2. Image=gattino-che-sorride.jpg
    3. Text=
    4. Width=128
  8. User Interface > Label > la_Gatto
    1. Text=Alice
  9. User Interface > Button > bu_Help
    1. Text=Help
  10. User Interface > Label > la_Help
    1. Text=

Componenti non visibili


  1. Media > Sound > so_Cane
    1. Source=Dog2.wav
  2. Media > Sound > so_Gatto
    1. Source=Meow2.wav

Cerca 2 foto e 2 file audio di animali…



Pagina 302 – Numero 5 – Disposizione in tabella 3×2



Layout >TableArrangement > TableArrangement1

  1. Columns=2
  2. Rows=3

Disponi 6 pulsanti, associa immagini, suoni, blocchi corrispondenti…

Space Invaders

http://appinventor.mit.edu/explore/ai2/space-invaders


GUI


Componenti


  1.  Screen > Screen1
    1. Title=Space Invaders
  2. Drawing and Animation > Canvas > Canvas1
    1. BackgroundColor=Black
  3. Drawing and Animation > Ball > ba_Bullet
    1. PaintColor=Green
    2. Radius=8
  4. Drawing and Animation > ImageSprite > is_Rocket
    1. Picture=rocket.png
  5. Drawing and Animation > ImageSprite > is_Saucer
    1. Picture=saucer.png
  6. Layout > HorizontalArrangement > ha_Score
  7. User interface > Label > la_Score
    1. Text=Score:
  8. User interface > Label > la_ScoreValue
    1. Text=0
  9. User interface > Button > bu_Reset
    1. Text=Reset

Componenti non visibili


  1. Sensing > Clock > Clock1
    1. On, On, 3000

Blocchi


All’apertura si imposta il proiettile come invisibile

Il razzo si muove se trascinato

Alla fine del tocco del razzo parte il proiettile

Se il proiettile finisce sul fondo scompare

Se il proiettile colpisce il disco volante: scompare, aumenta il punteggio, il disco volante si sposta in posizione casuale

Il disco si sposta ogni 3 secondi

Il tasto Reset azzera il punteggio




Miglioramenti

  1. Esplosione
  2. Vibrazione, Suoni
  3. Movimento continuo del disco volante
  4. Finché il proiettile non raggiunge il fondo…

Mole Mash


GUI



Componenti


  1. Screen > Screen1
    1. Title=Mole Mash 1
  2. Drawing and Animation > Canvas > Canvas1
    1. Height=300
    2. Width=Fill parent
  3. Drawing and Animation > ImageSprite > is_Mole
    1. Picture=mole.png
  4. User Interface > Button > bu_Reset
    1. Text=Reset
  5. Layout > HorizontalArrangement > ha_Hits
    1. Layout > Label > la_Hits
      1. Text=Hits:
    2. Layout > Label > la_HitsCount
      1. Text=0
  6. Layout > HorizontalArrangement > ha_Misses
    1. Layout > Label > la_Misses
      1. Text=Misses:
    2. Layout > Label > la_MissesCount
      1. Text=0

Componenti non visibili


  1. Media > Clock > Clock1
    1. On, On, 1000
  2. Media > Sound > Sound1

Blocchi


La talpa occupa una posizione casuale

… appena parte l’applicazione

… e ogni secondo

Ogni volta che si tocca lo schermo (Canvas) ed è stato toccato uno sprite (c’è solo quello della talpa…) si incrementa il contatore di successi, altrimenti quello dei fallimenti

Per ricominciare il gioco basta reimpostare i contatori a zero

Per rendere il gioco più interattivo si aggiunge la vibrazione




Il gioco è più realistico con 5 buche in posizioni fisse e la talpa che si sposta da una buca all’altra


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. Title=Mole Mash 2
  2. Drawing and Animation > Canvas > Canvas1
    1. Height=300
    2. Width=300
  3. Drawing and Animation > ImageSprite > is_Hole1
  4. Drawing and Animation > ImageSprite > is_Hole2
  5. Drawing and Animation > ImageSprite > is_Hole3
  6. Drawing and Animation > ImageSprite > is_Hole4
  7. Drawing and Animation > ImageSprite > is_Hole5
  8. Drawing and Animation > ImageSprite > is_Mole
    1. Picture=mole.png
  9. Layout > HorizontalArrangement > ha_Score
  10. Layout > Label > la_Score
    1. Text=Score:
  11. Layout > Label > la_ScoreValue
    1. Text=0

Componenti non visibili


  1. Media > Clock > Clock1
    1. On, On, 1000
  2. Media > Sound > Sound1

Blocchi


Le 5 buche sono inserite in una lista e condividono la stessa immagine

Ogni secondo la talpa cambia buca

La talpa occupa una buca scelta a caso dalla lista

Quando si colpisce la talpa: incremento del punteggio, vibrazione, nuova posizione




Proposte

  1. tasto Reset
  2. contatore dei colpi a vuoto
  3. suoni

Android Mash

http://www.appinventor.org/content/ai2apps/simpleApps/androidMash


GUI



Componenti


  1. Screen > Screen1
    1. Title=Android Mash 1
  2. Draw and Animation > Canvas > Canvas1
    1. BackgroundImage=androidblock2.png
    2. Height=400
    3. Width=Fill parent
  3. Draw and Animation > ImageSprite > ImageSprite_Android
    1. Picture=Android_teacher.svg.png

Componenti non visibili


  1. Sensors > Clock > Clock1
  2. Media > Sound > Sound1

Blocchi


La procedura moveRandom sposta l’immagine di Android sullo schermo in modo casuale

La procedura viene chiamata quando parte l’applicazione e ad ogni segnale del timer (1000 ms = 1 s)

Quando l’immagine viene colpita si ottiene una vibrazione (500 ms = 0.5 s)




Gestione del punteggio, fine del gioco, nuovo gioco


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. BackgroundColor=Black
    3. Title=Android Mash 2
  2. Draw and Animation > Canvas > Canvas1
    1. BackgroundImage=androidblock2.png
    2. Height=400
    3. Width=Fill parent
  3. Draw and Animation > ImageSprite > ImageSprite_Android
    1. Picture=Android_teacher.svg.png
  4. Layout > HorizontalArrangement > HorizontalArrangement1
  5. User Interface > Label > Label_Score1
    1. Text=Score:
  6. User Interface > Label > Label_Score2
    1. Text=0
  7. User Interface > Button > Button_Reset
    1. Shape=rounded
    2. Text=New Game
    3. TextColor=Blue

Componenti non visibili


  1. Sensors > Clock > Clock1
  2. Media > Sound > Sound1
  3. Media > TextToSpeech > TextToSpeech1

Blocchi


Con il pulsante New Game si fa ripartire il gioco: punteggio a zero e timer attivato

Quando viene colpito il robot: vibrazione, il punteggio aumenta di 1, se il punteggio è arrivato a 5 si ferma il timer (e il robot…) e si sente un messaggio di vittoria

PaintPot


GUI



Componenti


  1. Screen > Screen1
    1. Title=PaintPot 1
  2. Layout > HorizontalArrangement > HorizontalArrangement1
    1. Width=Fill parent
  3. User Interface > Button > Button_Red
    1. BackgroundColor=Red
    2. Text=Red
  4. User Interface > Button > Button_Green
    1. BackgroundColor=Green
    2. Text=Green
  5. User Interface > Button > Button_Bue
    1. BackgroundColor=Blue
    2. Text=Blue
    3. TextColor=White
  6. Drawing > Canvas > Canvas1
    1. BackgroundImage=kitty.png
    2. Height=300
    3. Width=Fill parent
  7. User Interface > Button > Button_Wipe
    1. Text=Wipe

Componenti non visibili



Blocchi


Cambiare il colore di Canvas

Touch: toccando la figura si disegna un cerchio di raggio 5, del colore precedentemente selezionato

Drag: trascinando il dito sulla figura si ottiene una striscia colorata

Wipe: pulisce tutti i disegni




Cambiare la dimensione dei cerchi colorati


GUI



Componenti


  1. Screen > Screen1
    1. Title=PaintPot 2
  2. Layout > HorizontalArrangement > HorizontalArrangement1
    1. Width=Fill parent
  3. User Interface > Button > Button_Red
    1. BackgroundColor=Red
    2. Text=Red
  4. User Interface > Button > Button_Green
    1. BackgroundColor=Green
    2. Text=Green
  5. User Interface > Button > Button_Bue
    1. BackgroundColor=Blue
    2. Text=Blue
    3. TextColor=White
  6. Drawing > Canvas > Canvas1
    1. BackgroundImage=kitty.png
    2. Height=300
    3. Width=Fill parent
  7. Layout > HorizontalArrangement > HorizontalArrangement2
  8. User Interface > Button > Button_Wipe
    1. Text=Wipe
  9. User Interface > Button > Button_Big
    1. Text=Big Dots
  10. User Interface > Button > Button_Small
    1. Text=Small Dots

Componenti non visibili



Blocchi


Tramite i 2 pulsanti Big… e Small… si imposta la variabile dotSize, il raggio dei cerchi.
Le dimensioni sono fissate tramite 2 variabili (costanti) globali.





Nel disegno del cerchio il raggio dipende dalla variabile globale dotSize




Cambiare l’immagine da truccare


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. Title=PaintPot
  2. Layout > HorizontalArrangement > HorizontalArrangement1
  3. User Interface > Button > Button_Red
    1. Text=Red
  4. User Interface > Button > Button_Green
    1. Text=Green
  5. User Interface > Button > Button_Bue
    1. Text=Blue
    2. TextColor=White
  6. Drawing > Canvas > Canvas1
    1. BackgroundImage=kitty.png
    2. Height=300
    3. PaintColor=Red
    4. Width=Fill parent
  7. Layout > HorizontalArrangement > HorizontalArrangement2
  8. User Interface > Button > Button_Take
    1. Text=Take Picture
  9. User Interface > Button > Button_Wipe
    1. Text=Wipe
  10. User Interface > Button > Button_Big
    1. Text=Big Dots
  11. User Interface > Button > Button_Big
    1. Text=Small Dots

Componenti non visibili


  1. Media > Camera > Camera1

Blocchi


Tramite il pulsante Take Picture si aziona la fotocamera

La foto appena scattata diventa lo sfondo di Canvas




Proposte


  1. La dimensione dei cerchi e il loro colore non sono visibile finché non si disegna qualcosa: aggiungi la visualizzazione delle variabili
  2. La dimensione dei cerchi è fissata a 2 valori: aggiungi uno cursore per modificarla in modo continuo

I Have A Dream

http://www.appinventor.org/content/ai2apps/simpleApps/dream


GUI


king.mp3 / malcolmx.mp3


Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. Title=I Have a Dream 1
  2. User Interface > Label > Label1
    1. FontBold=On
    2. FontSize=20
    3. Text=Martin Luther King
  3. User Interface > Button > Button1
    1. Image=mlk.jpg
    2. Text=
  4. User Interface > Label > Label2
    1. Text=Tap the picture to hear the speech

Componenti non visibili


  1. Media > Player > Player1
    1. Source=king.mp3

Blocchi


Quando l’immagine viene toccata parte l’audio con la voce di Martin Luther King




Due immagini e due file audio


GUI



Componenti


  1. Screen > Screen1
    1. AlignHorizontal=Center
    2. BackgroundColor=Black
    3. Title=I Have a Dream 2
  2. User Interface > Label > Label1
    1. FontBold=On
    2. FontSize=20
    3. Text=Martin Luther King and Malcom X
    4. TextColor=White
  3. Layout > HorizontalArrangement > HorizontalArrangement1
  4. User Interface > Button > Button_MLK
    1. Image=mlk152x129.jpg
    2. Text=
  5. User Interface > Button > Button_MX
    1. Image=malcolm152x129.jpg
    2. Text=
  6. User Interface > Label > Label2
    1. Text=Tap the picture to hear the speech
    2. TextColor=White

Componenti non visibili


  1. Media > Player > Player_MLK
    1. Source=king.mp3
  2. Media > Player > Player_MX
    1. Source=malcolmx.mp3

Blocchi


Quando viene toccata l’immagine di Martin Luther King (Malcom X)

  1. Viene fermata la voce di Malcom X (Martin Luther King)
  2. Se l’audio è in esecuzione viene fermato
  3. Se l’audio non è in esecuzione viene fatto partire