quarta-feira, 28 de março de 2012

Slideshow no InDesign

Estamos em um tempo de fortes mudanças. O InDesign deixou de ser apenas um aplicativo para diagramação de impressos e irá se tornar um hub de criação para mídias impressas, digitais e móveis. Essa versatilidade tornará o InDesign muito poderoso, permitindo acesso a diferentes mídias sem a necessidade de programação. Isso é excelente para nós usuários, pois agora podemos oferecer novos serviços e soluções para os clientes.

Aproveitando as tendências que guiam as atualizações do InDesign, irei abordar aqui um exemplo de criação de slideshows, um efeito interativo que pode ser usado em arquivos SWF e também em revistas digitais da Adobe Digital Publishing Solution.

1. Organizando o slideshow
Vou criar um slideshow simples, composto apenas de imagens diferentes. Escolho três imagens de animais. No Photoshop, procuro deixar as imagens na medida exata em que elas serão usadas no meu documento (neste caso, quero todas com 500 pixels de largura e altura), com resolução de 72 ppi e modo RGB. Não estamos mais lidando com documentos impressos, portanto não se preocupe com CMYK e resoluções maiores.


Agora que tenho minhas imagens prontas, abro o InDesign e vou criar meu documento em File > New > Document. A caixa New Document se abre. Escolho Web na opção Intent. Isso irá desativar a opção Facing Pages que só faz sentido para impressos e deixará as unidades em pixels e as cores da paleta Swatches em RGB. Decido criar um documento de 800x600 pixels (ou a dimensão da tela de um tablet, se estiver fazendo uma revista para a ADPS). Não coloco nada em sangria, outro elemento só usado em impressos. Clico em Ok.



Insiro em meu documento as imagens do meu slideshow com o File > Place, atalho Cmd+D (Win: Ctrl+D). Agora eu quero fazer a justaposição de todas as imagens. Posso fazer isso manualmente com a ajuda das Smart Guides, ou selecionar todas e alinhá-las pelo painel Align com os botões Align left edges e Align top edges.



Agora, com as imagens ainda selecionadas, vá para o painel Window > Interactive > Object States e, no menu do painel, clique em New State. Assim, você irá automaticamente criar o seu slideshow. A quantidade de imagens usadas será a sua quantidade de slides diferentes.




Curiosidade: Uma imagem que faz parte de seu slideshow só “existe” no seu documento enquanto o slide em que ela está se encontra ativo. Você pode verificar isso no painel Layers: ao mudar de slide (também chamado de estado de objeto) o link anterior some e dá lugar ao link da imagem atual.







Com o slideshow pronto, vamos criar os botões para a navegação!

2. Criando os botões
Crie a aparência inicial do seu botão. Pode ser basicamente qualquer tipo de objeto: frame de imagem, frame de texto, vetores ou um grupo composto desses elementos. Depois, selecione o seu objeto, vá no painel Window > Interactive > Buttons e clique no ícone Convert object to a button. Uma vez que seu objeto foi convertido em botão, um tracejado irá aparecer ao redor dele assim como um ícone no canto inferior direito.[imagem 08][imagem 09]





Dica: Se você quiser uma lista de botões pré-criados, vá no menu do painel Buttons e clique em Sample Buttons. Isso irá abrir uma Library composta de botões padrão, basta arrastar um para o seu documento e usar.



Você pode alterar a aparência do botão quando o mouse estiver sobre ele [Rollover] e quando o mouse clicar sobre ele [Click]. Para isso, ative o box de visualização ao lado dessas opções, o ícone de um olho irá aparecer. Enquanto uma dessas opções estiver selecionada, você pode alterar a aparência do botão sem interferir nas outras visualizações. Experimente trocar a cor, a opacidade etc.


Alerta: se este botão for criado para a ADPS, não ative a opção [Rollover] pois o tablet é navegado com o dedo e nunca irá identificar um mouse passando sobre o botão.

Seu botão está com a aparência pronta. Agora, precisamos dar uma ação para ele. Selecione o botão, vá no painel Buttons e clique no símbolo +. Você pode inserir uma ação como “Go to Next State” (vá para o próximo slide), “Go to Previous State” (vá para o slides anterior) ou “Go to State” (vá para um slide). Nesse último caso, você deverá especificar no painel qual slide deverá se abrir quando clicar no botão.


Feito isso, hora de testar a interatividade. Vá em Window > Interactive > Preview e verifique no painel se o slideshow muda ao clicarmos no botão.



Com o slideshow pronto, resta agora exportar para uma animação SWF. Vá para File > Export e escolha salvar como um arquivo SWF. Na janela Export SWF que irá se abrir, em Interactivity and Media, ative a opção Include All. Clique em Ok e teste o resultado.



Caso esteja criando uma revista para tablet, você também pode usar o painel Overlay Creator para adicionar outras opções de interatividade, como fazer o slideshow começar automaticamente, entre outras opções.



É isso! E o incrível é que o slideshow é apenas uma das várias novas opções de interatividade. Portanto, o limite agora é apenas a nossa própria criatividade!

Recentes Posts

recentposts

Random

randomposts