The InDesign Plugin - Mag+ · • Push review to device - Click + to enter the IP address of the...

The InDesign Plugin

The Mag+ Plug-in is where the process of building your tablet-optimized issue begins. It’s a simple pallette for InDesign (CS4, CS5 or CS5.5) that allows you to add multimedia and dig-ital-only effects, and exports your finished layout into a bundle of XML code and assets that can be read by the Mag+ Production Tool, and eventually turned into a final issue file (a file we call .mib). It also contains our instant-review function, where you can see what you’re building on the iPad in real-time just by clicking the Fast Review or Full Review buttons.

All Mag+ pages must begin with the Mag+ InDesign template, and must be exported through the Mag+ plug-in.

1. The Mag+ Plug-in

© 2011 Moving Media+. All rights reserved. of 24

First collect the content for your app, but don’t worry about converting it to the right resolu-tion or color space—the plug-in will handle that on export. Next, layout your pages in InDe-sign. When you are satisfied with the layout, export it to the Mag+ Production Tool, where you layout the order of your pages and review the magazine as a whole. When you are ready, export your final .mib file from the Production Tool and upload it to Publish, our Web back-end, and typically with an hour or two, your new issue will be available in your app’s Issues list (if it’s free) or Store (if it’s paid) for your users to download!

2. The Process


3. sTarT The Plug-in

Follow the instructions given in the Installation Instructions document included in the bundle to install the Mag+ Plug-in and Mag+ Production Tool.

Go to the Mag+ bundle folder you downloaded from magplus.com and open the folder called 2 InDesign Template. Open the magplus_template InDesign document. All layouts must use this template, and it cannot be changed, or the system won’t read it correctly on export.

When the document is loaded, go to Window > MAG+ to start the Mag+ Plug-in.

Now the Mag+ Plug-in will appear with the tab Vertical active. If the Plug-in is inactive and you are not able to click on it, click ON down in the left corner of the Plug-in.


4.1. The Plug-inLook at the Plug-in with the Vertical tab active

• Device - The device you’re creating for (currently only iPad is supported).

• Issue - The folder you wish to export your verticals to.

• Min. MIB - Choose MIB version to export. Remeber that you can not mix MIB versions when creating the final MIB in the Mag+ Production Tool, so choose the MIB version that matches the current version of your app [see bottom].

• ID - An internal name for this vertical, used in the Mag+ Production Tool and when you’re creating jumplinks between verticals. It is not visible to users.

• Name - A name for the article that will be visible to users when they bookmark the article in your app.

• Orientation - How the vertical will behave when the user turns his device. You can lock any vertical to portrait or landscape, and the layout will simply appear sideways if the user turns the device. Auto supports both [see Pinning, 5.2].

• Background - The color that will appear behind your content if any part of the A or B layer is not fullscreen.

4. The inTerface

All versions of the Reader Apps can read backward versions—i.e., a 2.5 App can read and render a 2.0 MIB. However any features new to the latest version will not function in that lower MIB (i.e., transparent HTML backgrounds were a new feature in 2.5. If you try to include one in a page, but export it as a 2.0 MIB, from either the Plug-in or Production Tool, it will not render transparency, even if your app is 2.5).

However, if you export a 2.5 MIB, a 2.0 App cannot read it and trying to load it will prompt customers to upgrade their app. Make sure your new updated app is available before you create MIBs in that ver-sion.

Ideally you will always match the export MIB version in the Plug-in with the version chosen in the Produc-tion Tool. If the MIB versions don’t match (say you’re

including an ad exported from a previous issue), you will get an error in the Production Tool (red boxes around the verticals). You must check Allow Miss-ing Thumbnails in the Settings tab or the Production Tool will not export a MIB if the version numbers don’t match.

MIB versIons anD coMPaTIBIlITy


• Knockback - As the reader scrolls up the A layer, the system can fade in a color at the maximum opacity you choose over the B layer. If the reader taps the screen twice to make the text disappear the background will show in its normal state.

• Table of contents - Check ONLY when building a pop-down TOC, using the included TOC InDesign template.

• No A-layer - Checking this box disables the A layer. Content will only scroll in full-screen slides and double-tapping the screen will have no effect.

• A-layer follows B-layer - If checked, content from A and B layers will remain aligned even if the user turns off the A layer and scrolls down viewing only the B layer.

• Object type - Option for defining objects in your document, explained further in chapter 5.7

• Fast Review - Review your article in low resolution. This creates a faster review as InDesign does the image conversion.

• Full Review - Review your article in full resolution. Triggers Photoshop to do the image conversion so you see exactly what it will look like on final export.

• Export - Export your article to your issue folder for editing in the Mag+ Produc-tion Tool.

4. The inTerface


Now click the Settings tab

• Push review to device - Click + to enter the IP address of the iPad on which you wish to review the vertical. The iPad must be on the same wireless network as the computer running InDesign. Find the IP address under the Help menu of the Mag+ Reviewer app.

• Review MIB file - An alternative method for reviewing if Push isn’t working. Please contact [email protected] if you need to learn more.

• Output only PNG images - If unchecked, the system will export all images as JPEGs. This forces all images to export as PNG files. Note that this will increase file size.

• JPEG Quality - Choose desired quality of exported JPEG. The higher the qual-ity, the bigger the end file size.

• Downscale images using Photoshop - If enabled Photoshop will be used to downsize the images to fit the device when exporting (Recommended)

• Resample Image - Choose Resample method (default: Bicubic)

• Photoshop version - Choose Photoshop version for resampling

• MAG+ Prod vertical preview - Enter desired DPI for fast review (default: 72)

• Calculate default pinning - If enabled the Plug-in will automatically set pin-ning for objects placed on the A - Main Tower- and the B-slides - Pinned blocks- layers based on the edges they are nearest. Read more about pinning….

4. The inTerface


4.2. The InDesign Template and document logicNow let us have a look at the Pages window in InDesign.

One document in InDesign represents one vertical, or one screen’s width on the iPad. When you are satisfied with your vertical you export it. In the Mag+ Production Tool, you will be able to see all verticals you have created and arrange them in the order you want them in your publication.In Mag+, there are two layers you can use to present content and they can interact with each other. The A (or top) layer is the free-scrolling layer. The B (or background) layer does not scroll, but rather moves in full-screen “slides.” This means that anything placed on the B-layers below the bottom horizontal guideline will not show on the iPad. Scrolling in the A layer can trigger a new back-ground slide to appear. Each new page in the InDesign document represents a new B-layer slide. All A layer content on the same InDesign page will scroll over the top of the B layer content on that page. When the user reaches the bottom of that page’s A layer content, the system will automatically bring the next B layer image (page 2 of your InDesign document) into view. The A layer content you’d like to scroll over that B layer content should be placed on page 2. Note that both layers can contain any type of content you like: text, images, graphics, color blocks, movies, HTML elements, etc. They are blank canvases for you to work with.

doc1.indd doc2.indd doc3.indd doc4.indd

page 1

page 2

page 3

4. The inTerface


4.3. layersNow take look the Layers window in InDesign.

• B - Slides - Main Content - The main background layer, adding pages allows for several background slides per vertical. This layer will remain visible when the user double-taps the screen.

• Content on this layer rotates, but does not re-orient depending on tablet orientation—it simply crops differently.

• Different parts of this layer are therefore visible as you rotate the tablet.

• Since no transparency is used in this layer, the system exports it as a 1024x1024 image—if there are parts of this layer that don’t have any content in them, they will be filled in with whatever background color you have chosen in the Plug-in.

• B - Slides - Pinned blocks - Use this layer to place objects you want to remain on the background layer, but also adjust their position when the user rotates the device. For more information on pinning, read 5.2.

• A - Main Tower - Scrollable layer - This is the free-scrolling layer that moves over the top of the B layers, and can be hidden by the reader if he/she taps twice on the screen. Content in this layer can also be made to snap to a particular position as it comes into view. See Snapping, 5.3

B - Pinned Blocks

a - scrollable layer

doc.indd

page

1

page

2

B - Main Content

4. The inTerface


4.4. layers (advanced)• Transition guides - Use this layer only to drag in a guide that will force the

point of transition to the next B slide. For more info on the Transition guides layer, see 5.3.

• iPad bezel, iPad Portrait & iPad Landscape - These non-printing layers are just there to help you visualize how the layout works in different orientations.

• Guides - These default guides designate the visibile areas in each orientation. Do not alter these guides. For more info on the Guides layer, read 5.1

• C - Clickable Areas - When you add Multimedia and Links on the A or B layers boxes will appear automatically on this layer. They represent the area the user can tap to activate the link or the multimedia content—the hotspot. You can ad-just and resize these boxes.

• D - Media Areas - When you select a box on the A or B layer and click Add Movie in the plug-in, a box will appear automatically on this layer. It represents the size of the video window if you choose Inline or Pop-up as your Content Type. You can move or resize this window as you like, and it does not have to correlate to the Clickable Area box.

C - Clickable Areas

D - Media Areas

4. The inTerface


5.1. GuidesWith the layer called Guides it is possible to see the iPad’s areas in different orientations.

only PorTraIT on

ly la

nD

sc

aP

e

on

ly la

nD

sc

aP

e

only PorTraIT

5. The Basics


5.2. PinningPinning tells objects which edge of the screen to seek when device orientation changes

Mag+ can calculate how you want your objects to pin as long as you place them in the Safe Area. To de-active auto-pinning, click the Settings tab in the Plug-in, then uncheck Calcu-late default pinning.

It is not possible to use pinning on the bottom B-layer (B - Slides - Main Content).

5. The Basics


5.3. snappingThe default behavior for the A layer is to scroll freely as the user swipes, but you can also set the A layer to “snap” to a given position on a B layer transition and remain there until the user scrolls it. This is set in the Plug-in. The options in the Snap pull-down menu let you choose whether the A layer snaps to the Outer Top (the top of the portrait orientation, or absolute top of the screen), Inner Top (top of the Landscape orienta-tion, or 128 pixels down from the absolute top of the screen) or Top (the top of whichever orientation the user is holding the device). To set a snap position below the top, simply place the A layer object (or group of objects) where you’d like them to land, and draw an empty box at the top of the screen—the system will read that empty box as the top of the A layer and snap that to top.

Snapping: inner-top

5. The Basics

of 24© 2011 Moving Media+. All rights reserved.

5. The Basics

Transition guide

5.4. Transition GuidesBy default, when the bottom of the A layer content on a page scrolls past the halfway point of the screen, the system transitions to the next page—the next B layer slide. Transition guides let you force a later transition—just drag a guide into position on the Transition Guides layer and the transition will happen when that point crosses the halfway point of the screen.


5.5. GroupingGrouping is going to very important for you when you work with the Mag+ Plug-in. This is be-cause when the Plug-In exports the page—either for Review or Export—it turns everything into images. The system doesn’t read front to back order of individual objects on a given layer, but it will treat grouped objects like one image—it will essentially take a snapshot of that group.

Why is grouping good?

• Grouped elements move as a single object when orientation of the device changes

• Grouped objects are exported as a single image

• Allows you to maintain effects like dropshadows

• Grabbing groups within groups makes it easy to make minor adjustments without un-grouping everything

• Sometimes object order is lost when exporting from InDesign. The easiest way to get around the problem is to group objects that are sharing the same space.

• Just make sure you do not accidentaly group objects that are part of separate mag+ layers.

You can always group an object with an empty shape if you have no other object to group it with.

An Object with an ID will lose it’s ID when it is grouped with other objects.

5. The Basics


5.6. shadows and effectsObjects in InDesign sometimes have content outside the objects boundaries. Mag+ will always crop your content based on the boundaries of the object and create separate PNG files for each individual object, meaning that sometimes content sticking out will be lost. To get around this, simply add an empty object bigger then your original content and group these items.

5. The Basics


5.7. object TypesMag+ looks at InDesign’s frames and groups as Objects. The plug-in lets you set the Mag+ properties on these Objects. When exporting content to the tablet, Mag+ uses the actual coor-dinates and given size of the object. Objects can have different Types which is set in the Plug-in under Object type.

Most-used Object Types

• Block: Any object you want to render that is not media or HTML

• HTML: An object that can contain HTML5

• Hotspot: An object that defines a clickable area

• Media: An object that defines media playback

Other Object Types

• Control Image

• Spacer

5.7.1. object type: Hotspots

Always create a hotspot by selecting an object in the A or B layer and clicking Add Link or Add Video. The system will draw a Hotspot box over the top of that object. You can resize and move the hotspot box; the reference box just tells the system what layer that hotspot is associated with and how it should pin on device rotation. The system assigns a Reference ID to the reference object when you add the Hotspot. .

5.7.1.1. Web links

Links to web content are easily added by selecting an object in either the A- or B- layers and clicking Add: Link and a hotspot will be created in the Clickable Areas layer.

The Hotspot Type: Link is for opening a Web link. With the hotspot selected, type the

Hotspots and media objects must have referencing objects in the A- or B- layers.

An Object with an ID will lose it’s ID when it is grouped with other objects so set your links late in the pro-duction.

5. The Basics

Link: External linking to websites (http://www.site.com)

Jump Link: Internal link-ing within the magazine or app.

Media: Link to media on a server


URL into the plug-in. To link to an e-mail adress, type: mailto://[email protected]

External URLs can open either in an internal browser window that pops up over the screen, or can take the user out of your app and to the native Safari browser. There is no difference in the way Web pages are rendered. Make this selection with the Display In pulldown menu. If you choose to display the Web link in an embedded browser, the External Icon pulldown lets you choose whether that browser also has a button that lets the user leave the app and open that same page in the native Safari browser.

5.7.1.2. Jump links

Jump Links are Mag+ internal navigational system and makes it possible to link within the magazine and app. Choose Jump Link from the Hotspot Type pulldown menu and then a path to where you want that link to take the user in the URL box.

Jump links can take the user to:

• Another place—top or specific object—in the current vertical

• Another vertical in this issue

• A vertical in a different issue

• A vertical in a different app

• Anytime you’re linking to another vertical, unless you specify that it jump to a specific object on that vertical, it will jump to the top of that vertical.

After exporting a vertical, you can simply use the Vertical pulldown menu to choose the vertical you want to link to rather than type it manually. It is therefore recommended that you create jump links as late as possible in your process.

5. The Basics

If an object you want to jump to does not have a Reference ID, you can simply type one into the Reference ID box.

Go to top of current vertical (i. e. Home)

Go to object with ID “b123” in current vertical

Go to top of vertical with ID “verticalA”

Go to object with ID “b123” inside vertical with ID “verticalA”

Go to another app (in this case Popular Science) and open issue with the MIB GUID: com.bonniercorp.magplus.PSC.01.5. <brand URL scheme>://<MIB GUID>

You can find the brand URL scheme in Publish by going to Admin > Edit (brand) set-tings > Application URL Schema

/

//b123

/verticalA

/verticalA/b123

popular-science://com.bonniercorp.magplus.PSC.01.5

JuMP linK codes


5.7.2. object types: Media

As with hotspots, when you add media to you need an reference object in the A- or B- layers. When you select and object and hit the Add Video button, a hotspot box is created in the clickable areas and a media object box is created in the media layer. The hotspot is the area the user has to touch in order for the media to play. The media area is the box the movie will play in if either Inline or Pop-Up is selected. Both the hotspot and the media area boxes can be resized and moved. Like links, the reference object will tell the system what layer the video should be on and whether it should pin on device rotatation. The media can also be set to auto-play upon view or load.

1. Select the Object that you want to add media to

2. Click Add Movie* in the Mag+ plug-in *It adds the two media Layers, C + D, and creates a new Object in each of them on top of your selected Object. It also generates a unique ID for the selected Object and links them all together using the Reference ID on the new elements in layer C + D

3. Select the Object in the Media Layer and select your options for source and play-back in the plug-in

C - Clickable Areas

a+B layers

D - Media AreasMedia Object

Referenced ID: b123 Source/Play Options

Hotspot Object Referenced ID: b123

URL: media:// example

Anchoring Object ID: b123

media://m321 Play media with ID “m321”Media linK

5. The Basics

ref object ID: Created automatically by the system when you add a Movie—Do not changeMedia ID: Created automati-cally by the system when you add a Movie—Do not changecontent Type: - Inline movies play inside the Media Areas box without the standard video-player frame or controls; - Pop-Up movies play in a standard video window the size of the Media Areas box with controls and a close button; - Full-screen movies take over the full screen with controls.

source Type: Movies can be embedded (File) or stream-ing (URL)—use the File box below to either select a file for an embedded movie or type a URL for a streaming movieauto-start: Movies can be set to run automatically either when the Media Areas box comes into View or when the page loads; leaving this blank will mean the movie must be activated by the user to playHide Media at end: If checked, the Movie will disap-pear when it is done playing, leaving the layout behind it onscreen; if the user taps the hotspot again, the movie will reappear and play again.


5.7.3. object types: HTMl

Mag+ allows you to drop just about any HTML5-object that runs in a webkit browser into your composition. Just create a box on the A- or B- layers and change the Object type to HTML. You can now browse for your .html file and it will be shown on the iPad within the box you just created. Note that HTML objects can be on either layer, but if they are on the B layer, the user must double-tap to turn off the A layer before he can control the HTML object. Note also that HTML objects override default Mag+ controls, so pressing and holding your finger on an HTML object area will not call up the Mag+ navigation controls, for instance.

Upon export all files called on by the .html file will be exported and bundled into the final MIB as long as the path to those elements is valid in the HTML file.

Try our HTML Feature

Builder for creating slideshows without

writing any code

http://feature.magplus.com

5. The Basics

HTML objects can have the same pinning and snapping capa-bilities as other object types.Url: point this to your .html file. the system will bundle all associ-ated assets into the final MIBresize on rotate: Check this if you’d like the system to resize the browser window when the device rotates. This is useful for javascript calls that reference browswer-window size changes.

Scale contents to fit block: this will automati-cally proportionally scale your HTML object to the size of the box you’ve drawn.Transparent: Check this to turn the back-ground of your HTML window transparent.

You can still put an image in the box you’ve drawn and made an HTML object. It will show up on the thumbnail preview for the navigation scrubber, but not in the final rendered MIB. This is use-ful for sizing your box correctly: Place a screenshot of the HTML object into the box, press the “Fit content propor-tionally” in the upper right corner of the ID menu; then press the “Fit Frame to Content” button.


One of Mag+’s unique features is the opportunity to create an designed drop-down Table of Contents panel for your issue. This panel will drop down from the upper-left corner of the navigation menu when the user taps that corner, or presses the TOC button. If you don’t create a Table of Contents, the TOC button will not be there and the Bookmarks menu will pop down instead. To create a custom Table of Contents:

Open the document called TOC_template.indd included in the Mag+ bundle that you downloaded from magplus.com.

• Start the Mag+ Plug-in

• In the TOC template the artboard is as big as the max width of the TOC on the iPad in Portrait orientation. It is possible to change the size of the TOC once ex-ported to the production tool.

• The TOC template has exactly the same layers as in the regular template and the A-layer is the scrollable layer while the b-layer is set.

• Pinning is disabled in the TOC.

• When linking to your pages, create regular jump links, for tips on how to link, fol-low the guide above (5.7.1.2).

• When you are ready, check the Table of contents” button on the InDesign plug-in and export your TOC to the Production Tool, then drag it from the clipboard to the area called Other Objects.

6. TaBle of conTenTs

/

//b123

/verticalA

/verticalA/b123

Go to Top of Vertical (i. e. Home)

Current vertical > Object with ID “b123”

Go to Top of Vertical with ID “verticalA”

Go to object with ID “b123” inside Vertical with ID “verticalA”

JuMP linKs


7.1. Unify two or more verticalsLet’s say we want to create a layout where an article is tied together with other verticals. Then we want the article to look like one piece in the thumbnail navigation scrubber on the iPad.

To do this, simply create your first vertical, enter an ID in the Plug-in,then enter 1 in the field just next to the ID field. Save and export.

Now create your second vertical, enter the same ID as you entered for the first vertical but this time, enter 2 in the field next to the ID field. Save and export.

7. exTra design TricKs

After you have exported your verticals, go into MAGProd and you will see that the two verticals are unified on the clipboard and will be shown as one big article on the iPad. You may do this with as many verticals as you like.


7.2. Working with the iPad memoryWhile viewing one vertical, the previous and next two verticals are loaded into memory, this means that long verticals with lots of images or media puts a strain on the device processor.

Plan your production to avoid putting several heavy verticals after each other!

Loading...

Loading...

Loading...Overwriting...

vertical

1

vertical

1

vertical

1

vertical

2

vertical

2

vertical

2

vertical

3

vertical

3vertical

4



7.3. control ImageWith the object type Control Image it is possible to make different objects appear when a me-dia file is playing, for instance a play/pause button or a sequence of numbers.

There are three types of control element:

• Single - A single image that dissapears when the linked media is playing and ap-pears when the media is paused or finished playing.

• On/Off - Two images are used. The first image is used as the active control. Once the media is playing the second image is shown. If the media is stopped, the first image is shown again.

• Sequence - A series of images is used to display the progress of the media. As the media progress when playing the image is shifted to next image in the sequence at even intervals. The length of interval depends on the length of the media file and the number of images in the sequence.

How to create a control image:

• Create the images you want to use. Save them in the same folder as the vertical with the following naming convention: <filename>.<idx>.<ext>

• Setup up your media file in InDesign, see 5.7.2

• Place your first image (example.1.png) in the InDesign document. Select this im-age to be Object type: Control Image

• Place the clickable areas box over the control image so that tapping it triggers the media.

• Select type of control image

• Make sure to reference the media’s reference object’s id in the Reference ID field.

Now you can review and see what happens when you play your media!


If you are creating a single type control image, you only need one image. E.g. image.1.png

If you are creating a on/off type control image, you need two images. E.g. image.1.png, image.2.png

If you are creating a sequence type control im-age, save the image with increasing indexes. E.g. example.1.png, example.2.png, example.3.png, example.4.png etc. The duration of the media affects the duration between each image.

The InDesign Plugin - Mag+ · • Push review to device - Click + to enter the IP address of the...

Documents

Transcript of The InDesign Plugin - Mag+ · • Push review to device - Click + to enter the IP address of the...