mag+ feature builder objects you can create?

Mag+ Feature Builder

Mag+ Feature Builder v1.0.4P © 2011 Mag+ AB. All rights reserved 1

.

Feature builder is Mag+’s HTML feature-building wizard that lets you create HTML objects like slideshows without ever writing a line of code. You access the site, build your feature (like a slideshow), press export and you get an HTML file you can embed in your Mag+ layout. Create a HTML-block in your InDesign file and select HTML as the Object type, then point it to the .html file created. Now your object appears within your magazine, and you didn’t have to write any code.

Objects you can create? In the feature builder you can create six different types of html object:

• Image gallery with thumbnails

• Image slideshow with swipe

• Image sequence

• Online content feature

• Pinch & zoom object

• Web Feed element

Image gal lery with thumbnai ls An image gallery with thumbnails consists of a series of images that appear one after another when you tap the image window or on the thumbnails.

Image sl ideshow with swipe An image slideshow with swipe is basically an image slideshow where you go from one picture to another by swiping the screen of the tablet. Minimum size is 200 px by 200 px.



.

Image Sequence An image sequence gives the reader the possibility to swipe over an object to make it rotate. It is a very good way of showing products for example. All you need is a set of images of the objects from different views. A best practice is to aim at getting about 25 images of the object for a 360-degree view.

Onl ine Content Feature An online content object enables you to embed a webpage on a vertical in your app. If the reader is offline an image will show instead of the webpage. This could for example be used for having ads in your app always up to date no matter when the issue was made, just update the webpage you have linked to and it will be updated in the app.

Pinch & Zoom object Create a Pinch & Zoom object when you want your readers to be able to zoom in on images.

RSS Feed element This makes it possible to include an area in a vertical that loads RSS feeds from your chosen source.

How to create a project Go to feature.magplus.com and log in using your Mag+ credentials. If you haven’t created a Mag+ account yet, you can do that at magplus.com/signup. The first time you log in you will be taken to your feature start screen. In the top menu you have a link to some documentation of the feature builder and under settings you can change the site language.



.

Regardless of the type of object you are creating the process is the same.

1. Click the Images button on the home screen or Web Feed. 2. Enter the name, description and also the size of the project. Deciding the size of a project can be

a bit tricky; to get the perfect size of your images, please read the chapter How to get size right.

3. Click Next. 4. On the following page, choose the object type you want to create by clicking Select next to the

object and then click Next at the bottom right of the window.



.

5. Upload the images you wish to include in your object and click ‘Save’.

Now you will be taken to the last editing page. Here you can preview the images, add captions to them by clicking on the T underneath the image, crop the image and delete it from the gallery. Under Info & Size you have the possibility to edit the name, description and size of your project. Under Settings you have the possibility to edit your project so it acts and looks exactly as you wish. You have the possibility to upload assets, choose the color of your caption texts and many other options. By clicking Preview you will be able to test your project in the web browser. Finally click Export to download your project to your computer. For more information on how to place the project in your Mag+ template, read the chapter How to place an Html project in a design.



.

Best Practice

Images

How to get size right Because the Mag+ InDesign template is based on the resolution of 72dpi and the iPad’s resolution is 132dpi, the images in html elements are not converted by the plugin and need therefore to be at the exact size for the iPad before reviewing. The formula for this is to have the image being 1,83 times bigger (132/72 = 1,83) than what it is in the template. So if the image shown in the template is 558 px by 419 px then the image in the html element should be 1023 by 766px. Another good way to remember this is that the template is 560×420 while the resolution of the iPad is 1024×768 (1.83 times bigger)

Image type Make sure your images are all in RGB and not CMYK

How to place an Html project in a design 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 you downloaded from the Feature Builder 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.

Getting the thumbnail right 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.

Control the interactive areas Because the html-object has it own programmed gestures some of the Mag+ gestures will not work when the user is tapping the HTML object area. The most vital Mag+ gestures that are affected are page swiping, “hold down for menu” and “double click to make a-layer appear/disappear”. To control where the user can use the Mag+ gestures and where on the area the HTML-gestures are used it is possible to place transparent boxes over the object. Where the transparent box overlays the HTML object the user can use the Mag+ gestures. A tip is to have the transparent boxes being black when you layout the areas so you can see where the boxes go in portrait/landscape and then make them transparent when you are satisfied.

Addit ional Information You will find lots of more tips on how to use Mag+ Feature Builder in our forum. You can access it directly on our web site magplus.com/help or joins us on Facebook.com/magplus

mag+ feature builder objects you can create?

Documents