Como fazer as animações de imagens

[emersonxmajo]

eu queria saber como eu posso fazer a animação de imagens, eu dei uma olhada no PDF, segui o passo a passo, porém quando coloquei pra executar no viwer s aparecia a imagem parada, eu adicionei um banco de imagem, com 8 fotos, uma diferente da outra só um pouco pra dar a sensação de que a imagem ta se mexendo, enfim e na hora que adiciono as imagens elas não aparecem na tela, só aparece quando eu executo a programação, ai nem dá de arrastar pra montar no lugar certo cada componente

[ViniciusMoraes]

Prezado Emerson,

Sobre a sua dúvida, de como utilizar o objeto ImageList para criar animações em sua aplicação, vou detalhar 2 exemplos de utilização para auxilia-lo no seu desenvolvimento.

Para estes 2 exemplos, foi desenvolvida uma tela bem simples(conforme imagem abaixo) apenas realizar as configurações e procedimentos para ImageList.

ImageList1.png (5.56 KiB) Viewed 6228 times

-----------------------------------------------------------------------------------------------------------------------------
Exemplo 1
O objetivo deste exemplo 1, é utilizar o objeto ImageList, onde iremos alterar a imagem de acordo com o valor de um respectivo Tag Local.
No caso, Quando clicamos no botão "Inverte valor do Motor" as imagens irão alternar entre: Motores Verde(TRUE) e Vermelho(FALSE).

1.1. Configuração do Tag Local que está associado ao Botão "Inverte valor do Motor".

ImageList2.png (32.43 KiB) Viewed 6227 times

1.2. Criar um objeto Botão e em seguida, associar um evento a este Botão.

- O tipo de evento no ObjAction_001 deve ser OnClick
- Categoria de ações como Tags
- Ação como Inverte valor de Tag
- Nome Tag, informar o caminho do respectivo Tag (Neste caso Kernel.Tags.Local.TagLocalGroup_001.TagLocal_Motor).
- Valor 1 = -1(TRUE)
- Valor 2 = 0(FALSE)

ImageList3.png (74.28 KiB) Viewed 6225 times

1.3. Criar um objeto ImageList e adicionar os itens Image

- Em ImageList devemos associar um Tag (Neste caso Kernel.Tags.Local.TagLocalGroup_001.TagLocal_Motor)
. - Em Image_001 associar o arquivo de imagem e o valor(neste exemplo foi associado o valor -1 para "chamar" o motor verde).
. - Em Image_002 associar o arquivo de imagem e o valor(neste exemplo foi associado o valor 0 para chamar o motor vermelho).

ImageList5.png (66.43 KiB) Viewed 6206 times

1.4. Testando...

- Ativar a aplicação "Kernel e Viewer" em modo depuração.
Sempre que realizado um click no botão "Inverte valor do motor" as imagens irão se alterar. Ou seja o motor ficará alternando entre as cores verde e vermelho.

ImageList6.png (3.62 KiB) Viewed 6204 times

Fim do Exemplo 1
-----------------------------------------------------------------------------------------------------------------------------
Exemplo 2

O objetivo deste exemplo é detalhar o procedimento para criar uma animação utilizando um conjunto de imagens, através do recurso de ImageList

2.1. Configuração do Tag Local que está associado ao Botão "Inicia Animação".

ImageList7.png (33.58 KiB) Viewed 6197 times

2.2. Criar um objeto Botão e em seguida, associar um evento a este Botão.

- O tipo de evento no ObjAction_001 deve ser OnClick
- Categoria de ações como Tags
- Ação como Inverte valor de Tag
- Nome Tag, informar o caminho do respectivo Tag (Neste caso Kernel.Tags.Local.TagLocalGroup_001.TagLocal_Animacao).
- Valor 1 = -1(TRUE)
- Valor 2 = 0(FALSE)

ImageList8.png (64.48 KiB) Viewed 6195 times

2.3. Criar um objeto ImageList e adicionar os itens Image (Neste caso, a animação será composta por 8 imagens).

- Em ImageList devemos associar um Tag (Neste caso Kernel.Tags.Local.TagLocalGroup_001.TagLocal_Animacao)
. - Em Image_001, selecionamos a 1º imagem da animação (No caso deste exemplo, o arquivo é movimento_mistura_1.bmp).
. - Em Image_002, selecionamos a 2º imagem da animação (No caso deste exemplo, o arquivo é movimento_mistura_2.bmp).
. - E assim por diante ...
. - Em Image_008, selecionamos a 8º imagem da animação (No caso deste exemplo, o arquivo é movimento_mistura_8.bmp)

ImageList9.png (65.34 KiB) Viewed 6190 times

2.4 Testando...

- Ativar a aplicação "Kernel e Viewer" em modo depuração.
Ao clicar no botão "Inicia Animação" será iniciado a animação. As imagens ficarão se alterando de acordo com o tempo definido no objeto ImageList (Neste caso 100ms).

ImageList10.png (9.69 KiB) Viewed 6189 times

Fim do Exemplo 2
-----------------------------------------------------------------------------------------------------------------------------

Aqui está um link para acessar um vídeo que foi realizado capturando a tela do PC, rodando esta aplicação desenvolvida:
. https://www.loom.com/share/a7b78419de35 ... e9bf6b6871

Recomendo baixar o Kit do material de treinamento do supervisório HIscada Pro, o qual contém estas e outras informações valiosas sobre o HIscada Pro:
. https://www.hitecnologia.com.br/materiais-educativos/



Em caso de dúvidas, permanecemos à disposição.

Email de contato: suporte@hitecnologia.com.br
Telefone: (19) 2139-1700 - Opção 2 (Suporte técnico)

Vinícius Moraes.