adobe digital publishing suite by dualpixel

treinamento

Produção de conteúdo para iPad

>> treinamento

www.dualpixel.com.br | [email protected] 5

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 SUITESe 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 SUITEUsuá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.

observações:

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

◾ 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

VISÃO GERAL DO FLUXO DE TRABALHO

ID CS5

LayoutHorizontal

LayoutVertical

Videos,Audios, etc

Overlay Creator ElementosInterativos no ID

Edição dosMetadados

ArquivoFOLIO

Uploadpara iTunes

Teste noiPad

Envio do ArquivoFolio para Adobe

Adobe criao Aplicativo

Upload do App para AppleStore

Folio

Organizaçãodas Seções

O QUE É O FORMATO FOLIOEste 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.


DECISÕES DE DESIGNOrientaçã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.

observações:


CAPÍTULO 2 - NO INDESIGN

CRIANDO DOCUMENTOS NO INDESIGN PARA PUBLICAÇÃO NO IPADAtravé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.


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 PAISAGEMSe 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.

observações:


◾ 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 PASTASO 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á


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.

observações:


PASTASVocê 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.

PACOTEPara 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 IPADHá 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 HTMLArquivos 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


◾ 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 HTMLPara 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.

observações:


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.


CAPÍTULO 3 - ELEMENTOS INTERATIVOS

CRIANDO ELEMENTOS INTERATIVOSUtilize 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 DPSAtente 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)

observações:


◾ 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


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- HYPERLINKSHyperlinks é 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.

URLNa 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.

observações:


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)

EMAILDigite um email para abrir o aplicativo de email padrão

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

PAGEPermite 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://


CONFIGURANDO OS HYPERLINKS NO PAINEL OVERLAY CREATORSelecione 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ÕESCrie 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.

observações:


◾ 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ÁGINASDentre 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.

NAVTOOutra 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)


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 - SLIDESHOWAtravé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.

observações:


◾ 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.


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.

observações:


» 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 OVERLAYImage 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.


◾ É 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.

observações:


» 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 - PANORAMAO 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


» 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 ZOOMEste 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:

observações:


◾ 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 FRAMEScrollable 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.


◾ 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.

observações:


VII - AUDIO & VIDEO

AUDIOSã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


VIDEOPara 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.

observações:


VIII - WEB CONTENT OVERLAYEste 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

adobe digital publishing suite by dualpixel

Technology