Drag Object Interaction in Kwik 2 - Digital Art and Design

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.

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.
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.
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.
Open the mockup psd file into Photoshop and copy the cross from this file.
Return to page3 and the drag_cross layer. Paste the cross onto this layer.

Now we can create the drag object interaction.
Click on the Interactions icon in the Categories bar.
Click on the Drag Object icon in the tools to open the Drag dialog box.
Rename the interaction "dragCrossAni".
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.
Set the Allow drag in X axis between 0 and 2048.
Set the Allow drag in Y axis between 0 and 1536.
We don't want to constrain the angle of the drag. Set this option to nil.
We won't be using an action during or after the drag action. Set both of these options to None.
Click Create.
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.
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.

|