2. The Process Moving Media+. All rights reserved. Page 3 of 24

Transcription

1 The InDesign Plugin

2 1. The Mag+ Plug-in 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 digital-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.

3 2. The Process First collect the content for your app, but don t worry about converting it to the right resolution or color space the plug-in will handle that on export. Next, layout your pages in InDesign. 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 backend, 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! 2011 Moving Media+. All rights reserved. Page 3 of 24

4 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 Moving Media+. All rights reserved. Page 4 of 24

5 4. the interface 4.1. The Plug-in Look 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. MIB versions and compatibility 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 version. Ideally you will always match the export MIB version in the Plug-in with the version chosen in the Production 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 Missing Thumbnails in the Settings tab or the Production Tool will not export a MIB if the version numbers don t match Moving Media+. All rights reserved. Page 5 of 24

6 4. the interface 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+ Production Tool Moving Media+. All rights reserved. Page 6 of 24

7 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 support@magplus.com 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 quality, 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 pinning for objects placed on the A - Main Tower- and the B-slides - Pinned blockslayers based on the edges they are nearest. Read more about pinning Moving Media+. All rights reserved. Page 7 of 24

8 4. the interface 4.2. The InDesign Template and document logic Now 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 background 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 Moving Media+. All rights reserved. Page 8 of 24

9 4. the interface 4.3. Layers Now 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 page 1 doc.indd A - Scrollable layer B - Pinned Blocks B - Main Content page Moving Media+. All rights reserved. Page 9 of 24

10 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 adjust 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. D - Media Areas C - Clickable Areas 2011 Moving Media+. All rights reserved. Page 10 of 24

11 5. THE BASICS 5.1. Guides With the layer called Guides it is possible to see the ipad s areas in different orientations. ONLY PORTRAIT ONLY PORTRAIT ONLY LANDSCAPE ONLY LANDSCAPE 2011 Moving Media+. All rights reserved. Page 11 of 24

12 5. THE BASICS 5.2. Pinning Pinning 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 Calculate default pinning. It is not possible to use pinning on the bottom B-layer (B - Slides - Main Content) Moving Media+. All rights reserved. Page 12 of 24

13 5. THE BASICS 5.3. Snapping The 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 orientation, 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 2011 Moving Media+. All rights reserved. Page 13 of 24

14 5. THE BASICS 5.4. Transition Guides By 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. Transition guide 2011 Moving Media+. All rights reserved. Page 14 of 24

15 5. THE BASICS 5.5. Grouping Grouping is going to very important for you when you work with the Mag+ Plug-in. This is because 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 Moving Media+. All rights reserved. Page 15 of 24

16 5. THE BASICS 5.6. Shadows and effects Objects 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 Moving Media+. All rights reserved. Page 16 of 24

17 5. THE BASICS 5.7. Object Types Mag+ 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 coordinates and given size of the object. Objects can have different Types which is set in the Plugin 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 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.. Hotspots and media objects must have referencing objects in the A- or B- layers 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 An Object with an ID will lose it s ID when it is grouped with other objects so set your links late in the production. Link: External linking to websites ( Jump Link: Internal linking within the magazine or app. Media: Link to media on a server 2011 Moving Media+. All rights reserved. Page 17 of 24

18 5. THE BASICS URL into the plug-in. To link to an adress, type: 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 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. / //b123 /verticala /verticala/b123 popular-science://com.bonniercorp.magplus.psc.01.5 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. If an object you want to jump to does not have a Reference ID, you can simply type one into the Reference ID box. JUMP LINK codes 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 <brand URL scheme>://<mib GUID> You can find the brand URL scheme in Publish by going to Admin > Edit (brand) settings > Application URL Schema 2011 Moving Media+. All rights reserved. Page 18 of 24

19 5. THE BASICS Ref Object ID: Created automatically by the system when you add a Movie Do not change Media ID: Created automatically by the system when you add a Movie Do not change Content 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 streaming (URL) use the File box below to either select a file for an embedded movie or type a URL for a streaming movie Auto-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 play Hide Media at End: If checked, the Movie will disappear 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 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 playback in the plug-in D - Media Areas C - Clickable Areas A+B Layers Media Object Referenced ID: b123 Source/Play Options Hotspot Object Referenced ID: b123 URL: media:// example Anchoring Object ID: b123 MEDIA LINK media://m321 Play media with ID m Moving Media+. All rights reserved. Page 19 of 24

20 5. THE BASICS 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. 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 useful for sizing your box correctly: Place a screenshot of the HTML object into the box, press the Fit content proportionally in the upper right corner of the ID menu; then press the Fit Frame to Content button. Try our HTML Feature Builder for creating slideshows without writing any code HTML objects can have the same pinning and snapping capabilities as other object types. URL: point this to your.html file. the system will bundle all associated assets into the final MIB Resize 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 browswerwindow size changes. Scale contents to fit block: this will automatically proportionally scale your HTML object to the size of the box you ve drawn. Transparent: Check this to turn the background of your HTML window transparent. 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 Moving Media+. All rights reserved. Page 20 of 24

21 6. Table of contents 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 exported 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, follow the guide above ( ). 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. / //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 JUMP LINKS Go to object with ID b123 inside Vertical with ID verticala 2011 Moving Media+. All rights reserved. Page 21 of 24

22 7. ExtrA design tricks 7.1. Unify two or more verticals Let 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. 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 Moving Media+. All rights reserved. Page 22 of 24

23 7. ExtrA design tricks 7.2. Working with the ipad memory While 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! vertical 1 Loading... 2 vertical vertical 1 vertical 2 Loading... 3 vertical Overwriting... vertical 1 vertical 2 vertical 3 Loading... 4 vertical 2011 Moving Media+. All rights reserved. Page 23 of 24

24 7. ExtrA design tricks 7.3. Control Image With the object type Control Image it is possible to make different objects appear when a media 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 appears 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 Place your first image (example.1.png) in the InDesign document. Select this image 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 image, 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 Moving Media+. All rights reserved. Page 24 of 24