For the past several days, the skies here in Portland, Oregon, have been blue and the sun hot! Since there is a high propensity of rain occurring here (e.g, Portland gets 42 inches of rain per year compared to the U.S. average of 37 inches) and we see about 144 sunny days per year, I took the opportunity to explore the neighborhood with my camera. While I was out, I saw this daylily and took a quick photo.
After I returned to my office, I wanted to explore what I could do with this image using both Adobe Photoshop CC and Storyline. After thinking it over, I decided to create a custom drag and drop interaction and turn this image into a jigsaw puzzle. If you want to assemble this puzzle, go ahead and click the image above to get started. If you want to learn more about how I built this interaction, then read on!
The first thing I wanted to do was to break the image into puzzle pieces to fit onto a 1024 x 768 stage. To accomplish this, I used an action called Puzzle Pieces from Bojan Živković. For this sample, I broke the image into 16 individual pieces to allow the learner to complete the puzzle quickly. The great thing about Puzzle Pieces is that it allows you to create puzzles that contain 300+ pieces depending upon the aspect ratio of the source image. Once the original image was separated into individual pieces, the next step was to bring them into Storyline and create a custom drag and drop interaction.
To setup the drop target for each piece, I simply reassembled the puzzle pieces on the Storyline stage and then duplicated them. The first set would be used for the drop targets and the second set would be the actual puzzle pieces the learner would need to drop into place.
Next, I created a grey rectangle to serve as the overall drop location area for the puzzle pieces. For the first set, I configured the transparency to 100%. Each of these pieces became a drop target (e.g., A1-A4 (top row), B1-B4 (second row), C1-C4 (third row), and D1-D4 (bottom row).
The second set of pieces are used by the learner to assemble the puzzle. These were randomly placed around the outside of the grey rectangle. The See the Picture button triggers a lightbox slide that shows the entire image to assist in placing the puzzle pieces in their appropriate locations.
I also removed the Storyline player from view to immerse the learner into the interaction. If you want to gain a little more insight into how this is done, go here.
I hope you enjoy this digitized version of a jigsaw puzzle created using Storyline 2. Click the image below to begin.