The holiday season is all about giving and caring and all those warm and fuzzy feelings, but for the Humbugs, it’s a time to be grumpy, greedy and downright rude!

Zehnder Communications, an American design firm, is using Layar to bring their latest creation, the Humbugs, to life. These fun-hating killjoys are featured on a set of free printable paper Christmas tree ornaments that spring to life in all their nastiness when scanned with the Layar App.

“These crude-rude, seedy-greedy creatures slink about in mockery of this most joyous season. And now it’s time to take a stand,” Zehnder’s website declares. “This year, Zehnder has devised a new way of exposing the Humbugs by adding a little cheer to the holiday at their expense.”

You can even battle against the Humbugs in a side-scrolling adventure game! But the real fun comes from seeing the paper ornaments come to life when you scan them with the Layar App. Enjoy!

About Zhender: Zehnder Communications, a full-service advertising agency, was one of the first agencies in the U.S. to venture into Augmented Reality in 2009 with its Voodoo Music Experience app. The app, featured in Fast Company, was one of the first of its kind — innovative apps for brands like Sony and Disney parks soon followed. Zehnder serves clients across the country from its offices in Baton Rouge, Nashville, and New Orleans. The agency was founded in 1996.

^{Welcome to HTML Week here on the Layar blog where we’ll be taking a look at some of the great ways you can bring print alive with HTML widgets in the Layar Creator. We’ll provide a closer look at how each example was built, and provide you with some resources to add similar techniques to your own projects. Each example we feature can be found in the completely refreshed and updated LAYARED Magazine! Get yours today and see how interactive print is creating more engaging reader experiences!}

To kick off our series of HTML Week examples, we’ve got some fun that everyone can enjoy – puzzles and games! Adding some entertaining interactivity to otherwise static print makes for a more enjoyable reader experience, increasing the value of your publication.

Newspapers, magazines and other publications have long included simple crosswords, word jumbles or sudoku puzzles, but now things can get really interesting with interactive print! Check out the two examples below which can be found in the new LAYARED Magazine.

Drag-n-Drop Puzzle

The Drag-n-Drop Puzzle (found on page 8 of LAYARED Magazine) is a quick and easy way to add some fun to any kind of content. By simply cutting up an image into as many parts as you like, you can create a puzzle for readers to solve by dragging the pieces into place on their smartphone or tablet.

This example shows off the “draggable” capability of jQuery. It’s straightforward and easy for readers to understand – first you see one piece float up and snap into place, and then you have to do the same with the remaining pieces. Here’s more about this HTML example and how to make your own.

• Puzzle Pieces are created by splitting any image of choice into desired sections.
• Pieces are made “draggable” by using the “touch-punch” plugin explained and found here.
• Draggable and Snap UI can be found here.
• You could alternatively allow all puzzle pieces to be shown immediately from the beginning.
• To create a smoother look on the Layar App, the “light beam” effect (when the puzzle is loaded) was made using only jQuery and two images of light beams.
• The widget also offers a “Play Again?” button that refreshes the widget.

The Drag-n-Drop code may sound complex but the idea behind it is simple. First we placed a black-and-white version to serve as the area where all the puzzle pieces would end up. This doesn’t have to be done but we thought this would make it easier for users to see where they would be dropping puzzle pieces. If you want to have the puzzle snap into place above the physical image in your print content, simply remove the background image.

The way the snap feature works is one HTML “<div>” snaps onto another. For this puzzle to work, all you have to do is make one image snap onto an invisible copy of that image.

You need a piece to drag and a piece to snap onto and they need to be the same, so you just duplicate your puzzle pieces. You should have two of each piece, those for the user to drag and the others for them to snap onto. You then place the snap pieces where you want the pieces to fit together, but make them invisible, otherwise it will look as if the puzzle is already put together!

Now, when you drag the other visible pieces over the invisible ones, the drag designated pieces will snap into the correct place. Since the invisible images can’t be seen, it will look like the visible pieces are snapping into place on top of the black and white background, and presto! You’ve got a really fun and interactive puzzle game with very little effort.

Scratch-Away Game

People love scratch-away games of all kinds. The Scratch-Away Puzzle (found on page 27 of LAYARED Magazine) implements this brand of fun in AR. After scanning the page with Layar, readers simply scratch away at the puzzle to reveal the hidden message. Here’s more about this widget:

• Uses Canvas and Javascript, which you can find here.
• Users essentially scratch away normal image to reveal solved image below.
• Alternatively, a drawing feature could be added so that user can “paint” onto a canvas.

The Scratch-Away Puzzle may seem like complicated code, but it isn’t. The way we use the Canvas in our demo is by first layering two images on top of one another. One is the picture you see at the beginning, and right below it is the image with the appropriate letters blurred.

When you drag your finger across the screen and “scratch” it, you are actually erasing the front image and revealing the image behind it. It’s really as simple as that. This code can, of course, be reversed or a paint element could be added to create a canvas where a user can draw anything that they want.

That’s all for Puzzles and Games found in LAYARED Magazine. These examples were built with very basic HTML tools and techniques, but can add a lot of great interactivity to your print products!

Stay tuned here on the Layar blog throughout HTML Week for more great examples!

Gamers around the globe have been anticipating this week’s release of the next saga in one of the world’s most popular videogame franchises - Assassin’s Creed 3. For those in the Netherlands, a new ad campaign from CBS Outdoor Advertising and Bol.com provides a special discount for anyone who scans a new billboard ad and buys the game.

As seen in the photo to the right, the ad has begun popping up in Holland’s many train stations. Eager gamers can scan the ad to see a video trailer of the game and instantly buy the game with a €5 discount on Bol.com, the largest online retailer in the Netherlands and Belgium.

This summer, we announced that Bol.com had hooked its database of product packaging (books, DVDs, games and more) into Layar, enabling users to shop for products online by simply scanning them with Layar. Now, Bol.com is taking part in a new kind of Layar campaign, one on a much larger scale!

This is a great example of the versatility of the Layar Creator. Whether your print is as small as a business card, or as big as an outdoor billboard, the Creator can quickly and easily add engaging digital content on top. By offering a discount, Bol.com is enhancing the viewer experience and providing valuable engagement with their advertising - a concept we heard Nissan discuss recently at our Toronto event.

Perhaps the best aspect of the Assassin’s Creed III campaign is the large and clear call-to-action. Translated, the text reads “Scan with Layar for discount!” The capitalized red text makes sure people see it, and the Layar logo lets people know they need to download the app to scan it.