Como criar animações para ilustradores e sprites. Criação de animações no Illustrator

Olá! Hoje vou tentar descrever as capacidades do programa Ilustrador da Adobe comparando-o com as capacidades do flush. Esta não será uma análise global do programa por ossos, mas sim uma descrição de alguns chips interessantes que descobri neste programa. Coletei as informações peça por peça enquanto as estudava para colocar tudo em um post. Devo admitir desde já que não sou um usuário superexperiente de ilustrador, só há seis meses que o utilizo para desenhar (antes pintava tudo em flash). Muitas pessoas reclamam que o ilustrador é complicado, nem sempre intuitivamente claro. Até certo ponto, concordo que, após a descarga, este programa é difícil. Mas o principal aqui não é parar, mas continuar estudando. E depois de algumas semanas, surge o pensamento, como eu poderia viver sem ele antes!

Então, o que gostei no ilustrador, e o que descobri por mim mesmo que não está no Flash.
1. Vou começar com o mais simples, mas ao mesmo tempo necessário. Tente organizar os objetos em um círculo em um flash. Era anteriormente Ferramenta Deco, mas foi removido, aparentemente considerado desnecessário. Decidimos que seria mais divertido fazê-lo com canetas. O Illustrator tem esta função: Efeito - Distorcer e Transformar - Transformar.

Tudo é rápido e simples, os valores (distância entre objetos, número de cópias) são definidos por nós mesmos nas configurações.

2. Zig-zag

Ainda mais simples, mas útil. Pode parecer uma bagatela, mas num piscar de olhos é preciso desenhar à mão, no ilustrador é questão de segundos.

3. Deformação de objetos (Warp)

Não há nada parecido com isso em um flash. No exemplo abaixo, mostrei apenas 2 maneiras de deformar formas simples (Effect - Warp - Arc / Fish). Na verdade, existem 15 deles. última versão programas.

4. Arredondamento automático de cantos (cantos arredondados)

Você pode fazer isso manualmente: em um objeto gráfico, quando selecionado, um ponto branco e um símbolo de linha arredondada aparecem no canto (em todos os olhos). Puxamos com o mouse, ajustamos ao seu gosto.

Mas isso se aplica apenas a formas, com uma linha de lápis um pouco diferente - aplique o efeito de arredondamento ( Efeito - Estilizar - Cantos arredondados) Na saída, obtemos o mesmo resultado.

5. Tornar áspero (engrossar)

O efeito é aplicado a formulários simples (Efeito - Distorcer e Transformar - Tornar áspero) Na saída, obtemos algo que se assemelha a um modelo 3D de polígonos baixos. Na minha opinião, legal :) E o mais importante - muito simples.

6. Franzir e inflar(Puxando e inchaço)
Um exemplo na imagem abaixo:

7. Expansão do formulário (caminho de deslocamento)

O Flash tem uma função Expand Fill; ele não funciona com linhas de lápis, ao contrário do ilustrador.

8. Pincéis (pincel artístico, pincel de padrão, pincel de dispersão)
Veja a imagem abaixo com exemplos:

9. Pincel de textura

O Illustrator também apresenta muitos pincéis de textura sobre os quais escrevi e como eles apareceram em nova versão rubor -. Foi notado que o uso de pincéis no Adobe Animate é extremamente lento. É isso:(

10. Não tenho certeza se esse é um truque simples, mas quero me concentrar em um pincel com um nome engraçado. BlobEscovar... Localizado na caixa de ferramentas, um pincel muito bom de usar. Ele tem um monte de configurações, eu gosto mais do que o normal. É difícil explicar em palavras sobre seus benefícios, é melhor tentar uma vez.

10.Dividir para grade

Também é útil a função Dividir em Grade (Objeto-Caminho-Dividir em Grade), que permite cortar uma forma em segmentos iguais. O que isso nos lembra? É isso mesmo - as janelas estão em um prédio alto. Quanto a mim, uma coisa legal para desenhar, por exemplo, paisagens urbanas;)

Outra ferramenta útil introduzida no Illustrator, provavelmente desde seu primeiro lançamento. Com ele, você pode criar, por exemplo, texturas de madeira:

12. Mover (direita - Transformar - Mover)

Deslocamento de um objeto por uma distância especificada. Se desejar, você pode criar imediatamente uma cópia que será colocada na distância desejada do objeto selecionado horizontal / ou verticalmente. Uma versão anterior do Flash tinha um plugin que esta função... Infelizmente, não me lembro do nome.

É muito conveniente criar padrões contínuos no Illustrator ( Object-Pattern-Make) Lembro-me de como fui freneticamente sofisticado no flash com a criação. Na versão ilustradora do CC 2015, tudo é automatizado, várias configurações ajudarão a moldar o padrão em dezenas de variações, tendo apenas alguns elementos gráficos à mão. Nas versões anteriores do programa, tudo tinha que ser feito manualmente, como no Flash até agora.

(Nota - um padrão pode ser transformado em um objeto vetorial editável usando a função de análise ( Objeto - Expandir Aparência).

14. Mosaico de Objetos

Criação de uma paleta de cores baseada em uma imagem existente. Nós importamos a imagem que gostamos para o ill (Open), então Objeto - Criar Mosaico de Objetos... Nas configurações, especificamos a frequência de divisão em altura e largura.

E na saída obtemos:

15.Blend

Usado para criar gradientes. Você pode criar transições passo a passo, como, por exemplo, na imagem. Não vou dizer que o uso com frequência, mas pode ser útil para alguém. Acho que pode ser usado para criar imagens de fundo simples.

Além disso, a ferramenta pode ser usada para clonar objetos. Coloque dois objetos distantes um do outro e aplique Blend Options, escolha o número de etapas (o número de objetos clonados).

16. Ferramenta Construir Forma Ferramenta. Uma coisa muito útil para trabalhar com primitivos. Num piscar de olhos, pareceu-me menos conveniente.

Segurando Alt e clicando nos segmentos selecionados - exclua os segmentos. Se apenas arrastarmos o mouse sobre várias áreas selecionadas - conexões.

Add-on é uma ferramenta que ajuda a cortar, unir automaticamente, etc. formulários destacados. Quanto a mim não é muito conveniente, uso com mais frequência ConstruirFormaFerramenta.

(pranchetas)

18. Painel de Ferramentas Personalizadas

A capacidade de criar sua própria barra de ferramentas, descartando as desnecessárias e selecionar apenas aquelas que você usa.

No Flash, pranchetas, ou seja, cenas ( Cena 1,2,3 ..) estão localizados separadamente e você precisa alternar entre eles (Shift + F2). No Illustrator, você pode colocá-los todos na frente de seus olhos. É conveniente quando você faz várias versões do mesmo desenho, de modo que todas as opções estejam diante de seus olhos para comparação.

19. Isometria com Estilos Gráficos

E o último é criar isometria sem usá-la em 1 clique (ou mais precisamente, em 3 cliques, porque temos 3 lados;) usando estilos gráficos ( Estilos Gráficos) Como isso é feito, assinarei na próxima vez.

O Illustrator tem em comum com o flash - a capacidade de salvar um objeto em um símbolo e, com a mesma facilidade, esse símbolo pode ser transferido para um flash (abrir em um arquivo flash .ai, por Importar - Importar para o estágio).
Um símbolo no Illustrator tem as mesmas propriedades do Flash.
E no final vou escrever que no ilustrador, na minha opinião, é inferior ao flash. Sim, sim, e existe tal coisa. E esta é a ferramenta de preenchimento ( Balde de tinta) Não importa o quanto eu tente me acostumar com isso, é mais conveniente no flash.
Se minhas notas se tornaram úteis para você ou se você deseja acrescentar algo de você mesmo - seja bem-vindo nos comentários! Boa sorte a todos;)

Recentemente, vários tipos de gráficos SVG (Scalable Vector Graphics) se tornaram muito populares em sites e aplicativos. Isso se deve ao fato de que todos navegadores mais recentes já suporta este formato. Aqui está uma informação sobre o suporte do navegador SVG.

Este artigo discute exemplo mais simples Animações SVG vetor em ajuda pulmonar Plugin Jquery Pintor de linha preguiçosa.

Fonte

Para completar e compreender totalmente esta tarefa, é desejável ter conhecimento básico de HTML, CSS, Jquery, mas não é necessário se você deseja apenas animar SVG). Vamos começar!

E assim, as etapas que precisamos seguir:

Crie uma estrutura de arquivo correta
Baixe e conecte o plugin
Desenhe Cool Outline Art no Adobe Illustrator
Converta nossa imagem para Lazy Line Converter
Cole o código resultante em main.js
Adicione um pouco de CSS a gosto

1. Crie a estrutura de arquivo correta
O serviço Initializr nos ajudará com isso, onde você precisa selecionar os parâmetros como na imagem abaixo.

H5BP clássico (HTML5 Boiler Plate)
Sem modelo
Apenas HTML5 Shiv
Minificado
Aulas de IE
Moldura cromada
Em seguida, clique em Baixar!

2. Baixe e conecte o plugin

Como o initializr vem com a biblioteca jquery mais recente, do arquivo que precisamos baixar do repositório do projeto Lazy Line Painter, só precisamos transferir 2 arquivos para o nosso projeto. O primeiro é ‘jquery.lazylinepainter-1.1.min.js’ (a versão do plugin pode ser diferente) e está localizado na raiz da pasta resultante. O segundo é example / js / vendor / raphael-min.js.

Colocamos esses 2 arquivos na pasta js. E nós os conectamos ao nosso index.html antes de main.js assim:

3. Desenhe uma imagem de contorno legal no Adobe Illustrator

Desenhe nossa imagem de contorno no Illustrator (a maneira mais fácil de fazer isso é com a ferramenta Pen)
É necessário que os contornos do nosso desenho não se fechem, pois um começo e um fim são necessários para o nosso efeito.
Não deve haver preenchimentos
Tamanho máximo do arquivo - 1000 × 1000 px, 40 kb
Cortar para objeto> Pranchetas> Ajustar aos limites das pranchetas
Salvar no formato SVG (configurações padrão de salvamento servirão)

Por exemplo, você pode usar os ícones do anexo.

4. Converta nossa imagem para conversor de linha preguiçosa
Basta arrastar seu ícone para a caixa abaixo.
A espessura, a cor do contorno e a velocidade da animação podem ser alteradas no próprio código que aparecerá após a conversão!

5. Cole o código resultante em main.js
Agora, apenas colamos o código resultante em um arquivo main.js vazio
Parâmetros:
strokeWidth - espessura do contorno
strokeColor - a cor do contorno
Você também pode alterar a velocidade de desenho de cada vetor, alterando os valores do parâmetro de duração (por padrão 600)

6. Adicione um pouco de CSS a gosto
Remova o parágrafo de index.html

Olá Mundo! Este é o HTML5 Boilerplate.

E ao invés disso, inserimos um bloco no qual nossa animação acontecerá.

em seguida, adicione CSS ao arquivo main.css para uma aparência mais agradável:

Corpo (plano de fundo: # F3B71C;) #icons (posição: fixo; superior: 50%; esquerda: 50%; margem: -300px 0 0 -400px;)

salvar todos os arquivos.
Agora, abra index.html em um navegador moderno e aproveite o efeito.

P.S. quando executado em uma máquina local, o início da animação pode ser atrasado por alguns segundos.

Otimizando gráficos da web

As informações gráficas são transmitidas muito mais lentamente do que as informações de texto, e o tempo de carregamento das imagens é proporcional ao tamanho dos arquivos gráficos. portanto carregamento rápido As páginas da Web assumem um tamanho pequeno de gráficos incorporados, o que é obtido por meio de sua otimização. A otimização da imagem é entendida como sua transformação, que garante o tamanho mínimo do arquivo, mantendo o necessário este caso qualidade de imagem, que é alcançada principalmente pela redução do número de cores em imagens gráficas, usando formatos de arquivo compactados e especiais e otimizando as configurações de compactação para fragmentos individuais de imagens.

O Illustrator possui ferramentas de otimização de imagem integradas que fornecem um processo de otimização rápido e eficiente por meio de vários métodos de visualização. Antevisão dá uma ideia bastante precisa de como a imagem otimizada ficará em tempo real, o que ajuda a avaliar o resultado da otimização e selecionar com sucesso as configurações necessárias. E você pode otimizar as imagens criadas diretamente no Illustrator e outros, por exemplo, fotografias que deveriam ser postadas em um site.

Os parâmetros de otimização são definidos na janela Salvar para Rede(Salvar para Web) chamado pelo comando de mesmo nome do menu Arquivo(Arquivo). O programa oferece o uso de um dos quatro modos de visualização, mas para avaliar a qualidade da otimização a melhor maneira encaixe dois:

2-Up(duas opções) - visualização simultânea do original e da imagem otimizada de acordo com as configurações especificadas (Fig. 1);
4-Up(quatro opções) - neste modo, a área de visualização é dividida em quatro janelas (Fig. 2) para exibir a imagem original e três versões da otimizada: a primeira versão é criada com base nos valores de otimização definidos, e a outra dois são variantes das configurações de otimização atuais.

Ambos os modos permitem que você economize significativamente na busca pela melhor opção de otimização, uma vez que eliminam a necessidade de salvar imagens de configurações diferentes otimização e sua subsequente comparação visual. Além disso, é possível avaliar não só a qualidade da imagem otimizada, mas também seu tamanho e tempo de carregamento para diferentes opções de conexão. Para comparação, o modo mais conveniente é 4-Up (quatro opções), que permite avaliar visualmente o efeito da compressão ou redução da paleta na qualidade e tamanho da imagem e, finalmente, determinar os melhores parâmetros de otimização.

O Illustrator permite que você otimize gráficos da web em formatos não apenas GIF, JPG, PNG-8 e PNG-24, mas também em SWF e SVG. Imagens indexadas com uma pequena quantidade de as cores são salvas no formato GIF. Para salvar imagens totalmente coloridas e em tons de cinza - fotografias e gráficos ricos em cores, como preenchimentos de gradiente - use Formato JPG... Para imagens coloridas com áreas transparentes, aplique Formato PNG, que permite salvar imagens indexadas e coloridas, enquanto no formato PNG-8 o número máximo possível de cores de uma imagem otimizada é 256, enquanto no formato PNG-24 uma imagem pode ter milhões de cores e, portanto, parece Como Formato JPEG... O PNG-24 difere do JPEG porque o método de compactação usado para otimizar as imagens PNG-24 não resulta em perda de qualidade, mas aumenta o tamanho do arquivo. Os formatos SVG e SWF combinam gráficos, texto e componentes interativos e também podem ser otimizados.

Vejamos um exemplo específico de otimização de imagem. Digamos que o logotipo de um site tenha sido desenvolvido em Illustrator (Fig. 3), inicialmente salvo em formato AI. A tentativa de otimizá-la imediatamente para a Web não levará a nada de bom, já que neste caso a imagem será recortada automaticamente, o que não levará em conta a verdadeira posição da deformação resultante da inscrição (Fig. 4 e 5) .

Portanto, vamos tentar exportar o logotipo para Formato PSD equipe Arquivo => Exportar(Arquivo => Exportar) - o tamanho da imagem criada será de 143 KB. Abra o arquivo PSD resultante e use o comando Arquivo => Salvar para a Web(Arquivo => Salvar para Web). Dado o número limitado de cores envolvidas na imagem, neste caso, o formato GIF é ideal, com as configurações específicas que você precisa decidir. Experimentando as configurações, você pode ter certeza de que a melhor qualidade é fornecida pelo algoritmo de compressão padrão selecionado pelo programa. Seletivo(Seletivo). Quanto ao anti-aliasing, dada a presença de um preenchimento gradiente, é melhor escolher um algoritmo com geração de ruído - Ruído(fig. 6). O tamanho do arquivo de otimização resultante será de 6.729 KB (Fig. 7), enquanto a transparência do fundo será preservada, o que é fácil de verificar salvando a imagem em formato GIF junto com o arquivo HTML (Fig. 8). Como resultado, neste exemplo, os arquivos emblem.html e emblem.gif foram obtidos na pasta Primer1.

Botões

Um elemento específico insubstituível do design de qualquer página da Web são os controles gráficos - botões. É simplesmente impossível imaginar uma página sem eles. Botões de desenho se tornaram um gênero especial hoje, e o Illustrator permite que você crie as opções mais complexas. Por exemplo, botões projetados como objetos de grade e / ou com máscaras de sobreposição parecem muito mais impressionantes do que os normais.

Vamos considerar a opção de criar um botão convexo redondo no Illustrator. Desenhe um objeto vetorial em forma de círculo preenchido com qualquer cor (Figura 9) e converta-o em uma malha usando o comando Objeto => Criar Malha de Gradiente(Objeto => Criar Malha de Gradiente) especificando quatro linhas e quatro colunas, e na lista Aparência(Ver) escolhendo uma opção Para o centro Destaque(Retroiluminação) igual a 60 (Fig. 10). Escolha uma ferramenta Seleção Direta e clique no canto superior esquerdo do objeto, destacando os pontos de ancoragem ali localizados (Fig. 11). Mude a cor da célula correspondente para branco selecionando-a na paleta Amostras(fig. 12).

Pegue uma ferramenta Elipse(Elipse), coloque o marcador do mouse no centro do círculo criado antes deste e, enquanto mantém pressionadas as teclas Alt e Mudança, estique o novo círculo sobre o antigo de modo que seja 1-2 pixels maior do que o antigo em todos os lados. Faça uma borda preta para ela ( Derrame) 1-2 pixels de largura e preencher com um gradiente radial de vermelho a branco (Figura 13). Arraste o objeto vetorial criado 1-2 pixels para a direita e para baixo e, sem remover a seleção, clique com o botão direito sobre ele e selecione o comando Organizar => Enviar para Trás(Organizar => Enviar de volta). Como resultado, você obtém um espaço em branco para o botão, mostrado na Fig. quatorze.

Via de regra, em qualquer página da Web existem vários botões do mesmo tipo, diferindo, por exemplo, apenas na direção das setas desenhadas neles, indicando a direção do movimento no site. Considere o caso mais simples de ter dois botões, um dos quais, com uma seta para baixo, significará mover para próxima página e o botão de seta para cima para o anterior. Como uma seta em branco, pegue um triângulo comum desenhado pela ferramenta Polígono(Polígono), preenchido em preto e também decorado como um objeto de malha para maior efeito. Mova a seta para o botão e ajuste a posição de todos os objetos em relação uns aos outros usando os botões correspondentes na paleta Alinhar(Alinhamento). O primeiro dos botões obtidos é mostrado na Fig. 15. Faça uma cópia da camada do botão selecionando o comando Duplicar Camada Camadas, - como resultado, obtemos duas camadas idênticas. Então, na cópia da camada, selecione a seta e gire-a 180 ° selecionando o comando Transformar => Girar- Transformação => Rotação. Obtemos o mesmo botão mostrado na fig. 16. Observe que é muito mais conveniente armazenar todos os botões do mesmo tipo de um projeto em um arquivo em camadas diferentes, o que é demonstrado neste caso.

Agora você precisa salvar as versões otimizadas de cada um dos botões. Primeiro, torne a camada inferior invisível - neste caso, o botão da camada superior será salvo. Selecione uma equipe Arquivo => Salvar para a Web(Arquivo => Salvar para a Web), configure as opções de otimização do botão, por exemplo, conforme mostrado na Figura 1-4. 17, clique no botão Salvar(Salvar) e digite o nome do arquivo. O botão salvo como resultado é mostrado na Fig. 18. Agora retorne a visibilidade da camada inferior, e torne a camada superior invisível e da mesma forma salve o segundo botão, dando a ele um nome diferente. O resultado é mostrado na figura. dezenove.

Agora, tudo o que resta é certificar-se de que os botões tenham uma boa aparência na página da Web e colocá-los em uma página personalizada (Figura 20). Como resultado, neste exemplo, o arquivo Primer2.html e duas imagens gráficas na pasta de imagens (pasta Primer2).

Se desejar, durante o processo de otimização, o botão pode ser facilmente transformado em uma fatia. Neste caso, após escolher o comando Arquivo => Salvar para a Web(Arquivo => Salvar para Web) e definindo os parâmetros de otimização, selecione a ferramenta na paleta de ferramentas Seleção de fatia(Selecione uma fatia) e clique duas vezes na imagem, que eventualmente se transformará automaticamente em uma fatia com número de série 1 (Fig. 21). Clicar duas vezes com o mouse novamente irá abrir a janela Opções de fatia(Opções de fatia), na qual será necessário especificar um link e, se desejar, alterar o nome da fatia (Fig. 22), e a seguir salvar a imagem otimizada. O resultado neste caso serão os arquivos Primer3.html (Fig. 23) e Primer3.gif (pasta Primer3).

Elementos interativos

Uma maneira de dar vida a uma página é introduzir elementos de design que mudem seus aparência(ou estado) dependendo do comportamento do mouse ou, com menos frequência, no caso de quaisquer outras situações: dimensionamento, rolagem, carregamento, erros, etc.

Dentre esses elementos, os mais famosos são os rollovers (do inglês roll over - to roll, turn over) - elementos que mudam de aparência sob a influência de um mouse. Botões animados são exemplos de rollovers típicos. Os rollovers costumam ser usados ao criar outros elementos de navegação do site. Na verdade, qualquer rollover não é uma, mas várias (até quatro) imagens, cada uma correspondendo a um evento específico. Os eventos principais são considerados os seguintes: Normal - estado normal, Sobre - passar o cursor do mouse sobre um elemento e Baixo - pressionar o botão esquerdo do mouse quando o cursor estiver passando sobre ele. Teoricamente, eventos como Click - soltar o botão esquerdo do mouse após pressionar, Up - depois de soltar o botão, Out - ao sair da zona ativa, podem estar envolvidos. No entanto, na prática, muitas vezes eles estão limitados a alterar o elemento apenas para os primeiros três ou mesmo dois eventos.

Rollovers clássicos

No sentido clássico, rollover é uma série de imagens GIF e o código HTML correspondente, devido ao qual, dependendo do comportamento do mouse, uma imagem substitui outra na janela do navegador.

O Illustrator não foi projetado para criar rollovers diretamente no sentido clássico, mas pode ajudá-lo a projetar os elementos iniciais para eles. A ideia neste caso é criar uma camada com uma imagem correspondente ao primeiro evento. Em seguida, faça uma cópia da camada e transforme a imagem para corresponder ao segundo evento, etc. A imagem multicamadas resultante é exportada para um arquivo PSD com camadas preservadas, com base nas quais o rollover é criado no programa Image Ready. A vantagem de usar o Illustrator, como em muitos outros casos, é uma série de recursos interessantes que não estão disponíveis em outros. ferramentas de software, em conjunto com a conveniência de transformar gráficos vetoriais.

Vamos tentar criar um rollover na forma de uma inscrição que muda de cor dependendo do comportamento do mouse. Abra o Illustrator e crie uma forma de retângulo arredondado preenchido em preto (Figura 24), faça uma cópia dela e coloque-a em uma área livre da tela. Converte a primeira cópia do retângulo em um objeto de grade com um destaque no centro (comando Objeto => Criar Malha de Gradiente- Object => Create Gradient Mesh) especificando quatro linhas e dez colunas (Figura 25). Ative a segunda cópia do retângulo e ajuste o preenchimento gradiente para ele aproximadamente como mostrado na Fig. 26. Misture o objeto de gradiente sobre a malha, diminua a opacidade do objeto de gradiente para cerca de 80% e seu tamanho para cerca de 1 pixel para simular o efeito de saliência. E então imprima o texto sobre os objetos. Em sua forma original, deixe a cor branca, que corresponderá ao estado Normal (Fig. 27), e então, quando o estado de rollover mudar, a cor da legenda mudará, por exemplo, para verde - ao se mover o ponteiro do mouse sobre ele (estado Sobre) e para azul - quando o botão do mouse é pressionado (estado Para baixo).

Preste atenção na paleta Camadas- neste estágio, há apenas uma única camada nele. Faça duas cópias desta camada usando o comando Duplicar Camada(Camada duplicada) no menu da paleta Camadas, - haverá três camadas na paleta (fig. 28). Então, na primeira cópia da camada mude a cor da legenda para verde, e na segunda - para azul (Fig. 29). Como resultado, você obterá o espaço em branco necessário para o rollover.

Exporte a imagem criada para o formato PSD mantendo camadas usando o comando Arquivo => Exportar(Arquivo => Exportar) e escolher o modelo de cores RGB (Fig. 30). Abra o arquivo PSD criado no ImageReady (Figuras 31 e 32). Crie molduras a partir de camadas, escolhendo o comando Crie molduras a partir de camadas(Criar quadros a partir de camadas) no menu da paleta Animação... A janela de animação será semelhante à Fig. 33. Ao mesmo tempo na paleta Rollovers inicialmente, um único estado Normal será criado.

Então na janela Animação selecione o quadro correspondente ao estado de foco, enquanto na paleta Camadas a camada é selecionada automaticamente Cópia da Camada 1(fig. 34). Vá para a paleta Rollovers e clique no botão Criar estado Rollover(Criar estado de rollover) - fig. 35, o que levará ao aparecimento da condição Sobre o estado na paleta Rollovers(fig. 36). Crie o estado da mesma maneira Estado baixo... Ative o estado Normal na paleta Rollovers e exclua na paleta Animação todos os frames, exceto aquele que deve corresponder ao estado Normal... Como resultado, para cada estado de rollover na paleta Animação haverá apenas um quadro (fig. 37, 38 e 39).

Arroz. 38. Visualização da imagem, janelas de animação e paletas de camadas e rollovers para o estado acima

Verifique o resultado clicando no botão Pré-visualizar no navegador padrão(Visualização do navegador) na barra de ferramentas e navegando até a janela do navegador (Figura 40). Depois disso, salve o arquivo usando o comando Arquivo => Salvar otimizado(Arquivo => Salvar otimizado) e especificando uma opção HTML e imagens (* .html)... Como resultado, neste exemplo, temos o arquivo Primer4.html e uma série de imagens gráficas na pasta de imagens.

Arroz. 40. Janela do navegador com elemento Rollover

Rollovers SVG

A crescente popularidade do formato SVG (Scalable Vector Graphics - scalable Gráficos vetoriais), criado com base no padrão XML, também permite que você receba uma variedade de elementos interativos, em particular rollovers, só que na prática isso é implementado de uma maneira completamente diferente. É importante notar que a criação de rollovers SVG interativos, ao contrário dos clássicos, quando o código HTML correspondente é gerado de forma totalmente automática, requer conhecimento Linguagem JavaScript e uma compreensão dos princípios básicos da programação orientada a objetos.

Existe uma paleta especial para trabalhar com objetos SVG. Interatividade SVG, que é fácil de abrir usando o comando Janela => Interatividade SVG(Janela => interatividade SVG) - fig. 41

Vamos considerar esta opção para criar um rollover usando o exemplo de um botão interativo, a cor da legenda no qual mudará de preto para azul quando você passar o mouse, e novamente ficará preto quando o mouse sair da zona ativa.

Crie um botão retangular com bordas arredondadas e selecione um preenchimento de gradiente adequado para ele, por exemplo, como mostrado na Fig. 42. Ajuste a transparência do botão na paleta Transparência(Transparência) - neste exemplo, o valor do parâmetro Opacidade(Opacidade) definida para 50%. Duplique o botão, preencha-o com uma cor verde escura (fig. 43) e converta-o em um objeto de malha com o comando Objeto => Criar Malha de Gradiente(Objeto => Criar Malha de Gradiente) especificando quatro linhas e dez colunas, e na lista Aparência(Ver) escolhendo uma opção Para o centro(Centro) e definindo o valor Destaque(Destaque) igual a 100. Reduza a opacidade da camada do objeto de malha em cerca de 40% (fig. 44). Coloque o objeto de malha no topo do gradiente, e o botão se parecerá com o mostrado na Fig. 45

Arroz. 44. Transformando uma cópia de um botão em um objeto de malha

Complete o botão com a legenda pretendida e ajuste sua posição usando os botões correspondentes na paleta Alinhar(Alinhamento). A imagem resultante conterá uma única camada com três objetos sobrepostos (Figura 46). Os eventos programados se referem ao objeto de texto, portanto, por conveniência, altere seu nome para Texto clicando duas vezes no objeto e inserindo um novo nome. Altere o nome da camada da mesma forma de Camada 1 para Camada(fig. 47).

O tratamento de eventos pressupõe o uso de procedimentos JavaScript, portanto, você precisa incluir um arquivo que descreva esses procedimentos. É chamado de Events.js e é salvo no disco na pasta Sample Files \ Sample Art \ SVG \ SVG durante a instalação Programas da Adobe Illustrator. Para conectar o arquivo Events.js, use o comando Arquivos JavaScript Interatividade SVG(fig. 48). Em seguida, você precisa pressionar o botão Adicionar(Adicionar) e localize o arquivo desejado em seu disco rígido. Quando seu nome aparece no campo Url(fig. 49), clique no botão Feito(Sair).

Arroz. 48. Escolhendo o comando Arquivos JavaScript

Depois disso, você deve definir a reação aos eventos do mouse para o objeto. Texto... Selecione o objeto Texto, no campo Evento(Evento) paletas Interatividade SVG selecione o evento onmouseover elemColor (evt, "Texto", "# 3333FF")- isso significa que quando o mouse estiver sobre o objeto Texto sua cor mudará para azul (fig. 50). Para que a cor do texto mude para preto após o mouse sair da zona ativa, você precisará criar outro evento onmouseout- selecione-o no campo Evento(Evento) paletas Interatividade SVG... Em seguida, na linha de ação, digite o texto elemColor (evt, "Texto", "# 000000")- voltará a preto (fig. 51).

Arroz. 51. A visualização final da paleta de interatividade SVG para o objeto de texto

Salve o rollover criado como um arquivo SVG com o comando Arquivo => Salvar como(Arquivo => Tipo de arquivo formato SVG e, em seguida, configurar as opções para salvar o arquivo SVG, conforme mostrado na Fig. 52. Após salvar, você receberá apenas um único arquivo com a extensão SVG, e não dois, como no caso do rollover clássico - neste caso, foi obtido o arquivo Primer5.svg (pasta Primer5). No entanto, para que o rollover realmente funcione, você deve copiar adicionalmente o arquivo Events.js com a descrição dos procedimentos JavaScript para a pasta com o arquivo SVG. Depois disso, você pode verificar se o rollover está funcionando - o resultado será semelhante ao mostrado na Fig. 53

Animação SVG

O formato SVG também pode ser usado para transmitir animação. Vamos tentar criar um elemento de animação simples (neste caso será uma informação sobre a empresa), que aparecerá na tela quando você passar o mouse sobre o objeto gráfico correspondente e desaparecerá quando o mouse for removido do elemento interativo.

Vamos criar uma série de gráficos e objetos de texto como o mostrado na Fig. 54. Renomeie de forma conveniente todos os objetos criados clicando sequencialmente no nome do próximo objeto na paleta Camadas e inserindo o nome desejado (fig. 55). Observe que o destaque na Fig. 56 objetos - Texto1, Texto2, Texto3 e Path1- estará sempre visível, e todos os outros - somente quando você passar o mouse sobre o objeto Texto 1.

Arroz. 54. Vista original da imagem

Inclua o arquivo Events.js com a descrição dos procedimentos JavaScript usando o comando Arquivos JavaScript(Arquivos JavaScript) da paleta Interatividade SVG pressionando o botão Adicionar(Adicionar) selecionando o arquivo desejado em seu disco rígido e clicando no botão Feito(Sair).

Defina uma reação aos eventos do mouse para um objeto Texto 1... Selecione um objeto Texto, em campo Evento(Evento) paletas Interatividade SVG selecione o evento onmouseover e na linha abaixo insira o texto elemShow (evt, "Text4"); elemShow (evt, "Path2")... Como resultado, quando o mouse está sobre o objeto Texto 1 objetos se tornarão visíveis Texto 4 e Path2... Observe que se várias ações tiverem que ser executadas quando um evento ocorrer, elas devem ser especificadas por meio do sinal ";". Em seguida, execute uma operação semelhante no evento onmouseout inserindo texto para ele, o que significa esconder objetos (Fig. 57).

Salve o resultado como um arquivo SVG com o comando Arquivo => Salvar como(Arquivo => Salvar como) especificando o nome do arquivo selecionando no campo Tipo de arquivo Formato SVG e, em seguida, configurar as opções para salvar o arquivo SVG, conforme mostrado na Fig. 58. Após salvar, você obterá o arquivo Primer6.svg (pasta Primer6). Não se esqueça de copiar o arquivo Events.js para a pasta com este arquivo. Se depois disso você executar cos este ficheiro, então você verá o resultado mostrado na Fig. 59. Isso é quase o que você precisa. A única coisa que não estava incluída em nossos planos era o aparecimento inicial dos objetos. Texto 4 e Caminho 2 na inicialização. Para se livrar dessa falha, selecione os dois objetos de dados de uma vez e crie uma ação para eles. elemHide (evt, "Text4"); elemHide (evt, "Path2") no evento carregando(fig. 60). Salve o arquivo novamente e certifique-se de que os objetos agora estão Texto 4 e Path2 visível apenas quando você passa o mouse sobre um objeto Texto 1.

Animação GIF

Qualquer página da Web é impensável sem animação da Web, incluindo GIFs animados. Uma das opções para criá-los é usar o aplicativo Adobe ImageReady, que, entre outras coisas, permite criar animações a partir de camadas. Ao mesmo tempo, a própria imagem em camadas pode ser preparada em diferentes aplicativos, incluindo Adobe Illustrator.

É muito fácil criar animações baseadas em elementos da paleta Símbolos(Símbolos) abertos pelo comando Janela => Símbolos(Janela => Símbolos) ou de uma das bibliotecas de símbolos que podem ser abertas usando o comando Janela => Bibliotecas de símbolos(Janela => Bibliotecas de símbolos).

Como exemplo, tentaremos aumentar o tamanho de qualquer objeto de símbolo; as etapas principais do processo de ampliação do objeto devem ser definidas em camadas separadas. Primeiro, simplesmente coloque os objetos de símbolo um acima do outro e, em seguida, aumente o tamanho de cada próximo objeto, por exemplo, como mostrado na Fig. 61. Como resultado, na paleta Camadas uma camada com muitos objetos será criada (Fig. 62). Se você exportar esta imagem diretamente para o formato PSD, isso não funcionará, pois há apenas uma camada e, claro, quando você abre o arquivo PSD no programa ImageReady, também haverá apenas uma camada. Portanto, você deve primeiro colocar objetos em camadas diferentes. Isto pode ser feito jeitos diferentes- a maneira mais fácil é selecionar a camada primeiro Camada 1 na paleta Layers e use o comando Solte para a camada(Liberar para camadas). O resultado será o movimento de cada um dos objetos para sua própria camada, mas todos eles ficarão aninhados na camada. Camada 1... Portanto, você terá que arrastar manualmente todas as camadas aninhadas para o topo da paleta Camadas para que fiquem acima da camada. Camada 1 e então a camada vazia Camada 1 basta remover (fig. 63). Exporte a imagem para o formato PSD usando o comando Arquivo => Exportar(Arquivo => Exportar) com configurações como na fig. 64

Carregue o arquivo PSD criado no ImageReady (Figuras 65 e 66). Abra o menu da paleta AnimaçãoCrie molduras a partir de camadas(Crie quadros de camadas). Como resultado, cinco quadros serão criados, cada um correspondendo à sua própria camada, e a janela da paleta Animação terá a forma da fig. 67

Depois disso, defina a duração de cada um dos frames criados - neste caso, a duração de todos os frames é definida em 0,2 s. E então salve a animação otimizada com o comando Arquivo => Salvar otimizado(Arquivo => Salvar otimizado). O resultado obtido pode se assemelhar à Fig. 68

É ainda mais conveniente obter espaços em branco, que são fáceis de transformar em animação no ImageReady, use as funções Misturas vivas Software Illustrator. Esse uso combinado de Illustrator e ImageReady acelera drasticamente o processo de criação de animações GIF.

Por exemplo, desenhe dois objetos multicoloridos arbitrários e depois combine-os com os parâmetros apropriados (Fig. 69). É impossível usar este arquivo diretamente para criar animação, uma vez que a imagem está em uma única camada (Fig. 70). Portanto, primeiro você precisa colocar cada elemento do objeto de mesclagem em uma camada separada. Para isso na janela Camadas destaque a linha , ative o menu da paleta clicando na seta preta em seu canto superior direito e selecione o comando Liberar para a sequência de camadas(Converter em camadas sequencialmente) (Fig. 71). Segurando a tecla Mudança, selecione as camadas criadas e coloque-as acima da camada Camada 1 e, em seguida, exclua a própria camada Camada 1 movendo-o para a cesta - como resultado, a paleta de camadas terá a mesma forma que na Fig. 72

Arroz. 70. Estado inicial da janela Layers

Exporte o arquivo criado para o formato PSD com o comando Arquivo => Exportar(Arquivo => Exportar). Abra o arquivo PSD criado no programa ImageReady (fig. 73). Observe que todas as camadas criadas no Illustrator aparecerão na janela de camadas (Fig. 74) e na janela Animação haverá apenas um quadro até agora.

Ative o menu da paleta Animação clicando na seta preta no canto superior direito da paleta e escolha o comando Crie molduras a partir de camadas(Criar quadros a partir de camadas) - como resultado, neste exemplo, cinco quadros serão criados e a janela da paleta Animação terá a forma de acordo com a Fig. 75. Selecione todos os quadros enquanto mantém pressionado o Mudança, e definir uma duração de quadro adequada - neste exemplo, para cada um dos quadros, o mesmo tempo de 0,2 s é obtido. Em seguida, salve o arquivo otimizado com o comando Arquivo => Salvar otimizado(Arquivo => Salvar otimizado) definindo na lista Tipo de arquivo opção Apenas imagens (* .gif)... A animação será semelhante à Fig. 76

Muito mais interessante não é mover, mas redimensionar suavemente os objetos de mesclagem. Por exemplo, você pode usar a transição de mesclagem já criada. Neste caso, depois de criar camadas separadas para cada elemento de transição de mesclagem, coloque todos os objetos uns sobre os outros usando os botões Alinhamento horizontal centro(Alinhamento horizontal central) e Centro de alinhamento vertical Paleta (alinhamento central vertical) Alinhar(fig. 77).

Exporte o arquivo criado para o formato PSD ( Arquivo => Exportar- Arquivo => Exportar) e abra o arquivo PSD criado no programa ImageReady (fig. 78). Crie quadros de animação com base em camadas ( Crie molduras a partir de camadas- Crie quadros a partir de camadas) e selecione uma duração adequada para eles (fig. 79). E então, para tornar a animação mais eficaz, copie os quadros existentes, mas na ordem inversa - de modo que a imagem primeiro aumente e depois diminua, e assim por diante em um círculo (Fig. 80). Em seguida, salve o arquivo otimizado ( Arquivo => Salvar otimizado- Arquivo => Salvar com otimização). A animação resultante é mostrada na Fig. 81

Arroz. 80. Estado da janela de animação após a duplicação de quadros

Arroz. 81. Animação concluída

Hoje não somos bem comuns Tutorial da Adobe Illustrator. Porque desta vez não faremos uma imagem estática, mas sim uma animação real. Imagine acaba com com Adobe Você também pode desenhar caricaturas no Illustrator :)

E não precisamos de nada para isso. Organização competente de camadas e exportação do trabalho final em formato swf, onde cada camada é convertida em quadro de animação. No tutorial de hoje, desenharemos uma animação de contagem regressiva no estilo de filme retrô. A saída deve ser um vídeo em flash com essa mesma contagem regressiva.

A primeira coisa a fazer é desenhar todos os elementos necessários para uma futura animação. Para fazer isso, em um documento separado, fiz duas posições de um quadro de filme, um círculo de referência, que foi cortado em setores separados, uma textura e um arranhão vertical para adicionar o efeito da antiguidade, bem como todos os números e inscrições .

Quando todas as partes do nosso desenho estiverem prontas, você pode começar a criar a própria animação. Por conveniência, é melhor fazer isso em um novo documento. Nesse caso, as camadas desempenharão o papel de quadros de animação. E na primeira camada, você só precisa copiar o quadro da tira de filme. Coloque-o no meio da área de trabalho.

Agora crie uma segunda camada e copie a tira de filme nela, na qual os orifícios ao longo das bordas são deslocados. Ele também precisa ser centralizado.

A partir dessas duas camadas, você já pode obter uma animação de filme em movimento. Mais tarde, porém, precisamos de muito mais camadas. Então selecione as duas primeiras camadas, vá para as opções do painel e faça uma cópia das camadas.

Da mesma forma, precisamos acumular 12 camadas de imagens em movimento do filme.

Agora temos um monte de camadas e todas elas são visíveis. No sentido de que as camadas superiores obstruem as inferiores, o que não é muito conveniente para o trabalho. Portanto, você pode desativar algumas camadas clicando no ícone com um olho à esquerda do nome da camada. Para desligar ou ligar todas as camadas de uma vez, mantenha pressionada a tecla Alt enquanto clica no ícone de olho. Ativando e desativando as camadas, você pode ver exatamente o que está localizado em um determinado quadro de nossa futura animação. E agora, para adicionarmos um leve tremor ao movimento do filme, precisamos mover os quadros resultantes ligeiramente em direções diferentes. Para fazer isso, inclua apenas a camada com a qual você vai trabalhar este momento e, em seguida, desloque o quadro alguns pixels para os lados.

Depois de passar por todas as camadas e adicionar uma ligeira mudança, você pode começar a criar uma animação de um círculo em movimento. Para isso, copie o círculo, constituído por setores, do documento com as partes do cartoon e coloque-o na primeira camada sobre o quadro da tira de filme.

Se você desmarcar o círculo, ele se parecerá com um único todo. Isso é exatamente o que precisamos.

Mas, uma vez que consiste em setores separados, você pode criar animações de forma muito rápida e fácil, alterando sua cor. Para fazer isso, copie este círculo para a segunda camada e torne o primeiro setor mais leve. Você lembra que nosso filme treme durante o movimento, então não é necessário colocar o círculo exatamente no centro do quadro. Coloque-o a olho.

De maneira semelhante, você precisa copiar o círculo para cada camada seguinte, enquanto pinta com uma cor mais clara um setor a mais do que na vez anterior. Juntas, essas 12 camadas formam uma interpolação de filme com um círculo de preenchimento.

Em seguida, precisamos adicionar textura às nossas camadas. Ative a primeira camada e copie a textura do arquivo original com as peças sobressalentes.

Em seguida, ative as próximas camadas e copie a mesma textura lá. Para fazer com que pareça diferente em cada quadro, basta girá-lo 90 graus. Como você deve ter adivinhado, precisamos adicionar textura a todos os 12 quadros.

Se você já está cansado de copiar, então posso agradá-lo - resta muito pouco. A parte mais difícil acabou. Resta adicionar arranhões verticais e quase tudo. Para fazer isso, novamente, copie o arranhão original e coloque-o em um lugar arbitrário em várias camadas. No meu caso, os riscos aparecem em apenas duas camadas.

Agora que o loop principal com a animação do filme está pronto, resta somar os números. Como estamos contando regressivamente de 3 a 1 mais a palavra Vá !!!, precisamos de ainda mais camadas. Não 12, mas 48. Para fazer isso, você precisa fazer mais três cópias das camadas prontas com a animação do filme.

E então tudo é simples. Ligue a primeira camada e coloque o número três lá.

Então você precisa copiar este número para as próximas camadas até que a animação do círculo termine. Quando você chegar à próxima cópia das camadas, onde o círculo será novamente completamente pintado, você já precisa colocar o número dois. Da mesma forma, copie o número um para as camadas desejadas. E quando você chegar às camadas finais para o rótulo Go !!!, apenas exclua o círculo antes de copiar o rótulo para a camada desejada.

Isso é tudo com animação. O principal aqui é não se confundir. Você pode dar às camadas alguns nomes convenientes, mas de alguma forma eu estava com preguiça :) E ainda, quando terminar, certifique-se de ativar todas as camadas novamente clicando no ícone de olho.

Na janela com as configurações de exportação, certifique-se de definir Exportar como: Camadas AI para quadros SWF. É esta opção que transforma as camadas do ilustrador em quadros de animação. Em seguida, clique no botão Avançado.

Configurações adicionais serão abertas. Aqui você precisa definir a taxa de quadros Frame Rate. Tenho 12 quadros por segundo. A caixa de seleção Looping é responsável pelo loop da animação. Graças a ela, o vídeo será rodado em círculo. E a opção Layer Order: Bottom Up reproduz as camadas do ilustrador de baixo para cima no painel. É exatamente assim que construímos nossa animação.

Na saída, temos um vídeo em flash com nossa animação.

Agora você pode ver que fazer uma animação simples no Adobe Illustrator não é tão difícil quanto parece à primeira vista.

Mas para criar vídeos longos ou aplicativos interativos, ainda é melhor usar Adobe Flash ou outros editores de flash. Por exemplo, fiz esse gato em um antigo Macromedia Flash, que desenterrei no meu trabalho.

Além disso, recentemente, HTML5 e CSS3 têm sido cada vez mais usados para criar animações. Este código é compatível navegadores modernos e não requer o uso de um flash player.

Roman aka dacascas especificamente para o blog

Assine nosso boletim informativo para não perder nada de novo:

Hoje temos um tutorial incomum do Adobe Illustrator. Porque desta vez não faremos uma imagem estática, mas sim uma animação real. Imagine, você também pode desenhar caricaturas com a ajuda do Adobe Illustrator :)

Agora crie uma segunda camada e copie a tira de filme nela, na qual os orifícios ao longo das bordas são deslocados. Ele também precisa ser centralizado.

Da mesma forma, precisamos acumular 12 camadas de imagens em movimento do filme.

Agora temos um monte de camadas e todas elas são visíveis. No sentido de que as camadas superiores obstruem as inferiores, o que não é muito conveniente para o trabalho. Portanto, você pode desativar algumas camadas clicando no ícone com um olho à esquerda do nome da camada. Para desligar ou ligar todas as camadas de uma vez, mantenha pressionada a tecla Alt enquanto clica no ícone de olho. Ativando e desativando as camadas, você pode ver exatamente o que está localizado em um determinado quadro de nossa futura animação. E agora, para adicionarmos um leve tremor ao movimento do filme, precisamos mover os quadros resultantes ligeiramente em direções diferentes. Para fazer isso, ative apenas a camada com a qual você vai trabalhar no momento e, em seguida, desloque o quadro alguns pixels em qualquer direção.

Se você desmarcar o círculo, ele se parecerá com um único todo. Isso é exatamente o que precisamos.

Em seguida, precisamos adicionar textura às nossas camadas. Ative a primeira camada e copie a textura do arquivo original com as peças sobressalentes.

E então tudo é simples. Ligue a primeira camada e coloque o número três lá.

Na saída, temos um vídeo em flash com nossa animação.

Agora você pode ver que fazer uma animação simples no Adobe Illustrator não é tão difícil quanto parece à primeira vista.

Mas para criar vídeos longos ou aplicativos interativos ainda é melhor usar o Adobe Flash ou outros editores de flash. Por exemplo, fiz esse gato em um antigo Macromedia Flash, que desenterrei no meu trabalho.

Além disso, recentemente, HTML5 e CSS3 têm sido cada vez mais usados para criar animações. Este código é compatível com navegadores modernos e não requer o uso de um flash player.

Roman aka dacascas especialmente para o blog Notas de um ilustrador microstock