PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No...

25
PaintPot PaintPot Desenhando no seu Smartphone - Prof. Andrea Garcia

Transcript of PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No...

Page 1: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

PaintPot

PaintPotDesenhando no seu Smartphone - Prof. Andrea Garcia

Page 2: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Configurando o título do App

• No Painel

'Propriedades' da

área de Designer,

altere o título para

'PaintPot'.

• Este nome

aparecerá no topo

da tela de seu

App.

Page 3: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão vermelho

Clique a arraste um novo botão até a área

do viewer

Page 4: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão vermelho

• Altere a cor de

fundo do botão

para cor Red

Page 5: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão vermelho

• Mude o texto do

botão para

“Vermelho"

Page 6: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão azulClique a arraste um novo botão para a

área de viewer

Page 7: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão azul

• Altere a cor de

fundo do botão

para Blue

Page 8: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão azul

• Altere o texto do

botão para “Azul"

Page 9: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão verdeClique a arraste um novo botão para a

área de viewer/visualizador

Page 10: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão verde

• Altere a cor de

fundo do botão

para Green

Page 11: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão verde

• Altere o texto do

botão para

“Verde"

Page 12: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Organizando os botões de

Cores

• Em organização,

selecione Organização

Horizontal, arraste para

viewer

• Configure a opção

height (Largura) para

“Fill Parent / Preencher

Principal”

• Arraste todos os botões

inserindo-os dentro do

retângulo de

organização

Page 13: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Trabalhando com “Desenho e

Animação”

Clique e arraste um objeto Pintura para a área

de Viewer e renomeio-o para "DrawingCanvas"

Page 14: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Configure a opção

width (Altura) do

canvas to "Fill

Parent / Preencher

Principal“ e a opção

height (Largura)

para 320 pixels

Trabalhando com “Desenho e

Animação”

Page 15: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão limpar

Desenhe um novo botão abaixo do Canvas

Page 16: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão Limpar

Renomeie o botão para “Limpar"

Page 17: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Criando o botão limpar

Altere o texto do botão para

“Botão Limpar"

Page 18: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Está quase pronto!

Page 19: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Primeiro, deveremos abrir o Editor de

Blocos. Clique em "Blocks/Blocos"

Vamos desenhar algumas

coisas!

Page 20: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Vamos programar os botões

da escolha das cores!

Page 21: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Vamos desenhar algumas

coisas!

Criaremos este bloco para desejar um

círculo cada vez que for clicado/tocado.

Page 22: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Vamos desejar algumas coisas!

Criamos este bloco para ser desenhada

uma linha cada vez que for acionado

Page 23: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

E está pronto!

• Escolha com o

dedo a cor que

deseja

• Passe o dedo

sobre a tela para

desenhar linhas

• Pegue fotos de

seu phone e use

como plano de

fundo!

Page 24: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Exercícios

1.Você deverá criar

mais 2 botões ao lado

do Limpar(Wipe): Big

dots e Smal dots

(aumentar/diminuir

tamanho dos pontos)

2.Faça o alinhamento

horizontal, como

realizado com os

botões de cores

Page 25: PaintPot - Blog da Prof Andrea Garcia · 2017. 10. 30. · Configurando o título do App • No Painel 'Propriedades' da área de Designer, altere o título para 'PaintPot'. • Este

Exercícios

3.Insira a programação referente aos

tamanhos dos pontos