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

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Introduction to Jigsaw Puzzles with Kwik

Making jigsaw puzzle games with Kwik is easy and doesn’t take any coding. You will use the Drag feature and magnetic “hot areas” to create the puzzle.

Once you have decided which image you will want to use as your puzzle graphic, you will need to divide it into the individual puzzle pieces. The easiest way is to use rectangular shapes. However, you can also use the traditional puzzle piece shapes. Creating puzzle piece shapes is usually best done with a PhotoshopR plugin such as AV Bros. Puzzle Pro. As you can see in the example, I’ve divided the BellaOnline logo into two rectangles.

You will need two shapes for each puzzle piece. Of course, you will want the puzzle piece itself but you will also need a placeholder piece to match, which is identical in shape to the puzzle piece. This is usually a solid color rectangle. For the example, the top puzzle piece is named “dragpz1p1” and the corresponding placeholder piece is named “kwkpzbase1”. You can use your own names for these pieces.

You will first place the placeholder pieces on the screen in the correct places to complete the puzzle. As you can see from the example, the two placeholder pieces are placed in the center and the red arrows show where the puzzle pieces will be placed over the top of the placeholder pieces. Each placeholder piece will become a “hot zone” for its corresponding puzzle piece.

You will use Kwik to associate each puzzle piece with its corresponding placeholder piece. Take a look at the Drag dialog box. We have the name of the dragpz1p1 puzzle piece at the top of the box. Moving down the box to the Drag area section, we have the name of the kwkpzbase1 placeholder piece. For the Active Boundaries option, we have told Kwik to expand the hot area 50 pixels beyond the actually placeholder shape. This makes it easier for little fingers to place the puzzle pieces, because they don’t need to get it exactly over the corresponding placeholder.

Next, we have the Lock When Positioned option. You will probably want to use this option so that the puzzle piece cannot be moved once it is placed into the correct position.

In the Trigger Action option, we tell Kwik to play a click audio sound. Every time a puzzle piece is place correctly, the player will hear this sound.

When the game begins, Kwik will automatically place the puzzle pieces on the screen in random positions. Because the positions are random, the puzzle pieces are placed in different positions each time the game is played.

If you want a challenge, you can also set up Kwik to keep a count of how many puzzle pieces have been placed into their correct positions and have a “Game Over” or “Well Done!” message show when all pieces are correctly placed.

You can view a working example of a jigsaw puzzle in my book app
T'was The Night Before Christmas - An Interactive Classic.

It's free from the app store.

Join us in the Animation forum. | Join us in the Digital Art forum.


Add Introduction+to+Jigsaw+Puzzles+with+Kwik to Twitter Add Introduction+to+Jigsaw+Puzzles+with+Kwik to Facebook Add Introduction+to+Jigsaw+Puzzles+with+Kwik to MySpace Add Introduction+to+Jigsaw+Puzzles+with+Kwik to Digg Introduction+to+Jigsaw+Puzzles+with+Kwik Add Introduction+to+Jigsaw+Puzzles+with+Kwik to Yahoo My Web Add Introduction+to+Jigsaw+Puzzles+with+Kwik to Google Bookmarks Add Introduction+to+Jigsaw+Puzzles+with+Kwik to Stumbleupon Add Introduction+to+Jigsaw+Puzzles+with+Kwik 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 © 2018 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
Adobe Portfolio First Look by Justin Seeley

Social Media Graphic Templates


Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


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

BellaOnline Editor