In the last tutorial, we examined the settings for the Bookry.com Drag and Match widget that we will use to create a jigsaw puzzle for the Children's Storybook Template iBooks Author^R project. In this tutorial, we will upload the graphics and audio files and export the widget.

I decided to add a new Sample Widgets section to the Children’s Storybook Template User Guide. In the short section there will be two pages, one for Bookry widgets and one for iBooks Author widgets.

The first images that we will upload are the background image that will be displayed behind the puzzle pieces and the Win/Lose images. Because I have set the game to not use a timer or keep score, I really don’t need a Lose image but you might want to use this feature.

The background image is only 1024 x 728 pixels because we need to have room for the Bookry top bar. After you upload the background image, it will appear in the area where you will arrange each puzzle piece in its final position.

Although the instructions do not indicate a size for the Win/Lose images, the sample images are 768 x 768 pixels. This image gets stretched slightly which cuts off the edges, so reduce the graphics and text to leave an empty border around the edge.

Next, we can upload a few small audio files. I like use SoundBible.com for my audio needs. They have a nice selection, but don’t forget to include attribution somewhere in your book. I uploaded a nice jingle bell audio fill for the Win Sound, as the book is A Visit From St. Nicholas. For the Select (pickup), Match (drop) and Incorrect Match (drop) sounds, I used a simple click sound.

Now it’s time to upload the puzzle pieces and the matching drop zone pieces. As we mentioned in the previous tutorial, each unique solid white drop zone piece (Target) will determine the correct drop area for the matching puzzle piece (Source). If you are using the score feature, you can set the score for each match. When you click the Add piece, you will see the pieces appear in the positioning area.

Once you have uploaded all the puzzle piece pairs, you will want to position the blank Target pieces in the correct positions for the final puzzle. Next, position the puzzle pieces around the edges of the puzzle area.

Now we are ready to save the widget settings and download the dragmatch.wdgt.zip file. Unzip the file and drag the dragmatch.wdgt file into iBooks Author. As with any widget, you will go to the Widget Inspector to set the widget to Play Full-Screen.

Because we only want the thumbnail of the widget and the name to appear on the page, we can uncheck the Caption and Background. Rename the Title to Jigsaw Puzzle. Finally let’s add a slight drop shadow to the thumbnail in the Graphic Inspector.

Back