Create a drag & drop game in 3 easy steps

Click here to download the example files

Click here to download the example files

We wonder if you’ve noticed our new Drag and Drop widget in the library? It’s a fantastic new widget that has many, many applications and is completely customizable to suit any book.  Here is a step-by-step tutorial for creating this cool game for your Multi-Touch book. Before you start, download the example files by clicking on the folder above (DragDrop_Tutorial.zip).

1. Create a book on your BookShelf

Screenshot of your Bookry BookShelf

To generate your widget you first need to login to Bookry and create a new book on your BookShelf.   This simply creates a private project area for your book which holds all your widgets together in one place as you work on them.

There are several ways to get started:

  1. Go to ‘My BookShelf’ in the top black Bookry Toolbar.  Then click on the large green ‘+’ symbol under ‘Books I am Writing’. This will bring up a pop-up window which prompts you to give your new book a title and then generates the book. You are taken to the book’s ‘Settings Page.’
  2. Going to ‘Author Tools’ in the top black Bookry Toolbar and selecting ‘Start a New Book’ will also bring up the pop-up window.

(Note: You do not need to upload your actual book to Bookry to create widgets.  You only need to upload your iBooks Author file if you want to share it with others via The Gallery or your public/private BookStore.)

2. Generate the widget

Generating a widget using the online Bookry generator is super easy and this is how you do it:

Select the drag and drop widget icon

From you book’s ‘Settings Page’ click on the blue ‘Add Widget’ button.  This will bring up a list of all widgets in the Bookry Widget Library.  Selecting the purple ‘Drag and Drop’ widget will automatically take you to the ‘Widget Settings’ page – this is the widget generator. So now we’re going to create the widget. First give your widget a name. Only you will see this name, so call it whatever you like. Next we need to complete the  ‘Static Settings’ and ‘Live Settings’ for the widget.

Let’s start with ‘Static Settings’:

Static Settings are the items (in this case images) you need to upload to build your widget.  If you change any of these items after saving and downloading your widget file, you will need to save and download the widget file again and re-place it in your book;

  • First select the page orientation. Templates in iBooks Author are either portrait or landscape so make sure you choose the right orientation for your widget. In this example we’re creating a landscape widget.
  • Now upload a cover image. This is the icon you want readers to click on to open your widget.  Each Bookry widget has a default icon but you can upload whatever image you like to match the design of your book. In this example we’ll use the default Bookry icon so no upload is necessary.

Select the landscape background image and upload

  • Next, upload a stage background. This is the main background image, which in this case a face.  This image should be 1024px x 768px in size for a landscape book and 768px x 1024px for portrait. Upload the ‘dragdrop_stage_landscape.png’ file from the example folder (there is a portrait version in the image folder if you want it later).
iBooks Author tutorial - upload the drag and drop items

Upload the drag and drop ‘stickers’

  • So now we start adding the images or ‘stickers’ for your reader to drag around. Click on the blue ‘Upload items to drag and drop’ button. Select images ‘1.png’ to ’13.png’ from the example folder and hold down the shift key to select them all at the same time. Once uploaded they will appear individually in the generator.
iBooks Author tutorial - sort your items into categories

Sort your items into categories

In the final widget the ‘stickers’ will appear on the left hand side of the final widget in a scrollable bar (or at the bottom when in portrait) and you have the option to categorize them. So go ahead and enter the categories ‘hair’ ‘hats’ ‘glasses’ and ‘beards’ next to each image. These images can be any pixels in size and if you want to reorganize them you can click on the cross image on the right of each image to move them up and down. Next click on  ‘Save’.

Now we need to enter the Live Settings.

  • Any changes you make here will be updated in your widget, even after it has been downloaded by a reader, the next time it has Internet connection.
iBooks Author tutorial - Naming your widget and selecting category layout

Name your widget and select category layout

  • So first enter the name of your widget.  Whatever you put here will appear in the black bar at the top of your final widget in your book, so enter something like ‘Have fun dressing the face’.
  • Finally you need to decide how you want the widget to display your categories.  This will depend on how many categories you have.  For this example we have 4 categories so select the ‘All categories open’ radio button and click on save.
  • At this point you can preview your widget to get an idea of what it will look like in your book.  Select the ‘Preview’ tab at the top of the page, in-between ‘Settings’ and ‘Analytics’.

3. Place in your iBooks Author file

All that’s left for you to do now is to download the widget file to your Mac and drag and drop it into your open iBA file:

iBooks Author tutorial - cancel the widget installer pop-up if using Safari

Cancel the widget installer pop-up if using Safari

  • From the Widget Settings page click on ‘Save’ then ‘Download.’ The widget will be automatically downloaded as a zip file.
  • If you’re using Safari on a Mac, it will automatically unzip the widget for you, but try to install it. Just click on ‘Cancel’ when you see the widget installer pop-up window. If you’re using another browser, then you may need to double click on the zip file to unzip it.
iBooks Author tutorial - locate the .wdgt file in your Download folder

locate the .wdgt file in your Download folder

  • Once downloaded, locate the file called ‘drag-and-drop.wdgt’ on your Mac using Finder and simply drag the widget into your open iBooks Author file and format with the Inspector.
iBooks Author tutorial - this is how the widget will look in your iBA file

This is how the widget will look in your iBA file

That’s it!  You’re ready to preview and test! 

Upon opening the widget you will see a list of categories with ‘stickers’ on the left, and your ‘stage’ background image on the right.  Tap on any ‘sticker’ to make it appear in the main stage. Then drag around with your finger and re-size/rotate with a finger and thumb pinch.  You will also notice a small icon bar that appears when you tap on any image on the stage which you can use to manually re-size and rotate the image.

iBooks Author tutorial – The final widget

So that’s it!  Now it’s up to you to create your own images and include a drag and drop game in your next book.  Visit the widget library.

(All the images used in this tutorial are open clip art, so please feel free to use them in your projects.)