Ent�o vejamos como desenvolver esse projeto:

  � Abra o App Inventor acessando o link:

  App Inventor 2

  � Na tela apresentada, clique no Bot�o Create Apps!, em seguida entre com sua conta.
  � Crie um novo projeto com o nome: RotacionandoImagem.

  Agora vamos alterar algumas propriedades da tela principal (Screen1).

  Alterando as propriedades da Tela Principal:

  � Clique em Screen1 na se��o Componentes.
  � AlinhamentoHorizontal: Centro: 3.
  � CorDeFundo: para uma cor customizada qualquer clicando na op��o Custom.
  � PrimaryColor: Vermelho.
  � Theme: selecione a op��o Dark.
  � T�tulo: Rotacionando uma Imagem.

  Iremos agora inserir os componentes do nosso projeto, ou seja, o Deslizador, a Legenda e a Imagem na seguinte ordem:

  � 1 Deslizador.
  � 1 Legenda.
  � 1 Imagem.

  Agora vamos alterar algumas propriedades dos componentes:

  Alterando as propriedades do Deslizador:

  � Nome: desGraus.
  � Cor�Esquerda: Azul.
  � Cor�Direita: Vermelho.
  � Largura: selecione a op��o percentagem e digite: 90.
  � ValorM�ximo: 360.
  � ValorM�nimo: 0.
  � Posi��oDoIndicador: 0.

  Alterando as propriedades da Legenda:

  � Nome: legValor.
  � FonteNegrito: marque o checkbox para alterar o texto para negrito.
  � TamanhDaFonte: 20.
  � Largura: selecione a op��o percentagem e digite: 25.
  � Texto: digite: 0 graus.
  � AlinhamentoDoTexto: Centro: 1.
  � CorDeTexto: Azul.

  Alterando as propriedades da Imagem:

  � Nome: imgFoto.
  � Altura: selecione a op��o percentagem e digite: 50.
  � Largura: selecione a op��o percentagem e digite: 50.
  � Imagem: selecione qualquer imagem de sua prefer�ncia.

  Feito isso, o seu projeto dever� ficar igual ao da Figura 15.1:

Figura 15.1 � Projeto com os componentes
inseridos e configurados.

  Agora vamos criar os c�digos dos componentes e tornar nosso projeto funcional executando a tarefa para o qual foi designado.

  Mas antes de criarmos os blocos dos componentes, precisamos criar uma vari�vel global para armazenar o valor referente aos graus de rota��o da imagem.

  Vamos l� ent�o:

  C�digo para a vari�vel:

  � Na se��o Blocos, clique na categoria Vari�veis.
  � Arraste o primeiro bloco para a �rea em branco.
  � Altere o r�tulo nome para: graus (essa ser� a vari�vel utilizada para armazenar o valor dos graus de rota��o da imagem).
  � Feito isso, clique na categoria Matem�tica e arraste o primeiro bloco para o final do bloco existente. Mantenha o valor 0 (zero).

  Isso significa que quando o aplicativo for executado essa vari�vel ser� criada com o valor 0 (zero).

  Veja na Figura 15.2 como dever� ficar o seu c�digo:

Figura 15.2 � Inicializa��o da vari�vel.

  Esse bloco faz o seguinte:

  Quando o projeto for executado ser� criada uma vari�vel global graus com valor inicial 0 (zero).

  Agora vamos criar os c�digos dos componentes:

  Dos componentes utilizados no projeto o �nico que receber� c�digo � o Deslizador, os outros s�o apenas informativos.

  Ent�o vejamos:

  C�digo para o Deslizador:

  Vejamos como criar o c�digo desse componente:

  � Na tela Blocos, clique no componente desGraus e arraste o primeiro bloco para a �rea em branco.
  � Clique na categoria Vari�veis, arraste o terceiro bloco e encaixe na lacuna �fazer� desse bloco.
  � Clique na pequena seta e altere a op��o para: global graus.
  � Clique na categoria Matem�tica, arraste o bloco �arredondar� e encaixe no final do �ltimo bloco colocado.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco azul.
  � Clique na pequena seta e altere a op��o para: posi��oDoIndicador.
  � Clique no componente legValor, arraste o segundo bloco e encaixe abaixo do bloco vermelho.
  � Altere a op��o CorDeFundo para: Texto.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco vermelho.
  � Clique na segunda seta e selecione a op��o: Texto.
  � Clique na categoria Texto, arraste o segundo bloco e encaixe no final do bloco verde.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe na primeira lacuna desse bloco.
  � Clique na pequena seta e selecione a op��o para: global graus.
  � Clique na categoria Texto, arraste o primeiro bloco e encaixe na segunda lacuna do bloco lil�s. Escreva na lacuna entre as aspas: graus.
  � Clique no componente imgFoto, arraste o segundo bloco e encaixe abaixo do bloco verde.
  � Clique na pequena seta e selecione a op��o para: RotationAngle.
  � Clique na categoria Vari�veis, arraste o segundo bloco e encaixe no final do bloco verde.
  � Clique na pequena seta e selecione a op��o para: global graus.

  Feito isso, seu projeto dever� ficar igual ao da Figura 15.3:

Figura 15.3 � C�digo final do Deslizador.

  Esse bloco nos diz o seguinte:

  Quando a posi��o do Deslizador for alterada, armazene na vari�vel global graus o valor inteiro (ou arredondado) selecionado no Deslizador pelo usu�rio. Em seguida, mostre esse valor (global graus) na legenda legValor adicionado do texto �graus�. Finalmente, gire a imagem com o grau que for selecionado no Deslizador.

  Dessa forma, conclu�mos o nosso projeto. Teste seu projeto em um dispositivo real e confira o resultado.

  Voc� pode baixar o c�digo completo desse projeto acessando os links:

  RotacionandoImagem.aia

  RotacionandoImagem.apk