Digital Workshop
http://forum.digitalworkshop.co.uk/

Is there a tutorial on how to make an interactive jigsaw
http://forum.digitalworkshop.co.uk/viewtopic.php?f=29&t=4663
Page 1 of 1

Author:  ruskin [ September 10th, 2011, 3:12 pm ]
Post subject:  Is there a tutorial on how to make an interactive jigsaw

Hello,

I would like to make a jigsaw to put on my web page for my grandson to do.

Can someone point me in the right direction on where to start.

I have just got Opus Creator. Previously I used Opus Presenter 4 to make little stories then converted them to PDF and put them on my web page. Here:

http://www.oldlancaster.co.uk/linda/pages/percy.html

In the future when I have more knowledge about how the programme works, I hope to do some animated stories.

Thanks

Author:  Lar_123 [ September 10th, 2011, 4:15 pm ]
Post subject:  Re: Is there a tutorial on how to make an interactive jigsaw

Linda,
Welcome /back.

Hope you enjoy Creator.
I use OpusPro and really appreciate how DW has refined it over these recent years.

To your question, check this out
http://digitalworkshop.com/resources/res_online.shtml
http://digitalworkshop.com/resources/res_examples.shtml

larry

Author:  ruskin [ September 10th, 2011, 6:15 pm ]
Post subject:  Re: Is there a tutorial on how to make an interactive jigsaw

Dear Larry,

Thanks for your reply.

This example came with Opus which I have looked at but it seems that you have to have the image already in jigsaw pieces. Each piece being a seperate image.

Do you know how I can seperate a photograph into jigsaw pieces?

Thanks, Linda

Author:  Lar_123 [ September 10th, 2011, 7:51 pm ]
Post subject:  Re: Is there a tutorial on how to make an interactive jigsaw

I have not looked at that jigsaw pub to see how DW did it. You can examine it yourself -- in the Creator Organizer Tree, see what kind of object the puzzle piece is.

I am guessing it is an image object. (see next). HOWEVER, if it is a Vector Object in Creator... skip down to read Vector Puzzle Piece.

You did not say what other tools you have available and are familiar-with/skilled-in.
But I just tried an experiment using IrfanView image viewer -- can be download Free (PC Windows).
You can use other image editing software.
The basic principle is this:
1. Crop your photo to area just larger than a single puzzle piece.
2. Use the Paint/Draw features to either paint a solid color, or erase an area. That is, manually carve out the puzzle piece.
If your program has the capability, you could skip 1 & 2 and use a Lasso tool, or other tool that can trace the outline of the puzzle piece -- then extract (Copy/Paste) the remaining odd-shape image.
3. Save As. Save each odd-shape image as a .PNG file. In the process, you should have an Option to select or designate a Color which will become the transparent region.


Puzzle Pattern options:
* Draw your own
* Search online for a Template pattern or a template-image
* Search for an Effects plug-in or add-on (to your image editing program) -- that overlays the effect

Vector Puzzle Piece
This is the better approach if you are a little patience AND you anticipate you will want to make several Jigsaw pubs.
I do not have time to outline this solution completely.
But if you want to get started in this direction, look-up "connect Contours" in your Creator Help file. Start playing with that to Draw a crude puzzle shape.
I will get back to the thread later -- how to match your puzzle piece cutout to a selected section of an image. It is simpler to do than to explain.

Author:  Lar_123 [ September 11th, 2011, 2:33 am ]
Post subject:  Re: Is there a tutorial on how to make an interactive jigsaw

Hey, one thing I did not consider. Depending on HOW DW did it, you may be able to simply replace their photo snippet with your own phot snippet. By snippet, I mean of course a tightly cropped part of the main photo.

Let us know... what you find in their Sample Pub. We or I, will help you from there.

Author:  mackavi [ September 11th, 2011, 10:27 pm ]
Post subject:  Re: Is there a tutorial on how to make an interactive jigsaw

Hi Linda,

Not sure if DW used the same program, but the jigsaw game I created for a client uses the Puzzle Pro to cut a photograph into the required pieces.

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

Mack

Author:  Lar_123 [ September 11th, 2011, 10:58 pm ]
Post subject:  Re: Is there a tutorial on how to make an interactive jigsaw

Quote:
I will get back to the thread later
I tried building some puzzle pieces as Vectors in Opus (and using 'Connect Contours'). I get part-way there, but I think I do not have the patience for it... it is a bit tedious. So I am going to abandon this testing -- mainly because you need attention to detail for each piece... (BTW, something like Corel DRAW would be much better than Opus for manually drawing these types of vectors.)

...AND Mackavi has pointed you to a readily-available tool -- a much better solution. If you research Puzzle Pro a bit, I think you will find it might work with Irfanview if you lack Adobe products. Good luck.

Author:  mackavi [ September 12th, 2011, 9:08 am ]
Post subject:  Re: Is there a tutorial on how to make an interactive jigsaw

Of course, if you require a free solution, the alternative, though longer is simply to use the existing pieces as a template to cut of the new pieces.

Mack

Author:  ruskin [ September 12th, 2011, 12:54 pm ]
Post subject:  Re: Is there a tutorial on how to make an interactive jigsaw

Thanks to everyone for their suggestions on how to make a jigsaw.

I have now managed to complete my jigsaw & its on the web here if anyone wants to look at it:-
http://www.oldlancaster.co.uk/linda/Per ... igsaw.html

Here's how I did it:-
I found this website which offers a free action to run in Photoshop (I use CS5)
http://www.panosfx.com/commercial-free- ... le-effects

The action will produce a 20 piece or 6 piece jigsaw, (a commercial version gives more scope on number of pieces).

Incedentley if you are using an earlier version of Photoshop like CS2 or 3 then a puzzle texture is avaiable within the program.

I ran the action in Photoshop which puts each piece of jigsaw in it's own layer, I displayed each layer in turn & cropped each one to a minimal size, then saved as a PNG file to ensure the background transparency was preserved. I did this for each piece, and numbered each jigsaw image from 1 to 20 noting the size of each piece width & height in pixels.

I adjusted my jigsaw picture to the size I wanted, a bit bigger than the sample provided in Opus 7.

I then used the sample jigsaw as a basis, adjusting the drop area, etc, so that everything fitted the overall dimensions of the jigsaw.

In the properties of each piece I amended the image path to point to my jigsaw image, & adjusted the position. I then checked it out by running the preview. I did this for each piece, a bit long winded, but it worked fine.

Thanks again for everyone who responed.

Linda

Author:  Graham Baglin [ September 12th, 2011, 9:04 pm ]
Post subject:  Re: Is there a tutorial on how to make an interactive jigsaw

Excellent work!
The kids will love it
Thankyou for the construction tips
Congratulations Linda and to all those who assisted Linda as well
Cheers
Graham

Page 1 of 1 All times are UTC [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/