124
Especialização em Design Gráfico Prof. Daniel Paz [email protected] Projeto de Design Editorial Digital

Projeto de design editorial digital

Embed Size (px)

Citation preview

Page 1: Projeto de design editorial digital

Especialização em Design Gráfico

Prof. Daniel [email protected]

Projeto de DesignEditorial Digital

Page 2: Projeto de design editorial digital

Revista Digital

Page 3: Projeto de design editorial digital

Revista Digital

3

● Publicação periódica formatada para leitura em tablets;

● Junção de elementos gráficos e editoriais de mídia impressa com recursos digitais:○ Leitura Multimídia: textos e gráficos + áudios, vídeos e infográficos interativos.○ Interatividade: decisão de acesso.○ Hipertexto: links permitem uma experiência dinâmica

● Possui uma narrativa digital imersiva, mantendo a personalidade editorial e gráfica de uma publicação impressa.

● Periodicidade: Diária, Semanal, Quinzenal, Mensal, Bi-mensal.

● Segmentação: ○ Público-alvo mais restrito: masculina/feminina, juvenil, infantil.○ Interesse: automóveis, culinária, etc.○ Profissional: medicina, publicidade, informática.○ Empresas, instituições, associações, etc.

Page 4: Projeto de design editorial digital

Revistas Digitais

4

● Orientação dupla: vertical ou horizontal.

● Profundidade: orientação (esquerda para direita o vice-versa), páginas acima e abaixo de outras.

● Combina recursos textuais e multimidiáticos.

● Todo o conteúdo deve ser relacionado e relevante.

● Os elementos gráficos e digitais devem facilitar a legibilidade e compreensão dos conceitos e temas abordados.

● Arquivos de mídia:○ Áudio: MP3 com compressão de 128 kbps○ Vídeo: MP4 com compressão MPEG4 AVC (h.264). Compatível com iTunes.○ Imagens: JPEG, TIFF, PNG, PSD, EPS, AI, PDF e INDD. Aproximadamente 72ppi (padrão ADPS). ○ Cores: RGB

Page 5: Projeto de design editorial digital

Diagramação

5

● Similar ao impresso: frames para textos e mídias.● Os elementos não devem “sangrar”● Adaptações do impresso para digital:

○ desativar Páginas Opostas (Configurar documento)○ unidades em pixels (Réguas)○ Espaço de Mistura de Transparência para RGB (menu Editar)○ cores na paleta Cor para RGB (opção no Painel Cor)○ alterar medidas do arquivo Arquivo > Configurar documento >

Largura/Altura

Page 6: Projeto de design editorial digital

Plugins para interatividade

6

● InDesign CS5○ Mac: http://www.adobe.com/support/downloads/detail.jsp?ftpID=5017 ○ Windows: http://www.adobe.com/support/downloads/detail.jsp?ftpID=5018

● InDesign CS5.5○ Mac: http://www.adobe.com/support/downloads/detail.jsp?ftpID=5019 ○ Windows: http://www.adobe.com/support/downloads/detail.jsp?ftpID=5020

● Ferramentas de desktop para ADPS○ https://helpx.adobe.com/br/digital-publishing-suite/help/installing-digital-publishing-tools.html

● Adobe Air (para o Adobe Content Viewer)○ http://get.adobe.com/air

Page 8: Projeto de design editorial digital

Adobe Digital Publishing Suite

Page 9: Projeto de design editorial digital

Adobe Digital Publishing Suite

9

Page 10: Projeto de design editorial digital

Adobe Digital Publishing Suite

10

O Adobe Digital Publishing Suite permite que usuários de dispositivos móveis acionem conteúdo interativo em um formato de revista.

Designers que publicam revistas impressas usando o Adobe® InDesign® podem disponibilizar esse conteúdo em dispositivos móveis.

Editores podem incluir conteúdo interativo em seus projetos, permitindo que seus leitores visualizem mídia de uma forma totalmente diferente.

Os usuários podem usar gestos de mão para virar em uma apresentação de slides, deslocar e aumentar o zoom de imagens, girar objetos 360° e muito mais.

Page 11: Projeto de design editorial digital

Fólios

Page 12: Projeto de design editorial digital

Fólios

12

Um fólio inclui um ou mais artigos de publicação digital.

Um fólio aparece como uma edição na biblioteca do Adobe Content Viewer ou de um visualizador personalizado com diversas edições.

Page 13: Projeto de design editorial digital

Painel Folio Builder

13

O painel Folio Builder permite criar fólios e adicionar artigos.

O painel Folio Builder inclui três modos de visualização: fólio, artigo e layout.

Para navegar, siga uma das seguintes ações:

● Clique duas vezes em um fólio ou clique na seta à direita do fólio para exibir os artigos do fólio.

● Clique duas vezes em um artigo ou clique na seta à direita do artigo para exibir os layouts do artigo.

● Clique no ícone de seta no canto superior esquerdo do painel para mover para um nível acima.

Page 14: Projeto de design editorial digital

Painel Folio Builder

14

Exibição de Folio Exibição de Artigos Exibição de Layout

Exibição do Fólio Builder

Page 15: Projeto de design editorial digital

Login no Folio Builder

15

Use uma ID da Adobe para fazer login no Folio Builder.

Ao fazer o login no Folio Builder é possível carregar fólios para o site acrobat.com para fazer download de fólios para o Adobe Content Viewer em um dispositivo móvel e compartilhar fólios com outros usuários.

Sem login no painel, ainda é possível criar e visualizar fólios locais e criar um aplicativo Single Edition.

Page 16: Projeto de design editorial digital

Criação de Fólios

16

Ao fazer login e criar um fólio, uma área de trabalho é criada no servidor web acrobat.com. O conteúdo de qualquer artigo adicionado ao fólio é transferido por upload para esse espaço de trabalho.

1. Para abrir o painel “Folio Builder”, acesse: Janela > Folio Builder.

2. Clique em “Login” e entre usando uma ID da Adobe verificada.

3. Se não for feito login no painel “Folio Builder”, será possível criar um fólio off-line. Em seguida, será possível carregar esse fólio off-line após fazer login.

4. Clique em “Novo” para criar um novo fólio.

5. Especifique as configurações a seguir e clique em “OK”.

Outra opção é: Arquivo > Novo > Fólio

Page 17: Projeto de design editorial digital

Criação de Fólio

17Janela de propriedades do novo fólio

Page 18: Projeto de design editorial digital

18

● Nome do Fólio: o nome do fólio é diferente do Nome da Publicação que aparece no visualizador. O número máximo de caracteres para Nome do fólio é 60.

● Versão do visualizador: esta opção é especialmente útil se a versão mais recente do Adobe Content Viewer estiver aguardando aprovação ou se estiver criando fólios para um aplicativo de visualizador anterior. Depois de criar um fólio, é possível editar as propriedades do fólio para aumentar o número da versão, mas não é possível reverter para uma versão anterior. Em vez disso, crie um novo fólio. Não se pode especificar uma versão do visualizador anterior à v20.

● Dispositivo de destino: selecione o dispositivo de destino ou especifique as dimensões personalizadas do dispositivo de destino, como 2048 x 1536 em um iPad HD.

● Orientação: indique se o fólio é somente retrato, somente paisagem, ou se possui orientação dupla. Para visualizar ou publicar o fólio, todos os artigos devem corresponder à orientação do fólio. Por exemplo, se um fólio de dupla orientação incluir um artigo somente com layout de retrato, o fólio não poderá ser baixado na biblioteca do Adobe Content Viewer.

Criação de Fólio

Page 19: Projeto de design editorial digital

19

● Formato padrão: artigos individuais podem ter configurações diferentes de Formato de artigo. Escolha Automático se quiser que o InDesign determine se as páginas devem ser exportadas como JPEG ou PNG. A escolha de PDF permite que os usuários apertem para aumentar ou diminuir o zoom, preservem os vetores e reduzam o tamanho do arquivo.

● Qualidade JPEG padrão: se a opção Automático ou JPG estiver selecionada para Formato de imagem padrão, especifique a Qualidade JPEG. Mais qualidade aumenta o tamanho do arquivo.

● Visualização da capa: uma imagem de visualização representa cada fólio adicionado ao visualizador na biblioteca de visualizações.

● Criar fólio off-line: selecione essa opção se não deseja carregar o conteúdo do fólio no servidor no momento. Posteriormente, pode-se escolher Carregar no Folio Producer no menu painel para carregar o conteúdo do fólio.

Criação de Fólio

Page 20: Projeto de design editorial digital

20

A caixa de diálogo “Propriedades do fólio” permite especificar um nome de publicação, alterar a versão de visualizador e escolher imagens de visualização de capa.

Algumas propriedades do fólio, como orientação, formato de imagem e tamanho do fólio, não podem ser editadas na caixa de diálogo “Propriedades do fólio”. Se necessário, crie um novo fólio com as configurações apropriadas.

1. No painel do “Folio Builder”, selecione um fólio.

2. Escolha “Propriedades do fólio” no menu do painel “Folio Builder” para abrir a caixa de diálogo “Propriedades do fólio”.

3. Especifique as configurações a seguir e clique em “OK”.

Alteração de Propriedades de Fólio

Page 21: Projeto de design editorial digital

21

● Nome do fólio: aparece no Folio Producer e no painel do Folio Builder, mas não aparece no visualizador. Se estiver criando renderizações para diferentes dispositivos, certifique-se de que suas configurações de Nome do Folio sejam iguais entre as renderizações.

● Nome da publicação: aparece na biblioteca do visualizador e na barra de navegação do visualizador. O número máximo de caracteres para Nome de publicação é 60.

● Número do fólio: pode ser um número ou uma descrição, como "maio de 2013". O número máximo de caracteres para Número do fólio é 60.

● Data de publicação: determina a ordem dos fólios na biblioteca. Os fólios mais recentes são exibidos na parte superior. A configuração da Data de Publicação é especialmente importante para visualizadores por assinatura nos quais os clientes têm direito a fólios dentro de uma duração específica conforme determinação das configurações da Data de Publicação.

● ID do produto: especificado quando o fólio é publicado. Não é possível editar este campo diretamente. A ID do Produto é especialmente importante para fólios de varejo. Ela vincula o fólio à ID do produto de compra in-app na loja de aplicativos. O número máximo de caracteres para ID do produto é 60.

Alteração de Propriedades de Fólio para publicação

Page 22: Projeto de design editorial digital

22

● Publicado: uma marca de seleção é exibida na coluna Publicado se o fólio for publicado.

● Bloqueado(s): para impedir que alguém faça o upload de uma nova versão do artigo ou altere os metadados do artigo. Um ícone de bloqueio aparecerá ao lado do artigo no painel Folio Builder de qualquer usuário que tiver acesso ao fólio.

● Visualizações de capas: especifique arquivos .png ou .jpg para as imagens que aparecem na biblioteca do visualizador.

● Descrição: aparece na biblioteca do visualizador e na barra de navegação do visualizador.

● Filtro de biblioteca: nome do filtro para cada fólio de seu aplicativo. O número máximo de caracteres para o Filtro da biblioteca é 60.

● Vinculação à borda direita: exibe artigos da direita para esquerda, e não da esquerda para direita no visualizador. A opção é especialmente importante para idiomas asiáticos.

● Data de cobertura: controle de metadados adicional que dá a certos publicadores Enterprise maior controle sobre a titularidade direta.

Alteração de Propriedades de Fólio para publicação

Page 23: Projeto de design editorial digital

Criação de Fólios off-line

23

Um fólio off-line ou local não é carregado no serviço acrobat.com.

Criar um fólio off-line é útil quando não se está conectado à Internet ou se o serviço acrobat.com está fora do ar temporariamente.

Não é possível converter um fólio carregado para um fólio off-line.

Page 24: Projeto de design editorial digital

Criação de Fólios off-line

24

1. Para criar um fólio off-line, execute uma das ações a seguir:○ Clique em “Criar novo fólio” no painel “Folio Builder”quando não estiver

conectado.○ Clique em “Criar novo fólio” no painel “Folio Builder” e selecione “Criar

fólio off-line”.

2. Adicione artigos e edite o fólio. Ao visualizar ou carregar um fólio off-line, o fólio é atualizado automaticamente para considerar as alterações nos documentos InDesign de origem. Não é necessário escolher “Atualizar” para atualizar um fólio off-line.

3. Para carregar o fólio, faça login no painel “Folio Builder”, selecione o fólio e escolha “Carregar no Folio Producer” no menu painel. É possível carregar um fólio off-line somente se os arquivos de origem estiverem disponíveis. Depois de carregar um fólio, não é possível tornar o fólio local.

Page 25: Projeto de design editorial digital

Compartilhar Fólio

25

Compartilhe um fólio para permitir que outras pessoas revisem o fólio no qual se está trabalhando ou se quiser disponibilizá-lo para essas pessoas.

Por exemplo, se estiver criando um anúncio para um editor, poderá compartilhar com esse editor o fólio que contém esse anúncio. Ou, se for um editor, poderá compartilhar um fólio com diferentes designers para permitir que eles façam o upload de artigos.

Sempre que um artigo é atualizado no fólio compartilhado, os receptores são notificados de que uma atualização está disponível quando abrem a biblioteca no Adobe Content Viewer.

Caso não deseje que os receptores exibam atualizações, não compartilhe o fólio.

Page 26: Projeto de design editorial digital

Compartilhar Fólio

26

1. No painel do “Folio Builder”, selecione um fólio.

2. Escolha “Compartilhar” no menu do painel do “Folio Builder”.

3. Na caixa de diálogo “Compartilhar”, digite os endereços de email das pessoas com as quais se deseja compartilhar o fólio. Use vírgula ou ponto-e-vírgula para separar os endereços de email. Pressione Tab para ir ao próximo campo.

4. Digite o assunto e a mensagem e clique em “Compartilhar”.

Quando os destinatários abrem o Adobe Content Viewer em um dispositivo móvel, o fólio compartilhado está disponível para download.

Se os destinatários abrirem o fólio no painel Folio Builder, um ícone de compartilhamento aparecerá ao lado do nome do fólio no Folio Builder. Os destinatários podem abrir o fólio e adicionar artigos. Entretanto, não podem editar artigos existentes.

Page 27: Projeto de design editorial digital

Não compartilhar Fólio

27

● Não compartilhar fólios: para não compartilhar um fólio que compartilhou com outras pessoas, selecione-o no painel do Folio Builder e escolha “Não compartilhar” no menu do painel. Selecione os destinatários com os quais deseja não compartilhar e clique em OK. O não compartilhamento torna o fólio indisponível para download e o remove do painel do Folio Builder de destinatários compartilhados, mas não remove os fólios que foram baixados para dispositivos. A exclusão de um fólio compartilhado também o torna indisponível para download.

● Remover um fólio compartilhado com você: se alguém tiver compartilhado um fólio com você e você não quiser mais acesso a ele, selecione o fólio no painel do Folio Builder e clique no ícone de lixeira. A exclusão do fólio compartilhado remove suas informações da lista de destinatários compartilhados do proprietário.

Page 28: Projeto de design editorial digital

Copiar Fólios

28

É possível copiar uma página de sua conta ou copiar um fólio compartilhado com você a partir de outra conta. Copiar um fólio publicado ou não publicado cria um novo fólio no servidor do Folio Producer (acrobat.com)

1. No “Folio Producer Organizer” (http://digitalpublishing.acrobat.com), selecione um fólio e clique em Copiar.

2. Especifique o nome do fólio copiado e clique em Copiar.

Quando se copia um fólio, não existe nenhuma conexão entre os fólios. Para editar artigos alterando os arquivos de origem, é preciso ter acesso aos arquivos de origem. Se o fólio tiver sido compartilhado a partir de um computador diferente, será possível obter os arquivos de origem e vincular os artigos para editar o conteúdo do fólio.

Fólios bloqueados não podem ser copiados.

Page 29: Projeto de design editorial digital

Excluir um Fólio

29

Ao excluir um fólio, é removido o espaço de trabalho do servidor e excluídos todos os artigos desse fólio, mas não os documentos de origem. Se foi publicado um fólio no Distribution Service, use o “Folio Producer Organizer” para remover o fólio antes de excluí-lo. Evite remover e excluir fólios de varejo.

1. Se o fólio for publicado, use o botão “Cancelar publicação” no “Folio Producer Organizer” (http://digitalpublishin.acrobat.com) para remover o fólio do “Serviço de Distribuição”.

2. Selecione um fólio no painel do “Folio Builder” e clique no botão de Lixeira.

Se um fólio for baixado em um visualizador antes de ser excluído, ele permanece na biblioteca do visualizador até ser removido.

Page 30: Projeto de design editorial digital

Organização de Fólios

30

● Criar uma pasta de folio identificando:○ nome da publicação○ número da edição○ formato da tela

● Cada artigo deverá ser uma subpasta dentro da pasta de folio:○ a primeira página do primeiro artigo é a Capa○ a segunda pasta de artigo é didática○ a ordem pode ser dada no próprio nome da subpasta○ a sequência poderá ser ajustada posteriormente○ para importação de artigo, o nome do arquivo deve conter _v ou _h

Page 31: Projeto de design editorial digital

Organização de Fólios

31Uma pasta de folio para cada resolução

Page 32: Projeto de design editorial digital

Organização de Fólios

32Artigos organizados pelo nome. Pasta links com os arquivos de mídia usados no artigo.

Page 33: Projeto de design editorial digital

Orientação dupla

33Nomenclatura _h ou _v para orientação dupla. Para orientação única não é necessária nomenclatura específica.

Page 34: Projeto de design editorial digital

Layout Líquido

34

Tornam mais fácil criar conteúdo para vários tamanhos de páginas, orientações ou dispositivos. Aplique regras de página líquidas para determinar como os objetos em uma página se adaptam quando criar layouts alternativos e altere o tamanho, a orientação, ou a proporção.

Somente uma regra de página líquida pode ser aplicada a uma página por vez. O Layout líquido é um termo geral que cobre um conjunto de regras de página líquidas específicas: escala, recentro, regras de página baseadas no guia e baseadas em objeto.

Para aplicar uma regra de página líquida, selecione a “Ferramenta Página” e clique em uma página. Em seguida, escolha uma regra de layout líquido da barra de controle. Também é possível usar o Layout > Layouts líquidos.

Page 35: Projeto de design editorial digital

Regras de página líquida: Escala

35

● Escala: todo o conteúdo da página é tratado como um grupo, e à medida que a página é redimensionada, todos os elementos são redimensionados proporcionalmente.

Page 36: Projeto de design editorial digital

Regras de página líquida: Recentralizar

36

● Recentralizar: todo o conteúdo na página é automaticamente recentrado independentemente da largura. Diferentemente da Escala, o conteúdo permanece no seu tamanho original.

Page 37: Projeto de design editorial digital

Regras de página líquida: Baseadas em guias

37

● Baseadas em guias: as guias definem uma linha reta através da página para adaptar o conteúdo.○ Pode ser adicionado espaço em branco○ Os quadros de texto são redimensionados e o texto reflui (sem dimensionar).○ Os quadros de imagem inseridos redimensionam-se e a dimensão do corte demarcado do

quadro é redimensionado.Para adicionar uma guia líquida, primeiro selecione a ferramenta Página, depois tire as guias da régua.

Page 38: Projeto de design editorial digital

Regras de página líquida: Baseadas no objeto

38

● Baseadas no objeto: é possível especificar o comportamento líquido de tamanho e local quanto à borda da página de cada objeto, seja fixo ou relativo.○ Cada lado de caixa delimitadora de um objeto ou quadro pode ser fixo ou relativo à sua borda de

página correspondente. Por exemplo, o lado esquerdo do quadro pode ter relação somente com a borda esquerda da página.

○ A altura e a largura podem ser corrigidas ou redimensionadas quanto à página.

Page 39: Projeto de design editorial digital

Layout Alternativo

39

Dispositivos móveis podem apresentar as páginas na orientação retrato ou paisagem. Para tirar proveito desta capacidade o InDesign permite a criação de layouts alternativos no mesmo documento InDesign.

A funcionalidade de Layout Alternativo duplica o conteúdo de um layout existente em novas páginas com tamanho alternativo. Esta funcionalidade facilita a tarefa de criação para dispositvos móveis garantindo que textos, imagens e interatividade são consistentes entre múltiplos layouts.

Layouts alternativos agilizam o processo, porém muitas vezes é necessário realizar ajustes finais manualmente.

Page 40: Projeto de design editorial digital

Layout Alternativo

40

1. Abra o painel de páginas em Janela > Páginas

2. Selecione a opção “Criar layout alternativo”

3. Na opção “Regra de página do Liquid:” escolha “Recentralizar”

4. Selecione “OK”

5. Ajuste os elementos da página

Page 41: Projeto de design editorial digital

Overlays:sobreposições interativas

Page 42: Projeto de design editorial digital

Overlays: sobreposições interativas

42

● Permitem a inclusão de interatividade nas revistas digitais.

● Durante a conversão do INDD para uma revista digital, a ADPS une os elementos não interativos em uma única imagem JPEG, PNG ou PDF e sobrepõe os overlays.

● Apenas um overlay sobrepõe outro overlay.

Fonte: Adobe Digital Publishing Suite Getting Started Guide <http://www.adobe.com/content/dam/Adobe/en/products/digital-publishing-suite-family/pdfs/dps-getting-started-guide.pdf>

Page 43: Projeto de design editorial digital

43

● Hiperlink: link para outra página da revista, site ou e-mail.

● Exibição de slides: podem conter imagens e textos.

● Sequência de Imagens: série de imagens com sequencia pré-definida.

● Áudio e Vídeo: com controles opcionais de reprodução.

● Panorama: ambiente 3D e rotação 360o com zoom.

● Conteúdo da Web: visualização e interação com conteúdo publicado na internet ou arquivo HTML local.

● Panorama & Zoom: imagem grande em um frame menor.

● Quadro com rolagem: conteúdo que se move em um frame.

Overlays: sobreposições interativas

Page 44: Projeto de design editorial digital

44

● Para apresentações de slides, hiperlinks, áudio e vídeo, panoramas e zoom em imagens e conteúdo com rolagem, crie ou coloque os objetos nos documentos do InDesign e use o painel do “Folio Overlays” para editar configurações.

● Para sequências de imagem, panoramas e sobreposições de conteúdo da Web, desenhe um quadro retangular como espaço reservado ou insira uma imagem a ser usada. Depois, selecione-a e utilize o painel “Folio Overlays” para especificar a fonte alterar as configurações.

Overlays: sobreposições interativas

Page 45: Projeto de design editorial digital

Botões

Page 46: Projeto de design editorial digital

Criação de links com o painel Botões

46

Utilize “Botões” para criar links para sites, páginas ou artigo. Os “Botões” são mais flexíveis e estáveis do que “Hiperlinks”.

1. Crie o objeto que será o botão. Pode ser uma forma, quadro de texto ou imagem.

2. Abra o painel “Botões” (Janela > Interativo > Botões).3. Selecione o objeto e clique no ícone “Converter objeto em Botão”.4. Em Evento, selecione “Ao soltar” (único evento de botão compatível).5. Clique no sinal + ao lado de Ação e selecione uma ação com suporte.

A. ações com suporte de botões de hiperlinks.B. ações com suporte de botões de apresentação de slides.

6. Se necessário, acrescente mais ações de botão. As ações são reproduzidas na sequência.

Page 47: Projeto de design editorial digital

47

Criação de links com o painel Botões

Page 48: Projeto de design editorial digital

Criação de links com o painel Botões

48

A

A

A

B

Page 49: Projeto de design editorial digital

Tipos de Eventos de Botões

49

● Mouse liberado: é o evento mais usado, pois oferece uma última oportunidade de arrastar o cursor para fora do botão sem ativar a ação.

● Mouse pressionado: a menos que haja um motivo específico para usar esta opção, é preferível usar Mouse liberado, para que o usuário possa cancelar a ação.

● Mouse em cima: quando o ponteiro do mouse entra na área do botão definida pela caixa delimitadora do botão.

● Mouse fora: quando o ponteiro do mouse sai da área do botão.

● Em foco: quando o botão em um arquivo PDF recebe foco, seja por meio de uma ação do mouse ou do pressionamento da tecla Tab.

● Fora de foco: quando o foco se desloca para um botão ou campo de formulário diferente no arquivo PDF.

Page 50: Projeto de design editorial digital

Ações dos Botões

50

● Ir para destino: vai até a âncora de texto especificada que foi criada com o uso do painel Marcadores ou Hiperlinks.

● Ir para primeira página/última página/próxima página/página anterior: salta para a primeira ou última página, ou para a página anterior ou seguinte do EPUB de layout fixo, arquivo PDF ou SWF. Selecione uma opção no menu Zoom para definir a exibição da página.

● Ir para URL: abre a página da Web do URL indicado.

● Mostrar/ocultar botões: alterna entre mostrar e ocultar os botões especificados no EPUB de layout fixo, arquivo PDF ou SWF exportado. Por exemplo, se quiser que um botão seja exibido ao passar o mouse por outro botão, será possível ocultar o botão de destino até que ele seja acionado e criar uma ação que exiba o botão oculto em movimentos de sobreposição.

● Vídeo: permite reproduzir, interromper, parar ou reiniciar o filme selecionado. Apenas filmes adicionados ao documento são mostrados no menu Vídeo.

● Som: permite reproduzir, interromper, parar ou reiniciar o clipe de som selecionado. Apenas clipes de som adicionados ao documento são mostrados no menu Som.

Page 51: Projeto de design editorial digital

Ações dos Botões (Ir para URL)

51

Utilizando #previous, #next, #first, #last, para ir para uma página específica do artigo atual, como #3 para ir para a página 4.● navto://MeuArtigoAtual#first (vai para a primeira página do artigo)● navto://MeuArtigoAtual#previous (vai para a página anterior do artigo)● navto://MeuArtigoAtual#next (vai para a próxima página do artigo)● navto://MeuArtigoAtual#last (vai para a última página do artigo)● navto://MeuArtigoAtual#3 (vai a quarta página do artigo atual)

Utilizando navto para ir para outro artigos:● navto://MeuArtigoDestino/4 (vai para o quinto artigo do fólio)● navto://MeuArtigoDestino/4#2 (vai para a terceira página do quinto artigo do fólio)

Em artigos com rolagem suave, use decimais ou porcentagens para ir a uma posição específica.● navto://MeuArtigoDestino#3.3 (vai para uma posição específica no artigo de rolagem suave que

mostra a parte inferior da página 4 e a superior da página 5)

OBS.: substitua “MeuArtigo...” pelo nome do artigo como aparece no “Folio Builder”.

Page 52: Projeto de design editorial digital

Ações dos Botões para SWF/EPUB

52

● Animação: permite reproduzir, pausar, parar ou reiniciar a animação selecionada. Apenas as animações adicionadas ao documento aparecem no menu Animação.

● Ir para página: salta para a página no arquivo SWF especificado.

● Ir para o estado: salta para um estado específico em um objeto de multiestado. Por exemplo, se um objeto de multiestado incluir várias imagens diferentes como estados, esta ação poderá ser usada para exibir uma imagem específica.

● Ir para o próximo estado/estado anterior: salta para o estado seguinte ou anterior em um objeto de multiestado. Essas opções são especialmente úteis para cliques em uma apresentação de slides.

Page 53: Projeto de design editorial digital

Ações dos Botões para PDF

53

● Ir para próxima exibição: salta para uma página depois da exibição anterior. Assim como o botão Avançar só fica disponível em um navegador da Web depois que alguém clica em Voltar, esta opção só estará disponível se o usuário tiver saltado para uma exibição anterior.

● Ir para exibição anterior: salta para a última página exibida do documento PDF ou retorna ao último tamanho de zoom aplicado.

● Abrir arquivo: inicia e abre o arquivo especificado. Se especificar um arquivo que não seja PDF, o leitor precisará do aplicativo nativo para abri-lo. Especifique um nome de caminho absoluto (como C:\docs\amostra.pdf).

● Exibir zoom: exibe a página de acordo com a opção de zoom especificada. É possível alterar o nível de zoom da página (como Tamanho real), o layout da página (como Contínuo - Opostas) ou a orientação da rotação.

Page 54: Projeto de design editorial digital

Aparências dos Botões

54

1. Escolha Janela > Interativo > Botões para exibir o painel “Botões”.

2. Com a ferramenta “Seleção” , selecione o botão no layout que deve ser editado.

3. Clique em [Em cima] para ativar a aparência “Em cima”. A aparência Normal é copiada para “Em cima”.

4. Com a opção “Em cima” ainda selecionada, altere a aparência do botão:a. Para alterar a cor, escolha uma amostra no menu Traçado ou Preenchimento no painel Controle.b. Para inserir uma imagem na aparência, selecione a imagem existente usando a ferramenta de

seleção direta ou clicando duas vezes na imagem do botão existente e, em seguida, selecione Arquivo > Inserir e clique duas vezes em um arquivo.

c. Para colar uma imagem em um quadro de texto, copie-a para a Área de transferência, selecione a aparência no painel Botões e escolha Editar > Colar em.

d. Para digitar texto, selecione a ferramenta Tipo, clique no botão e digite o texto. É possível escolher Editar > Colar em para copiar um quadro de texto colado.

5. Para adicionar a aparência Clicar, clique em [Clicar] para ativá-la e siga o mesmo procedimento para alterar sua aparência.

6. Use o painel Visualização para testar as diferentes aparências do botão.

Page 55: Projeto de design editorial digital

Exibir imagem oculta em sobreposição

55

1. Crie um objeto a ser usado como origem do botão. No painel “Botões”, clique no ícone “Converter objeto em botão”.

2. Insira a imagem que deseja usar como botão de destino e converta-a em um botão.

3. Selecione a imagem de destino e escolha “Oculto até que seja acionado”, na parte inferior do painel “Botões”. A imagem precisa ficar oculta no documento exportado para que possa ser exibida quando passar o mouse sobre o botão de origem ou clicar nele.

4. Selecione o botão de origem e crie uma ação para mostrar o botão de destino.

5. Selecione o botão de destino e crie uma ação para ocultá-lo.

Page 56: Projeto de design editorial digital

Hiperlinks

Page 57: Projeto de design editorial digital

Criação de links com o painel Hiperlinks

57

Utilize o painel Hiperlinks para criar hiperlinks especialmente em textos.

1. Crie o quadro ou texto que será usado como hiperlink.2. Abra o painel Hiperlinks (Janela > Interativo > Hiperlinks).3. Selecione “Novo hiperlink” no menu.4. Desmarque “Destino compartilhado”. Esta opção permite que os hiperlinks

sejam reutilizados.5. No menu “Link para”, especifique umas das opções abaixo e clique OK:

1. URL: página web (http://), aplicativo iTunes (itms://), aplicativo Amazon Appstore (amzn://) ou um artigo diferente (navto://). Ao criar links para itms:// ou amzn:// desmarque a opção “Abrir no fólio” no painel “Folio Overlays” para evitar mensagens de erro. Links navto:// leva a um artigo diferente ou a outra página do artigo: navto://newsarticle - navto://newsarticle#2

2. Email: abre o aplicativo de email com o campo “Para” preenchido.3. Página: abre uma página diferente do artigo. Não é utilizado para artigos diferentes.

Page 58: Projeto de design editorial digital

Criação de links com o painel Hiperlinks

58

Utilizando #previous, #next, #first, #last, para ir para uma página específica do artigo atual, como #3 para ir para a página 4.● navto://MeuArtigoAtual#first (vai para a primeira página do artigo)● navto://MeuArtigoAtual#previous (vai para a página anterior do artigo)● navto://MeuArtigoAtual#next (vai para a próxima página do artigo)● navto://MeuArtigoAtual#last (vai para a última página do artigo)● navto://MeuArtigoAtual#3 (vai a quarta página do artigo atual)

Utilizando navto para ir para outro artigos:● navto://MeuArtigoDestino/4 (vai para o quinto artigo do fólio)● navto://MeuArtigoDestino/4#2 (vai para a terceira página do quinto artigo do fólio)

Em artigos com rolagem suave, use decimais ou porcentagens para ir a uma posição específica.● navto://MeuArtigoDestino#3.3 (vai para uma posição específica no artigo de rolagem suave que

mostra a parte inferior da página 4 e a superior da página 5)

OBS.: substitua “MeuArtigo...” pelo nome do artigo como aparece no “Folio Builder”.

Page 59: Projeto de design editorial digital

59

● Opções para abertura do Hiperlink (Folio Overlays)

○ Abrir no folio: visualizar a página dentro do aplicativo. Não deve ser

utilizada para links itms://

○ Abrir no navegador do dispositivo: visualizar a página no browser nativo

do tablet.

■ Opção Perguntar primeiro: o leitor será questionado se quer mesmo

acessar a página no navegador, fora do aplicativo.

Criação de links com o painel Hiperlinks

Page 60: Projeto de design editorial digital

60

Criação de links com o painel Hiperlinks

Page 61: Projeto de design editorial digital

Apresentação de Slides

Page 62: Projeto de design editorial digital

62

Os slides podem conter um conjunto de imagens e textos em frames próprios.

Os slides podem ser apresentados em qualquer ordem.

As imagens de apresentação de slides são convertidas em imagens PNG no fólio.

Apresentação de Slides

Page 63: Projeto de design editorial digital

63

1. Para criar um objeto de vários estados, primeiramente insira e alinhe as imagens.

2. Use o painel “Estados do objeto” (Janela > Interativo > Estados do objeto) para criar a apresentação de slides.

3. No painel “Estados do objeto”, especifique um nome de objeto.

4. Crie botões para navegar entre os estados do objeto. Utilize as ações “Ir para o próximo estado” e “Ir para o estado anterior” para navegação.

Apresentação de Slides

Page 64: Projeto de design editorial digital

64

Apresentação de Slides

Page 65: Projeto de design editorial digital

65

● Executar automaticamente: a apresentação de slides é reproduzido quando o usuário passa para a página.

● Toque para Reproduzir/Pausar: permite que o usuário reproduza e pause uma apresentação de slides de exibição automática. Ao reproduzir a apresentação de slides duas vezes, ele é reiniciado.

● Atraso: se a opção Executar automaticamente estiver selecionada, será possível especificar o tempo decorrido entre o carregamento da página e o início da apresentação de slides. Especifique um valor de 0 a 60 segundos.

● Intervalo: se a opção Executar automaticamente ou Toque para reproduzir/pausar estiver selecionada, o valor de Intervalo determinará a duração da exibição para cada slide.

● Reproduzir _ vez(es): se a opção Executar automaticamente ou Toque para reproduzir/pausar estiver selecionada, será possível especificar o número de vezes que a apresentação de slides será reproduzida. Essa opção fica ofuscada se Repetir estiver selecionado.

● Repetir: se a opção Executar automaticamente ou Toque para reproduzir/pausar estiver selecionada, escolha Repetir para reproduzir a apresentação de slides continuamente até o usuário tocar duas vezes na apresentação de slides ou virar a página.

Apresentação de Slides

Page 66: Projeto de design editorial digital

66

● Parar na última imagem: se a opção Reproduzir automaticamente ou Tocar para reproduzir/pausar for selecionada, selecione Parar na última imagem da apresentação de slides em vez de na primeira.

● Atenuação cruzada: exibe uma transição de desaparecimento gradual para o próximo slide. O valor é 0,5 segundos por padrão. É possível especificar um valor entre 0,125 segundos e 60 segundos. Este valor aplica-se à autorreprodução e apresentações de slides avançadas manualmente.

● Arrastar com o dedo para alterar a imagem: permite que o usuário arraste o dedo para mover-se de um slide para o outro.

● Parar na primeira/última imagem: determina se a apresentação de slides para ou continua a execução quando o último slide é atingido, para frente, ou quando o primeiro slide é atingido, para trás. Essa opção afeta apenas a varredura.

● Ocultar antes de reproduzir: a apresentação de slides permanece oculta até que o usuário toque um botão para exibir um slide.

● Reproduzir em ordem inversa: exibe as imagens na ordem reversa.

● Formato de exportação em artigos PDF: se a apresentação de slides aparecer em um artigo que usa o formato PDF, pode-se escolher Bitmap ou Vetor.

Apresentação de Slides

Page 67: Projeto de design editorial digital

Sequência de Imagens

Page 68: Projeto de design editorial digital

Sequência de imagens

68

● Avança através de uma série de imagens.

● A sequência de apresentação das imagens não pode ser alterada.

● Permite criar efeitos como girar um objeto em 360 graus.

● Use arquivos de imagem png ou jpg com o mesmo nome de raiz e sufixos ascendentes, como Torre001.jpg, Torre002.jpg e assim por diante.

● Faça com que suas dimensões de imagem correspondam exatamente à área de exibição no dispositivo móvel, como 500x400 pixels em 72 dpi.

● Para uma rotação 360° suave, use pelo menos 30 imagens. O uso de muitas imagens aumenta o tamanho do arquivo de forma desnecessária. Para reduzir o tamanho do arquivo, use imagens JPEG compactadas de 50 a 80%. Use arquivos PNG somente se quiser incluir transparência.

Page 69: Projeto de design editorial digital

Sequência de imagens

69

1. Crie os itens de origem para o objeto de sequência de imagens e coloque-os em uma pasta.

2. Siga um destes procedimentos:

a. Utilizando a ferramenta “Retângulo” ou a ferramenta “Quadro de retângulo”, arraste para criar um quadro de espaço reservado.

b. Insira uma imagem que atue como pôster para a sequência de imagens.

3. Selecione o objeto de espaço reservado, abra o painel do “Folio Overlays” (Janela > Interativo > Folio Overlays) e selecione “Sequência de imagens”.

4. No painel do Folio Overlays, clique no ícone de pasta “Carregar imagens”, localize a pasta que contém as imagens e clique em Abrir.

5. Se necessário, redimensione o quadrado e seu conteúdo para se ajustar ao layout.

Page 70: Projeto de design editorial digital

Sequência de imagens

70

Page 71: Projeto de design editorial digital

Sequência de imagens

71

● Mostrar primeira imagem inicialmente: a primeira imagem será usada como pôster. Desmarque essa opção se a sequência de imagens consistir em arquivos PNG transparentes. Se a opção Reproduzir em ordem inversa estiver selecionada, a última imagem será usada como pôster.

● Reproduzir automaticamente: a sequência de imagens começará a ser reproduzida quando o usuário acessar a página ou estado em que a sequência é exibida.

● Toque para reproduzir/pausar: permite que o usuário toque para executar e pausar a sequência de imagens. Ao tocar o objeto duas vezes, ele é reiniciado.

● Atraso: se a opção Executar automaticamente estiver selecionada, será possível especificar o tempo decorrido entre o carregamento da página e o início da sequência de imagens. Especifique um valor de 0 a 60 segundos.

● Velocidade: altere a velocidade de progressão do objeto em quadros por segundo. O valor mínimo é 1 (1 quadro por segundo) e o valor máximo é 30.

● Reproduzir _ vez(es): se a opção Executar automaticamente ou Toque para reproduzir/pausar estiver selecionada, será possível especificar o número de vezes que a sequência de imagens será reproduzida. Essa opção fica ofuscada se Repetir estiver selecionado.

Page 72: Projeto de design editorial digital

Sequência de imagens

● Repetir: se Reproduzir no carregamento da página ou Toque para Reproduzir/Pausar estiver selecionado, é possível selecionar Repetir para reproduzir a sequência de imagens de maneira contínua. Para parar a sequência, basta tocar duas vezes na apresentação de slides ou virar a página.

● Parar na última imagem: se a opção Reproduzir automaticamente ou Tocar para reproduzir/pausar estiver selecionada, selecione Parar na última imagem da sequência, em vez de na primeira.

● Arrastar com o dedo para alterar a imagem: permite que o usuário arraste o dedo para mover-se para frente ou para trás pelas imagens. Se a opção Arrastar o dedo para alterar imagem não estiver selecionada, escolha Reproduzir automaticamente ou Toque para reproduzir/pausar para que a sequência de imagens se torne interativa.

● Parar na primeira/última imagem: determina se o objeto para ou continua a reprodução quando a última imagem é atingida, para frente, ou quando a primeira é atingida, para trás. Essa opção afeta apenas a varredura.

● Reproduzir em ordem inversa: a sequência de imagens reproduzirá as imagens em ordem inversa.

72

Page 73: Projeto de design editorial digital

Áudio

Page 74: Projeto de design editorial digital

Áudio

74

● É possível configurar um arquivo de áudio a ser reproduzido permitindo que os usuários toquem na área de visualização ou criando botões separados com as ações de Áudio.

● É possível especificar um URL para transmitir áudio apenas de um site do tipo http:.

● A reprodução de clipes de áudio é interrompida quando os usuários acessam um artigo diferente, mas continua quando os usuários acessam uma página diferente dentro do mesmo artigo.

● Para interromper o clipe de áudio (ou vídeo) ao virar a página, uma solução é definir a reprodução automática de um arquivo de mídia “em branco”.

Page 75: Projeto de design editorial digital

Áudio

75

1. Selecione Arquivo > Inserir e insira o arquivo de áudio MP3 em seu documento.

2. Selecione o objeto inserido, abra o painel Mídia (Janela > Interativo > Mídia) e especifique um pôster.

Page 76: Projeto de design editorial digital

Áudio

76

Page 77: Projeto de design editorial digital

Áudio

77

● URL ou arquivo: URL para transmitir um clipe de áudio, ou clique na pasta e especifique um arquivo de áudio ou utilize Arquivo > Inserir. Quando se especifica um URL de transmissão, todas as opções de sobreposição estão disponíveis, incluindo Reprodução automática e Arquivos de controlador. A transmissão de áudio é compatível com URLs do tipo http, e não https.

● Arquivos de controlador de áudio: clique no ícone de pasta e especifique a pasta que contém os botões de reprodução e pausa para arquivos de áudio. Para exibir uma placa de controlador com os botões Reproduzir e Pausar enquanto o clipe de áudio estiver em execução, crie um conjunto de arquivos .png em uma pasta. Essas imagens devem ter um sufixo _pause ou _play. É possível criar um único par de botões _play e _pause ou vários botões _play e _pause que representem estados progressivos de uma barra de status:

○ AudioAsset001_play.png○ AudioAsset002_play.png ○ AudioAsset003_play.png○ AudioAsset001_pause.png ○ AudioAsset002_pause.png ○ AudioAsset003_pause.png

Neste exemplo, quando o áudio é reproduzido até a metade, o botão AudioAsset003_play.png é exibido. Quando o usuário toca para pausar, o botão AudioAsset003_pause.png é exibido.

Page 78: Projeto de design editorial digital

Áudio

78

● Mostrar primeira imagem inicialmente: o quadro de áudio exibe o primeiro arquivo _play.png na pasta de itens de controlador de áudio especificada e o quadro é redimensionado apropriadamente.

● Reproduzir automaticamente: selecione essa opção para reproduzir o arquivo de áudio quando a página for carregada no dispositivo móvel. Também é possível especificar o número de segundos de atraso.

● Reproduzir no fundo através do fólio: selecione esta opção para executar o arquivo de áudio no fundo enquanto os usuários navegam pelos artigos. Os usuários podem pausar ou retomar o clipe de áudio tocando no ícone de áudio na barra de navegação superior.

Page 79: Projeto de design editorial digital

Vídeo

Page 80: Projeto de design editorial digital

Vídeo

80

● É possível reproduzir vídeo in-line ou no modo de tela cheia.

● É possível configurar um arquivo de vídeo a ser reproduzido permitindo que os usuários toquem na área de visualização ou criando botões separados com as ações de Vídeo.

● Pode-se especificar um URL para transmitir vídeo somente de um site do tipo http: ou https: (através de sobreposição de conteúdo web).

● A reprodução de vídeo é interrompida quando os usuários acessam um artigo diferente, mas continua quando os usuários acessam uma página diferente dentro do mesmo artigo.

● Para interromper o vídeo ao virar a página, uma solução é definir a reprodução automática de um vídeo "em branco".

Page 81: Projeto de design editorial digital

Vídeo

81

1. Selecione Arquivo > Inserir e insira o arquivo de vídeo em seu documento.

2. Selecione o objeto inserido, abra o painel Mídia (Janela > Interativo > Mídia) e especifique um pôster.

3. Para um arquivo de vídeo, é possível escolher uma imagem ou especificar um quadro do vídeo. Para obter melhores resultados, selecione uma imagem que indique que o item da página é interativo.

Page 82: Projeto de design editorial digital

Vídeo

82

Page 83: Projeto de design editorial digital

Vídeo

83

● URL ou arquivo: URL para transmitir um vídeo, ou clique na pasta e especifique um arquivo de vídeo. Quando se especifica um URL de transmissão, todas as opções de sobreposição estão disponíveis, incluindo Reprodução automática e Tela cheia. A transmissão de vídeo é compatível com URLs do tipo http, e não https.

● Reproduzir automaticamente: selecione essa opção para reproduzir o arquivo de vídeo quando a página for carregada no dispositivo móvel. Também é possível especificar o número de segundos de atraso.

● Reproduzir em tela cheia: o vídeo será reproduzido no modo de tela cheia. Se essa opção não estiver selecionada, o vídeo será reproduzido em sua área delimitadora.

● Tocar para exibir o controlador: uma barra controladora com os controles reproduzir e pausar é exibida quando o vídeo incorporado é tocado enquanto estiver sendo reproduzido. Se essa opção não for selecionada, o vídeo é pausado e reiniciado por meio do toque.

● Não permitir pausas: os usuários não conseguirão pausar ou parar o vídeo com um toque. Esta opção está disponível apenas se Reproduzir automaticamente for selecionado e Reproduzir em tela cheia não estiver selecionado.

● Parar no último quadro: selecione esta opção para exibir a imagem final do vídeo quando o vídeo incorporado parar de ser reproduzido. Esta opção estará disponível apenas se Reproduzir em tela cheia não estiver selecionado.

Page 84: Projeto de design editorial digital

Panorama

Page 85: Projeto de design editorial digital

Panorama

85

● Dá a ilusão de uma página vista de dentro.

○ Por exemplo, criar um efeito Panorama que permita que os usuários vejam a parte de dentro de uma cabine de avião. Eles podem girar a visualização 360° e aumentar o zoom no painel de instrumentos.

● A chave para criar um panorama é obter as imagens necessárias.

● A criação de um efeito de Panorama requer um conjunto de seis imagens, que representam os seis lados internos de um cubo.

● Caso comece com uma imagem panorâmica inteira, converta essa imagem em seis imagens cúbicas com base na imagem completa.

Page 86: Projeto de design editorial digital

Panorama

86

Page 87: Projeto de design editorial digital

Panorama

87

1. Crie os itens de origem para o panorama e coloque-os em uma pasta. Imagens de alta resolução permitem que os usuários aumentem o zoom com mais clareza, mas exigem um arquivo maior.

2. Siga um destes procedimentos:

a. Utilizando a ferramenta Retângulo ou a ferramenta Quadro de retângulo, arraste para criar um quadro de espaço reservado.

b. Insira uma imagem que funcione como um pôster para o panorama.

3. Selecione o objeto de espaço reservado, abra o painel Folio Overlays e selecione Panorama.

4. No painel Folio Overlays, clique no ícone de pasta Ativos, localize a pasta que contém as seis imagens e clique em Abrir.

5. Se necessário, redimensione o quadrado e seu conteúdo para se ajustar ao layout.

Page 88: Projeto de design editorial digital

Panorama

88

Page 89: Projeto de design editorial digital

Panorama

89

● Usar primeira página para pôster: usar a primeira imagem de panorama como pôster.

● Zoom inicial: especifique um valor para determinar a ampliação da imagem inicial. Use um valor entre as configurações Mínimo/Máximo do campo de visão, que correspondem a 30 e 80 por padrão.

● Vertical/Horizontal: especifique valores para determinar qual área do panorama é exibida inicialmente. Para Vertical, especifique um valor entre -90 (inclinado totalmente para cima) e 90 (inclinado totalmente para baixo). Para Horizontal, especifique um valor entre -180 (girado totalmente à esquerda) e 180 (girado totalmente à direita).

● Campo de visão: caso não queira que os usuários aumentem nem diminuam o zoom além de um determinado ponto, especifique os valores Mínimo e Máximo.

● Limitar deslocamento vertical: para permitir inclinação de apenas dois terços em direção à parte superior, selecione Limitar deslocamento vertical e especifique -60. Especifique 60 para permitir a inclinação apenas dois terços para baixo.

● Limitar deslocamento horizontal: para permitir deslocamento de apenas dois terços para a esquerda e a direita, selecione Limitar deslocamento horizontal e especifique -120 para a esquerda e 120 para a direita.

Page 90: Projeto de design editorial digital

Conteúdo Web

Page 91: Projeto de design editorial digital

Conteúdo Web

91

● Permite a exibição de uma página da Web em uma área de exibição.

● Os usuários podem ver o conteúdo da página da Web na área de exibição sem precisar exibir um navegador separado no aplicativo. É possível especificar um URL da Web ou um arquivo HTML local. Observe as seguintes questões:

● Caso especifique um arquivo HTML local, certifique-se de que o arquivo .html e os arquivos e pastas associadas apareçam na mesma pasta. Quando o conteúdo do artigo é criado, o upload de todos os artigos na mesma pasta como extensão .html é feito.

● No caso de qualquer URL que seja automaticamente redirecionado para um URL móvel, especifique o URL móvel (ex.: http://mobile.twitter.com/), não o URL original (ex.: http://twitter.com).

Page 92: Projeto de design editorial digital

Conteúdo Web

92

1. Siga um dos procedimentos abaixo:

a. Usando a Ferramenta “Retângulo” ou “Quadro de retângulo”, arraste para criar o quadro que exibe o conteúdo da Web.

b. Insira uma imagem que funcione como um pôster para o conteúdo da Web.

2. Selecione o quadro e escolha “Conteúdo da Web” no painel Folio Overlays.

3. Siga um destes procedimentos:

a. Para especificar um URL, digite ou cole o URL completo no campo Itens.

b. Para usar arquivos HTML locais, clique no ícone de pasta e especifique o arquivo HTML local. O arquivo HTML deve aparecer em uma pasta que inclua todas as imagens e scripts usados no arquivo HTML.

Page 93: Projeto de design editorial digital

Conteúdo Web

93

Page 94: Projeto de design editorial digital

Conteúdo Web

94

● Executar automaticamente: carregar a página Web quando a página for carregada no dispositivo móvel. Também é possível especificar o número de segundos de atraso. Se o HTML de destino for uma animação a ser reproduzida, especifique um atraso mínimo.

● Fundo transparente: o fundo transparente em uma página Web é preservado. Os usuários podem ver através da transparência para exibir o conteúdo DPS em segundo plano.

● Permitir a interação do usuário: os usuários poderão interagir com a página Web.

● Ajustar o conteúdo às dimensões: a página Web é dimensionada para ajustar-se ao tamanho especificado no arquivo da sobreposição. Se essa opção não for selecionada, a página Web é exibida com o mesmo tamanho com que apareceria no navegador do dispositivo, e a página HTML pode ser cortada.

● Permitir acesso a informações sobre direitos: cria uma sobreposição de conteúdo da Web que faça referência à API de leitura para recursos como API de câmera, API de localização geográfica, encartes digitais e calendários.

Page 95: Projeto de design editorial digital

Panorama e Zoom

Page 96: Projeto de design editorial digital

Panorama e Zoom

96

É possível exibir uma imagem grande em uma área pequena e permitir que o usuário desloque e aumente o zoom da imagem nessa área.

1. Insira uma imagem JPEG ou PNG.

2. Usando a ferramenta “Seleção”, arraste uma alça de seleção para cortar o quadro sem redimensionar a imagem. Faça com que o quadro tenha o tamanho da área de exibição.

3. Certifique-se de que o quadro de contêiner seja menor do que a imagem. Se a largura ou a altura do quadro e da imagem forem iguais, o objeto é considerado como conteúdo com rolagem.

4. Para adicionar um pôster à sobreposição Deslocamento e Zoom, crie um quadro com as mesmas dimensões do deslocamento da imagem e insira-o na sobreposição de Deslocamento e Zoom. Quando o usuário toca o pôster, o deslocamento da imagem é ativado e oculta o pôster. Quando o usuário toca duas vezes no deslocamento da imagem, o pôster é exibido novamente.

5. Selecione o quadro da imagem e abra o painel Folio Overlays. Clique na guia “Panorama e Zoom” e selecione a opção “Ativar”.

Page 97: Projeto de design editorial digital

Panorama e Zoom

97

Page 98: Projeto de design editorial digital

Panorama e Zoom

98

● Para obter os melhores resultados, use imagens JPEG.

● Se criar uma sobreposição maior que 2000x2000 pixels em 72 ppi, teste-a completamente no dispositivo móvel. Imagens grandes aumentam o tamanho do arquivo e causam problemas de memória em dispositivos móveis.

● Como regra geral, certifique-se de que a imagem tenha as dimensões exatas que deseja usar.

● O recurso panorama e zoom não é projetado para funcionar com imagens transparentes. Quando um deslocamento de imagem é carregado, o pôster aparece e a sobreposição real fica invisível até que seja tocada.

Page 99: Projeto de design editorial digital

Quadro com Rolagem

Page 100: Projeto de design editorial digital

Quadro com Rolagem

100

● Permite que os usuários visualizem mais conteúdo. Por exemplo, é possível criar uma página de culinária com uma lista de ingredientes e um conjunto de instruções. Em vez de virar para a próxima página para ver a lista completa de ingredientes ou instruções, os usuários podem arrastar o dedo para rolar.

● Por padrão, a exibição inicial para conteúdo com rolagem é o canto superior esquerdo do quadro de contêiner. Contudo, é possível alterar a visualização inicial de modo que se baseie na localização do quadro do conteúdo.

Page 101: Projeto de design editorial digital

Quadro com Rolagem

101

1. Crie um quadro de conteúdo e um quadro de contêiner.a. O quadro de conteúdo pode ser um quadro de texto, uma imagem ou um

grupo de objetos.b. É possível incluir qualquer objeto interativo, exceto uma apresentação de

slides, no quadro de conteúdo. Adicione os objetos interativos ao quadro de texto como objetos ancorados ou agrupe objetos interativos com outros objetos.

2. Mova o quadro de conteúdo para sua área inicial de exibição em relação ao quadro do contêiner.

3. Selecione o quadro de conteúdo e escolha Editar > Recortar.Para evitar comportamento imprevisível, certifique-se de que o conteúdo está sendo exibido na área da página de layout, e não na área de trabalho.

4. Selecione o quadro de contêiner e escolha Editar > Colar em.

Page 102: Projeto de design editorial digital

Quadro com Rolagem

102

● Direção de rolagem: escolha a opção “Detecção automática” para definir a direção de rolagem com base na altura e largura do quadro do conteúdo e do contêiner. Se as alturas dos quadros forem iguais, mas as larguras forem diferentes, o conteúdo terá apenas rolagem horizontal. Para garantir que o conteúdo tenha rolagem em apenas uma direção, mesmo que o quadro do contêiner seja mais estreito e menor que o quadro do conteúdo, escolha a opção “Horizontal ou Vertical”. Caso escolha a opção “Horizontal ou Vertical”, o comportamento será igual ao da opção “Detecção automática”.

● Indicadores de rolagem: selecione a opção “Ocultar” caso não queira que as barras sejam exibidas durante a rolagem.

● Posição inicial do conteúdo: selecione a opção “Superior esquerdo” para posicionar o quadro do conteúdo no canto superior esquerdo no quadro do contêiner como visualização inicial. Selecione a opção “Usar posição do documento” para utilizar a localização do quadro do conteúdo como visualização inicial.

● Formato de exportação em artigos PDF: se o quadro com rolagem aparecer em um artigo que usa o formato PDF, pode-se escolher “Bitmap ou Vetor”.

Page 103: Projeto de design editorial digital

Quadro com Rolagem

103

Page 104: Projeto de design editorial digital

Animações

Page 105: Projeto de design editorial digital

Animações

105

Efeitos de animação permitem fazer com que objetos se movam nos seus arquivos SWF exportados.

Use as ferramentas e os painéis a seguir para animar documentos:

● Painel Animação: aplique uma predefinição de movimento e edite configurações como duração e velocidade.

● Ferramentas Seleção direta e Caneta: edite o caminho percorrido pelo objeto animado.

● Painel Tempo: determine a ordem na qual os objetos em uma página são animados.

● Painel Visualização: exiba a animação em um painel do InDesign.

Page 106: Projeto de design editorial digital

Predefinições de movimento

106

São animações pré-criadas que podem ser aplicadas aos objetos rapidamente.

Use o painel Animação para aplicar predefinições de movimento e alterar configurações de animação, como duração e velocidade.

O painel Animação também permite especificar quando um objeto animado é reproduzido.

Os recursos de animação apenas são compatíveis na exportação para o Adobe Flash Player (.SWF). Eles não são compatíveis na exportação para PDF interativo. Para adicionar efeitos de animação a um arquivo PDF, exporte uma seleção como arquivo SWF no InDesign e insira esse arquivo SWF no documento do InDesign.

Page 107: Projeto de design editorial digital

Predefinições de movimento

107

1. Insira o objeto que deseja animar no documento.

2. No painel Animação (Janela > Interativo > Animação), escolha uma predefinição de movimento no menu “Predefinição”.

3. Especifique opções de predefinição de movimento.

4. Para editar o caminho do movimento, use as ferramentas “Caneta” e “Seleção direta”.

5. Use o painel “Tempo” para determinar a ordem dos efeitos de animação.

6. Use o painel “Visualização” para visualizar a animação no InDesign.

Para remover a animação de um objeto, selecione esse objeto e clique no ícone Excluir, no painel Animação.

Page 108: Projeto de design editorial digital

Converter objetos em caminhos

108

É possível criar uma animação selecionando um objeto e um caminho e convertendo este último em um caminho de movimento.

1. Selecione o objeto que deseja animar e o caminho que deseja usar como caminho do movimento.

2. Não é possível converter mais de dois objetos selecionados.

3. No painel Animação, clique no botão Converter em caminho do movimento .

4. Altere as configurações no painel Animação.

Page 109: Projeto de design editorial digital

Opções de predefinições

109

Page 110: Projeto de design editorial digital

Opções de predefinições

110

● Nome: é útil especificar um nome descritivo ao configurar uma ação que aciona a animação.

● Predefinição: escolha uma opção na lista de configurações de movimento predefinidas.

● Evento(s): por padrão, a opção Ativado ao carregar página é selecionada, significando que o objeto animado é reproduzido quando a página é aberta no arquivo SWF. Escolha Ativado ao clicar na página para acionar a animação quando a página for clicada. Escolha Ativado ao clicar (por conta própria) ou Ativado ao inverter (por conta própria) para acionar a animação quando o próprio objeto for clicado ou focalizado com o cursor do mouse, respectivamente.

● Criar botão de ativação: acionar a animação a partir de um botão ou objeto existente. Depois de clicar em Criar botão de ativação , clique no objeto que aciona a animação. O objeto é convertido em botão, se necessário, e o painel Botões é aberto.

● Duração: especifique o tempo necessário para a exibição da animação.

● Reproduzir: quantas vezes a animação é reproduzida ou selecione Repetir para fazer com que ela seja reproduzida repetidamente até ser interrompida.

● Velocidade: determinar se a velocidade da animação é uma taxa estável (Nenhuma), se ela começa lenta e fica mais rápida (Atenuar) ou se fica mais lenta no final (Não atenuar).

Page 111: Projeto de design editorial digital

Opções de predefinições

111

● Animar: escolha “A partir da aparência atual” para usar as propriedades atuais do objeto (porcentagem de dimensionamento, ângulo de rotação e posição) como ponto de partida da animação. Escolha “Para aparência atual” para usar as propriedades do objeto como ponto final da animação. O uso dessa opção é especialmente útil em apresentações de slides. Escolha “Para local atual” para usar as propriedades do objeto atual como ponto de partida da animação e a posição desse objeto como ponto final.

● Girar: especifique um ângulo de rotação que o objeto completa durante a animação.

● Origem: use o proxy para especificar o ponto de origem do caminho do movimento no objeto animado.

● Escala: especifique um valor de porcentagem para determinar se o objeto aumenta ou diminui de tamanho durante a reprodução.

● Opacidade: opção para determinar se a animação permanece sólida (Nenhuma), fica gradualmente visível (Aparecimento gradual) ou fica gradualmente invisível (Desaparecimento gradual).

● Visibilidade: selecione Ocultar até animar ou Ocultar após animação para tornar um objeto invisível antes ou depois da reprodução.

Page 112: Projeto de design editorial digital

Editar caminho de movimento

112

Para editar um caminho de movimento, siga qualquer um destes procedimentos:

● Use as ferramentas “Seleção direta” e “Caneta” para editar um caminho de movimento com o mesmo método utilizado para editar um caminho.

● Para criar um caminho de movimento a partir de um caminho existente, selecione um caminho e um objeto e clique no botão “Converter em caminho do movimento” no painel “Animação”.

● Para alterar a direção do caminho, clique em “Propriedades” no painel “Animação” e escolha uma configuração no menu “Animar”. Também é possível selecionar o caminho do movimento e escolher Objeto > Caminhos > Reverter caminho.

Page 113: Projeto de design editorial digital

Painel de Tempo

113

O painel “Tempo” lista as animações na página espelhada atual com base no evento de página atribuído a cada animação.

Objetos animados são listados na ordem em que foram criados.

É possível alterar a ordem das animações, fazer com que os objetos sejam reproduzidos ao mesmo tempo e atrasar as animações.

1. Escolha Janela > Interativo > Tempo para exibir o painel “Tempo”.

2. Para determinar se a temporização de eventos “Ativado ao carregar página” ou “Ativado ao clicar na página” deve ser editada, escolha uma opção no menu “Evento”. “Ativado ao carregar página” e “Ativado ao clicar na página” somente aparecem quando um ou mais itens estão atribuídos a esse evento.

Page 114: Projeto de design editorial digital

Edição de Temporização

114

Page 115: Projeto de design editorial digital

Edição de Temporização

115

● Para alterar a ordem das animações, arraste itens para cima e para baixo na lista. Os itens na parte superior são animados primeiro.

● Para atrasar a animação, selecione o item e especifique o número de segundos de atraso.

● Para reproduzir vários objetos animados juntos, selecione os itens na lista e clique no botão Reproduzir junto para vinculá-los.

● Se decidir que não deseja que um ou mais itens vinculados sejam reproduzidos juntos, selecione-os e clique no botão Reproduzir separadamente .

● Para reproduzir itens vinculados um número específico de vezes ou repeti-los em loop, selecione todos os itens que estão vinculados e especifique quantas vezes as animações são reproduzidas ou selecione Repetir.

● Para alterar qual evento aciona a animação, selecione o item e escolha “Reatribuir para Ativado ao carregar página” ou “Reatribuir para Ativado ao clicar na página”.

● Para remover um item do evento atualmente selecionado (como “Ativado ao carregar página” ou “Ativado ao clicar na página”), escolha “Remover item”. Se o item não estiver atribuído a nenhum evento, ele aparecerá na categoria “Não atribuído”, que pode ser escolhida no menu “Evento”.

Page 116: Projeto de design editorial digital

Formulários

Page 117: Projeto de design editorial digital

Formulários

117

É possível adicionar elementos de formulário simples dentro das páginas de documento. Os tipos de campo comuns, como campos de texto, botões de opção, caixas de seleção ou assinaturas, são suportados.

● Adicione traçados sólidos e preenchimentos aos campos de formulário de PDF.

● Adicione os estados personalizados Ligado, Desligado e Focalização de botões, caixas de seleção e botões de opção.

● Especifique o tamanho da fonte para os campos de entrada de texto.

Page 118: Projeto de design editorial digital

Criando Formulários

118

1. Insira um quadro no local onde deseja inserir o campo de formulário.

2. Abra o painel “Formulários e Botões” (Janela > Interativo > Botões e Formulários).

3. Selecione o quadro e, na lista Tipo, escolha um tipo de elemento de formulário. Como alternativa, clique com o botão direito do mouse em um quadro e escolha Interativo > Converter em [...]

4. Digite um nome do campo de formulário. Para criar um grupo de botões de opção, todos os botões individuais devem ter o mesmo nome.

5. Escolha um evento e adicione ações para associar a ele. Foram adicionadas ações como Limpar formulário, Imprimir formulário e Enviar formulário.

6. Para um botão de opção, uma caixa de seleção ou botões: defina atributos de aparência de estados diferentes. O InDesign adiciona a gráfica padrão de vários estados, mas pode adicionar o seu próprio.

7. Especifique as opções de PDF:a. Descrição: o valor inserido é exibido como a dica de ferramenta e é usado para criar formulários

acessíveisb. Valor do botão: este valor corresponde ao valor de exportação em Acrobat e também pode ser

usado para identificar um botão de opção em um grupo em um formulário acessível.

Page 119: Projeto de design editorial digital

Ordem de tabulação

119

Para criar formulários acessíveis e de fácil utilização, é necessário atribuir uma ordem de tabulação utilizável.

Os usuários podem navegar pelos campos de formulário sem usar um dispositivo apontador. Pressionar a tecla Tab desloca o foco ao próximo campo lógico.

Existem dois métodos para especificar uma ordem de tabulação em um PDF marcado:

● Use o painel Artigos (Janela > Artigo) para especificar uma ordem de tabulação personalizada

● Escolha Objeto > Interativo > Definir ordem de tabulação.

Page 120: Projeto de design editorial digital

120

Painel Artigos

1. Abra o painel Artigos (Janela > Artigos).2. Arraste os campos de formulário para o painel Artigos.3. No painel Artigos, arraste para reordenar os campos na ordem necessária.

OU

Objeto Interativo

1. Escolha Objetos> Interativo> Definir ordem de tabulação.2. Clique em Mover para cima ou Mover para baixo para organizar os itens na

ordem de tabulação desejada.

Ordem de tabulação

Page 121: Projeto de design editorial digital

PDF interativo

Page 122: Projeto de design editorial digital

PDF interativo

122

É possível exportar documentos PDF com os seguintes recursos interativos:

● Marcadores: os marcadores criados no documento do InDesign são exibidos na guia 'Marcadores', no lado esquerdo da janela do Adobe Acrobat ou do Adobe Reader. Cada marcador salta para uma página, um texto ou um gráfico no arquivo PDF exportado.

● Filmes e clipes de som: é possível adicionar filmes e clipes de som a um documento ou pode vincular a arquivos de vídeo de fluxo contínuo na Internet. Esses filmes e clipes de som podem ser reproduzidos no arquivo PDF exportado.

● Hiperlinks: em um documento PDF exportado, ao clicar em um hiperlink, vai para outro local no mesmo documento, para um documento diferente ou para um site.

● Referências cruzadas: remete os leitores de uma parte do documento para outra no arquivo PDF exportado. As referências cruzadas são principalmente úteis em manuais de usuário e manuais de referência. Quando um documento com referências cruzadas é exportado para PDF, as referências cruzadas funcionam como hiperlinks interativos.

● Transições de página: aplicam um efeito decorativo, como 'Dissolver' ou 'Limpar', quando se vira a página no PDF exportado no modo de tela inteira

Page 123: Projeto de design editorial digital

Visualizar PDF interativo

123

Use o painel Janela > Interativo > Visualização para visualizar a interatividade e a animação da seleção atual, da página espelhada atual ou do documento inteiro.

● Para visualizar a interatividade e a animação, execute qualquer uma das ações a seguir:○ Clique no botão “Configurar modo de seleção de visualização” para visualizar a seleção atual.○ Clique no botão “Configurar modo de visualização de páginas espelhadas” para visualizar as

páginas espelhadas atuais.○ Clique no botão “Configurar modo de visualização do documento” para visualizar o documento

atual.

● Clique no botão “Reproduzir visualização” para visualizar a seleção, a página espelhada ou o documento. Se necessário, clique em itens interativos, como botões, no painel “Visualização” para testá-los. Se estiver visualizando o documento, será possível clicar nas setas “Ir para página anterior” e “Ir para a página seguinte”, na parte inferior do painel, para mover para páginas diferentes.

Page 124: Projeto de design editorial digital

Bibliografia

124

● ADOBE. InDesign CC: Aprendizado & Suporte. Disponível em <https://helpx.adobe.com/br/indesign.html> Acesso em 01 Fev. 2015.

● HORIE, R. M.; PLUVINAGE, J. Revistas Digitais para iPad e outros tablets - Arte-finalização, Geração e Distribuição. São Paulo: Bytes & Types, 2011.