Mudanças entre as edições de "Segunda Oficina de AppInventor"
Linha 14: | Linha 14: | ||
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. | 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 <b>Title</b> para <b>Piano</b>.[[imagem:screen1.png | + | *Crie um novo projeto no AppInventor com o nome que preferir, mas nas propriedades da tela, mude o <b>Title</b> para <b>Piano</b>.[[imagem:screen1.png]]<br /> |
*Dessa vez, vamos trabalhar com a tela de uma maneira diferente também, ainda nas propriedades, procure por <b>"ScreenOrientation"</b> e altera para <b>Landscape</b>. | *Dessa vez, vamos trabalhar com a tela de uma maneira diferente também, ainda nas propriedades, procure por <b>"ScreenOrientation"</b> e altera para <b>Landscape</b>. | ||
− | *Procure por <b>"BackgroundColor"</b> e altere para <b>black</b>.[[imagem:screen12.png | + | *Procure por <b>"BackgroundColor"</b> e altere para <b>black</b>.[[imagem:screen12.png]]<br /> |
*Vá na aba <b>"Layout"</b> e procure por uma <b>"HorizontalArrangement"</b> e o adicione a tela. | *Vá na aba <b>"Layout"</b> e procure por uma <b>"HorizontalArrangement"</b> e o adicione a tela. | ||
− | *Adicione oito <b>Buttons</b> dentro da <b>"HorizontalArrangement"</b>. (você já os conhece da oficina passada).[[imagem:screen123.png | + | *Adicione oito <b>Buttons</b> dentro da <b>"HorizontalArrangement"</b>. (você já os conhece da oficina passada).[[imagem:screen123.png]]<br /> |
− | *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).[[imagem:screen1234.png | + | *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).[[imagem:screen1234.png]]<br /> |
*Agorqa altere o tamanho de todos os buttons para 45 pixels de largura e 100 pixels de altura. | *Agorqa altere o tamanho de todos os buttons para 45 pixels de largura e 100 pixels de altura. | ||
<br /> | <br /> |
Edição das 10h16min de 16 de agosto de 2014
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!