About the mag+ Process
Creating interactive apps in mag+ consists of several steps:
- You use the mag+ InDesign Plugin to create Verticals.
- You export the Vertical from InDesign and assemble your Issue in the Desingd Production Tool.
- You export an Issue from the Designd Production Tool which is uploaded to the mag+ Publish Portal.
- The mag+ Publish Portal delivers your Issue to apps that you build and upload to the various app stores.
The steps below will walk you through creating a simple mag+ layout.
Creating a mag+ Vertical
All designs in mag+ begin with a mag+ template. This is a blank InDesign document sized to fit a supported device and configured to export your design at the right resolution. You must use the Mag+ templates for the devices you're supporting in order to get predictable results.
1. In InDesign, go to the Mag+ Designd menu and select "New Mag+ Designd Vertical..."
2. In the dialog that appears, fill out the fields as shown below and click on "OK."
The Mag+ menu lets you create new mag+ Verticals from the installed templates.
3. Draw a text box with the words "Static Text" within the guides on the B-Slides-Main Content layer.
You'll notice that a mag+ template contains several predefined layers. Objects placed on the different layers will behave differently. New users to mag+ should first learn to use the three main layers:
- B - Slides - Main Content
- B - Slides - Pinned blocks
- A - Main tower - for inline body content
The remaining layers are used for placed media and interactive features such as mag+ Popups.
B - Slides - Main Content
This is the main background layer. Content on this layer rotates and crops differently based on the orientation of the device. In the InDesign template you are using, there are guides for each orientation (landscape/portrait) and the square in the middle of those guides is considered the "safe area." Objects within this safe area will always be visible, no matter how the reader holds the device.
Note: You can toggle the visibility of the layers Device Portrait, Device Landscape, and Device Bezel to see what areas are visible depending on the orientation of the device. Device Bezel shows you the visible areas of both the portrait and landscape orientations at the same time.
4. On the A - Main Tower layer, draw a filled text-box with the words "Scrolling Text" below the last horizontal guide.
A - Main Tower - for inline body content
This is a free-scrolling layer that moves over the top of the B layers in your document. This content can be hidden by the reader if they tap twice on the screen (although you can disable the double-tap hiding feature if you desire). Content in the A - Main Tower layer can also be made to snap to a particular position as it comes into view.
5. With the Scroll Text frame selected, call up the Designd Object Panel by going to Mag+ Designd->Designd Object Panel.
The Designd Object panel allows you to set behavior options for specific objects in your design. There's a lot to learn about Pinning and Snapping, but for the purposes of this Quick Start guide, be sure that the following options are set when you have the Scrolling Text frame selected:
- Horizontal Pin should be set to None
- Snap should be set to to None
6. Save your InDesign document.
Name your document "My First App". You can save your document anywhere you choose, but it is suggested that you follow the Issue set-up outlined in the article "How to Structure the Mag+ Issue Folder".
7. Launch the mag+ Reviewer App and press "Fast Review" in the Designd Vertical panel.
The mag+ Reviewer is an app—available for iOS, Android and Kindle Fire—that allows you to review your designs on your device in real-time as you're building them. It talks directly to the mag+ InDesign Plugin and the Designd Production Tool over WiFi. It is built on the exact same code as our branded reader apps, so you will see exactly what your end users see when reviewing your design.
You should have set-up the mag+ Reviewer in the previous article, but in case you missed it, read more about setting up the Mag+ Reviewer app.
Follow these steps to preview your design:
- Launch the mag+ Reviewer app on your device.
- Bring up the Designd Vertical Panel by going to Mag+ Designd > Designd Vertical Panel.
- Click on the "Fast Review" button.
Your design will be pushed to your device and appear.
8. Explore the design in the Reviewer.
The mag+ Reviewer will show your layout and allow you to explore its features. You can rotate the device to see the content on the B-Slides-Main Content layer rotate with it. You can also swipe your finger up to see the content on the A-Main Tower layer scroll into view in both portrait and landscape orientations.
9. Export your document.
To use your document in the Designd Production Tool, you must export it as a Vertical saved in the MIB (Mag+ Issue Bundle) format. Follow these steps to make sure your document is exported properly:
- Bring up the Designd Vertical panel by going to Mag+ Designd > Designd Vertical Panel.
- Make sure the Device is set to Apple iPad Retina.
- Set the Export folder to the Apple iPad Retina folder in your Issue Folder.
- Set the MIB version to the highest version available.
- Click on the Export button.
The other features in this panel offer additional options on how this Vertical will behave. You can read more about them later. At this point, once the export is complete, you can launch the Designd Production Tool to begin assembling your Verticals into an Issue.
- Next Article: Building a mag+ Issue
- Previous Article: Configuring the mag+ Tools
More mag+ Features
The next step in the Quick Start series is using the Designd Production Tool, but if you'd like to learn more about the different interactive features available to you in the mag+ InDesign Plugin, here's a suggested reading list:
- Web links. Web Links allow you to enter URLs which will open in the in-app browser. Read more about Web Links.
- Jump Links. Jump Links will take you to other content within your app. Read more about Jump Links.
- Popups. A mag+ Popup allows you to tap an object and have something "pop up" on top of the layout. In other systems, this feature is sometimes called a "Hotspot" but mag+ uses that term differently. mag+ Popups are a powerful tool for presenting your information in an interactive way and there many options on how to use them. Read more about Popups.
- Video and Audio. Adding media to your layouts is typically a simple one-click affair, but there are a lot of options for how that video is presented: inline, full screen, auto-play, hide at end, etc. There are a wide range of possibilities to use audio and video to help your layouts come alive. Read more about adding Video and Audio.
- HTML. With the ability to embed or stream HTML5 code inside of your mag+ layout, there's really no end to how interactive your publication can be: surveys, slideshows, 360s, etc. Don't know HTML? Don't worry, you can use our Mag+ Feature Builder to generate some of the most popular HTML elements without typing a line of code. Read more about adding HTML to your layout.
- Pinning. Pinning is one of the truly unique things about mag+. It lets you create one layout that works in both orientations. You tell objects to move when the user rotates the device, and it is a cornerstone of any dual-orientation layout. Read more about Pinning.
- Snapping. Similar to Pinning, Snapping is a way you can control how your layouts look to the user by forcing the scrolling A-Main Tower layer to "snap" to a certain point in the layout. Read more about Snapping.
0 Comments