Enquanto muitos podem argumentar sobre a relevância da rich media nos ebooks, ele é, sem dúvida, que as animações de qualquer tipo, são mais atraentes para os leitores do que imagens estáticas. A ideia de criar animações pode ser intimidante para os autores. Não é sobre os resultados – é sobre o que é necessário para que isso aconteça. Pode ficar feio. Ou pior: caro.

em nossa jornada de desenvolvimento de ebooks interativos para outros, percebemos o poder das animações e o alavancamos em vários ebooks. Uma adição tão pequena a uma imagem pode realmente dar um enorme impacto ao seu ebook e fazer com que ele se destaque do resto sem questionar.

o verdadeiro desafio é encontrar uma maneira eficiente e fácil de produzir animações. Neste artigo, teremos alguns antecedentes sobre tecnologias de animação em ebooks e, em seguida, veremos uma série de técnicas de animação relativamente fáceis de produzir com exemplos claros.

tipos de animação

Para dar uma introdução rápida, as animações podem ser criadas de diferentes maneiras. Eles podem ser tão complexos (e demorados) quanto animações quadro a quadro. Ou seja, desenhar uma imagem separada para cada fração de segundo. Estamos mais interessados em tweening (abreviação de in-betweening). Ao tweening, você especifica os Estados inicial e final de sua animação e o restante é gerado automaticamente pelo computador. Você também pode especificar uma função de flexibilização para usar, a fim de aplicar alguns efeitos de velocidade, como aceleração, elasticidade, salto, etc. Aqui está uma lista completa de funções de flexibilização.

então, como as animações são incorporadas dentro de um ebook? Desde um EPUB da tecnologia subjacente é o HTML, aqui estão as suas opções:

1. imagem GIF Animada
2. animações SVG
3. filme do Flash
4. CSS animação
5. Página widget

Esta lista não é para assustar vocês, mas para explorar as possibilidades técnicas disponíveis para você. Mas vamos simplificar essa lista. Imagens GIF animadas requerem software especial (por exemplo, Photoshop) e os tamanhos dos arquivos de animação geralmente são muito grandes. As animações SVG suportam apenas gráficos vetoriais e exigem um plano de fundo de desenvolvimento para criar. O Flash está desatualizado e não será compatível com leitores como o Apple iBooks, muito menos com dispositivos móveis. Isso nos deixa para baixo para animações CSS e widgets de página. Eles são basicamente irmão e irmã. Em vez de aplicar animações CSS diretamente na página, os widgets da página aplicam CSS por meio de um iframe (janela). Preferimos usar widgets de página, pois é melhor organizado para ter toda a sua animação em um único arquivo.

software de animação

no que diz respeito ao software envolvido, o Google Web Designer é um software simples e gratuito para criar suas animações. O Google Web Designer está focado na criação de banners e anúncios animados HTML5 para web e dispositivos móveis. Descobrimos que você não precisa de nada mais avançado para criar animações rápidas.

O fluxo de trabalho básico no Google Web Designer é o seguinte:

1. Importar cada uma de suas imagens, que se enquadram em camadas separadas
2. Para cada camada, especificar a sua chave-de molduras e escolha a sua flexibilização de funções
3. Exportar como um pacote zip

O arquivo exportado é uma página widget pronto para ser adicionados a sua página Para obter mais informações sobre como adicionar página de widgets para o seu e-book, consulte o nosso artigo sobre o livro de widgets.

técnicas de Animação

O know-how não é suficiente para criar animações eficazes. Como você vai usá-lo é o que conta. Assim como aprender a usar um fogão, não significa necessariamente que você estará cozinhando qualquer Blanquette de Veau em breve. Você precisa aprender algumas receitas primeiro. Então, vamos olhar para diferentes (e fáceis) receitas para aplicar animações.

imagem flutuante

esta é a forma mais simples de animação. Uma imagem que se move em direções diferentes (pode girar também). E embora você pense que não traria nada de novo para a mesa, você está errado. Dependendo de quão naturais são os movimentos, você ficaria surpreso com a quantidade de vida que pode trazer para o seu ebook e atrair seus leitores. A melhor coisa sobre este tipo de animação é que ele pode ser aplicado a qualquer uma das suas imagens atuais, sem recursos extras. Recomendamos que a imagem tenha um fundo branco, para fazer a animação se fundir com o fundo (supondo que o fundo seja branco). Aqui está um exemplo de um ebook interativo que criamos sobre pássaros.

Aqui estão outros exemplos com apenas alguma rotação básica. Aplicar o tempo correto pode dar um efeito muito crível.

você encontrará esses tipos de animações em toda a web. Por exemplo, neste link você encontrará outro exemplo de uma imagem flutuante que gostamos (vá para a seção intitulada evocando memórias para ver os sapos astronautas flutuantes). Para adicionar um pouco de complexidade, você pode ter outra imagem que está sentada nas costas, fixada na posição. Assim:

transformando imagem

semelhante ao último, mas em vez de mover uma imagem, você a está transformando. As transformações suportadas no CSS3 são escala, inclinação e rotação 3D. Você precisará ser muito seletivo sobre a quais imagens você aplica transformações. Uma transformação errada pode fazer as coisas parecerem muito estranhas. Aqui está uma combinação de transformações de inclinação e rotação 3D aplicadas a um pássaro em nosso ebook interativo.

componentes de transição

vamos dar um passo adiante. Com esse tipo de animação, sua imagem é dividida em sub-imagens. A partir de uma tela em branco, cada sub-imagem faz sua própria entrada de diferentes direções, acabando por completar a imagem original. O que quer que você faça, isso nunca parecerá ruim. Definitivamente ficará bem, mas pode parecer melhor. Sua escolha de sub-imagens e suas transições controlam o quão atraente será a animação para os leitores. Você pode loop esta animação fazendo a transição sub-imagens de volta para fora da tela.

gráficos e gráficos

se você estiver criando ebooks com relatórios ou estatísticas, talvez isso seja útil. Você provavelmente está pensando que está prestes a ver algo extremamente complexo. É o oposto total. Com o mínimo de esforço e know-how simples, você pode animar seus gráficos com um toque de magia e fazer com que seus leitores pensem que foi uma tonelada de trabalho. Muitas animações realmente existem dessa maneira-seus olhos enganam sua mente para compreender algo, onde na realidade é muito mais simples.

portanto, a ideia de animar gráficos e Gráficos é a seguinte. Você importará o gráfico / gráfico como uma imagem para o Google Web Designer. Em uma camada acima, você criará uma caixa branca. Isso será usado para dar um efeito de mascaramento. Inicialmente, a caixa branca virá em cima do gráfico / gráfico, exceto o eixo vertical horizontal &. Você estará fazendo a transição da caixa branca verticalmente para cima para revelar o que está escondido por baixo. Os olhos do leitor o induzirão a acreditar que as barras são o que está crescendo de baixo, onde na verdade elas estão apenas sendo reveladas. Se você quiser fazer um loop na animação, você pode fazer a transição da caixa branca de volta para baixo para ocultar o gráfico mais uma vez. Com o tempo correto, isso apenas seduzirá seus leitores. Vamos pular para alguns exemplos, vamos? Aqui está um exemplo mais complexo onde imagens adicionais foram animadas junto com a caixa branca, como a tampa das barras.

conclusão

neste artigo, tivemos uma ideia geral de como as animações funcionam em ebooks e as tecnologias por trás delas. Vimos quatro técnicas/truques simples que podem ser aplicados rapidamente às suas imagens de E-books, sem levar muito tempo do seu fluxo de trabalho. Tudo se resume a um pouco de tempo de configuração para investir em ter o básico do Google Web Designer. Em outro post, vamos dar uma olhada mais de perto no Google Web Designer e nos passos do bebê para seguir lá, para criar sua primeira animação.

enquanto isso, comece a animar!

Você também pode desfrutar de:

5 Hacks para Criar um maior Envolvimento Ebook

Legal Truque: Criação Dinâmica de Nomes de personagens em Ebooks

Como criar um ebook interativo: Um passo-a-passo guia

Como Otimizar Vídeos e Adicioná-Los para o Seu e-Book

O Ebook Autor do Guia Para Imagens