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 Photoshop® 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.

https://www.avbros.com/puzzlepro/

https://www.kwiksher.com/tutorials-kwik/magnetic-drop/

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.
Kwik product, the Kwik logo and Kwiksher are properties of Kwiksher.com - Copyright 2011. Screen shots used by permission.

These tutorials are for the older version of Kwik 2 and may not be much help when using Kwik 3 and above. If you are having trouble, please use the Kwik forum.