DSA/CPTEC/INPE

27 de abril de 2016

Versão 1.0

Animação de Imagens

Manual do usuário

1

Animação de Imagens

Manual do usuário

A nova ferramenta de animação de imagens do INPE/CPTEC/DSA é

acessível por qualquer dispositivo, com um layout que se adapta às necessidades

do aparelho em uso.

FIGURA 1-FERRAMENTA ANIMAÇÃO DE IMAGENS

2

1. Animação Rápida

2. Ferramentas do menu

FIGURA 3-FERRAMENTAS DO MENU

3. Fontes

Nesta área do menu, é possível escolher a fonte e o produto que

deseja adicionar à animação.

FIGURA 2-ANIMAÇÃO RÁPIDA

3

FIGURA 4-FONTE DO PRODUTO

Ao clicar em uma fonte, todos os produtos disponíveis para animação

serão mostrados. Para ver mais produtos, é necessário navegar entre as

páginas clicando nos números ou setas na parte de baixo do menu.

4. Controles

Neste menu são encontradas as ferramentas para iniciar a animação,

controlar a direção e navegar entre as imagens disponíveis.

FIGURA 5-CONTROLE DE DIREÇÃO E NAVEGAÇÃO DAS IMAGENS

PRIMEIRA: Mostra a primeira imagem disponível para animação.

ANTERIOR: Mostra a imagem anterior à que está visível no momento.

ANIMAR REVERSO: Inicia a animação em modo reverso, ou seja, da última

para a primeira imagem..

PAUSE: Para a animação.

4

ANIMAR: Inicia a animação em modo normal, ou seja, ´da primeira à última

imagem.

PRÓXIMA: Mostra a imagem seguinte à que está visível no momento.

ÚLTIMA: Mostra a última imagem disponível para animação.

VAI e VOLTA: A animação irá chegar à primeira e à última imagem e começar

a animar para o lado contrário.

5. Velocidade

Nesse menu é possível controlar a velocidade de transição entre as

imagens, para tanto, são dispostas 10 velocidades, da mais lenta à mais

rápida.

FIGURA 6-CONTROLE DE VELOCIDADE E TRANSIÇÃO DAS IMAGENS

5

6. Zoom

Neste menu, controla-se a proximidade da imagem na tela, pode aproximar

até 4 vezes (4x) ou afastar em até dez vezes (0.1x).

FIGURA 7- CONTROLE DE ZOOM

7. Imagens

Neste menu é possível controlar a quantidade de imagens que será animada.

Por padrão, são escolhidas três imagens, mas é possível animar de 3 a 20 imagens.

FIGURA 8-CONTROLE DE QUANTIDADE DE IMAGENS

6

8. Selecionar Imagens

Neste menu é possível remover uma imagem da animação, e também a imagem

de todos os produtos e todas as vistas.

FIGURA 9-REMOVER IMAGENS SELECIONADAS

9. Vistas

São possibilidades de disposição das imagens na tela. É possível adicionar até

quatro vistas diferentes e independentes, selecionando produtos para animar em

cada uma delas.

FIGURA 10-ADIÇÃO DE VISTAS

7

10. Configurações

Com a opção configurações do menu é possível fazer upload de uma

imagem, e também o download da imagem selecionada.

11. Tela cheia

Consiste na visualização da animação em tela cheia. Não está presente para

dispositivos móveis.

FIGURA 12-TELA CHEIA

12. Ajuda

Acesso ao manual da Ferramenta

FIGURA 13-AJUDA

FIGURA 11- FERRAMENTA DE CONFIGURAÇÕES

8

13. Ferramentas de Imagem

FIGURA 14-FERRAMENTAS DE IMAGEM

As Ferramentas de Imagem permitem controlar a exibição das imagens nas

vistas, bem como saber o nome e o horário do produto que está em animação.

Para acessá-lo, basta clicar no botão VER IMAGENS, localizado abaixo do

menu principal.

FIGURA 15-VER IMAGENS MENU PRINCIPAL

14. Remover Produto

Para remover um produto da animação, basta clicar no botão REMOVER, ao

lado do nome do produto.

9

FIGURA 16-REMOVER PRODUTO

Para trocar a ordem da exibição dos produtos, basta clicar no nome do

produto e arrastar para cima ou para baixo, dentro da tela. Produtos que estejam na

mesma camada aparecem na sequência em que são exibidos no menu

FIGURA 17-TROCA DE POSIÇÃO DAS IMAGENS

10

As vistas possíveis estão localizadas abaixo do nome do produto,

identificadas pelo número.

FIGURA 18-V ISTAS

Ao clicar no número da vista, é possível adicionar ou remover o produto da

mesma. Quando o produto está em animação na vista, o número dela fica VERDE,

ao clicar, o número passará para a cor VERMELHA.

Ex: O produto “AMS Retangular Colorida CH4 Alta Res”, presente na imagem

abaixo, está sendo animado na vista de número 2, mas não está sendo animado

nas vistas 1,3 e 4.

11

FIGURA 19-NÚMERO DE VISTAS

Ao lado do número da vista, quando o produto está em animação nela,

aparece um controle de opacidade (transparência). Caso opte por colocar mais de

um produto em animação na mesma vista, poderá controlar a opacidade de cada um

deles de forma a compor uma imagem.

FIGURA 20-CONTROLE DE OPACIDADE

12

O mesmo produto pode estar presente em todas as vistas disponíveis de

forma simultânea.

15. Adicionando e removendo vistas e controlando sua disposição

FIGURA 21-ANIMAÇÃO DE IMAGENS COM VÁRIAS VISTAS

Uma das novidades da animação de imagens é o trabalho com várias vistas,

através da qual as imagens podem ser exibidas lado a lado, para comparação.

Para inserir uma nova vista, vá ao menu VISTAS e clique em ADICIONAR

VISTA.

FIGURA 22-ADICIONAR NOVA VISTA

Para remover uma vista, clique em REMOVER VISTA

13

FIGURA 23-REMOVER VISTA

Existem 5 possibilidades de disposição de vista, alinhados verticalmente,

alinhados horizontalmente, alinhados em pares verticalmente, alinhados em pares

horizontalmente ou alinhado em quadros, respectivamente nas imagens abaixo.

14

FIGURA 24-ALINHAMENTO DE VISTAS

O limite atual de vistas simultâneas é 4, e o mínimo é 1.

16. Controle de vistas

Os controles das vistas estão situados no canto inferior esquerdo da tela e

atuam nas imagens presentes na própria vista.

FIGURA 25-CONTROLE DE VISTAS

15

Acima das ferramentas está o horário das imagens que estão sendo

animadas no momento. Os horários seguem a ordem de exibição das vistas, sendo

que o primeiro refere-se à imagem que está acima e assim por diante.

FIGURA 26-HORÁRIO DAS IMAGENS

Ao lado do logotipo do CPTEC está o número da vista, mesmo

número utilizado no menu de ferramentas de imagem para exibir ou ocultar o

produto na vista.

FIGURA 27-NUMERO DA VISTA

A opção TRAVAR VISTA serve para que as alterações de zoom, e arrastar e

soltar (drag and drop) não se apliquem às imagens que estão naquela camada.

Dessa forma, é possível posicionar as imagens em pontos diferentes, de acordo com

o foco da camada.

FIGURA 28-TRAVAR VISTA

A opção BAIXAR IMAGEM efetua download da vista atual. Ela faz o

download apenas da imagem que está sendo mostrada, não da animação.

FIGURA 29-BAIXAR IMAGEM