g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Kidney Disease
Today in History
Distance Learning

All times in EST

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Drag Object Interaction in Kwik 2

What makes a storybook app more interesting then a traditional book? It's the interaction between the reader and the app. Kwik 2 has many interactive features. In this tutorial, we will add a Drag Object interactive feature to a page.

Our sample book is Dracula's Guest. At one point in the story, a cross is mentioned. On this page, we will add a cross graphic that the reader can drag around the page. As you would guess, the cross is on a transparent layer and therefore must be exported as a png image. So, when we add this cross to the page, it will be placed on a new layer.

As before, we will begin with a mockup psd file that contains the cross. We will simply copy/paste the cross from the mockup file into the new layer on the page. But, where should be put this new layer? We need to keep the three buttons layers above our drag object layer, so that the drag layer will not interfere with our navigation. Therefore, we will add a new layer to page3 above the kwkpgTurn layer. Remember that the page turn graphic will be moved off the page when the page loads.

  1. Open your project into Photoshop and select the page that will contain the drag object.

    If you have many pages in your book, the workspace may get a little cluttered. You may choose to only load the first page of the book when you open your project. To do this, open the Settings dialog box (Gear icon at bottom of panel) and check the box next to Open Only First Project Page Document.

  2. Select page3 in the Page/Components section of the Kwik panel. You should see "@ page3" at the top of the section.

    If only the first page psd of your document is open, page3 psd will open when you click it in the list of pages.

  3. In the Layers panel, add a new layer above the kwkpgTurn layer and name this new layer "drag_cross".

    This layer doesn't have a shared object and will not be exported as a jpg image. Therefore, we don't need to set any layer properties.

  4. Open the mockup psd file into Photoshop and copy the cross from this file.

  5. Return to page3 and the drag_cross layer. Paste the cross onto this layer.

    Now we can create the drag object interaction.

  6. Click on the Interactions icon in the Categories bar.

  7. Click on the Drag Object icon in the tools to open the Drag dialog box.

  8. Rename the interaction "dragCrossAni".

  9. We are attaching the interaction to the drag_cross layer. So keep this selected.

    Properties: Kwik lists the current X and Y position of the cross object on the layer. It also gives us the dimensions of the graphic, which is 768 pixels wide and 974 pixels tall.

    We have the option to limit the area where the cross may be dragged. For this example, we want to prevent the cross from being dragged off the page but the reader can drag the cross anywhere on the page.

  10. Set the Allow drag in X axis between 0 and 2048.

  11. Set the Allow drag in Y axis between 0 and 1536.

  12. We don't want to constrain the angle of the drag. Set this option to nil.

  13. We won't be using an action during or after the drag action. Set both of these options to None.

  14. Click Create.

  15. Click File - Save to save your new layer on page3.

    Because we only have made changes to this one page, we can tell Kwik to export only this one page for our preview and use the other pages that are already in the build folder.

  16. Click the Export Current Page Only icon in the Status bar. Then click Publish. When you test the drag object, you will see that the reader can only drag the cross within the page.

Go to your LearnKwik folder and make a backup copy of the Template project folder. Rename the backup folder by adding the current date to the end. By using the current date each time you create a backup folder, you always know which folder in the archive is the most recent. (TemplateMM-DD-YY).

Join us in the Flash forum. | Join us in the Digital Art and Design forum.


Add Drag+Object+Interaction+in+Kwik+2 to Twitter Add Drag+Object+Interaction+in+Kwik+2 to Facebook Add Drag+Object+Interaction+in+Kwik+2 to MySpace Add Drag+Object+Interaction+in+Kwik+2 to Del.icio.us Digg Drag+Object+Interaction+in+Kwik+2 Add Drag+Object+Interaction+in+Kwik+2 to Yahoo My Web Add Drag+Object+Interaction+in+Kwik+2 to Google Bookmarks Add Drag+Object+Interaction+in+Kwik+2 to Stumbleupon Add Drag+Object+Interaction+in+Kwik+2 to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Moodboards for Web Designers lynda.com

Fixed Layout eBook Options

Calendar Wizard for InDesign

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor