logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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.


http://www.avbros.com/puzzlepro/

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



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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 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


g features
Chalk Text Effect In Illustrator CS6

Sketch with Your Silhouette SSDE

Simple Drawing Tools in Silhouette Studio Designer

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor