Adobe Digital Publishing Suite by dualpixel

Produção de
conteúdo para iPad

treinamento

>> treinamento

CAPÍTULO 1 - VISÃO GERAL

PLATAFORMA DE PUBLICAÇÃO DIGITAL
(ADOBE DIGITAL PUBLISHING SUITE)
Através da Digital Publishing Suite (DPS) designers que produzem material impresso,
como revistas, livros, anuários, etc com InDesign CS5 e CS5.5 podem tornar esse con-
teúdo acessível via dispositivos moveis - Tablets. Atualmente é possível publicar para
iPad; Playbook (RIM) e Android Tablets.

Recursos de interatividade podem ser adicionados ao documento possibilitando aos lei-
tores uma nova experiência de acesso à informação e entretenimento. Através de toques
e gestos imagens são ampliadas, rotacionadas, expandidas; audios e vídeos exibidos,
entre outros.

O QUE É O DIGITAL PUBLISHING SUITE
Se você já tem um iPad já deve ter acessado a Apple Store e visto uma infinidade de
aplicativos para diversas funcionalidades. Então, criar aplicativos para Tablets não é uma
novidade? Certamente não!

Hoje em dia, a grande maioria dos aplicativos existente na AppleStore é fruto de horas
(senão, dias) de trabalho em programação, basicamente na linguagem Objective-C.
O que a Adobe oferece através desta plataforma de publicação é eliminar a etapa de
programação. Você envia o conteúdo da revista ou outro tipo de publicação e a Adobe
lhe entrega esse mesmo conteúdo dentro de um App, pronto para distribuição não só
na Apple Store, como também, na Android Market e App World (RIM).

O sistema DPS não é um software e nem um plug-in. Trata-se de um serviço, nos moldes
do Cloud Computing, comercializado por assinatura.

INSTALAÇÃO DO DIGITAL PUBLISHING SUITE
Usuários de InDesign CS5 e CS5.5 precisam instalar o conjunto Folio Producer para ter
acesso as ferramentas de criação do formato Folio. Sim, é possível trabalhar com InDe-
sign CS5 e produzir todos os recursos de interatividade disponíveis para iPad.

Folio Producer

Após instalação desse pacote dois novos painéis ficam
disponíveis no InDesign. Acesse Menu > Window >
Extensions.

◾◾ Overlay Creator - painel responsável pela con-
figuração e controle dos principais recursos de
interatividade disponíveis na plataforma.

www.dualpixel.com.br | felipesantos@dualpixel.com.br 5

◾◾ Folio Builder - central de criação, edição e atua-
lização dos arquivos Folios. A partir deste painel
é realizado todo gerenciamento da publicação,
no InDesign.

A seguir informo os links para download do Folio
Producer:

Windows - http://www.adobe.com/support/downloads/
product.jsp?product=172&platform=Windows

MAC OS - http://www.adobe.com/support/downloads/
product.jsp?product=172&platform=Macintosh

O QUE É O FORMATO FOLIO
Este formato reune a publicação criada no InDesign, com todos os recursos de interati-
vidade. Arrisco uma comparação com o formato PDF, no sentido que ambos são empa-
cotadores. A diferença é que o Folio não possui o suporte de um “Acrobat Reader”, que
permitisse a distribuição de Folios fora das AppStores.

VISÃO GERAL DO FLUXO DE TRABALHO

Folio

ID CS5 Overlay Creator Elementos Edição dos Organização Arquivo
Interativos no ID Metadados das Seções FOLIO

Videos,
Audios, etc

Layout Layout
Horizontal Vertical

Upload do App Adobe cria Envio do Arquivo Teste no Upload
para AppleStore o Aplicativo Folio para Adobe iPad para iTunes

observações:

6 Curso de Produção de Conteúdo para iPad

DECISÕES DE DESIGN
Orientação — Vertical, Horizontal, or Both?

É possível criar publicações com orientação simples, ou seja, só vertical ou horizontal,
bem como com as duas opções (mais utilizada atualmente). Contudo não é possível
mesclar os tipos de orientação das páginas. Por exemplo, não pode haver uma seção
só na vertical e a capa com dupla orientação. Layouts com orientação simples não são
ajustados quando o leitor muda a posição do iPad. Apenas a exibição de vídeos em tela
cheia se ajusta entre as posições vertical e horizontal.

Muito se comenta que a orientação ideal para revista seja a vertical (portrait), pelo há-
bito natural da leitura, outros defendem que para leitura em tela o ideal seja layouts na
horizontal. Acredito que não há certo ou errado nesta questão. A verdade é que produzir
publicações com dupla orientação é bem mais trabalhoso e, se num futuro próximo, você
quiser disponibilizar sua publicação para outros Tablets comece a pensar em produzir
layouts na vertical e horizontal para diferentes formatos de dispositivos, como: 1024×768
(iPad), 1280×800 (Galaxy Tab; Xoom), entre outros.

Uma saída mais criativa é criar publicações com dupla orientação, onde cada página
(vertical e horizontal) traga conteúdos distintos ou complementares. Veja algumas ideias:

A página horizontal pode ser dedicada a informações mais visuais (video, slideshow),
enquanto a versão vertical possua mais informação textual.

Para um manual tipo passo-a-passo, a página vertical pode trazer as instruções para a
tarefa, já na página horizontal aparecem fotos com antes e depois. Muitas revistas dia-
gramam duas versões de cada matéria, uma dica é incluir fotos diferentes do mesmo
tema em cada layout para se valer do dinamismo da leitura.


CAPÍTULO 2 - NO INDESIGN

CRIANDO DOCUMENTOS NO INDESIGN PARA PUBLICAÇÃO NO IPAD
Através da Plataforma de Publicação Digital da Adobe (DPS) é possível criar documentos
para dispositivos móveis como o iPad. Você pode criar um layout com duas orientações
(vertical e horizontal) para atender os recursos de exibição do iPad ou layouts com ape-
nas uma única apresentação (vertical OU horizontal).

Neste caso a publicação terá sempre a mesma visualização seja qual for a posição do iPad

»» Importante: Não é possível ter no mesmo documento
páginas com dupla orientação (vertical e horizontal) e
outras com orientação simples (só vertical, por exemplo)

Por padrão a leitura do documento é realizada no sentido vertical entre páginas de uma
mesma seção e no sentido horizontal para mover-se entre as diferentes seções do do-
cumento.

observações:


BOAS PRÁTICAS PARA CRIAÇÃO DO DOCUMENTO NO INDESIGN
◾◾ Desabilite a opção facing pages.

◾◾ Use pixel como unidade de medida. Quando possível crie um novo documento orien-
tado para web. Escolha essa opção no campo Intent na janela New Document.

◾◾ Evite trabalhar com imagens de alta resolução (300 dpi). Para as imagens utilizadas
nos recursos interativos (Slideshows; Panaromas; 3600, etc) ajuste, previamente,
o tamanho, resolução (72 dpi) e formato (JPEG ou PNG). As imagens utilizadas via
Overlay Creator não são convertidas ou otimizadas quanto ao formato e resolução.
Para obter os melhores resultados ajuste suas imagens antes.

◾◾ Para imagens SEM recursos de interatividade é possível utilizar qualquer formato (PSD;
TIFF; AI; EPS). Quando carregado no Folio Builder as imagens contidas no documento,
sem interatividade, são convertidas para JPEG, PNG ou PDF e tem suas resoluções
otimizadas.

◾◾ Quando alterar a orientação do documento de vertical para horizontal (ou vice versa),
considere o uso das linhas guias delimitando os objetos, em conjunto com a função
Layout Adjustment, encontrada no menu Layout para o melhor resultado.

»» Veja mais detalhes deste item no Anexo 1 - Convertendo
layouts de Retrato para Paisagem

◾◾ Utilize o InCopy para compartilhar o texto entre os documentos em modo retrato e
paisagem.

»» Veja mais detalhes deste item no Anexo 2 - Um conteúdo
para dois layouts

◾◾ De preferência as modo de cor RGB, ao invés de CMYK ou Lab.

◾◾ Evite deixar elementos interativos “sangrando” na página, ou seja, além dos limites
da página.

◾◾ Utilize a página mestra para manter os elementos de layout padronizados em todo
o documento.

◾◾ Utilize o recurso do painel Book para centralizar as configurações dos estilos, amostras
de cores, entre outros itens de todas as seções da publicação.

◾◾ Para criar as seções de páginas utilize o recurso Move Pages da Paleta Pages. Assim
você pode extrair uma sequencia de páginas de um documento para outro.

CRIAÇÃO DO DOCUMENTO NOS MODOS RETRATO E PAISAGEM
Se você está utilizando um documento configurado para midia impressa como base para
construção do seu conteúdo digital no iPad, possivelmente criar um novo documento
orientado para WEB seja a opção mais adequada, porém não muito prática. Por isso siga
as alterações abaixo para reconfigurar seu documento de PRINT para WEB.


◾◾ Não use a opção Facing Pages - deixe apenas uma página por Spread

◾◾ Clique com butão direto do mouse onde as duas réguas se encontram, na parte su-
perior esquerda e escolha pixels como unidade de medida

◾◾ Em Page Size especifique o formato da página conforme o dispositivo de leitura. Em
nosso caso será o iPad que possui 1024 x 768 pixels de tela.

◾◾ Escolha Menu Edit > Transparency Blend Space > RGB.

◾◾ Para orientação escolha Portrait (retrato) ou Landscape (paisagem)

◾◾ Siga os mesmos passos para criar o segundo documento. Quando salvar os arquivos
não esqueça de incluir os sufixos _v para a versão vertical (portrait) e _h para versão
horizontal (landscape), como por exemplo secao1_v.indd

ORDENANDO CORRETAMENTE AS PASTAS
O modulo Folio Builder utiliza da estrutura das pastas e do padrão de nomeação dos
arquivos para determinar o que será incluído no arquivo .folio. É importante seguir o
padrão da estrutura de pastas para evitar erros no modulo Folio Builder.

Quando você carregar os arquivos de seu projeto dentro do Folio Builder estes precisam
estar dentro de uma única pasta principal – Projeto, por exemplo. A pasta Projeto deverá

observações:


contar subpastas referentes a cada seção ou capítulo de seu documento. Por sua vez,
para ser incluída no Folio Builder cada subpasta deverá conter um ou dois arquivos do
InDesign (conforme a escolha do layout do documento - com orientação simples ou dupla
(vertical e horizontal). Cada arquivo do InDesign pode conter várias páginas destinadas
para matéria ou anúncios.

Dentro de cada subpasta deverá conter também um arquivo PNG (por exemplo, tocpre-
view.png), que será utilizado como miniatura no Sumário gerado automaticamente pelo
Folio Builder. Se determinada subpasta não tiver o arquivo PNG, a miniatura será gerada
com base na primeira página do arquivo do InDesign.

Configuração do arquivo PNG: 70x70 pixels; sem transparência.

»» Importante: A primeira página da primeira subpasta será
utilizada como capa do arquivo .folio

PAINEL OVERLAY CREATOR
InDesign utiliza o painel Overlay Creator para editar elementos interativos. Alguns recur-
sos interativos como 360 viewers e Panoramas precisam de uma pasta de origem onde
estejam TODAS as imagens que farão parte do objeto interativo. Não delete esta pasta
de imagem, pois o Folio Builder irá utiliza-la para produzir o arquivo .folio. Caso mova a
pasta de lugar, atualize seu caminho no painel Overlay Creator.


PASTAS
Você pode organizar a estrutura de pastas de diferentes formas. Os arquivos de InDe-
sign e as imagens, vídeos e audio inseridos no layout não precisam estar na mesma
subpasta — estes arquivos podem estar em qualquer diretório onde o InDesign consiga
manter o link com eles.

De qualquer forma é recomendável manter todos os arquivos agregados sob a mesma
subpasta, desta forma você melhora a organização do projeto e facilita a localização
dos mesmos.

Para melhores resultados sempre utilize nomes SIMPLES para PASTAS E ARQUIVOS de
INDD. Não use caracteres especiais, acentos ou espaço para nomear esses itens.

PACOTE
Para reunir todos os arquivos utilizados no projeto utilize o comando File > Package.
Desta forma o InDesign exporta o próprio arquivo, todos os vínculos e as fontes utiliza-
das numa mesma pasta.

Verifique antes de usar este comando se não há vínculos ausentes ou modificados.

CRIANDO DOCUMENTOS EM HTML PARA PUBLICAÇÃO NO IPAD
Há três maneiras de se aproveitar as vantagens do HTML na Plataforma Adobe para iPad

Links para sites. Através dos recursos de Hyperlinks ou Butões.

Web View Overlay. Elemento interativo que exibe um site ou uma página HTML local
dentro de uma área de trabalho.

Arquivos em HTML. Ao invés de produzir arquivos de InDesign é possível utilizar
subpastas com arquivos em HTML

BOAS PRÁTICAS PARA A CRIAÇÃO DE UM DOCUMENTO EM HTML
Arquivos em HTML atendem as orientações vertical e horizontal do iPad. Contudo, você
pode criar arquivos individuais para cada orientação, para isso adicione os sufixos _v ou
_h no final do nome do arquivo HTML, tal como capa_v.html

observações:


◾◾ O nome do arquivo não precisa ser index.html

◾◾ Semelhante a estrutura com arquivos de InDesign, cada subpasta com arquivos em
HTML deve conter um arquivo PNG para compor o sumário.

◾◾ Configuração do arquivo PNG: 70x70 pixels; sem transparência.

◾◾ Dynamic HTML (DHTML) não são suportados.

A estrutura de pastas permite que cada elemento (imagens, scripts, CSS) associado com
o arquivo HTML esteja em uma pasta nomeada como HTMLResources e localizada no
mesmo nível das demais pastas (seções) que formam o projeto. Outra opção é manter
todos os arquivos associados (imagens, scripts, CSS) na mesma pasta do arquivo HTML

Para permitir que o conteúdo se ajuste com diferentes tipos de dispositivos móveis com
diferentes resoluções de tela, adicione a declaração <meta> a seguir no arquivo HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
Utilize caminhos relativos no código HTML. Se você está linkando uma imagem no mesmo
nível do arquivo HTML, use conforme abaixo:

<img src=”GlobalImage.jpg”/>
Agora, se você está utilizando uma pasta como origem para as imagens declare desta
maneira

<img src=”../HTMLResources/image/GlobalImage.jpg”/>

CRIANDO MINIATURAS PARA ARQUIVOS HTML
Para arquivos de InDesign o modulo Folio Builder cria automaticamente as miniaturas de
cada matéria, que são exibidas junto com os metadados. Com arquivos HTML este pro-
cesso nem sempre gera os melhores resultados e dura mais tempo quando comparado
com arquivos em InDesign. Assim temos duas opções para construir essas miniaturas
com arquivos em HTML.

Deixe o modulo Folio Builder criar a miniatura com base na primeira página de cada
arquivo HTML, marcado a opção “Include scrubbers for HTML stacks”, no Painel
Folio Builder.


Crie suas próprias imagens para compor essas miniaturas. Salve arquivos em PNG com
os nomes de “scrubberthumbnail_h.png” e “scrubberthumbnail_v.png”. Não
há um limite de tamanho, contudo essas imagens serão ajustas no formato 221 x 166
pixels (horizontal) e 125 x 166 (vertical). Assim sendo, para obter o melhor resultado
salve as miniaturas nestas dimensões.

observações:


CAPÍTULO 3 - ELEMENTOS INTERATIVOS

CRIANDO ELEMENTOS INTERATIVOS
Utilize o Painel Overlay Creator (Window > Extensions > Overlay Creator) para criar e
editar elementos interativos. Há basicamente duas maneiras de criar um elemento in-
terativo.

Para Slideshows, hyperlinks, audio, video, image pans and scrollable content (conteúdo
rolável) crie ou importe os arquivos no documento do InDesign e ajustes as configurações
de cada recurso via Overlay Creator

Para 360 viewers, panoramas e web views desenhe um objeto (frame) retangular e im-
porte uma imagem que será exibida como poster. Então especifique no painel Overlay
Creator a origem das imagens que farão parte do recurso interativo e ajuste suas opções
de configuração.

Outra característica importante do Overlay Creator é que todo elemento que recebe al-
gum recurso desta paleta será sempre exibido no topo da pilha de elementos do layout.

RECURSOS INTERATIVOS COMPATÍVEIS COM DPS
Atente que nem todos os recurso de interatividade do InDesign CS5 são suportados pela
plataforma de publicação digital (DPS). A seguir lista dos itens compatíveis:

◾◾ Multi-State Objets (MSO): usado para criar slideshows

◾◾ Hyperlinks: para URL; email; Páginas e Navto hyperlinks

◾◾ Buttons: apenas o evento Release com 1 única ação agregada

◾◾ Ações compatíveis: Go to destination; Go to first page; Go to last page; Go to URL;
Go to page; Go to State; Go to previous and Go to next state.

◾◾ Audio - use arquivos MP3. Não é possível realizar loop ou stream com arquivos de audio.

◾◾ Video - use arquivos mp4; m4v na codificação h264 (HTML5)


◾◾ Outros recursos disponíveis via Painel Overlay Creator: 360 viewers; web views; pan/
zoom; panoramas e scrollable frames.

RECURSOS INTERATIVOS NÃO COMPATÍVEIS COM DPS
◾◾ Animações - animações são rasterizadas pelo Folio Builder

◾◾ Alguns Hyperlinks - Text Anchor e Shared Destination Hyperlinks

◾◾ Algumas ações de butão - Go To Next Page, Go To Previous Page, Show/Hide Buttons,
Butões de Controle de Som e Video. Ações múltiplas não são suportadas. Eventos do
“mouse” On Click e On Rollover também não são suportados.

◾◾ Outros recursos NÃO compatíveis: bookmarks; cross-reference e page transitions.

BOAS PRÁTICAS NA CRIAÇÃO DE ELEMENTOS INTERATIVOS
◾◾ Para criar elementos interativos escolha o espaço de trabalho Interactive, em Windows
> Workspace > Interactive e tenha acesso aos painéis e recursos mais facilmente.

◾◾ Para os recursos tipo Panaronas, 360 view e Web View crie pastas separadas para
cada recurso com imagens já devidamente ajustas para 72dpi, formato JPEG ou PNG.

◾◾ Para otimizar o tamanho do arquivo final crie essas imagens com as dimensões finais
para exibição no iPad

◾◾ No Photoshop e Illustrator utilize o recurso de salvar para web, em File > Save for
Web & Devices para otimizar imagens.

◾◾ O modulo Folio Builder não otimiza (aplica compressão) em imagens utilizadas pelo
Painel Overlay Creator. Para reduzir o tamanho das imagens utilize o formato JPEG
com qualidade médio (50 - 80%) ao invés do formato PNG

◾◾ Para imagens com textos em tamanhos grandes (acima de 18 pt) use JPEG medio ou
PNG. Para imagens com textos menores que 18 pt utilize o formato PNG

◾◾ Dispositivos moveis como o iPad ainda tem limitações de memória. Páginas sequen-
ciais com recursos interativos podem causar problemas como a exibição de um tela

observações:


cinza, devido a falta de recursos para exibir o conteúdo. Por precaução escolha bem
os tipos e quantidades de recursos interativos inseridos no projeto, e sempre que
possível alterne páginas com e interatividade com páginas sem conteúdo interativo.

I- HYPERLINKS
Hyperlinks é um dos recurso mais úteis e simples de se trabalhar no InDesign. No InDe-
sign use o Painel Hyperlinks para criar links para web; diferentes documentos (matérias);
diferentes páginas no mesmo documento ou em outros. Siga as etapas:

1 - Selecione um frame ou texto que você deseja utilizar como hyperlink

2 - Abra o Painel Hyperlink (Window > Interactive > Hyperlinks).

3 - No Painel Hyperlink escolha New Hyperlink no Menu do Painel

4 - Na opção Link To, especifique uma das opções a seguir e clique em OK. O Painel
Overlay Creator trabalha com as opções de link: URL; Email; File e Page.

Não utilize as opções Text Anchor e Shared Destination.

URL
Na opção URL é possível criar links para web (http://), para um aplicativo na Apple Store
(itms://) ou para diferentes documentos (navto://).

Quando criar links para web sempre declare o endereço completo, por exemplo: http://
www.adobe.com. Para links direcionados a Apple Store utilizando o comenado itms://,
neste caso desabilite a opção “View in Context”, senão um aviso “Cannot Open
Page” será exibido quando o usuário tocar o link. O mesmo vale para links direcionados
à iTunes.


Utilizando a opção navto:// é possível criar links para diferentes documentos ou páginas
em diferentes documentos. Digite navto:// seguindo do nome da seção (Article Name).
Se você deseja linkar uma página em específico, adicione o sinal # seguido do numero
da página.

Para o InDesign a primeira página é considerada 0, assim digite #2, para linkar a página
3, por exemplo: navto://nome_da_secao ou navto://nome_da_secao#2 (abre a página 3)

EMAIL
Digite um email para abrir o aplicativo de email padrão

FILE
Permite criar links para diferentes documentos dentro da pasta do projeto. Para ar-
quivos contidos em outras pastas Prefira a opção Navto://

PAGE
Permite criar links para diferentes páginas dentro do documento ou dentro de outros
documentos dentro da pasta do projeto. Para arquivos contidos em outras pastas Prefira
a opção Navto://

observações:


CONFIGURANDO OS HYPERLINKS NO PAINEL OVERLAY CREATOR
Selecione o hyperlink (ferramenta de Seta) e acesse o Painel Overlay Creator, em Window
> Extensions > Overlay Creator.

◾◾ Require Confirmation For External Links - Exibe uma tela de confirmação. Esta opção
fica desabilitada quando a opção View In Context está marcada.

◾◾ View In Context - Determina que o hyperlink será exibido dentro do Aplicativo ou di-
retamente no browser (Safari). Não utilize esta opção quando criar links para Apple
Store (itms://) e iTunes

NOTA: estas opções não estão disponíveis para hyperlinks de texto. Este
tipo de link é configurado como View In Context, como padrão.

HYPERLINKS A PARTIR DE BUTÕES
Crie um objeto que será utilizado como butão. Por exemplo, você deseja que o butão
tenha um link pro site de seu cliente. Vá na Paleta Buttons (Window > Interactive >
Buttons) selecione o objeto e clique em Convert Object To Button. Marcado em
vermelho abaixo.


◾◾ Para a opção Event escolha Release. Alias, este é o único evento válido para o iPad.

◾◾ Para Action escolha entre as ações suportadas. Em destaque na imagem acima.

◾◾ Em azul ações suportadas para hyperlinks; em amarelo ações para Slideshow (Multi
State Objects). Entre as opções disponíveis para navegação Go To Destination é util
para criar Sumários e links entre seções. Crie um link de destino com a opção Page
(não use Text Anchor) e faça um link entre uma chamada e o conteúdo da revista.
Butões só podem ter um tipo ação habilitada por vez.

LINK PARA PÁGINAS
Dentre os métodos possíveis para se construir esse link, a opção PAGE é a mais funcio-
nal. Quando criar um hyperlink escolha a opção PAGE no campoLink to e especifique o
documento e numero da página que será o destino do link.

Quando quiser links para outro documento, primeiro abra o documento de destino e crie
um hyperlink destination na página que você pretende destinar o link. Então configure
um butão com a ação Go To Destination e especifique o destino previamente criado.

NAVTO
Outra opção possível está no recurso NAVTO. Quando criar um hyperlink ou butão (com
a ação Go To URL) você pode trocar no campo URL de “http://” por “navto://”. Então
especifique um documento (e página) que você queira fazer o link. Alguns exemplos de
navto link:

navto://nome_seção

navto://novidades

navto://novidades#2 (link para a página 3)

navto://novidades#3 (link para a página 4)

Para o InDesign a primeira página é considerada 0, assim digite #2, para linkas a página 3,
por exmplo: navto://nome_da_seção ou navto://nome_da_seção#2 (abre a página 3)

observações:


Criando NAVTO hyperlink em documentos HTML

Em documentos HTML a opção navto torna-se ainda mais importante. Neste tipo de do-
cumento a opção “navto://” é o principal caminho para se criar links.

Crie links para um arquivos HTML: navto://nome_da_seção.

A partir de um documento do InDesign crie um link para um arquivo HTML indicando o
nome da seção (e não o titulo da seção) que contém o arquivo HTML.

Crie um link para um âncora do HTML

Não é possível criar um link para um página específica em HTML, mas é você pode linkar
para uma referência de âncora - navto://nome_do_folder#part4

Atenção: para definir uma âncora no arquivo HTML, marque na parte do texto que deseje
criar a âncora e insira as tags de âncora ao lado do texto, veja: “<a name=”part4”>Esta
é a parte 4 do arquivo</a>.”

Crie um link para arquivos do InDesign

Você também pode criar um link para um arquivo de InDesign a partir de um arquivo
HTML.

Veja um exemplo: <a href=”navto://nome_da_seção”>Link para ID documento</a>

Indique para qual página deseja fazer link, adicionando a informação da página após o
nome do documento: <a href=”navto://nome_da_seção#3”>Link para ID documento</a>

II - SLIDESHOW
Através do comando de Objects States é possível criar um conjunto de imagens para
exibição tipo Slideshow. Se você exibir diferentes informações de texto e imagens em
cada slideshow, agrupe-os antes num mesmo State. Ainda não é possível exibir slidsho-
ws em modo full-screen.

◾◾ No InDesign acessa a paleta, Object States (Window > Interactive > Object States)
para criar o slide show.


◾◾ Importe e prepare as imagens que deseja incluir no slideshow. Alinhe uma sobre a
outra formando uma pilha

◾◾ Na paleta Object States defina um nome para o slideshow

»» Nota: Para manter a continuidade da exibiação entre os
layouts vertical e horizontal mantenha o mesmo nome do
slideshow am ambos os documentos.

»» Atenção: Evite o uso de nomes com pontuação ou muito
longos para evitar erros futuros

◾◾ Crie butões para navegar entre as imagens do Slideshow. Use na paleta Buttons, a
opção Action com Go To State para exibir um slide em específico. Marque Go To Next
State a Go To Previous State para navegar entre as imagens.

observações:


Se você deseja que a aparência do butão mude quando o usuário clicar no botão, marque
na paleta Buttons a opção [Click] e mude a aparência.

Para controlar a exibição do slideshow utilize o Painel Overlay Creator, seguindo as op-
ções abaixo:

»» Play On Page Load - incia o slideshow quando a pagina carrega.

»» Delay - com a opção Play On Page Load ativa, este campo especifica
o tempo de inicio do slideshow.

»» Advance Every - Com a opção Play On Page ou Tap to play/pause
ativas este campo determina o tempo entre cada transição do
slideshow.


»» Play_Time - Com a opção Play On Page ou Tap to play/pause
ativas neste campo você determina quantas vezes o slideshow
irá passar.

»» Loop - Habilita o slideshow repetir em sequência até o usuário
mudar de página.

»» Tap to play/pause - Esta opção habilita o usuário, através do
clique (tap), a dar inicio ou término ao slideshow.

»» Stop at First/Last State - determina se o slideshow irá terminar
na útima imagem. Se ficar desmarcado o slideshow passará em
looping.

»» Swipe to Change State - permite ao usuário passar as imagens
com o toque dos dedos.

»» Cross-fade - Aceita valores de 0.125 a 60 segundos. Trata-se da
suavidade na transição entre as imagens. O tempo padrão é 0.5
segundo.

»» Hidden Until Triggered - Quando marcado, o slideshow fica oculto
até que usuário clique num botão para exibi-lo.

»» Reverse Image Order - Exibe o slideshow na ordem inversa.

III - IMAGE SEQUENCE OVERLAY
Image Sequence é um recurso que permite exibir um objeto em seus 360 graus. Mas
este recurso vai além disto, na verdade, exibe qualquer sequência de imagens. Você
pode com criatividade e um pouco de trabalho criar pequenas animações e montagens.

◾◾ Use imagens já otimizadas no tamanho e resolução que deseja exibir no Tablets. Por
exemplo, 500 x 400 pixel com 72 ppi.

◾◾ Trabalhe com os formatos JPG, compressão média, e PNG. Este último só se deseja
manter a transparência no efeito.

◾◾ Para rotações de 3600 suaves utilize o mínimo de 30 sequências para criar o efeito.

observações:


◾◾ É fundamental que todas as imagens estejam na mesma pasta e com o mesmo nome
raiz, alterando só sufixo, com um sequência numérica. Tipo, imagem001.jpg; ima-
gem002.jpg;etc

»» Nota: É possível obter imagens em 3D a partir de diferentes
formas, como: Exportar uma sequência de imagens de um
modelo 3D no Photoshop Extended; do Flash Professional;
After Effects ou apartir de algum software 3D, como Sketch
Up, Light Wave, entre outros.

Para aplicar este recurso em seu documentos siga as opções abaixo:

◾◾ Crie um retângulo na página

◾◾ Acesse o Painel Overlay Creator (Window > Extensions > Overlay Creator) e marque
a opção 360 Viewer.

◾◾ No Painel clique no ícone da pasta, então localize o diretório onde estão as imagens
em sequência e clique Open. A primeira imagem da sequência é exibida no layout.

◾◾ Se preferir exibir uma imagem de poster, diferente do da primeira imagem da sequência,
utilize o comando File > Place para inserir uma imagem como Poster. Mantenha as
mesmas dimensões definidas para o efeito. No iPad o usuário acessa o 360 Viewer
com um clique sobre o poster. Um duplo clique exibe a imagem de poster novamente.

◾◾ Para ajustar a aparência do efeito altere os valores no Overlay Creator

»» Show First Image Initially - Essa opção exibe a primeira imagem
como poster.
»» Play On Page Load - incia o 360 quando a pagina carrega.
»» Delay - com a opção Play On Page Load ativa, este campo especifica
o tempo de inicio do 360.
»» Speed - Altere a velocidade de progressão das imagens. Mínimo
valor é 1 frame por segundo e o máximo 30 frames.
»» Play_Time - Com a opção Play On Page ou Tap to play/pause ativas
neste campo você determina quantas vezes o 360 irá passar.
»» Loop - Habilita o 360 a repetir em sequência até o usuário mudar
de página.
»» Tap to play/pause - Esta opção habilita o usuário, através do
clique (tap), começar e terminar a exibição do 360. Um duplo
clique exibe a imagem de poster novamente.
»» Allow Swipe - permite ao usuário passar as imagens com o toque
dos dedos.


»» Stop at First/Last State - determina se o 360 irá terminar na
última imagem. Se ficar desmarcado o 360 passará em looping.

»» Reverse Image Order - Exibe o 360 na ordem inversa.

IV - PANORAMA
O panorama overlay permite ao leitor a ilusão de estar num ambiente, no qual ele tem
a visão panorâmica do local. O segredo deste recurso é possuir as imagens necessárias
para exibir o efeito. O Painel Overlay Creator precisa de 6 imagens, que representam as
6 faces de um cubo.

Imagens originais e Imagens já convertidas para o padrão de 6 faces do cubo

Panorama no iPad

observações:


»» Nota: para converter suas imagens panorâmicas no padrão
de 6 faces do cubo, utilize o programa - Pano2vr em
http://gardengnomesoftware.com/pano2vr_download.php
Com suas imagens já preparadas siga os passos a seguir:

◾◾ Use imagens já otimizadas no tamanho e resolução que deseja exibir no Tablets. Por
exemplo, 500 x 400 pixel com 72 ppi (ou maior).

◾◾ Este recurso permite que o usuário dê Zoom na imagem, por isso recomendo resolu-
ções maiores, como 150 ou 200 ppi.

◾◾ Trabalhe com os formatos JPG, compressão média,

◾◾ É fundamental que todas as imagens estejam na mesma pasta e com o mesmo
nome raiz, alterando só sufixo, com um sequência numérica. Tipo, imagem001.jpg;
imagem002.jpg;etc

◾◾ No Painel clique no ícone da pasta, então localize o diretório onde estão as imagens
no padrão de 6 faces e clique Open. A primeira imagem da sequência é exibida no
layout.

◾◾ Se preferir exibir uma imagem de poster, diferente do da primeira imagem da sequência,
utilize o comando File > Place para inserir uma imagem como Poster. Mantenha as
mesmas dimensões definidas para o efeito. No iPad o usuário acessa o Panorama
Overlay com um clique sobre o poster.

◾◾ Para ajustar a aparência do efeito altere os valores no Overlay Creator

»» Use Primeira imagem como a vista inicial - Selecionar esta opção
usa a primeira imagem como poster.

»» Tela inicial - Para Zoom, especificar um valor de 1 a 100.

»» Limite para Zoom - Se você não deseja que os usuários ampliar ou
reduzir de um certo ponto, especificar os valores mínimo e máximo
de 10 a 90.

»» Limite Pan Vertical - Se você deseja permitir inclinação de apenas
dois terços em direção ao topo, especifique -60. Especifique 60 para
permitir a inclinação apenas dois terços para o fundo. O valor limite
é de -90 e 90 para esse campo.

»» Limite Pan Horizontal - Especifique entre -180 e 180 para visulizar
todo área lateral da imagem.

V - PAN E ZOOM
Este recurso permite usar grandes imagens através de áreas menores, onde o usário pode
mover (pan) e dar zoom nas imagens. Para o melhor resultado deste recurso siga as instru-
ções abaixo:


◾◾ Atualmente, apenas áreas retangulares são possíveis.

◾◾ Use imagens no formato JPG e PNG (sem transparência).

◾◾ Para melhores resultados evite imagens maiores de 1024 por 1024 pixels com 72 ppi.
Imagens maiores podem causar problemas de memória. O valor máximo aceitável
de largura ou altura é 2000 pixels com 72 ppi.

◾◾ Este recurso não suporta transparência.

◾◾ Para aplicar o Pan e Zoom insira uma imagem e ajuste sua caixa da imagem sem
alterar o tamanho da mesma. O tamanho da caixa define a área de visualização.
Certifique-se que a caixa é menor que a imagem.

◾◾ Para mudar o zoom inicial, selecione a imagem, com a Direction Selection Tool e al-
tere seu tamanho.

◾◾ Você pode reduzir o tamanho da imagem. O valor máximo de aumento do recurso é
100%

◾◾ Por fim, selecione o frame da imagem, acesse o Painel Overlay Creator e marque a
opção Pan & Zoom.

◾◾ Nota: A opção Pan Only é útil para mascarar imagens que você deseja mover apenas
na horizontal ou vertical. Quando esta opção está marcada o canto superior esquerdo
da imagem precisa estar visível no canto superior esquerdo do frame.

VI - SCROLLABLE FRAME
Scrollable frame (numa melhor tradução caixa/conteúdo deslizante) permite exibir tex-
to e imagem através de uma máscara. Muito útil para exibir uma maior quantidade de
informação sem sobrecarregar o layout com informações.

Agora leitores não precisam virar a página para continuar numa matéria, basta mover o
texto pra cima e dar sequência na leitura. A seguir dicas de como obter o máximo deste
recurso.

observações:


◾◾ Atualmente este efeito se ajusta no canto superior esquerdo do frame, como ponto
inicial.

◾◾ Primeiro crie um novo Layer como o nome Scrollable Content. Este nome é case-sensitive,
então digite exatamente como acima. Este layer deverá ficar sobre os demais layers

◾◾ Crie dois frames. Um será o conteúdo e ficará no Scrollable Content. O segundo será a
máscara e ficará no layer padrão.

◾◾ Tenha cuidados de manter a larura destes frames sempre as mesmas para efeitos de
scroll na vertical.

◾◾ Para exibir elementos de texto, imagem pela máscara, agrupe todos esses elementos
e nova-os para a camada Scrollable Content.

◾◾ O nome do frame (ou grupo) no Scrollable Content deve ser o mesmo nome que o
frame da máscara, na camada padrão.

»» Nota: O frame de conteúdo é transparente por padrão,
caso deseja ocultar alguma informação da camada padrão,
preencha o frame na camada Scrollable Content.

»» Atenção: Para copiar este conjunto de um documento para
outro. Marque a opção Paste Remenber Layers no submenu
do Painel Layers. Desta forma a camada Scrollable Content
será criada automaticamente no segundo documento.


VII - AUDIO & VIDEO

AUDIO
São aceitos somente arquivos MP3 para audio. Atualmente stream de audio não são
suportados. Insira via comando Place o arquivo MP3 diretamente na página

Com o frame de audio marcado acesse o Painel Overlay Creator e defina as seguintes
configurações.

»» Assests / Controller Files - para exibir uma sequência de imagens
enquanto o audio toca.

»» Play On Page Load - inicia o Audio quando a pagina carrega.

»» Nota: Não são aceitos controles de audio via Button/Action

observações:


VIDEO
Para os melhores resultados crie (ou converta) o video para um formato definido, por
exemplo, 400 x 300 pixel, com uma imagem de poster na mesma dimensão do video.
Para vídeos em tela cheia devem ser otimizado para 1024 de largura. Siga as conside-
rações abaixo:

◾◾ Use formatos compatíveis com Apple iTunes. MP4, M4V com h.264 codec.

◾◾ Atualmente stream de vídeos não são suportados. Para exibir um video via URL utilize
o recurso de Web View ou HTML stack (seção).

◾◾ Pelo comando Place insira o video direto no documento.

◾◾ No painel Media insira a imagem de Poster. Crie uma imagem que identifique o video
ao leitor.

◾◾ Com o frame de video marcado, configure as opções do Painel Overlay Creator

»» Play Inline - Marcada esta opção o video será exibido dentro do
frame. Se desmarcada o video toca em full screen

»» Show Controller on Tap - Exibe os controles pro usuário. Melhor
deixar habilitada.

»» Play on Page Load - começa a exibir o video quando a página é
carregada. Podemos controlar o tempo para inicio do video.


VIII - WEB CONTENT OVERLAY
Este recurso permite exibir páginas da web dentro de um frame no InDesign, sem a
necessidade de browsers. O usuário irá navegar pelo site através da área do frame. É
possível especificar um URL ou acionar um arquivo HTML local.

»» Atenção: quando utilizar arquivo HTML local certifique-se
que todos os arquivos (HTML, CSS, javascripts, imagens,
etc) estejam na mesma pasta.

Se você deseja exibir um site que tenha uma versão mobile, faça o link direto para
a versão mobile (por exemplo, http://mobile.twitter.com) e não para o URL original,
http://twitter.com.

Para realizar este recurso é fácil, Siga as seguintes etapas:

◾◾ Crie um frame vazio. Se desejar importe uma imagem que servirá de poster para a
exibição inicial do site.

◾◾ Com a frame selecionado, acesse o painel Overlay Creator > Web Content

◾◾ Nesta é possível realizar as seguintes configurações:

Clique sobre a pasta, na aba Web Content, para especificar um URL local ou digite o
endereço de uma site da web. É necessário o endereço completo, com “http://”.

»» Auto play - Marque esta opção para exibir o site assim que págima
carregar. Você pode especificar um delay (tempo de espera) para
começar a exibir o site.

»» Transparent Background - Caso queira manter as áreas transparentes
do site deixe marcada esta opção. Quando desabilitada a cor de
fundo será o preenchimento do frame.

»» Allow User Interaction - Permite a interação do usuário no site.
Por exemplo, clique em links e navegar por outras páginas.

»» Scale Content to Fit - Quando marcada força o site a se ajustar
na área definida para exibição na página. Se desmarcada, o site
será exibido em seu tamanho original, o que poderá ocosionar
cortes em algumas partes do site.

observações:


www.dualpixel.com.br
observações:


Adobe Digital Publishing Suite by dualpixel

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (12)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Adobe Digital Publishing Suite by dualpixel

Ähnlich wie Adobe Digital Publishing Suite by dualpixel (20)

Mehr von dualpixel

Mehr von dualpixel (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (6)

Adobe Digital Publishing Suite by dualpixel