Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Crie animações em HTML5 para Adobe DPS com InDesign e Wallaby

814 views

Published on

Tutorial sobre a produção de objetos animados a partir do Adobe InDesign, com posterior conversão do arquivo .FLA gerado no InDesign para HTML5 através do utilitário Wallaby.

Para baixar o Wallaby acesse o link http://bit.ly/dps-anima.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Crie animações em HTML5 para Adobe DPS com InDesign e Wallaby

  1. 1. Treinamento e Consultoria em Midia Impressa e Digital www.dualpixel.com.br | contato@dualpixel.com.br Animação para iPad Recurso indicado para vnhetas e animações simples. Não suporta ActionScript PASSO 1 - crie o elemento que voce deseja animar na página. PASSO 2 - escolha o tipo de animação. De preferência para animações de deslocamento, que fazem o objeto entrar e/ou sair da página. treinamento
  2. 2. Treinamento e Consultoria em Midia Impressa e Digital www.dualpixel.com.br | contato@dualpixel.com.br PASSO 3 - com o efeito de animação aplicado no objeto, crie um novo documento com as mesmas dimensões do objeto animado. Nomeie este arquivo como vinheta.indd, por exemplo. ATENÇÃO - crie uma subpasta nesta seção do projeto para salvar este novo arquivo do InDesign e osdemais queserão criados. Mantenha o mesmo nome em todos eles. PASSO 4 - Exporte o arquivo vinheta.indd para o formato Flash. Escolhe o Menu File > Export > opção de formato FLA. Nomeie este arquivo como vinheta.fla (mantenha o mesmo nome do InDesign). Altere a opção de Text para Convert to Outlines
  3. 3. Treinamento e Consultoria em Midia Impressa e Digital www.dualpixel.com.br | contato@dualpixel.com.br PASSO 5 - Use o utilitário Wallaby (beta) para convertar de Flash para HTML5. Salve este arquivo no mesmo diretorio do InDesign e com o mesmo nome. Neste caso, vinheta.html Vários arquivos são criados da conversãode Flash para HTML5 como voce pode notar na figura acima. Abra o arquivo vinheta.html num browser compativel com HTML5 (Safari, Firefox 5, Chrome, IE9) para atestar que animação está funcionando. NOTA - o resulta deste processo é uma animação em looping, como voce pode notar no browser. Para corrigir esta falha será preciso editar o arquivo .CSS. PASSO 6 - Abra o arquivo vinheta.css no Dreamweaver (ou outro editor de html) e através do comando Find/Change altere o parâmetro Infinite para 1.

×