Interactive pdf readers

It turns out there are a lot of options out there when choosing a pdf reader for interactive pdfs and none of them are foolproof.

From reading I’ve done, PDF Expert ($10.49AU) is the most reliable when it comes to playing video embedding in a pdf, but different readers (e.g. Goodreader, Acrobat etc.) all have their strengths and weaknesses. Some will drop the video but keep the buttons, some will drop out hyperlinks but keep form fields etc. It’s all about doing a comparison based on what sort of pdfs you intend to create.

A recommendation from Steve Werner at http://indesignsecrets.com/for-interactive-pdf-not-all-readers-are-equal.php:

For interactive PDF files which are to be viewed on a tablet device, you need to reduce your expectations that interactivity will be able to be viewed by every viewer. I’d keep things simple, and don’t make your presentation depend on showing all the interactivity. But Adobe Reader for iOS is very disappointing, and I cannot recommend it. GoodReader ($4.99), ezPDF Reader ($2.99) and PDF Expert ($9.99) are well rated and support many more features.

As my pdfs will be reader on different operating systems I’m going to trial PDF Expert. I’d like to be able to maximise interactivity where possible so we’ll see how this goes.

It seems to be a case of timing here – digital publishing, even though it’s been around for a while, is still relatively young and the many bugs which come up along the way are all indicators that more time and development is needed across the board in this area. From a designer’s perspective I guess it’s a case of working with what I have, doing the research, and waiting until new updates start to solve these problems!

Interactive PDF design for ipads – further notes

To upload to portable device use Google drive, drop box or itunes.

The above discoveries relate to interactive pdfs opened on the ipad using different apps:

iBooks –  hyperlinks work, video and buttons don’t, form fields gone.

Adobe Reader – choose doc mode (top right – single page or continuous)

– Blue highlighting of links but all work, swipe to go back and forward, doesn’t support video (check updated versions), buttons don’t work.

PDF Expert app – slight cropping, links don’t have blue if set in preferences, video works, buttons don’t work.  Page forward and backward buttons work. Form fields will work but will submit whole page (unless single page view).

Trouble shooting issues:

Blown out file sizes

Export to interactive pdf – JPEG Quality – Medium, Resolution 72, Compression (JPEG lossy) Experiment with alternate resolutions as don’t want to compromise quality.

Acrobat – pdf optimiser settings (File/Save As/Optimized PDF. “Audit Space Usage” to see what’s taking up space.)

Form fields Tools/Content/Add or Edit Interactive Object/Select Object – Can limit characters in this field.

Control alignment of text.

“Combo box” (a drop box which allows you to choose for a list or add in custom text) doesn’t allow custom text from InDesign (bug) but can be fixed in Acrobat  – click on it, go Options/allow user to enter custom text.

Can also edit area for links.

Cleaning up unwanted bookmarks etc.

Adding bookmarks

Create in InDesign

Bookmarks under Bookmarks panel

Bookmarks get automatically created when doing a table of contents

Nest by dragging on top of each other.

Export to PDF

Info sourced from www.lynda.com “Creating Interactive PDF Magazines” by Mike Rankin.

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.

Concluding Notes

Areas I would have liked more time to experiment with include sound: specifically being able to link sounds to animation and edit fade in, fade out and trim sound to the specific length of the animation. I did a little experimentation with some stock sound effects using adobe audition but didn’t have enough time to fully explore this.

Another area I’d like to explore further is interactivity with regards to pop-up balloons or boxes where the reader can enter in an answer or select an option. This would tie in with activities they might have completed or responses to questions that might pop up. There could be a way of changing which page will show up next in relation to their answer, adding an extra dimension of interaction.

I’d also like to investigate the ‘scavenger hunt’ idea of setting the reader a task such as photographing certain objects around the house with their iPad which they could then upload as a way of completing an activity. This could serve as an album/sticker book which they could add to over time.

I still haven’t managed to fully research horizontal versus vertical swipe capabilities or trialled designing for multiple orientations, platforms or renditions for different iPads. I purposefully reduced the scope of my task because of time, however these are all areas which I have partially explored and would have to explore if I were to publish this as an app or e-book with Apple.

As my work currently stands, Apple would not publish this as an App as it lacks sufficient interactivity. They would class this as an e-book rather than selling it through the App Store. If the previously mentioned capabilities were added in, I think Apple would most like consider this sufficient for recognition as an App.

The relative youth of programs such as Adobe Edge Animate and DPS means a lot of research has been necessary to overcome teething problems such as the transparency bug I found when importing my animations. These things are likely to be ironed out in subsequent versions but at the moment, the time involved in addressing these issues as they are discovered is very time consuming and, consequently, expensive. This process has revealed to me the complexity of the undertaking in designing an interactive e-book whether destined for Apple ibooks or the App Store. This would need to be addressed through working in a design team in order to create quicker workflow as having someone who knew coding would definitely speed up the process. As a freelancer, I would not be willing to take on a project like this for a client unless it was more of a traditional e-book (text with illustrations and basic swipe functions). Perhaps as the software gets refined I would be more willing to take this on.

I do hope, nonetheless, to continue developing and fine-tuning the work I have started to complete the e-book as I think it has a lot to offer as a project. The cost of publishing it is a major factor, however, so it would need a lot of time and energy invested in it before submitting it to Apple and paying the Apple Developer fee.

Overall, I feel this project has really stretched me and it’s been very satisfying to combine past areas of knowledge (experience with Adobe InDesign, Ilustrator, Photoshop and Flash) into one project while exploring the capabilities of new programs such as Adobe Edge Animate and Digital Publishing Suite.

Instructions for viewing e-book

1. Download ‘adobe content viewer’ onto iPad from App Store. (Note: tablets needs to be iPad 1 or 2, not retina)

2. Open indesign file on a computer with Adobe CS6 and Digital Publishing Suite
3. Plug iPad into computer with USB cable and open Adobe Content Viewer.
4. With indesign file open on the computer, look for the Folio Overlays panel on the right of the screen. If not there, you’ll find it under the ‘window’ menu at the top.
5. Click ‘preview’ on bottom left corner of Folio Overlay panel and select your iPad from the list. (Note: if no iPad is available for use, you can view on the desktop and use mouse clicks instead of touch)
6. After the file loads it should appear on the iPad and you can use the e-book as it would be read as a final design. Try tap features, pinch to zoom in/out, swipe text etc. To move onto next page swipe right to left. (If this feature has not been sorted out in time for my submission you can swipe bottom to top to move to the next page instead.)
7. If you would like to view my indesign test and trial pages, you can use this same process by opening the other indesign files and previewing. Whenever you press preview on the Folio Overlays panel it will refresh what you see on the iPad.

 

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!  

Designing for iPad 1, 2 and retina options

Another technical hitch to remember is the need to cater for ipad (Generation 1&2) and also the higher res esp – with retina display (Generation 3&4).

This involves creating multiple folios within the files catering to different resolutions and files sizes. If this is not catered for, e.g. a file is created at 1024*768 (the correct sizing for ipads 1&2) and it is read on an ipad 3, the sizing will alter, it will look fuzzy and the quality will generally decrease. If vice versa, creating a 2048*1536 (the correct sizing for ipad 3), it will not read on earlier devices.

It would seem Apple will not accept an app unless both scenarios are catered for. This results in a lot more work. For the sake of this project, I’ll stick with just catering for ipad 1&2, and if continuing on to complete the project, I would work in the necessary alternative folios at a higher resolution and new sizing to cater for ipad 3.

rendtions

http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/digitalpublishingsuite/pdfs/dps-ipad3-bestpractice-apr2012.pdf