Arte em movimento no Flash + Illustrator

0
33

Mais um tema que com certeza vai encher os olhos dos leitores do Clube. Nosso primeiro tutorial de Flash chegou!!! E como é um aplicativo muito poderoso, iremos aprender juntos cada passo para dominar este maravilhoso programa. E o melhor, vamos trabalhar em conjunto com o Illustrator.

Não domino o Flash, e tenham certeza que tudo o que postei aqui, aprenderei também como vocês. Praticando!!! O trabalho de traduzir, corrigir e adaptar o conteúdo é muito gratificante, aprendo as técnicas de edição nos programas, e ainda incremento acrescentando pontos que acho importantes para ajudar nossos leitores no desenrolar do tutorial. Acompanhem.

clip_image001

A Adobe tem feito muito para melhorar a integração entre o Flash e o Illustrator. O fluxo de trabalho entre estas duas aplicações passou de quase inexistente para uma interação que é poderosa. Neste tutorial, vamos seguir um fluxo de trabalho típico e fácil, de preparação de símbolos gráficos no Illustrator CS3 para importar e anima-los dentro do Flash.

[alert-note]Você pode baixar o arquivo usado no tutorial aqui[/alert-note]

Mão na massa! (Aqui usamos a versão CS3 do programa)

Passo 1. No Illustrator, acesse File> Open e navegue até o arquivo que você baixou butterflyDream.ai. Este arquivo tem muitos elementos de design diferentes, que vamos transformar em símbolos para usar no Flash. Esse fluxo de trabalho tem sido muito útil, permitindo aos designers criar clipes de vídeo até mesmo diretamente do Illustrator. A Artwork Illustrator também se encaixa perfeitamente dentro do Flash, o que certamente não fazia antes da versão CS3. Agora vamos começar criando nossos símbolos.

Passo 1. No Illustrator, acesse File> Open e navegue até o arquivo que você baixou butterflyDream.ai. Este arquivo tem muitos elementos de design diferentes, que vamos transformar em símbolos para usar no Flash. Esse fluxo de trabalho tem sido muito útil, permitindo aos designers criar clipes de vídeo até mesmo diretamente do Illustrator. A Artwork Illustrator também se encaixa perfeitamente dentro do Flash, o que certamente não fazia antes da versão CS3. Agora vamos começar criando nossos símbolos.
Passo 2. Com a ferramenta Selection [V], clique no fundo verde clarinho para selecioná-lo junto com todos os elementos brancos do fundo (Não dá pra ver direito mas é só clicar dentro da moldura que você consegue selecionar), pressione a tecla [F8] para transformá-lo em um símbolo. Na caixa de diálogo Symbol Options, escolha Movie Clip e nomeie-o como “background”. Clique no OK e, em seguida, abra o painel Symbols acessando Window> Symbols, você verá o seu símbolo no painel que se abriu. (Você já pode ver a integração do Flash melhorado, porque agora você pode criar símbolos do Flash dentro do Illustrator.)

Passo 2. Com a ferramenta Selection [V], clique no fundo verde clarinho para selecioná-lo junto com todos os elementos brancos do fundo (Não dá pra ver direito mas é só clicar dentro da moldura que você consegue selecionar), pressione a tecla [F8] para transformá-lo em um símbolo. Na caixa de diálogo Symbol Options, escolha Movie Clip e nomeie-o como "background". Clique no OK e, em seguida, abra o painel Symbols acessando Window> Symbols, você verá o seu símbolo no painel que se abriu. (Você já pode ver a integração do Flash melhorado, porque agora você pode criar símbolos do Flash dentro do Illustrator.)

Passo 3. Em seguida, escolha os elementos de design específicos sobre a tela para transformá-los em símbolos. Escolha uma das borboletas e mais uma vez, pressione [F8] para abrir a caixa de diálogo Symbol Options. Como nós vamos redimensionar este símbolo em nossa animação, precisamos definir o ponto de registro do Flash para o centro, como mostrado no gráfico (Flash Registration). Isso fará com que a escala deste símbolo aconteça a partir do centro quando animado no Flash.

Passo 3. Em seguida, escolha os elementos de design específicos sobre a tela para transformá-los em símbolos. Escolha uma das borboletas e mais uma vez, pressione [F8] para abrir a caixa de diálogo Symbol Options. Como nós vamos redimensionar este símbolo em nossa animação, precisamos definir o ponto de registro do Flash para o centro, como mostrado no gráfico (Flash Registration). Isso fará com que a escala deste símbolo aconteça a partir do centro quando animado no Flash.

Passo 4. Agora vá em frente e crie símbolos de todos os outros elementos da página, um de cada vez. Você pode escolher o seu próprio conjunto de elementos ou os que nós fizemos. Certifique-se de definir o ponto de registro do símbolo do Flash sempre ao centro.

Passo 4. Agora vá em frente e crie símbolos de todos os outros elementos da página, um de cada vez. Você pode escolher o seu próprio conjunto de elementos ou os que nós fizemos. Certifique-se de definir o ponto de registro do símbolo do Flash sempre ao centro.

Passo 5. Agora que você já criou todos os símbolos, você pode selecionar e apagar tudo o que está na prancheta (É! Apague todos os desenhos que estão na página). Isto é necessário para redesenharmos a cena, só que desta vez usando os símbolos que criamos. Primeiro, arraste o símbolo “background” do painel de símbolos para a prancheta e alinhe-o para que tome toda a área do papel. Então você pode montar sua cena da maneira que quiser, arrastando os símbolos para a prancheta e posicionando-os onde quiser. Quando você terminar, salve o arquivo com o nome que quiser e abra o Flash. Aqui está a nossa cena.

Passo 5. Agora que você já criou todos os símbolos, você pode selecionar e apagar tudo o que está na prancheta (É! Apague todos os desenhos que estão na página). Isto é necessário para redesenharmos a cena, só que desta vez usando os símbolos que criamos. Primeiro, arraste o símbolo “background” do painel de símbolos para a prancheta e alinhe-o para que tome toda a área do papel. Então você pode montar sua cena da maneira que quiser, arrastando os símbolos para a prancheta e posicionando-os onde quiser. Quando você terminar, salve o arquivo com o nome que quiser e abra o Flash. Aqui está a nossa cena.

Passo 6. Na caixa de diálogo de boas vindas do Flash, na seção Criar novo, escolha Flash File (ActionScript 3.0), que cria um documento do Flash em branco, que quando publicado, será executável no Flash Player 9 ou superior. No painel a direita mude a opção Frame Rate do filme para 30 fps (o painel se chama Property inspector), isso garante que as nossas animações sejam mais agradáveis e suaves. Isso é tudo que precisamos para montar o nosso documento no Flash. Agora podemos importar o nosso arquivo do Illustrator.

Passo 6. Na caixa de diálogo de boas vindas do Flash, na seção Criar novo, escolha Flash File (ActionScript 3.0), que cria um documento do Flash em branco, que quando publicado, será executável no Flash Player 9 ou superior. No painel a direita mude a opção Frame Rate do filme para 30 fps (o painel se chama Property inspector), isso garante que as nossas animações sejam mais agradáveis e suaves. Isso é tudo que precisamos para montar o nosso documento no Flash. Agora podemos importar o nosso arquivo do Illustrator.

Passo 7. Acesse File> Import> Import to Stage para abrir a janela Importar, selecione o arquivo do Illustrator, e clique em abrir. Isso iniciará a janela Importar Illustrator, onde você pode especificar todas as opções de importação diferentes que estão disponíveis. Como já adiantamos o trabalho de preparação no Illustrator, precisamos apenas verificar a segunda opção abaixo da janela (Set stage size to same size as…) para garantir que o nosso filme do Flash vai ter as mesmas dimensões que o arquivo do Illustrator. Clique no OK para importar o arquivo.

Passo 7. Acesse File> Import> Import to Stage para abrir a janela Importar, selecione o arquivo do Illustrator, e clique em abrir. Isso iniciará a janela Importar Illustrator, onde você pode especificar todas as opções de importação diferentes que estão disponíveis. Como já adiantamos o trabalho de preparação no Illustrator, precisamos apenas verificar a segunda opção abaixo da janela (Set stage size to same size as...) para garantir que o nosso filme do Flash vai ter as mesmas dimensões que o arquivo do Illustrator. Clique no OK para importar o arquivo.

Passo 8. Repare que todos os símbolos foram inseridos no Flash na mesma camada. Poderíamos tê-las colocado em diferentes camadas no Illustrator para remediar esta situação, mas eu prefiro esta abordagem mais rápida: Selecione todos os objetos no Palco pressionando [Ctrl+A]. Agora clique com o botão direito do mouse sobre os itens e escolha Distribute to Layers. Pronto! Isso fará com que cada símbolo no Palco fique em sua própria camada, na ordem correta de empilhamento. Você pode excluir uma camada que deve estar vazia na apresentação, clicando e arrasto-a para a lixeira do painel camadas. Ainda no painel de camadas bloqueie a camada de fundo para que você não a selecione acidentalmente (Clicando no segundo pontinho que está do lado do nome da camada background, este ativa o cadeado de bloqueio – veja a imagem do passo 9)

Passo 8. Repare que todos os símbolos foram inseridos no Flash na mesma camada. Poderíamos tê-las colocado em diferentes camadas no Illustrator para remediar esta situação, mas eu prefiro esta abordagem mais rápida: Selecione todos os objetos no Palco pressionando [Ctrl+A]. Agora clique com o botão direito do mouse sobre os itens e escolha Distribute to Layers. Pronto! Isso fará com que cada símbolo no Palco fique em sua própria camada, na ordem correta de empilhamento. Você pode excluir uma camada que deve estar vazia na apresentação, clicando e arrasto-a para a lixeira do painel camadas. Ainda no painel de camadas bloqueie a camada de fundo para que você não a selecione acidentalmente (Clicando no segundo pontinho que está do lado do nome da camada background, este ativa o cadeado de bloqueio - veja a imagem do passo 9)

Passo 9. Em seguida, precisamos adicionar alguns quadros à Linha de tempo para começar a animação. Selecione o quadro 90 em todas as camadas, clicando e arrastando para baixo no frame 90. Pressione a tecla F5 para inserir novos quadros em todas as camadas, esses novos quadros são iguais a 3 segundos, por isso definimos o frame rate para 30. Você pode adicionar ou remover os quadros com base em quanto tempo você quer que sua animação dure.

Passo 9. Em seguida, precisamos adicionar alguns quadros à Linha de tempo para começar a animação. Selecione o quadro 90 em todas as camadas, clicando e arrastando para baixo no frame 90. Pressione a tecla F5 para inserir novos quadros em todas as camadas, esses novos quadros são iguais a 3 segundos, por isso definimos o frame rate para 30. Você pode adicionar ou remover os quadros com base em quanto tempo você quer que sua animação dure.

10. Agora escolha uma camada que você deseja animar usando uma máscara, para nosso exemplo, escolhemos um dos ramos verdes. Clique no ícone Inserir camada para criar uma nova camada acima desta camada e nomeie como “máscara”. Clique na ferramenta Retângulo [R] na caixa de ferramentas, em seguida, escolha uma cor de preenchimento que apareça bastante, desenhe um retângulo na parte inferior do símbolo (como na imagem abaixo). Certifique-se de que este retângulo não está cobrindo qualquer parte do símbolo que você revelará com a máscara.

10. Agora escolha uma camada que você deseja animar usando uma máscara, para nosso exemplo, escolhemos um dos ramos verdes. Clique no ícone Inserir camada para criar uma nova camada acima desta camada e nomeie como "máscara". Clique na ferramenta Retângulo [R] na caixa de ferramentas, em seguida, escolha uma cor de preenchimento que apareça bastante, desenhe um retângulo na parte inferior do símbolo (como na imagem abaixo). Certifique-se de que este retângulo não está cobrindo qualquer parte do símbolo que você revelará com a máscara.

Passo 11. Vamos inserir um novo quadro-chave na camada de máscara, para isso clique no quadro 15 e pressione a tecla F6. Agora clique com o botão direito do mouse no retângulo, escolha a opção Free Transform, e dimensione o retângulo de modo que ela cubra completamente o símbolo, criando os dois pontos de extremidade para nossa animação com máscara. (Nota: Basta dimensionar uma máscara retangular sobre um símbolo, uma maneira rápida e fácil para revelar um item no Flash, você pode criar uma máscara de revelar mais complexa, mas para nosso exemplo o retângulo será suficiente)

Passo 11. Vamos inserir um novo quadro-chave na camada de máscara, para isso clique no quadro 15 e pressione a tecla F6. Agora clique com o botão direito do mouse no retângulo, escolha a opção Free Transform, e dimensione o retângulo de modo que ela cubra completamente o símbolo, criando os dois pontos de extremidade para nossa animação com máscara. (Nota: Basta dimensionar uma máscara retangular sobre um símbolo, uma maneira rápida e fácil para revelar um item no Flash, você pode criar uma máscara de revelar mais complexa, mas para nosso exemplo o retângulo será suficiente)

Passo 12. Agora que os pontos da máscara são definidos, podemos preencher os outros quadros de nossa animação usando uma interpolação de forma: Clique com o botão direito do mouse em qualquer lugar entre os dois keyframes e selecione Create Shape Tween. Com a interpolação selecionado, defina o Easy para 100 no painel da direita (Property Inspector) para dar-lhe um movimento mais realista.

Para transformar a camada do retângulo numa máscara de verdade, clique com o botão direito do mouse no nome da camada e escolha a opção Mask. Agora, se você testar o filme acessando Control> Test Movie, você deve ver o item revelar-se. (Legal néh?)

Passo 12. Agora que os pontos da máscara são definidos, podemos preencher os outros quadros de nossa animação usando uma interpolação de forma: Clique com o botão direito do mouse em qualquer lugar entre os dois keyframes e selecione Create Shape Tween. Com a interpolação selecionado, defina o Easy para 100 no painel da direita (Property Inspector) para dar-lhe um movimento mais realista.

Passo 13. Em seguida, veremos como dimensionar um dos símbolos (estamos usando o cata-vento em nosso gráfico). Selecione um dos símbolos circulares no Palco, clique no quadro 1 da Timeline e abra o painel Transform acessando Window> Transform. Marque a caixa Constrain e defina a escala para baixo em 0. Agora insira um novo quadro-chave na camada no quadro 10 e outro no quadro 20. Com o quadro 20 selecionado, defina a escala até 100%.

Passo 13. Em seguida, veremos como dimensionar um dos símbolos (estamos usando o cata-vento em nosso gráfico). Selecione um dos símbolos circulares no Palco, clique no quadro 1 da Timeline e abra o painel Transform acessando Window> Transform. Marque a caixa Constrain e defina a escala para baixo em 0. Agora insira um novo quadro-chave na camada no quadro 10 e outro no quadro 20. Com o quadro 20 selecionado, defina a escala até 100%.

Passo 14. Agora clique com o botão direito do mouse em qualquer lugar entre os quadros 10 e 20, selecione Create Motion Tween, e em seguida, defina o Easy para 100 no Property Inspector. Ainda neste painel selecione CW no menu Rotate pop-up para fazer o símbolo girar uma vez durante a animação.

Passo 14. Agora clique com o botão direito do mouse em qualquer lugar entre os quadros 10 e 20, selecione Create Motion Tween, e em seguida, defina o Easy para 100 no Property Inspector. Ainda neste painel selecione CW no menu Rotate pop-up para fazer o símbolo girar uma vez durante a animação.

A partir daí, basta continuar animando os itens usando as técnicas mostradas acima. Seja criativo e não se esqueça de experimentar.

Site original: Layers Magazine

Comente! Sugestões, dúvidas e opiniões são ótimos para melhorar o conteúdo do Clube.

Aproveite para seguir o meu perfil no twitter, facebook, youtube ou google+, assim você fica por dentro das novidades, e acompanha os melhores links do blog. Você também pode assinar nosso feed de notícias e receber todas as atualizações de maneira exclusiva.

1 COMENTÁRIO

DEIXE UMA RESPOSTA

Please enter your comment!
Please enter your name here