Inserting Sound – my final experiment!

Image

I’ve managed to insert sounding using the Folio Overlays panel in InDesign. It’s as simple as drawing a frame and placing the mp3 file into it. You can then resize the object to cover the active area which will trigger the sound. I don’t have time investigate this further, but it seems that there aren’t options such as fade out, linking to images etc. There is something to do with linking to a controller file, however none of the file types I’m using (including the animation files) are the correct file type to be used here.

To get the rough effect of what I wanted, I’ve just created a sound file trigger around the area of the relevant image so chances are the reader will at some point click on both. The music playing on the first page carries over onto the next page which is not necessarily what I wanted, but as soon as you play a new sound it stops and the sound effect starts. Overall I’m happy with this for now!

Sound effects were sourced from:

www.soundjay.com

www.index-of-mp3s.com/download/lagu/…/schoolbell-ring-soundeffect/

http://www.partnersinrhyme.com/soundfx/sports.shtml

http://www.freesfx.co.uk

If I were to publish this project I would need to credit them at the end of the book according to their license agreement.

Advertisements

Refining Animation in InDesign

Technical hitch #1: Animations the wrong size and position

Animation of school bell imported to InDesign as OAM. All looks good but when you click on the animation on the ipad the poster image gives way to the animation and it reveals that the animation is in a different position. The final result ends with the animation fading out and the bottom segment of the original poster image remaining.  Hmmmm…. Poster size is not the same as animation size (resized original image in preparation for animation). Have fixed poster size so it’s the same size as the animation. I unticked ‘scale content to fit’ option in folio overlay panel which has done the trick.

Technical hitch #2: Images doubling up (poster image and animation)

photo (1)

The issue remaining here is that the poster image stays behind the animation, resulting in a darkening of the bell (because it is a little transparent so the two images add together) and you can see the image behind as the bell shakes. I need to look into whether it’s worth getting rid of a poster image altogether. http://forums.adobe.com/message/5234893 One user says to open the poster image again in Photoshop and delete all content from the PNG (leaving you with just a blank PNG file). Presumably this will fix the doubling up problem. Will it mean the picture of the bell isn’t on the page to start with though?? Yes. That’s exactly what has just happened. No longer any doubling up but you have to click the blank spot to bring up the image. I’d prefer to have the image there to start with (partly just for the balance of the page).

Technical Hitch #3: Problems with transparency

Screen shot 2013-06-19 at 9.35.38 PM

More issues: transparent backgrounds are still appearing on the .oam files (not on the poster files) as white backgrounds. I read in the forum below that this is a bug and importing the html file of the animation will fix the transparency and make it easier overall. http://forums.adobe.com/message/4946853 Trial 1 was a fail – no transparency (except in poster file). (File resized incorrectly again also) Create new dedicated layer for each animation. Use folio builder and upload article. Make sure you select png for animations especially with transparent background. http://creativedroplets.com/edge-animations-and-dps/ Manually took the RGBA channels on the stage in Edge Animate down to zero (the slider took the A down, but to cover myself I set RGB to zero). After following these instructions a grey background appears instead of a white one. I opened the poster image in Photoshop and used the magic wand to delete the grey background. After this I saved it as a PNG 24 with transparency and relinked the poster image to the animation in Edge Animate. I then relinked the animation in InDesign and updated the preview. Things are looking good – no grey square and no white square this time! Animation is not working properly but will address this in a moment. To test the transparency issue I’ll fix the bell too and that will settle it! Confirmed: Success with the transparency issue.

Screen shot 2013-06-19 at 8.42.09 PM

 

Technical hitch #4: Finding out how to create horizontal page swipe

Using the article panel – create a separate article for each page. Drag and drop the articles to the Folio Builder panel. This gives you the option of selecting “horizontal swipe only” and previewing it on the desktop only. However, it will not swipe horizontally. This may happen later – when uploading the app?? Haven’t got time to finetune this tonight – will have to put this on the ‘further investigation’ list!  

“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

Reviews: Animation Programs for Digital Publishing

A few notes from a review on the best programs to use for digital publishing jobs. I was hunting to see if I was using the most streamlined and easiest method for the work I was doing:

http://www.storylime.com/blog/2012/06/07/enhanced-ebook-animation-adobe-edge-tumult-hype-sencha-animator/

“Pros
 Adobe Edge uses a robust Flash-like UI and friendly Adobe controls (including jQuery integration), allowing you to add click-and-touch events much more easily. The JavaScript itself output is mostly clean and easy to tweak, if needed.

Cons
 We really wanted Edge to be our choice. With a rich user interface, intuitive Adobe controls and easy to navigate tools, we were disappointed the generated HTML was incompatible with the XHTML required for our enhanced epubs.  We also found the resulting output heavy and a bit extraneous, which made adding multiple animations to a page cumbersome creating load time issues as users paginated through the eBook.”

http://www.lynda.com/InDesign-tutorials/InDesign-CS6-Interactive-Documents/97963-2.html?srchtrk=index%3a18%0alinktypeid%3a2%0aq%3ainteractive+ebooks%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2

 InDesign CS6: Interactive Documents

Some interesting apps created using a similar method to me:

Adobe indesign CS5 interactive shortcuts guide, Tomaxxi

Swf file exported from InDesign. Create object states for relevant objects

“The Magic of Reality” app. Keep image while swiping multiple text paragraphs. (Have now worked out how to do this by setting up a ‘pin’ box, and grouping objects. Then applying the scrollable text function in InDesign (Folio Overlay palette).

Recommended Preferences to set up before interactive document set up

Indesignsecrets.com/a-visual-guide-to-indesign-preferences.php

Ctrl+K or Indesign>preferences. Interface – turn off “enable multi-touch gestures” if an issue. However, enables pinch and zoom for tablets. ‘highlight object under selection tool’ – shows frame if hover. Live screen drawing – delayed (not fully rendered when moving). Type – ‘apply leading to entire paragraphs”.

Window>application frame (keeps all tools and palettes within the contained window). Declare intended output to digital publishing (sets preferences to suit output). Digital publishing option new for CS6. Sets as RGB with transparency option – can select ipad and set to landscape. View>proof colours – see print settings for CMYK/RGB and transparency. Edit>transparency blend space>CMYK/RGB. Ctrl+e – export as Adobe PDF (interactive).

Warning comes up of CMYK (will convert to RGB) – InDesign automatically converting will give a false impression of output. Important to change transparency blend space first.

Folio Builder panel – can preview output

Installing scripts. Window/utilities/scripts

Stacks error when trying to preview folio 

This is a problem I have hit when trying to preview my folio using the Adobe Content Viewer.

stacks error

http://forums.adobe.com/message/4382343

Bringing everything to InDesign was fine (set publishing presets to interactive etc)

http://forums.adobe.com/message/4404462

http://www.linkedin.com/groups/Who-has-experience-Adobe-Digital-95409.S.93666553

SWF preview panel (TV with play symbol)

Troubleshooting list

Adobe Content Viewer: Stacks error

  • What is a ‘PDF stack’? – another name for an ‘article’
  • What is the difference between an iOS viewer and the Adobe Content Viewer?

The Content Bundler exports a .folio file (previously called a .issue file) that can be up- loaded to the iPad or, in the future, to another mobile device.

In order to communicate with InDesign, the Content Bundler requires an InDesign plugin file to be installed.

Adobe Content Viewer

The Adobe Content Viewer displays the .folio files on the iPad. Add the Adobe Content Viewer to iTunes, and then add the .folio file you created to the Content Viewer.Each publication requires its own custom Viewer. Publishers can create single-folio View- ers in which the .folio file and Viewer are combined into a single app or multiple-folio Viewers with a library that allows customers to purchase and download issues as they become available.

http://blogs.adobe.com/digitalpublishing/files/2010/12/Digital-Publishing-Feature-Summary-and-History.pdf

Possibly useful later if arrangment is wrong:

http://indesignsecrets.com/stacking-order-bug-exporting-interactive-pdf.php

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/