Segunda Oficina de AppInventor

Nessa oficina iremos criar uma especie de piano, porém os alunos podem escolher os sons que serão reproduzidos. Esse roteiro é mais extenso que o anterior porém também dará resultados melhores e trara novas noções do AppInventor e das possibilidades que temos trabalhando com ele. Vamos começar então.

Componentes utilizados

Nessa oficina usaremos uma quantidade mais significativa de objetos do Pallet, vamos usar:

• Uma “HorizontalArrangement”, encontrado na guia de Layout.
• Oito "Buttons", encontrados na guia de User Interfaces.
• Oito "Sounds", encontrados na guia media.
• Uma Label encontrada Junto aos Buttons.
• Sete arquivos MP3 com as notas musicais Dó, Ré, Mi, Fá, Sol, Lá e Sí.

Começando a criação - (Adicione os componentes da página conforme o necessário)

Como dito na oficina anterior, essa área pode ser mais moldada de aluno a aluno, por tanto se sinta livre para fazer algumas alterações, desde que isso não prejudique nada no contexto geral do projeto.

• Crie um novo projeto no AppInventor com o nome que preferir, mas nas propriedades da tela, mude o Title para Piano.
  
• Dessa vez, vamos trabalhar com a tela de uma maneira diferente também, ainda nas propriedades, procure por "ScreenOrientation" e altera para Landscape.
• Procure por "BackgroundColor" e altere para black.
  
• Vá na aba "Layout" e procure por uma "HorizontalArrangement" e o adicione a tela.
• Adicione oito Buttons dentro da "HorizontalArrangement". (você já os conhece da oficina passada).
  
• Mude o texto dos Botões para “Dó”, “Ré”, “Mi”, “Fa”, “Sol”, “Lá”, “si” e “Dó”, respectivamente.(Você também fez algo similar na oficina passada).
  
• Agorqa altere o tamanho de todos os buttons para 45 pixels de largura e 100 pixels de altura.

Se Você Fez tudo como foi indicado e entendeu a maneira como tudo deveria ser feito, deve ter um resultado similar a esse:

• Agora adicione oito Sound's a tela (Mesmo processo da oficina passada).
  
• faça o upload dos arquivos MP3.
• Adicione uma Label a baixo dos botões, aumente a tamanho da letra para 50 e mude a cor do texto para “White”.
  

E finalmente Vamos ao Editor de Blocos.

Editor de Blocos

Dessa vez, vamos deixar você mais por conta, procure por todas as guias novas que apareceram até que consigas criar a seguinte lista de botões:

Salve o projeto e teste em sua máquina virtual!