“DPS Getting Started Guide” – Adobe

A few notes to summarise the interactive capabilities of the Digital Publishing Suite.

ipad specs

Single vs Multi folio apps

Single folio apps

–         download single App and don’t need to download new issues

–          can only be created for ipads (not iphones, android etc.)

–          to update, must submit update to App Store and wait for approval

–          User must go to App store to run an update for your app

–          These apps are stored on Apple’s server, no fee for download

–          Don’t support social sharing

Multi Folio apps e.g. magazine – single app with multiple issues

–          supports free or retail subscriptions

–          need professional version of DPS

–          support social sharing

–          stored on Google, Amazon or Apple servers and when a user downloads content   for this app, a download fee is charged to the owner of the DPS account

dashboard

DPS setup

Different methods apply for the account setup of DPS according to whether it is a large company creating many apps, a small company specialising in a single apple or an individual.

Adobe recommends for single app creation having the master account holder create a delegate account with the following roles: Administrator, Application and DPS App Builder

workflow

What is…

A folio: the content for the app is referred to as a ‘folio’.

An article: An article is a section of content which helps users find their way through the app. This might be articles in a  digital magazine, sections in a report, categories etc. A separate InDesign file is required for each article. In my case this would mean each different page is a different article.

InDesign has the ability to create an automatic table of contents according to your articles (although this will not apply in my case).

You can specify the viewing arrangments of different articles (whether displayed vertically or horizontally).

folios articles

Smooth scrolling of pages:

smooth scrolling

Screens can be completed which allows screens longer than the others.

File setup – standards for typography are different than for print. (e.g. 10-12 point text is normal for print, but 18-20 point text is common for tablets).

DPS will take care of downsampling so can use high res images (PSD and AI files are fine).

Interactive elements (image sequences, pan and zoom, panoramas) should be saved as JPEG or PNG.

Video and audio should be saved in the resolution you which it to be used.

Prepping your file for alternate layout:

multiple layouts

Bring up Folio Builder Panel and Folio Overlays panel

Can elect offline or online folio (online just allows collaboration as it gets update on the Folio Producer Service, allowing multiple people to view and add to work in progress)

An offline folio can be converted to online, but not vice versa.

To create an online folio:

online folio

Under Folio Builder go “add article”. Add InDesign article.

Repeat process for each Article that needs to be created.

To preview on tablet, download latest version of Adobe Content Viewer for tablet from App store.

To view on tablet, plug in with USB, launch Adobe Content Viewer and In Indesign on Folio Overlays panel go “Preview on…ipad”.

When changes need to be made, select article and in Folio Builder select “update”.

[A great resource for learning how to add interactivity and media to Digital Publishing Suite projects is the Digital Publishing Suite Tips app.]

workspace

Types of interactivity

Multi-state objects (slideshows)

multi state

Combining buttons with multi-state objects

buttons

Buttons

hyperlinks

Hyperlinks

panorams

Panoramas

Pan & Zoom

scrollable frames

Scrollable Frames

tabs

I trialled one scrollable frame tutorial but it didn’t work properly – this one was successful!

https://gra617.expressions.syr.edu/wp-content/uploads/2012/07/Scrolling-Frame-Trick–-Trays-–-InDesign-CS6.pdf

My experiment:

my tabs

 

Images sequences (swipe slideshows, 360 degree rotates, and flipbook style animations)

3D flyaround

 

Audio and Video

web content

Web Content and content from Edge Animate

Mu An

Adobe InDesign and DPS

Adobe Creative Cloud site –

Adobe Digital Publishing Suite Single Edition

Workflow based in Adobe InDesign (CS5, 5.5 or 6)

–          layouts

–          interactivity

–          preview and create .folio file

Import into DPS App Builder

Generate final DPS App File

Submit to Apple App Store

*need CS6 Adaptative Design Tools option to create compatibility between different portable devices

* CS6 Folio Overlays panel – can create hyperlinks, slideshows, audio and video, panoramas, and pan and zoom to page layouts.

Single Edition also automatically scales content so it can be read appropriately on all display types.

Do need a MAC to run the DPS App builder and submit to the App store.

Single Edition content can be viewed on iPad 1, iPad2 or new iPad. Professional Edition and Enterprise Edition can be viewed on iPads, Android tablet devices and desktops.

To preview on ipad need Adobe Content Viewer (free app).

Each .folio file corresponds to a different issue of the magazine or newspaper

inDesign experiments:

Animation panel

Fly-ins etc.

Can be tested in browser

Timing panel – on page click versus on page load?

Smoke effect – longer in original state?

Felix animation test – crashed computer – file size?

Importing flash files? E.g. walk sequences and more challenging animation

Media

Can link to URL  http:// or rtmp:// for video clip located on a flash media serve or flash streaming service

Found that Youtube clips don’t appear to be compatible

– download using converter first?

http://www.youtube.com/watch?v=f8PHEqFmsnU

H.264 files – best video format for digital publishing output

Compatible with InDesign 5 and 5.5, Adobe Flash Player, embedded into Acrobat 9 and X, and Reader 9 & X. Supported on iPad, iPhone and iP dt Touch, and viwable on both Mac and Windows. These are the video formats used on youTube, Vimeo etc.

Can create these files using Adobe Media Encoder 5 or 5.5

(CS5 or CS5.5)

Quicktime 7 Pro or Quicktime X.

File extensions for H.264 files can be seen as MP4, F4V, MOVand M4V

While these files are supported in Flash player, they aren’t exclusively Flash files (which means Apple products which don’t support Flash files will still play them).

These file types can work in interactive PDFs and SWF files created in InDesign.

Audio files can be imported in MP3 format

Liz Castro, author of EPUB: Straight to the Point, did some testing of different formats on Apple’s iOS devices. She found that the format which worked the best is “H.264 video compression, AAC compressed audio, all contained in an MPEG4 container, with a .m4v extension. While there is not much difference between .mp4 and .m4v, the latter is specifically for Apple and works in both iPad and iPhone.” (In addition to her original eBook, she has also has available on her website a small eBook about creating files with video and audio for playing on iOS devices and the Nook.) As shown below, I found that MP4 seemed to work just fine.

http://indesignsecrets.com/picking-the-best-video-format-for-digital-publishing.php

Issues: put in URL for Youtube clip but doesn’t seem to acknowledge that it’s a Flash compliant file. (According to all internet commentaries, YouTube works with H.264 files. Will convert to MP4 and try again).

Object states in InDesign

Bob Bringhurst, has written a nice overview about Multi-state objects here.

InDesign CS5 introduces a new kind of page item designed for creating slide shows in a SWF file. A multi-state object changes its content when a button is clicked in a SWF file. To create a multi-state object, place a bunch of images in your document and align them in a stack. Select them all, and then click the New button in the Object States panel to create a multi-state object. Then use the Buttons panel—which has been enhanced in InDesign CS5—to create navigate arrows that jump to the next or previous state in the multi-state object.

http://blogs.adobe.com/vikrant/2011/03/multi-state-objects-in-interactive-pdfs/

Research objectives

Prompting questions:

Can technology be used to engage kids in the real world?

Does the use of stimulating imagery, movement and sound desensitise kids to the creative opportunities around them?

Intention

Create an interactive pop-up storybook allowing kids to follow a character who shows them fun tactile activities based on everyday objects from around the home. The story can pause and give kids the opportunity to try these activities themselves, photograph them, and add them into the story (much like a drag-and-drop online scrapbook). All instructions are written into the story so children know what equipment they need and what they need to do step by step. They can pause, and go back if they need to see the step again.

Possible activities to incorporate:

–       I-spy

–       making a fort

–       cardboard box animals

–       flax woven mats

–       paper snowflakes and people

–       shadow puppets theatre

–       cardboard kaleidoscope

–       potato prints

–       planting plants

Preliminary research: define objectives more clearly

  • Statistics on industry
  • Statistics on target group
  • Previous similar examples/competition
  • Prepare questionnaire and survey target groups

Use specific case studies to bring writing to life.

What are audience trends? What do people enjoy? What do people want? What can I offer to e-books that are a new experience or approach?

Notes on Interactivity

“Interactivity: a cyclic process in which two actors alternately listen, think, and speak.”  (Crawford, p. 5)

The difference between interaction and reaction – interaction must run two ways, not one. Both actors must perform all three of the above actions well for interaction to be really successful. Form and function need to intertwine from the beginning of the project, as interactivity can’t be achieved by applying it at the end.

Book design can’t always considered to be interactive – the author can’t hear you. What if the author could? What if your choices in the app could result in change? What if you can add to the story and the creator can animate the scene?

Crawford, C. (2003) “The Art of Interactive Design”, Publishers Group West, Berkeley CA, USA retrieved from http://books.google.com.au/books?id=lefh5rSLbVUC&pg=PA25&source=gbs_toc_r&cad=4#v=onepage&q&f=false on 6.3.2013

Mod, C. (2010), “Books in the Age of the iPad”, retrieved from http://craigmod.com/journal/ipad_and_books/ on 6.3.2013

InDesign Interactive Features (basic trials)

I had a play with InDesign to see the extent of its interactive features in Adobe CS6. Below I tested ‘object states’ creating buttons (arrows) which can lead from one object to another – sort of like a slideshow of images. (Only the last image in the object state can be seen in the screen shot below).

Image

After that I trialled the animation options to see what could be done. I saw there was an option to draw a frame and import an .swf from Flash, however there were also ways of designing animation within InDesign itself. This could potentially be a nice shortcut for me.

I created a full page of Felix’s and trialled different pre-set animation techniques on each one (e.g. fade out/in, rotate, bounce, travel horizontally etc.) They all worked quite well, although were a bit limited as you couldn’t control the easing in and out much.

Image

Image

I didn’t trial all the other features (buttons etc.) but have watched tutorials and done some basic research to see their functionality. The question will be is the animation within InDesign enough for what I’m going to be doing or will it be worth creating animations in Flash and importing them into InDesign?