Tutorial 3: Adicionar sobreposições interativas

À medida que navegar por essa tutorial, você trabalhará com a pasta CityGuide_Folio na pasta TutorialAssets. Você criará objetos interativos diretamente em InDesign. No fim desta lição, será possível ver como a primeira página do artigo principal deve parecer no iPad.

Fólio concluído exibido no iPad

A. Modo de exibição Paisagem (horizontal) B. Modo de exibição Retrato (vertical) C. Hiperlinks D. Sobreposições de vídeo 

Se ainda não tiver feito isso, faça o download dos ativos do tutorial. Consulte Configuração do tutorial.

Importar artigos

Na lição anterior, você criou um artigo abrindo o documento de origem e escolhendo Adicionar arquivo. Outro método é importar artigos. Se usar a estrutura de pasta e as convenções de nomenclatura de arquivo adequadas, você pode importar um único artigo ou diversos artigos.

Ao importar um artigo, aponte para a pasta do artigo. Ao importar vários artigos, aponte para a pasta do fólio.

  1. Antes de importar artigos, abra os documentos de origem do InDesign da pasta TutorialAssets > CityGuide_Folio para verificar se todos os links estão atualizados e se os arquivos estão salvos.

  2. Navegue até a exibição do artigo e escolha Importar artigo do menu do painel do Folio Builder.

  3. Selecione Importar vários artigos.

  4. Clique no ícone da pasta Local e navegue até TutorialAssets > CityGuide_Folio. Clique em Abrir.

    Selecione a pasta CityGuide_Folio e não uma subpasta.

  5. Clique em OK para importar os artigos da pasta CityGuide_Folio e fazer seu upload para o servidor.

  6. Arraste e solte o artigo WiFi Ad no final da lista.

    Painel do Folio Builder após a importação de artigos

Alterar propriedades do fólio

  1. No painel do Folio Builder, clique no ícone da seta para retornar para a exibição do fólio. Selecione o fólio Guia da cidade e escolha Propriedades do fólio no painel Folio Builder.

  2. Em Nome da publicação, digite Guia mensal da cidade.

    O Nome da publicação é diferente do Nome do fólio. O Nome da publicação aparece no visualizador. O Nome do fólio é usado para fins internos, como renderizações de link e configuração.

  3. Caso ainda não o tenha feito, especifique Cover_v.jpg para Vertical e Cover_h.jpg para Horizontal e clique em OK. Essas imagens da capa aparecem na pasta CityGuide_Folio.

    A visualização da capa aparece na biblioteca do visualizador. As visualizações da capa são obrigatórias para publicar o aplicativo.

    Caixa de diálogo Propriedades do fólio

Adicionar um hiperlink interativo

Agora você editará os documentos Enjoy para incluir objetos interativos.

O InDesign inclui vários recursos de interatividade. No entanto, somente alguns desses recursos funcionam com as ferramenta de publicação digital. Além dos recursos nativos suportados, o painel Criador de sobreposição inclui sobreposições interativas que funcionam somente com as ferramentas de publicação digital.

Primeiro, crie um objeto de hiperlink para o logotipo "D. I. Y. Meet".

  1. No painel do Folio Builder, navegue até a exibição do layout do Enjoy_Article e clique duas vezes no layout Retrato para abrir Enjoy_v.indd.

  2. Selecione a ferramenta Retângulo na barra de ferramentas e arraste o retângulo pelo logotipo “D.I.Y. Meet” na primeira página. Verifique se o retângulo não tem um traço ou preenchimento.

  3. Abra o painel Hiperlinks (selecione Janela > Interativo > Hiperlinks) e clique em Novo hiperlink no menu do painel.

  4. Selecione a URL no menu Link Para e digite uma URL no campo da URL (usamos http://www.bikeworks.org/). Desmarque o Destino do Hyperlink Compartilhado. Em Aparência, mantenha o Retângulo invisível e Desmarcado. Clique em OK.

    Como aplicar um hyperlink a uma estrutura retangular

  5. No painel do Folio Builder, clique duas vezes no Layout Paisagem para abrir o documento Enjoy_h.indd. Copie e cole o objeto do hyperlink do arquivo Enjoy_v.indd para o arquivo Enjoy_h.indd. Mova o objeto pelo logotipo “D.I.Y. Meet”.

  6. Para visualizar o documento rapidamente, salve o documento e escolha Arquivo > Visualização de fólio Clique em hyperlink. Saia do Adobe Content Viewer.

Por padrão, os hyperlinks abrem em um Visualizador de aplicativos e não em um navegador móvel. É possível usar o Painel do Criador de sobreposição para alterar as configurações para que abram um site no Safari móvel. A seguir, você saberá mais sobre o painel Criador de sobreposição.

Criar uma sobreposição de filme

Os filmes que você adicionar no documento InDesign se tornarão interativos quando os arquivos forem agrupados. Você adicionará o vídeo e então usará o painel Criador de sobreposição para alterar as configurações. Adicionaremos um filme de ciclismo.

  1. No arquivo Enjoy_h.indd file, escolha Arquivo > Local, navegue em CityGuide_Folio > Enjoy_Article > Pasta de links e clique duas vezes em cycling_432x234.mpg. Insira o arquivo de filme no canto superior direito.

    Os designers criaram uma imagem de vídeo com um ícone de filme para indicar que o objeto é interativo. Em seguida, você usará essa imagem como pôster.

  2. No painel Mídia (Janela > Interativo > Mídia), selecione Escolher imagem do menu pop-up de Pôster. Clique duas vezes em cyclist.jpg no CityGuide_Folio > Enjoy_Article > Pasta de links.

    A nova imagem de pôster está sendo exibida. Agora vamos usar o painel Criador de sobreposição para determinar como o filme será exibido.

  3. Selecione Janela > Extensão > Overlay Creator para abrir o painel do Overlay Creator.

  4. Com o objeto de filme ainda selecionado, selecione Tocar para exibir o controlador no painel do Overlay Creator.

    Como usar o Criador de sobreposição para editar configurações de filme

  5. Usando a ferramenta Selecionar, copie a imagem, mova para Enjoy_v.indd e cole-a. Mova ela para a área vazia na primeira página e alinhe-a para os objetos próximos.

  6. Para visualizar o filme, salve o documento e escolha Arquivo > Visualização de fólio. Clique no filme para reproduzi-lo. Saia do Adobe Content Viewer.

Criar uma sobreposição de apresentação de slides

Agora vamos criar uma apresentação de slides interativa usando o painel de Estados do objeto. Já adicionamos as imagens à segunda página do arquivo “Enjoy” vertical. Você deve organizá-los em uma pilha, convertê-los em um objeto de multiestado e criar botões que naveguem por todos os slides.

  1. Abra Enjoy_v.indd no InDesign e vá para a página 2.

  2. Selecione as sete imagens entre as setas vermelhas e clique nos botões Alinhar centros horizontais e Alinhar centros verticais no Painel de controle. Centralize as imagens entre as setas.

  3. Com as imagens ainda selecionadas, escolha Janela > Interativo > Estados do objeto para exibir o painel Estados do objeto. Clique em Converter seleção para botão de Objeto multiestado.

    Imagens combinadas a um objeto de multiestado

    Cada imagem aparece em um estado separado no painel Estados do objeto.

  4. No painel Estados do objeto, altere o Nome do objeto para Lesmas do mar.

    Quando os objetos de multiestado dos documentos na horizontal e na vertical tiverem o mesmo nome de objeto, o estado será lembrado ao girar o iPad. Agora que você criou o objeto de multiestado, é necessário permitir aos usuários que percorram por eles.

  5. Escolha Janela > Interativo > Botões para exibir o painel Botões e selecione a seta vermelha à esquerda.

  6. Clique em Converter objeto em botão e escolha Ir para o estado anterior no ícone +, ao lado de Ações.

    Crie botões de navegação

    Agora vamos fazer com que a aparência do botão mude levemente enquanto o usuário o toca.

  7. Clique em [Clique], no painel Botões, e no ícone Sombra, no painel de controle.

  8. Selecione a seta vermelha à direita, converta-a em um botão e aplique a ação Ir para próximo estado. Faça com que a [Click] aparência vire uma sombra projetada.

    Os botões permitem que os usuários toquem para mover imagem a imagem. Além disso, vamos permitir que eles arrastem e avancem por todos os slides.

  9. Selecione o objeto de multiestado. No painel Criador de sobreposição, selecione Arrastar para alterar o estado.

    Ative o recurso arrastar para a apresentação de slides

  10. Copie e cole as setas e o objeto de multiestado do arquivo Enjoy_v.indd para página 2 do arquivo Enjoy_h.indd. Mova as setas para baixo do objeto de multiestado para obter um tamanho melhor.

  11. Para visualizar a apresentação de slides, salve o documento e escolha Arquivo > Visualização de fólio. Clique nos botões de navegação para mover por todos os slides. Saia do Adobe Content Viewer.

Criar uma sobreposição de panorama

Os panoramas exigem seis imagens, cada uma das quais representa um lado dentro de um cubo.

  1. Abra Enjoy_v.indd e vá para a página 3.

  2. Selecione a ferramenta Estrutura retangular na caixa de ferramentas e arraste-a para criar um retângulo de qualquer tamanho.

  3. No painel do Overlay Creator, selecione Panorama.

  4. Clique na pasta Origem e selecione a pasta CourtyardPano em CityGuide_Folio > Enjoy_Article > Pasta de links. Clique em Abrir.

    O retângulo do espaço reservado assumiu a forma de imagens do panorama, mas queremos que a área de clique seja menor.

  5. Mantendo pressionadas as teclas Ctrl+Shift (Windows) ou Command+Shift (Mac OS), arraste uma alça de seleção para redimensionar o objeto do panorama até que ele tenha aproximadamente 400x400 pixels.

    Crie uma sobreposição de panorama

    Vamos usar as configurações padrão do panorama para oferecer uma ampla variedade de movimentos.

  6. Copie e cole o objeto do panorama do arquivo Enjoy_v.indd na página 3 do arquivo Enjoy_h.indd.

  7. Salve e feche os arquivos do InDesign.

Visualizar o fólio no iPad (somente Mac OS)

Em seguida, você usará o recurso Visualizar no dispositivo para visualizar o fólio. Se você estiver utilizando um computador com Windows, passe para a próxima seção para saber como visualizar para upload e download de arquivos.

  1. Caso ainda não o tenha feito, instale o Adobe Content Viewer da App Store em seu iPad. Na App Store, pesquise por “ Content Viewer”.

  2. Conecte o iPad ao computador Mac OS e inicie o aplicativo Adobe Content Viewer.

  3. No painel do Folio Builder, navegue até o fólio Guia da cidade que você acabou de criar.

  4. Na parte inferior do painel, escolha Visualizar > Visualizar em [nome do dispositivo iPad].

  5. Visualize o fólio Revista Guia da cidade.

    • Gire o iPad de forma que seja possível visualizar ambas as versões horizontal e vertical do arquivo.

    • Arraste para a esquerda e para a direita a fim de visualizar artigos diferentes. Arraste com o dedo para cima e para baixo para ler o artigo.

    • Navegue pelo artigo Enjoy. Verifique se as sobreposições interativas funcionam.

    • Toque em uma área não interativa para exibir as barras de navegação e toque no botão Inicial para ir até o início do fólio. Toque no Botão Sumário no canto superior esquerdo para visualizar o sumário e as miniaturas. Arraste o Depurador para rolar pelas visualizações do artigo.

    Tocar para exibir barras de navegação no Adobe Content Viewer

Fazer upload e visualizar os arquivos

Também é possível visualizar fólios no iPad acessando o painel do Folio Builder, fazendo upload e baixando o fólio.

  1. No painel Folio Builder, escolha Entrar no menu do painel. Entre usando a ID da Adobe que será verificada para funcionar com a DPS.

    Se você tiver uma associação Creative Cloud, use as credenciais do Creative Cloud. Se você não tiver uma associação Creative Cloud, entre em http://digitalpublishing.acrobat.com e siga os instruções para verificar sua conta.

  2. Após fazer logon, selecione o fólio Guia da cidade no painel e escolha Fazer upload no Folio Producer no menu do painel.

    O upload dos itens do fólio é feito no servidor da acrobat.com.

  3. Instale o Adobe Content Viewer da App Store em seu iPad, caso ainda não tenha feito isso.

    Observação:

    caso tenha um dispositivo móvel diferente, como um tablet Android ou um Kindle Fire, você poderá baixar o Adobe Content Viewer do Google Play ou da Amazon Appstore.

  4. No iPad, inicie o Adobe Content Viewer.

  5. Caso não tenha feito log in ainda, toque no botão Fazer logon. Entre usando a mesma ID da Adobe que usou para entrar no painel do Folio Builder.

    O iPad deve estar conectado à Internet para que você possa fazer logon.

  6. Quando solicitado, baixe e visualize o fólio da Revista do Guia da cidade.

    Se você editar um documento InDesign de origem, selecione o artigo e escolha Atualizar no menu do painel para atualizar os artigos. No Adobe Content Viewer no iPad, você será solicitado a baixar o fólio atualizado.

Para onde ir agora?

Você aprendeu as noções básicas de como criar artigos e fólios e adicionar sobreposições interativas. Para saber mais sobre sobreposições e outros recursos da DPS, siga um dos seguintes procedimentos:

  • Abra os documentos de origem em Overlay_Examples_Folio, e experimente com os diferentes ativos de sobreposição. Você pode editar as sobreposições existentes nos documentos ou criar suas próprias sobreposições.

  • Baixe o aplicativos de Dicas da DPS. Pesquise por “Dicas da DPS” na App Store de seu iPad ou iPhone, ou faça uma pesquisa nos dispositivos Google Play Store para Android ou Amazon Appstore para o Kindle Fire.

  • Deseja publicar um aplicativo na Apple App Store? Se for um assinante do Adobe Creative Cloud, poderá criar e enviar um número ilimitado de aplicativos de fólios individuais para o iPad. Ou adquira a licença do Single Edition para criar um aplicativo de fólio individual. Quando estiver pronto para criar seu aplicativo, selecione-o no painel Folio Builder, e escolha Criar aplicativo do menu do painel. Você será solicitado a baixar o Guia de publicação passo a passo. Siga as instruções deste guia para criar seu primeiro aplicativo.

  • Se quiser criar aplicativos com vários fólios, obtenha uma assinatura Professional ou Enterprise da Digital Publishing Suite.

Receba ajuda com mais rapidez e facilidade

Novo usuário?