Twixl Media

There are two possible ways of displaying a PDF within a Twixl Publisher publication:

1. use a web viewer, either via an 'http' URL (if the PDF resides on a web server), or embed the PDF, by using the 'local web resource' option (use the 'Select' button in the Web Viewer panel). If you check the option 'Scale content to fit', a user will be able to use pinch to zoom.
2. use a web overlay: first create a button, then define it as the trigger for a web overlay. If you want to display the PDF more or less full page, the following dimensions will work fine: 950 high x 714 wide for portrait, and 694 high by 970 wide for landscape. If you check the option 'Scale content to fit', a user will be able to use pinch to zoom.

Depending on the content you have, you may sometimes have to create a completely new design, but in some cases, resizing existing pages will save you a bit of work. See this tip on Keith Gilbert's blog.

Instead of using a URL hyperlink to open a browser window on top of the whole publication, you can also choose to display a 'Web Overlay', i.e. a modal web viewer of a smaller size. The 'Web Overlay' will always be positioned at the center of the page and add a level of transparency to the rest of the page.

To create a web overlay, first create a rectangle that will serve as the button that triggers the overlay to open. When the rectangle is selected, click 'Web Overlay' from the Twixl Publisher palette.

Now you are presented with a number of options:
URL: enter the URL to be displayed in the overlay here

Appearance options
"Width" and "Height": enter the size of the web overlay (in pixels) here.
"Background color": the color of the layer that will be placed on top of the content outside the web overlay.
"Background opacity": opacity of the transparent layer.
"Scale content to fit": if you want the width of the content to be adjusted to the width of your web overlay..
"Show loading indicator": can be used to provide the user with some feedback while the page is loading - typically this will be used only for external and not for embedded content.

Behavior options
"Allow user interaction": configures whether a user can interact with the content or not
"Allow cookies": does just that

Embedded HTML
Similar to web viewers, web overlays can also be used to load embedded HTML content. All local content, including assets, JavaScript, etc., should be placed in a "WebResources" folder within the folder where your InDesign book is located. You can select "Show WebResources" to navigate to that folder in the Finder.
Once you have copied all your html content and assets, use the "Select" button in the Web Overlay panel to select the index page of your HTML content.

The 'Scrollable content' option allows you to add scrollable content in a container frame.

• first create a text frame (or a group of items) that you want to place into the scrollable container
• then create a container rectangle of the size you want using the Rectangle Frame Tool
• cut the text frame (or the group of items)
• now select 'Paste into' to Paste the object(s) you copied into the rectangle frame.

"Allow scrolling": users will be able to scroll though the content.
"Show Scroll Bars": show scroll bars when a user scrolls through the content.
"Paging enabled": if a users scrolls down, the content will move page by page.

Using the 'Graphic' option of the Twixl Publisher palette, you can add an image that will be viewable in full screen.

"Allow Full Screen View": double-tapping an image toggles a full-screen view of the image.
If you are using transparency in your image, then use 'PNG'. Otherwise you can export as 'JPG'.

Audio files can be embedded in the publication via the Window -> Interactive -> Media palette. You can add an audio file in MP3 format.
If you insert an MP3 audio file, you can place any type of button or text object on top of it. Clicking that object on the iPad will play/stop the sound sample.

Audio options can also be controlled from the Twixl Publisher Palette.

Here you can control the relevant options for sound clips.
"Loop": provides a continuous playback of your sound clip.
"Play on page load": will automatically start a sound clip when a user navigates to that page.

Any rectangle on a page can be turned into a 'Web Viewer'. A web viewer allows you to add dynamic web content to your application. Integrate live content such as a Twitter feed, integrate HTML5 apps or animations.
Select a rectangle, then use the 'Web Viewer' panel from the Twixl Publisher palette to enter the URL you want to display within its boundaries.

A number of options are available:
Appearance options
"Show scroll bars": whether or not to show scroll bars when scrolling through the web viewer
"Transparent background": allows you to display web content transparently on your InDesign background. In order for the transparency to work properly, however, the HTML source must not have a background color.
"Scale content to fit": if you want the width of the content to be adjusted to the width of your web viewer.
"Show loading indicator": can be used to provide the user with some feedback while the page is loading - typically this will be used only for external and not for embedded content.

Behavior options
"Allow user interaction": configures whether a user can interact with the content or not
"Open links inline": will open all links in that same web viewer window - if this is unckeched, tapping links in a web viewer will open the browser pop-up window
"Allow cookies": does just that

Embedded HTML
Web viewers can be used not only for external content, but also for embedded HTML content, which can be used even when a user is offline. All local content, including assets, JavaScript, etc., should be placed in a "WebResources" folder within the folder where your InDesign book is located. You can select "Show WebResources" to navigate to that folder in the Finder.
Once you have copied all your html content and assets, use the "Select" button in the Web Viewer panel to select the index page of your HTML content.

Action buttons can be created via the Window -> Interactive -> Buttons. When you convert an object to a button, an action can be attached to it. The event type for the iPad should be 'On Release'.
The actions that can be attched to a button are shown in the screenshot:

• Go To First Page
• Go To Last Page
• Go To Next Page
• Go To Previous Page
• Go To URL
• Play a Sound
• Play a Video
• Go To Page
• Go To State (of a multi-state object - slide show)
• Go To Next State
• Go To Previous State

When your book file is open, select "Publication Properties" from the Twixl Publisher menu to enter the name of the publication as well as an issue number, if any. Now select "New article".
Note: this menu will only be available when the Twixl Publisher plug-in has been installed correctly.

The "Article name" will be used to name your InDesign documents.
The "Title" is what people will see in the table of contents "scrubber" of the iPad app (see image below).

You can also select the number of columns on the page, the margin and gutter. Obviously, these can still be changed later on.

Now click "OK" and depending on which orientations you selected for your publication, one or two documents will be created at the same path of the book document: [article_name]pt and/or [article_name]ls, a portrait and a landscape version at the correct format for the iPad - our plug-in also installs two document presets for this: "Apple iPad Portrait" (768x1004 pixels) and "Apple iPad Landscape" (1024x748 pixels). These are available from the "Document Presets" menu.
Once you have a number of articles , you can reorder them within the book to change the order in which they will appear on the iPad.
If you have articles that are longer than a single page, then you have two options:

• create an article with multiple pages: on the iPad you will then scroll vertically from page to page within the article
• create an article with the required width, but with a variable length, so you can scroll vertically through the article, without swapping pages.

If you want to change the properties for your article afterwards, select "Article Properties" from the Twixl Publisher menu. Here, you can still changes the Title that will be displayed in the scrubber, or you also have the option to omit the thumbnail for this page from the scrubber.

We'll start by creating a new "publication" from the Twixl Publisher menu. Once you select a publication name and optional issue number, the plug-in will create a "book" in InDesign.
An InDesign book file is a collection of documents that can share styles, swatches, master pages, and other items.

The InDesign "book" will consist of a number of "articles" (i.e. standalone InDesign documents) that we'll create for horizontal and/or vertical orientations. When creating a new publication, you can select whether you want only one or both orientations. Note that this selection is for the whole app, i.e. if you select both orientations, Twixl Publisher will always expect that there is a portrait and landscape equivalent for every article in the app. When you select "Allow Scrubber", the scrubber (navigation articles) will be available by single-tapping the screen.

If you want to change the properties for your publication afterwards, select "Publication Properties" from the Twixl Publisher menu.

You are now ready to start adding articles to your book, see this FAQ

Keith Gilbert wrote an article about this for InDesignScecrets.com.

Check out the article here

This should work fine provided you to the following:

1. Create separate paragraph styles for the portrait and landscape versions

2. Generate a separate table of contents for the portrait and the landscape versions

3. You need to enable the option "include book contents" to include the data from all files in the book

Bonus tip: you can define your styles in 1 of the book documents and synchronize them to the different other documents.

Yes you can, if you use the following tag in your code:

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;"/>

Where:

• width is the width of your web viewer
• initial-scale: the initial view size - usually this will be "1" for 100%
• maximum-scale: maximum zoom level - "2" = 200%
• user-scalable: 1 = yes

In order to avoid 'sideways' scrolling in a web viewer, use the following tag in your code:

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;"/>

Where:

• width is the width of your web viewer
• initial-scale: the initial view size - usually this will be "1" for 100%
• maximum-scale: maximum zoom level - "2" = 200% (if you want to allow pinch to zoom)
• user-scalable: 1 = yes (if you want to allow pinch to zoom)

The option "Transparent Background" can only function properly if the HTML content you are referring to has a background-color or background-image tag.

This error will occur on languages other than English. This issue is fixed in version 1.3.1.

In order to make sure that a touch on an object that you define as a hyperlink can be registered in the iPad app, you should make sure it is at least 44 pixels high - this is the value that Apple recommends in its guidelines.

If you have multiple audio en video clips on a single page, only one can play at the same time.
If playback of a certain clip is in progress, starting another clip will automatically stop playback of the previous clip.

If you switch from one article to another. Playback will stop automatically.

If you switch pages within the same article or you scroll through a longer article, playback will continue.

This is a known Adobe InDesign issue.

You can refer to the following article for more details:
http://forums.adobe.com/thread/575758

The plug-in will convert all images to sRGB when exporting from InDesign to the iPad.

If you don't want your images to be converted automatically, you can convert them manually upfront in Adobe Photoshop.

An InDesign book file is a collection of documents that can share styles, swatches, master pages, and other items.

ePublisher uses this collection of documents - which we call "articles". An article is available in both landscape and portrait format.

Slide shows can be created via the Window -> Interactive -> Object States palette. To create a multi-state object, place a number of images in your document and align them in a stack. then select them all, and click the "New" button in the Object States panel to create a multi-state object. You can also change the order of the images in the slide show.

In the iPad app, a user will be able to go through the slide show via swiping (if you have enabled user interaction).

You can also provide a full-screen slide show. The full-screen slide show will be available by double-tapping the picture. Keep in mind that if you want to provide a full screen slide show, the images should be available at a full screen resolution, i.e. more or less 132 ppi at a 1024 x 768 resolution.

All slide show options will become available in the Twixl Publisher palette when you select a multi-state object. More details are available in the Twixl Publisher palette section.

After you have created a multi-state object, all interactive options that are relevant for the iPad can be accessed from the Twixl Publisher palette.

Export
If you are using transparency in your slide shows, then use 'PNG'. Otherwise you can export as 'JPG'.
Appearance options
"Show Scroll Bars": show scroll bars at the bottom of your multi-state object.
"Show Scroll View Indicators": shows iTunes-like page indicators - i.e. when you select this option a semi-transparent layer will be added at the bottom of your slide show to indicate the number of pictures. You can control the look of this layer by selecting the background color and its opacity, as well as the active and inactive page colors.
Behavior options
"Allow User Interaction": controls whether a user can scroll through the slide show
"Allow Full Screen View": double-tapping a slide show toggles a full-screen view of your slide show

Movies or audio files can be embedded in the publication via the Window -> Interactive -> Media palette. You can add a movie in H.264 format or an audio file in MP3 format.

Due to a limitation in InDesign, movie files need to have the extension ".mp4" and not ".m4v". If you have H.264 encoded files with the m4v extension, you can just change the extension from .m4v to .mp4.

You can place any text block or image object(s) on top of the movie, as a poster frame, e.g. "Click to play movie" or a movie player icon as an indicator for the user. Likewise, if you insert an MP3 audio file, you can place any type of button or text object on top of it. Clicking that object on the iPad will play/stop the sound sample.

You can also add an http link to a movie using the 'Place a video from a URL' option from the media palette. Obviously, if you select this option, the iPad user needs to be online when trying to access the movie.

In the Twixl Publisher palette, you can control the relevant options for movie clips.
Appearance options
"Show Movie Controller": provides the user with the standard movie controller options to play/pause etc.
Behavior options
"Loop": provides a continuous playback of your movie clip.
"Play on page load": will automatically start a movie clip when a user navigates to that page.
"Play Full Screen": will automatically play the movie full screen when started (movies that don't automatically play full screen can always be zoomed using the movie controler options)

Tip about converting movies
A number of solutions exist for converting video to the H.264 format, optimized for iPad. The freeware Miro Video Converter is an easy-to-use free tool that allows most conversions.

Reducing the file size of video Video files may easily account of the bulk of the total size of your publications. Videos will inflate your magazine.

For re-encoding video files you can use a tool like Adobe Media Encoder (when you want control over all video encoding settings) or otherwise the freeware Miro Video Converter (when you want a simple and quick conversion).

You can then convert to H.264 video (mp4) with a suitable framesize. In Miro, I just pick the MP4 profile to get good results by preserving the video pixelsize. This can reduce your video files up to 1/5 of the original size while preserving the same visual quality!

In motion video you can choose a much lower pixel dimension for the video than it has during playback (= placement size in InDesign) because our eye forgives many details when it comes to moving images (opposite to the behaviour in still images). Try this with half the video size than it will have during playback and you will be amazed how good the H.264 codec can be.

Note
You may get an error about "Media files not being supported by Flash", but these warnings can be ignored.

Twixl Publisher supports three types of hyperlinks: page link, URL link, and e-mail link.

Hyperlinks can be defined in InDesign CS5 via the Window -> Interactive -> Hyperlinks palette.

1° Page link You can create a hyperlink that refers to any page within your book (i.e. publication). Page hyperlinks from portrait pages have to navigate to another portait page, and hyperlinks from landscape pages have to navigate to another landscape page.

2° URL link You can create a hyperlink that links to an external URL. On the iPad, tapping such a link will open a browser popup window for that URL within the app. Once the user is finished, tapping the "Done" button of the browser popup will bring the app back to the foreground.
NOTE: uncheck the "Shared destination" option when creating a URL link.

3° Mail link You can create a hyperlink that links to an e-mail address with an optional subject. In the iPad app tapping such a link will open a mail popup window to that email address and optional subject. Once the e-mail has been sent, the app returns to the foreground.

Important note: A hyperlink should be created for a complete text block or other object. Hyperlinks defined for text within text blocks will not be exported to the iPad.

Twixl Publisher will default to pixel-based pages with Web intent, i.e. 768 x 1004 for Portrait and 1024 x 748 for Landscape.

As of version 2.3, the plug-in will export this content for both the original iPad and iPad 2, as well as for the retina iPad, provided your images have a 144ppi resolution.

Although we do not recommend it, if you need to use Print Intent documents, then the sizes should be the following:

• For portrait view, the size is 5.8182 inch wide by 7.6061 in high, or 147.782 x 193.194 mm.
• For landscape, the size is is 7.7576 inch wide by 5.6667 high, or 197.042 x 143.933 mm.

If you have articles that are longer than a single page, then you have two options:

• create an article with multiple pages: on the iPad you will then swipe vertically from page to page within the article
• create an article with the required width, but with a variable length, so you can scroll vertically down the article

The text of a 3-column page in portrait mode, will usually flow nicely in a 4-column landscape page.

You can choose to select either landscape only, portrait only or both orientations when you create a new publication from the Twixl Publisher menu.

When you have created a slideshow, you can opt to allow full screen zooming via double tap on the iPad. To do this, you need to select "Export full screen slide shows" when exporting.

This means however that, for optimal results, your images should have a 132 ppi resolution at 1004 x 768 pixels in landscape and at 748 x 1024 pixels in portrait.

For optimal viewing on the iPad we found that you usually should not go below an 8-points font size