http://kio4.com/imageng/kio42.png 

|   FOROS     |     Coméntame algo     |     Qué es esto |      

   Inicio

Basic4Android

App inventor 2

  Elastix

Telecomunica.

Cosas de Windows

Web interesantes

  FOROS

App Inventor 2 em português 
Programação telefones celulares com Android 
App Inventor 2 - Juan Antonio Villalpando

- Iniciação Tutorial App Inventor 2 em português -

Voltar para o tutorial português  

____________________________

Desenho e animação 

27.- lona. Desenhar linhas com o dedo na tela.

http://kio4.com/appinventor/imagenes/point.gif p27_dibujo_en_lienzo

Canvas é uma área da tela onde você pode desenhar, desenhar linhas, pontos círculos ...

Vamos criar uma tela e vamos utilizá-lo com o dedo usando várias cores.

- Criamos uma lona, ​​está em desenho e animação / Canvas

- Nós, na largura e altura da tela que enche o recipiente, ou seja, toda a tela.

- Insira um DisposiciónHorizontal e dentro de cinco botões. 
Nós colocamos os botões, como mostrado na figura abaixo.

_________________ 
Desenho

http://kio4.com/appinventor/imagenes/inicio555e.gif

http://kio4.com/appinventor/imagenes/inicio614.gif

_________________ 
Blocos

- Quando você arrastar o dedo pela tela, é desenhada uma linha entre o ponto anterior eo ponto atual.

http://kio4.com/appinventor/imagenes/inicio615.gif

- Quando você pressiona um botão, a cor do traço é definido de acordo com o botão pressionado.

http://kio4.com/appinventor/imagenes/inicio616.gif

_______________________________ 
28.- lona. SpriteImagen.

http://kio4.com/appinventor/imagenes/point.gif p28_spriteimagen_lienzo

Canvas é uma área da tela onde você pode desenhar, desenhar linhas, pontos círculos ... 
SpriteImagen é um desenho deve ir em uma lona e pode se mover.

Vamos realizar este projeto. 
- O Canvas Alto, eu coloquei 400 pixels de altura.
 
- O AnchoDeLínea, deve traçar uma linha, ele vai desenhar com que espessura.
 

- O SpriteImagen vai para os Canvas.
 
- O botão que você definiu com 
propriedade de formato oval.

- Eu coloquei uma imagem com fundo transparente. O fundo transparente que tenho feito on-line: 
http://www.online-image-editor.com/?language=spanish

http://kio4.com/appinventor/imagenes/balon3.gif
balon3.gif

la.mp3

_________________ 
Desenho

http://kio4.com/appinventor/imagenes/inicio555e.gif

http://kio4.com/appinventor/imagenes/inicio61e.gif

_________________ 
Blocos

Nós começamos com este ...

- Quando tocamos a tela, uma cor aleatória, misturando vermelho, verde e azul é criado, de acordo com números aleatórios. 
Cada RGB pode ter um valor de 0 a 255, neste caso, eu comecei a 100 para sair cores mais claras.

- Além disso, um círculo preenchido é desenhada com a cor aleatória obtida antes e também diâmetro aleatória de 1-80.

http://kio4.com/appinventor/imagenes/inicio62e.gif

Adicione isso ...

Quando levantamos o dedo de lona, ​​um som anéis.

http://kio4.com/appinventor/imagenes/inicio63e.gif

Adicione isso ...

Quando você arrasta o dedo sobre a tela uma linha preta 3 pixels de espessura é desenhado.

http://kio4.com/appinventor/imagenes/inicio64e.gif

Se em vez da linha preta que cravos, iria colocar isso ...

http://kio4.com/appinventor/imagenes/inicio65e.gif

Agora, para o SpriteImagen ...

Coloque o dedo na tela e arraste a tela. 
Além disso, uma vez que arrasta 
gira 3 graus.

http://kio4.com/appinventor/imagenes/inicio66e.gif

Quando você pressiona o botão ou girar lado SpriteSprite, o conteúdo da tela é apagada.

http://kio4.com/appinventor/imagenes/inicio67e.gif

 _______________________________ 
29.- lona. SpriteImagen. (II)

http://kio4.com/appinventor/imagenes/point.gif p29_choque_de_imagen

http://kio4.com/appinventor/imagenes/balon3.gif
balon3.gif

la.mp3

sol.mp3

Você pode verificar a largura e altura da tela usando esses blocos que estão na Tela

http://kio4.com/appinventor/imagenes/anchopantalla.gif

http://kio4.com/appinventor/imagenes/inicioanchopantalla.png

Coordenadas de tela. 
O X para a direita: positivo 
A Y para baixo: positivo

_________________ 
Desenho

http://kio4.com/appinventor/imagenes/inicio68e.gif

- Quando você pressiona um botão SpriteImagen (bola) se move para os lados. 
Além das gira 
SpriteImagen (endereço) 5 graus como ele se move.

_________________ 
Blocos

http://kio4.com/appinventor/imagenes/inicio69e.gif

- Quando uma bola vermelha colide com um eixo, e um som salta som 
- Quando o 
SpriteImagen (bola) colide com algo, a bola vermelha muda de direção. 
- Você ouvir outro som.

http://kio4.com/appinventor/imagenes/inicio691e.gif

- Podemos mover o ImageSprite (bola) mover um dedo.

- Quando você clica em Button5, o programa (não funciona enquanto você está emulando, só quando instalado) fecha.

http://kio4.com/appinventor/imagenes/inicio692e.gif

_______________________________ 
30.- lona. SpriteImagen. (III). Propriedade lançado.

http://kio4.com/appinventor/imagenes/point.gif p30_spriteimagen_lanzado

- Quando você coloca o dedo sobre uma imagem e arraste rapidamente, a imagem se move nessa direção e com a velocidade que você tem feito com o dedo.

- Abaixe o barco para o seu computador e, em seguida, enviá-lo para o projeto que estamos fazendo.

http://kio4.com/appinventor/imagenes/barquito2.png

- Para projetar, insira:

- Uma Lona, ocupando a largura e altura do recipiente.

- Nos Canvas, um ImagenSprite. Na sua Foto Imóvel, colocar a imagem do barco.

_________________ 
Desenho

http://kio4.com/appinventor/imagenes/inicio612.gif

_________________ 
Blocos

Deixe os blocos e inseri-las ...

http://kio4.com/appinventor/imagenes/inicio613.gif

- Quando você coloca o dedo sobre a imagem e movê-lo rapidamente, a imagem vai se mover nessa direção e com que velocidade. 
- Quando a imagem desempenha uma borda, saltar.

_______________________________ 
30B.- Sprite transparente. Endereço. Variável Z. Broken.

http://kio4.com/appinventor/imagenes/point.gif p30B_sprite_transparente

- Vamos aprofundar ainda mais a tela e Sprites.

- Neste caso, um Sprite irá mover pela tela, cruzará acima ou abaixo de outros Sprites, repercussão, mudança de endereço, ...

- Insira um Canvas. Nós colocamos Amarillo ColordeFondo. Ajustar a largura e altura para o recipiente. 
- Coloque uma etiqueta.
 
- Insira um DisposiciónHorizontal e dentro de cinco botões.
 
- Dentro do inserto 4 SpriteImagen Canvas.

http://kio4.com/appinventor/imagenes/cuadrado_rojo.pnghttp://kio4.com/appinventor/imagenes/azul.pnghttp://kio4.com/appinventor/imagenes/azul_trans.pnghttp://kio4.com/appinventor/imagenes/verde_trans.png

- A pequena praça é o SpriteImagen1. Neste quadrado superior é marcado com uma linha preta eo direito com um esboço branco. Este Sprite irá mover pela tela. 
Quando sua direção para mover a marca à direita, que é a linha branca. Vamos colocar a sua velocidade a 10. 

- A segunda é a SpriteImagen2, um quadrado azul com um outro centro amarelo 
- O terceiro eo quarto são o central cor transparente, o que significa que, se algo passa, ao passar através da parte branca que você vai ver.

- Como eu indiquei em um exemplo anterior, podemos criar imagens com fundo transparente em linha http://www.online-image-editor.com/?language=spanish

- No projeto, nós colocamos toda a Z variável 2

_________________ 
Desenho

http://kio4.com/appinventor/imagenes/inicio38e.gif

_________________ 
Blocos

http://kio4.com/appinventor/imagenes/inicio39e.gif

http://kio4.com/appinventor/imagenes/inicio39be.gif

Comentários.

- Neste exemplo, a duas quadras até arrastado Lançado e não convivem bem. Vamos bloco Arrastado e pressione o botão direito Disable Bloco de cancelar, e nós habilitá-lo mais tarde.

- As causas Lançado quando colocamos o dedo no SpriteImagen1 e arraste com velocidade, se move na direção em que temos desenhado com a velocidade lenta.

- A Touching borda, quando o SprietImagen1 tocar uma borda da tela, saltos e escreve para o número da etiqueta que tocou borda (1, -1, 3 -3)

- Em Colisão e FinDeColisión quando SpriteImgen1 colide com outros Sprites indicados no rótulo, quando há confrontos também indicado.

- Quando você pressiona o botão 1 no SpriteImagen1 é dirigido à Direcção x = 10, y = 10 tela.

- Quando você pressiona o Key2 a SpriteImaben1 vai para o SpriteImagen2

- Pressione o Priate Button3, a variável Rota é alterada para verdadeiro ou falso, ou seja, se era verdade torna-se falsa e se era verdade torna-se falsa, isso é expresso como Rota = NO (Rota)

- Rota define se quando o Sprite bate o desenho muda de direção ou não. Isto é, "reverso" ou "voltas" é definido.

Z estabelece se um Sprite para acima ou abaixo de outro.

- Se um Sprite tem Z = 2 eo outro é Z = 3, ele vai passar por cima.

- Se um Sprite tem Z = 2 e Z = 1 tem um outro, ele irá passar por baixo.

- Ao colocar SpriteImagen1 para 1 ou 3, nós temos mais ou menos, de preferência, com a imagem de passagem, como nós pusemos em Z = 2 para o outro Sprites projeto.

- Neste exemplo, existem dois Sprites com parte transparente, de modo que o SpriteImagen1, você vai ver quando você passar sob elas.

- Ativar o bloco rígido.

- Por fim, instale o aplicativo e brincar com ele.

_______________________________ 
31. lona. Ao passar o dedo a imagem da tela é desenhada. Máscara.

http://kio4.com/appinventor/imagenes/point.gif p31_mascara

- Nos Canvas é uma imagem que preenche o Canvas. Na tela de início, a imagem é mascarado com branco e alfa 0, 
- Ao passar o dedo sobre a tela que você desenhar a imagem por trás do branco.
 
- Se você só clicar no círculo branco para obter uma parte da imagem.

- Com os botões que colocamos tudo em branco ou apresentar a imagem. 
- Para fazê-lo novamente pressione o botão "Todo branco" .

- Nesse código presta atenção a como o branco (255, 255, 255), mais um quarto número é criado, o 0, o que define a saturação alfa ou cor, se não colocar este número não funciona assim queremos.

_________________ 
Desenho

http://kio4.com/appinventor/imagenes/inicio617.gif

http://kio4.com/appinventor/imagenes/pr.gif

Quando tocamos a tela um círculo de raio 25 é desenhado. 
Quando arrastar o dedo sobre a tela uma linha 40 é desenhado de espessura.

_________________ 
Blocos

http://kio4.com/appinventor/imagenes/inicio618.gif

Quando o visor for iniciado, o processo torna-se branco. 
Quando o Botão1 é pressionado, o processo torna-se branco. 
Quando você pressiona Botão2, branco é removida ea imagem aparece.

Processo Branco, desenhe um grande círculo que enche o ecrã fica branco e, em seguida, coloca a cor da tinta branca, mas com alpha 0.

Alpha 0 é a saturação de cor.

http://kio4.com/appinventor/imagenes/inicio619.gif

_______________________________ 
32.- Desenho de uma função.

http://kio4.com/appinventor/imagenes/point.gif p32_dibujar_funcion

É sobre o desenho de um seno, cosseno e parábola.

- Para desenhar a tela é usado. Nós colocamos a sua largura propriedade: Defina o recipiente eo seu Alto do imóvel: 400 pixels

_________________ 
Desenho

http://kio4.com/appinventor/imagenes/inicio-61e.gif

http://kio4.com/appinventor/imagenes/inicio-63e.gif

_________________ 
Blocos

http://kio4.com/appinventor/imagenes/inicio-62e.gif

Comentários.

Temos de fazer uma mudança básica:

---------------------- 360 AnchodePantalla

--------------------- Número X

X = AnchodePantalla * Número / 360

Isto é, adaptar o valor da variável X para o jogo 360 AnchodePantalla.

- Multiplicar por 100 e que da mama é menos do que ou igual a 1, se não têm o sinal de alta terão valores muito pequenos.

- Multiplicar por -100, como o dimensionamento da tela vai para cima e para baixo, não de baixo para cima, ou seja, enquanto descemos maior a varible Y. (Nós também poderíamos ter utilzado subtração em vez de disso, como é, em seguida, na parábola)

- Adicionamos 220 para o centro do sinal coincide com o centro da tela.

- Demora um tempo para desenhar os sinais.

- Devemos estudar a escala horizontal e vertical do sinal que nós queremos ver.

- Outra forma seria a utilização de pequenas linhas em vez de pontos com este bloco:

http://kio4.com/appinventor/imagenes/inicio-64e.gif
_____

Aqui está outro exemplo de funções de desenho.

CodingMathEpisode2 ( Fonte )

_______________________________ 
33.- Paddle. E SpriteImagen bola.

http://kio4.com/appinventor/imagenes/point.gif p33_tenis

A bola se move por saltar fora de seus eixos Canvas.

_________________ 
Desenho

http://kio4.com/appinventor/imagenes/inicio555e.gif

http://kio4.com/appinventor/imagenes/inicio694e.gif

_________________ 
Blocos

http://kio4.com/appinventor/imagenes/inicio695e.gif

http://kio4.com/appinventor/imagenes/inicio697e.gif

_____________________________________

Truque

Se você quer a tela preenche a parte superior da tela, desmarque e verificar a propriedade Screen1 Rolling in the ecrã e coloca o Alto Conjunto de propriedades do recipiente na lona

__________________________________

- Meu email:
juana1991@yahoo.com
- Quién soy. - Política de cookies. Textos e imagens propriedade do autor:
© Juan A. Villalpando
Copiando informações ou imagens não é permitida.
Nós usamos próprios e de terceiros que entre outras coisas coletar dados sobre seus hábitos de navegação e executar a análise usando os nossos cookies do site.
Se você continuar a navegar considerar a aceitação de seu uso. Acepto    Mais informação