Macworld Masterclass: Quark iPad Publishing Service

Macworld Masterclass: Quark iPad Publishing Service

A quick, cost-effective way into publishing via the App Store

by


X

Email this to a friend

Characters remaining:

  • Intro 1
  • 1. Page Layout 2
  • 2. App Studio 3
  • 3. Interactive pictures 4
  • 4. Select the picture 5
  • 5. Pan and zoom 6
  • 6. Animating pictures 7
  • 7. Creating a slideshow 8
  • 8. Slideshow files 9
  • 9. Animate the slideshow 10
  • 10. Adding audio 11
  • 11. Movies 12
  • 12. On the button 13
  • 13. Button actions 14
  • 14. Viewing web pages 15
  • 15. Collect for output 16
Next Prev

Step 1 of 16: Intro

The success of the iPad has proven there is a market for app publishing, but the costs and coding skills necessary to develop such apps have been a barrier. So Quark’s iPad Publishing Service for iPad, announced earlier this year, should offer an economic solution to creating apps. But it’s not the most intuitive program to use so we’ve put together this basic how-to guide.

You’ll need to contact Quark to sign up for the service. Quark will then send you the App Studio XTension from QPS. Essentially you design the layout as you would any other project in QuarkXPress and then use the App Studio to add interactivity to enrich your content. Note, you can only add interactivity to a picture box and you can’t mix the interactive elements with other design features.

Next Prev slideshow image

The success of the iPad has proven there is a market for app publishing, but the costs and coding skills necessary to develop such apps have been a barrier. So Quark’s iPad Publishing Service for iPad, announced earlier this year, should offer an economic solution to creating apps. But it’s not the most intuitive program to use so we’ve put together this basic how-to guide.

You’ll need to contact Quark to sign up for the service. Quark will then send you the App Studio XTension from QPS. Essentially you design the layout as you would any other project in QuarkXPress and then use the App Studio to add interactivity to enrich your content. Note, you can only add interactivity to a picture box and you can’t mix the interactive elements with other design features.

Step 2 of 16: 1. Page Layout

You will need to make two layouts – one each for horizontal and vertical orientations so that the finished app can switch from one to the other depending on how the iPad is held. We’ve started with the vertical, using a page size of 768 x 1024 points, but you’ll have to test the horizontal layout as you go.

Step 3 of 16: 2. App Studio

Find the App Studio underneath the Window menu, which brings up a palette with six media types: Audio, Button, HTML, Movie, Slideshow and Picture. Select any design element in a picture box with the Item tool and then click on one of these media-type boxes to add interactivity to that element.

Step 4 of 16: 3. Interactive pictures

The most obvious interactivity to add is with the pictures. Select a picture box and click on the Picture button in the App Studio. Type in a name for the picture, such as p2 Top and tick Enable Full Screen. If you type additional text into the caption box this will also be displayed when the image is enlarged.

Step 5 of 16: 4. Select the picture

Click the File option at the bottom right and navigate to the file to add it to the App Studio. Once you’ve done this the picture will appear in the window. It will also be added to the list of interactive elements, which you can see by clicking the arrow at the bottom of the screen.

Step 6 of 16: 5. Pan and zoom

You can also use the Pan and Zoom option to add movement to a still image, which is particularly effective with panoramic pictures. Grab the handles around the picture box to choose a detail to pan and zoom into, or use the slider across the bottom to determine how far the image should zoom in to the centre.

Step 7 of 16: 6. Animating pictures

Click the Pan & Zoom button above the image and tick the Animate option. Then set a short delay, say around 50ms, before the animation starts. Remember to set a longer time for the zoom action itself, say around 500ms, to ensure there is the time to experience the full zoom effect.

Step 8 of 16: 7. Creating a slideshow

Slideshow is one of the most powerful options as it builds up a visual kaleidoscope by embedding images without cluttering up the layout. You could add several stills to a film review. Select an image, click Slideshow, choose the Simple Slideshow option and click the Create the Slideshow button.

Step 9 of 16: 8. Slideshow files

Type in a name for the slideshow. Tick Enable Fullscreen to give the slideshow more impact and also select Enable Scrolling and Show Page Control for better navigation. Use the File button near the bottom left to select the images to use. You can drag and drop between the images to change the order.

Step 10 of 16: 9. Animate the slideshow

Click on the Slideshow button for the animation dialog and tick Enable Animatation. You can then determine how long each slide is displayed for, how long it takes to move to the next image and choose between a swipe or a fade transition. You have the same Pan & Zoom options used in step 6.

Step 11 of 16: 10. Adding audio

To add audio, first select a picture element to associate with the sound, such as the picture of the person speaking or draw a play button. Then navigate to the audio file. You can host sound and video files on a web server to limit the app’s file size but they will only be available when the iPad is online.

Step 12 of 16: 11. Movies

Adding movie files is a similar process. Use a still from the film and click on the Movie button. Type a name for the movie and navigate to the movie file to add it to the App Studio. Tick Fullscreen Only to maximise the impact of the clip and tick the Close at end option to prevent the film endlessly looping.

Step 13 of 16: 12. On the button

You can use buttons to assign actions, such as navigating to a spread or a web view or for creating a pop-up, as a way of adding extra elements. Click on the Button icon and type a name for the button. At the bottom of the window, by Add Action, choose Show Pop-Up from the drop-down menu.

Step 14 of 16: 13. Button actions

Clicking Create will add the Show Pop-Up action to the main window, with another Create button. This then gives you the option to set up either a Simple slideshow, as in step 8, or a web view, which uses the same process as the HTML option that is described in the next step.

Step 15 of 16: 14. Viewing web pages

You can use the HTML button to open up a web page within a page view. Type in a URL address to the web page you want and tick the Interaction and Online options. You can specify an alternative image to show if there’s no web connection. There’s also a Pan & Zoom option for the image.

Step 16 of 16: 15. Collect for output

To allow the layout to change orientation, you could define the landscape as being a double-page spread or duplicate the layout for the vertical format and tweak the design accordingly. You’ll need to collect for output separately for each layout. Also, you’ll have to manually add all the non-print elements.

Comments

Comments

Market Place

Register

Register for your free place at the next Synology DSM and Product Launch and get an exclusive insight into Synology 2015.

Samsung Galaxy Tab S 8.4 review: The best iPad mini and Nexus 7 rival tablet around

Samsung Galaxy Tab S 8.4 review: The best iPad mini and Nexus 7 rival tablet around

Mobile email is powerful and useful - but also hopelessly intrusive

Mobile email is powerful and useful - but also hopelessly intrusive

Samsung lights up London skyline with Midnight Rainbow

Samsung lights up London skyline with Midnight Rainbow

Which Mac? Complete Apple Mac buyers guide for 2014

Which Mac? Complete Apple Mac buyers guide for 2014

We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message