Adobe InDesign – 6 modelos de interatividade para todos os formatos [download grátis]

Já parou para pensar qual recurso interativo do Adobe InDesign é o mais popular? O curinga das publicações digitais suportado pelos principais formatos e plataformas – ePUB, Web e APP.

Você deve estar pensando no hyperlink e não está errado. Afinal esse recurso também apresenta amplo suporte.

Contudo vamos um pouco além, pois hyperlink é um recurso básico. Quero abordar um mais elaborado e muito utilizado, em publicações digitais – Slideshow ou galeria de imagens.

Mas se você acha que um slideshow é sempre um conjunto de fotos empilhadas com setas de navegação está enganado. Ao menos, parcialmente.

Digo, parcialmente, porque slideshow é apenas uma das formas de se utilizar o painel Object States/Estados de Objeto), do Adobe InDesign.

Continue lendo este artigo para saber mais sobre os 6 modelos de interatividade, divididos em POP-UP, HOT SPOT e SLIDESHOW, incluindo as suas variações.

Aproveite nosso Template do Adobe InDesign com 6 modelos de interatividade para publicar com os principais formatos – EPUB, WEB e APP.
Download Grátis. Baixe Agora!

Vamos em frente!

Painel Object States

É aqui que tudo começa. Acesse pelo Menu Window > Interactive > Object States.

Selecione as imagens ou objetos e clique no ícone – New State (em destaque). Se você deseja exibir texto e imagem juntos, em cada state, agrupe-os antes.

Esteja atento aos sinais do painel Object States, as figuras abaixo sinalizam que todo Object States está selecionado (figura 1) e apenas um state está marcado para edição (figura 2).

Essa informação é importante, pois conforme o nível de seleção, a interface e ferramentas do Adobe InDesign são alteradas.

Saber identificar o que está selecionado no Object States é causa frequente de dúvida para maior parte dos usuários.

Uma dica que faço é o uso da “estrela”, localizada no rodapé do painel Object States . Para incluir um novo elemento no state este é o melhor caminho. Copie o objeto com Ctrl/Cmd + V, marque o state e clique no ícone da “estrela” para colar esse objeto no state selecionado. Copy/paste não vai funcionar!

O painel Object States é também conhecido como Multi State Objects ou apenas MSO. Para facilitar, a partir deste ponto, vou utilizar esse acrônimo para me referir ao painel – MSO.

Painel Buttons

Sozinho o MSO não faria muita coisa. De nada adianta ter um conjunto de imagens empilhadas se não for possível navegar entre elas. Para realizar essa ação usamos o Painel Buttons.

Use a opção Actions com Go To State para exibir um slide em específico ou marque Go To Next State e Go To Previous State para navegar entre as imagens.

E o preview?

Uma das vantagens do MSO está na fácil visualização do recurso, sem a necessidade de exportação. Acesse o comando EPUB Interactivity Preview, pelo menu Window > Interactive. Ou se preferir utilize o prático atalho direto do painel MSO (em destaque).

Painel Object States (MSO) na prática

A seguir aprenda como fazer um eBook no Adobe InDesign com os nossos 6 modelos diferentes de MSO, começando com um simples pop-up até um slideshow aninhado.

A estrutura básica se repete em todos – MSO e botões. Contudo, essa combinação pode acontecer de diferentes formas.

Antes de iniciar nosso tutorial preciso apresentar um item essencial, usado com frequência nos três tipos de MSO – pop-up, hot spot e slideshow – o state vazio.

State Vazio

Deixar o primeiro state do MSO vazio (em outras palavras, com um objeto nulo, sem fio e sem preenchimento), e a forma que temos para ocultar uma informação na página. Essa é a estrutura básica de um pop-up.

Para produzir um MSO com state vazio basta selecionar o conteúdo (texto ou imagem) +  o objeto nulo, e o resultado será como na figura abaixo.

E os botões?

Entender como aplicar os botões em cada tipo de MSO é o segredo para uma interatividade perfeita. Boas práticas com botões e MSO:

• Não converta o ícone em botão.
• Crie um objeto nulo, maior que o ícone, e converta esse objeto em botão.
• Aplique, sempre que possível, o botão fora do MSO.
• Deixe os botões numa camada separada, acima dos ícones e MSO

E só para imagens e textos?

Aproveite toda funcionalidade do MSO e inclua vídeos em seus projetos.

No Adobe InDesign importe arquivos de vídeos – Ctrl/Cmd + D – você pode combinar vídeo, imagem e texto em states separados, e se desejar ter vários elementos no mesmo state, não esqueça de agrupá-los antes.

Atenção ao formato do vídeo. Trabalhe, de preferência, com formato MP4, usando o codec H.264.

Aproveite nosso Template do Adobe InDesign com 6 exemplos de interatividade – Pop-up, Hot Spot e Slideshow. Download Grátis. Baixe Agora!

Agora sim, vamos aos tutoriais!

Nos tópicos a seguir você vai aprender como usar 6 tipos de interatividade para distribuição nos formatos ePUB – HTML e APP. São eles:

1. Pop-up Simples
2. Pop-up Duplo com 1 botão
3. Pop-up Duplo com 2 botões
4. Hot Spot
5. Slideshow
6. Slideshow Aninhado

Pop-up Simples

Sua característica é permitir a troca entre os states repetindo o clique/toque no mesmo botão. Para obter um pop-up simples precisamos dos itens abaixo:

• MSO com state vazio + conteúdo.
• 1 ícone para atrair o clique/toque do usuário.
• 1 botão com ação – Go to Next State.

Pop-up Duplo com 1 botão

Esse exemplo possui 2 ícones – um para exibir o conteúdo, outro para fechar. Contudo, utilizamos apenas 1 botão, o mesmo do exemplo anterior.

Esse pop-up é muito utilizado nas publicações digitais pelo efeito de troca dos ícones (exibir/fechar), já que os mesmos estão sobrepostos, com perfeição, cada ícone em seu próprio state do MSO.

O ícone de exibir é colocado junto com state vazio, já o ícone de fechar no state do conteúdo.

Para esse pop-up utilizamos os itens:

• MSO com state vazio e ícone de exibir + conteúdo e ícone de fechar.
• 2 ícones para atrair o clique/toque do usuário.
• 1 botão com ação – Go to Next State.

Pop-up Duplo com 2 botões

Quando não for possível manter os dois ícones sobrepostos, esse tipo de pop-up é indicado. A estrutura será a mesma do exemplo anterior, na qual cada ícone acompanha um state do MSO.

A principal diferença está na ação dos botões. Vamos usar um botão sobre cada ícone, com a ação Go to State.

O botão do state vazio aponta para o state do conteúdo e vice-versa.

Neste pop-up temos os seguintes itens:

• MSO com state vazio e ícone de exibir + conteúdo e ícone de fechar.
• 2 ícones para atrair o usuário.
• 2 botões com ação – Go to State.

Hot spot

Entenda o Hot spot como a união de vários pop-ups. Muito útil para ilustrar mapas e infográficos. Sua estrutura consiste em um MSO com conteúdos separados por state, além de ícones posicionados em diferentes pontos do layout.

Para melhorar a experiência do usuário aplique o conteúdo num único MSO (com vários states), assim a cada clique o conteúdo é alterado, como num grande slideshow.

Conheça os itens que formam o Hot spot:

• MSO com state vazio + nro X de states de conteúdo
• nro X  de ícones para atrair usuário
• nro X de botões com ação – Go to State

Slideshow

A galeria de imagens representa o exemplo mais clássico de MSO, sua principal característica é o empilhamento do conteúdo, diferente do Hot spot que exibe o conteúdo espalhado no layout.

Um típico recurso interativo que aumenta a área útil da página, permitindo a inclusão de mais conteúdo, ocupando o mesmo espaço.

A navegação entre os slides pode ocorrer através de setas, ícones, miniaturas ou até mesmo uma combinação desses elementos.

Devido a essa flexibilidade podemos usar botões com ação Go to Next/Previous State (setas) ou Go to State (ícones/miniaturas).

Não é comum utilizar o state vazio com slideshow, pois neste caso não se deseja ocultar o conteúdo.

Para ter um slideshow você vai precisar desses itens:

• MSO com nro X de states de conteúdo.
• nro X  de ícones/miniaturas para atrair o usuário.
• nro X de botões com ação – Go to State.

Slideshow aninhado

Slideshow aninhado significa usar um slideshow inserido no state de outro (slideshow). O que permite utilizar dois níveis de conteúdo.

Neste exemplo vamos passar a fronteira do Adobe InDesign, pois esse recurso não é suportado pelo painel MSO. Para contornar essa limitação a solução está em aplicar o segundo slideshow numa caixa de texto.

Uma vez que o (segundo) slideshow esteja dentro da caixa de texto podemos inseri-la no state escolhido do slideshow principal (lembre-se do ícone “estrela”).

Para ter um slideshow aninhado você vai precisar dos itens:

• 1 MSO com nro X de states de conteúdo – slideshow principal
• 1 MSO com nro X de states de conteúdo, dentro de uma caixa de texto – segundo slideshow (aninhado)
• nro X  de ícones/miniaturas para atrair usuário, para cada MSO
• nro X de botões com ação – Go to State, para cada MSO

Distribuição

Todos os exemplos de MSO demonstrados neste tutorial são compatíveis com três formas de distribuição:

• ePUB de Layout Fixo.
• Publish Online (web)
• APP

Vamos detalhar cada possibilidade de formato e plataforma. Você poderá acessar os exemplos de MSO diretamente em cada canal de distribuição.

ePUB

Livros infantis, apresentações, catálogos entre outras publicações podem se beneficiar desses recursos interativos.

A exportação para ePUB de Layout Fixo, do Adobe InDesign, permite a distribuição via site, email ou livraria digital (iBooks Store).

Ideal para quem deseja disponibilizar a publicação para download, para acesso off-line ao conteúdo.

Publish Online

Recente recurso do Adobe InDesign que permite a publicação de conteúdo online para acesso direto pelos navegadores.

Se você deseja distribuir publicações interativas online, essa é a maneira mais simples e eficiente.

Todo conteúdo fica hospedado com a Adobe, e cada publicação é monitorada, disponibilizando relatórios sobre o número de acessos e tempo de leitura.

Fique por dentro dos recursos do Publish Online com esta série de artigos – InDesign CC 2015.1, CC 2015.2  e CC 2015.3

>> Veja a versão Publish Online.

APP

O painel MSO é compatível com as principais plataformas de produção de APP, para publicações produzidas com Adobe InDesign.

Saiba mais sobre como produzir e distribuir Publicações Digitais com InDesign para APPs neste artigo especial.

Através de plug-ins, tipo o Folio Overlay, da plataforma Adobe Experience Manager, é possível ter mais controle sobre o uso do MSO.

Por exemplo, numa publicação digital para App podemos usar a função Swipe to Change Image, ou seja, permitir a mudança das imagens com o arrastar do dedo.

Conclusão

Se você baixou nossos exemplos nos formatos e plataformas citadas – ePUB, Publish Online e APP – com certeza  comprovou a flexibilidade do painel Object States e todas as suas variações.

Os exemplos para cada formato foram produzidos a partir do mesmo arquivo de InDesign. Produza uma só vez e distribua em várias plataformas!

Se estiver procurando por inspiração para slideshow, pop-up e hot spot, disponibilizamos nossa template 100% editável, em Adobe InDesign,  para você aqui.

E se quiser aprofundar seus conhecimentos sobre publicações digitais, temos 2 cursos que ensinam todo passo a passo para produzir eBooks/ePUB 3 ou Publicações Digitais para App.

Forte abraço!
Até o próximo artigo…