A criação de animações no Adobe ImageReady é baseada no uso de camadas. Cada elemento da animação é colocado em sua própria camada. Isso permite alterar a posição e a aparência de um elemento em uma série de quadros usando os comandos e as características da paleta Camadas. Para criar quadros de animação a partir de uma imagem de várias camadas incomum, junto com a gama Camadas, a gama Animação é usada. Com ele, você pode atribuir um tempo de atraso a cada quadro, criar novos quadros, gerar automaticamente estados intermediários com base nas imagens de origem e destino, determinar o número de repetições da animação e muito mais
É preciso enfatizar que, no Adobe Photoshop CS2, você também pode usar a gama de animações sem acessar o programa ImageReady. No entanto, no programa Adobe ImageReady versão CS2 também está localizada animação de gama.
Apresentando a gama de animações
Considere o processo de preparação da animação. E, por exemplo, "reviveremos" o banner que salvamos no arquivo other.psd. Mas, primeiro, execute o programa Adobe ImageReady.
Clique no botão Iniciar na barra de tarefas e selecione o comando Programas - Adobe ImageReady CS (Programas - Adobe ImageReady CS) no menu principal do Windows que aparece. O programa será iniciado e sua janela de trabalho aparecerá no visor.
Como mencionado anteriormente, a animação é preparada usando a paleta Animação.
Selecione o comando de menu Janela - Animação. Na parte inferior da janela pop-up, a Gamut Animation aparece.
Até que um novo documento seja criado no Adobe ImageReady ou um documento existente seja aberto, os controles nessa paleta ficarão inacessíveis. Portanto, abrimos imediatamente o arquivo other.psd.
Selecione o comando de menu Arquivo - Abrir. A caixa de diálogo Abrir arquivo será exibida no visor.
Abra a pasta em que você salvou o arquivo other.psd e selecione-o com um clique do mouse.
Clique no botão Abrir. A caixa de diálogo Abrir arquivo é fechada. A janela do documento other.psd aparece na janela de trabalho do programa Adobe ImageReady.
A preparação da animação no Adobe ImageReady consiste no desenvolvimento de uma sequência de quadros, para cada um dos quais são determinadas uma imagem, tempo de atraso e outras características. O primeiro quadro desta sequência é criado pelo programa automaticamente e já está na gama Animação com uma miniatura e um atalho 1 no canto superior esquerdo. Esse quadro inclui todas as camadas visíveis do desenho ativo.
Na borda inferior da paleta Animação, existem botões que controlam a criação e a reprodução de animações. Esses botões têm uma finalidade subseqüente.
Seleciona opções de loop - abre um menu com o qual você pode escolher o número de repetições da animação. A opção selecionada é exibida à esquerda do ícone. Por padrão, é Forever, ou seja, a animação é reproduzida sem interrupção.
Seleciona o primeiro quadro - Vá para o primeiro quadro da animação.
Seleciona o quadro anterior - Vá para o quadro anterior da animação.
Reproduz / Para a animação - Ativa a reprodução da animação. Após o início da reprodução, a imagem do botão muda, pressionando o que interrompe a reprodução da animação.
Seleciona o próximo quadro - vá para o próximo quadro.
Interpolação (criação de quadros intermediários) - gera automaticamente quadros intermediários entre 2 designados.
Duplica o quadro atual - Duplica o quadro atual.
Exclui os quadros selecionados - Exclui os quadros selecionados.
No canto superior direito da paleta Animação, há um botão Enter que abre o acesso ao menu da paleta. Usando os comandos deste menu, você pode criar, excluir, copiar, colar e selecionar quadros, gerar quadros intermediários, melhorar a animação e realizar outras operações.
O processo de preparação de animação no Adobe ImageReady é muito simples. Na gama Animação, os quadros são criados alternadamente. O conteúdo gráfico de cada quadro é determinado usando a paleta Camadas. Com tudo isso, você pode usar todas as ferramentas de edição disponíveis. Para cada quadro, a duração da exibição é definida, que pode ser alterada em uma ampla faixa. Conforme necessário, entre 2 pelo menos alguns quadros, a máquina gera automaticamente pelo menos um número de quadros intermediários para criar o efeito de uma configuração gradual. Além disso, uma mudança gradual pode ser criada para transparência, efeitos e posição dos objetos. E, no final, é indicado o número de repetições da animação no navegador, que é determinado por um número inteiro ou pode ser contínuo. Na etapa final, a animação é otimizada e salva no formato GIF.
Informações adicionais sobre o tópico
Este artigo fornece informações sobre como criar e editar menus usando o VBA.
Descrição de como criar imagens animadas (botões) usando o editor de gráficos Adobe ImageReady
Este artigo descreve como criar um site usando o editor WYSIWYG, em particular o Microsoft FrontPage 2003
Descrição do design de interface usando a Programação Visual Basic (VBA)
Criando GIFs no ImageReady
Com a animação GIF, um conjunto de quadros de imagem é reproduzido na ordem especificada pelo usuário. Você pode criar vários efeitos de animação para uma página da Web: mover o texto ou os gráficos, desaparecer gradualmente ou aparecer ou mudar de outra maneira.
Para preparar uma animação no ImageReady, você precisa criar muitos quadros de imagem usando a paleta Animação mostrada na Figura 2. 23.127 Em seguida, você pode editar as camadas individuais de cada quadro usando a paleta Camadas, e cada quadro terá seu próprio conjunto exclusivo de configurações na paleta Camadas. E, finalmente, você precisa salvar a sequência de quadros como um único arquivo GIF - agora a animação está pronta para visualização no modo interativo.
Este livro fala sobre a criação de dois efeitos principais de animação: mover um elemento de camada e desaparecer gradualmente ou aparecer. Depois de dominar o básico, você pode começar a criar projetos de animação mais complexos.
Movendo um elemento de imagem usando animação
Crie um efeito de animação para qualquer imagem.
- Abra ou crie uma imagem contendo uma camada de fundo e uma camada transparente com a imagem de um objeto (Fig. 23.128). Como fazer isso é descrito na seção “Mascarando figuras usando o comando Extrair” no Capítulo 5 e nas seções sobre vários métodos para apagar a imagem no final do Capítulo 12.
Fig. 23.127 Paleta de Animação
Fig. 23.128 Camadas de imagem na guia Camadas
Fig. 23.129 Mova um elemento de camada para a borda da janela principal
Fig. 23.130 Arraste um elemento de imagem para a outra borda da janela principal
Fig. 23.131 Quadros de animação originais (iniciais) e copiados (últimos)
- Abra a paleta Animação clicando na guia Animação ou usando o comando Janela> Mostrar animação (Janela> Mostrar paleta de animação).
- Selecione uma camada na paleta Camadas.
- Usando a ferramenta Mover, arraste o elemento de imagem para a borda da janela principal (Fig. 23.129). A miniatura correspondente na paleta Animação será atualizada para refletir a nova posição do elemento.
- Na parte inferior da paleta Animação, clique no botão Duplicar quadro atual. O quadro copiado será destacado.
- A camada selecionada na etapa 3 deve permanecer selecionada.
- Usando a ferramenta Mover (tecla V), arraste um elemento da camada para o outro lado da janela principal (Fig. 23.130). A miniatura atual na paleta Animação será atualizada de acordo (Fig. 23.131). Deixe essa camada selecionada!
- Na paleta Animação, clique no botão Interpolação para criar quadros intermediários entre os já selecionados.
- Na caixa de diálogo Interpolação, coloque a opção Camadas em uma das seguintes posições:
- Todas as camadas (todas as camadas), para copiar pontos de todas as camadas em novos quadros - mesmo as camadas que não foram alteradas (Fig. 23.132). Essa opção também permitirá que você lembre das alterações feitas simultaneamente em duas ou mais camadas,
- Camada selecionada para copiar os pontos somente da camada selecionada para novos quadros. Todas as outras camadas serão ocultadas.
Em seguida, no grupo Parâmetros, marque as caixas de seleção dos parâmetros que serão alterados nos quadros intermediários: Posição, Opacidade e / ou Efeitos.
No menu pop-up Interpolação com, selecione o modo Quadro anterior (adicione quadros intermediários entre o quadro selecionado e o anterior).
Se vários quadros foram selecionados antes da caixa de diálogo Interpolação ser aberta, somente a opção Seleção estará disponível no menu pop-up Interpolação com.
Fig. 23.132 Caixa de diálogo Interpolação
Outras opções de animação
Pressionando a tecla Shift e clicando com o mouse, você pode selecionar vários quadros. Arraste um ou um grupo de quadros para o local desejado.
Para colocar cada quadro em uma camada, selecione Nivelar quadros em camadas no menu da paleta Animação. As camadas anteriores não serão excluídas.
Usando o comando Reverter quadros no menu da paleta Animação, você pode alterar a sequência dos quadros de reprodução. Esta opção é equivalente a reproduzir a animação.
Fig. 23.133 Paleta de animação após adicionar quadros intermediários
Recriando quadros intermediários
Para repetir a operação de criação de quadros intermediários, selecione todos os quadros intermediários criados anteriormente clicando com a tecla Shift pressionada e arraste-os para o botão Excluir. Edite um dos dois quadros restantes e aplique o comando Tween novamente.
Em seguida, indique no campo Quadros a serem adicionados o número de quadros a serem adicionados (de 1 a 100). Quanto maior esse valor, mais suave (sem interrupções) será a animação, mas o tamanho do arquivo e o tempo de download aumentarão.
- Clique no botão OK (Fig. 23.133). Agora você pode visualizar a animação (consulte a seção "Visualizar a animação"). Durante a reprodução, o elemento da camada se move suavemente de uma borda da janela principal para a outra.
Você pode usar uma camada de texto para animação e nem precisa convertê-la em uma representação raster. Você pode criar um efeito de desvanecimento ou desvanecimento, além de mover o texto pela janela da imagem ou usá-lo para outros efeitos de animação.
Se você deseja que a animação seja carregada e reproduzida rapidamente, use tamanhos de quadro pequenos (aproximadamente 200x200 pixels ou menos).
