As we mentioned earlier this month, we’re running some experiments with scannable content in the Layar App.

By building these experimental initiatives in the Layar Creator ourselves, we want to bring Layar everywhere and raise awareness for AR and interactive print across the globe.

As of today, along with the ability to scan the latest top movie posters, you can also now scan your cash! If you’ve got paper money burning a hole in your pocket, chances are you can scan the bills with Layar right now and experience AR and interactive print.

Each side showcases the dynamic abilities of the Layar Creator. On one side you’ll be treated to a presentation of interesting facts about your currency. You might learn a thing or two about the money in your hand that you never knew before. 

Flip it over to see a spinning 3D model of a shopping bag. Tap it to launch a Geo Layer of places in your area to shop and spend that cash! Just hold your phone up and look around to find shops, ATMs and more in your area.

Right now, you can scan paper currency of U.S. Dollars, Canadian Dollars, Euros, British Pounds, Indian Rupees and Thai Baht. Click the examples below to try it yourself!

Why are we doing this?
We’ve noticed that after downloading the Layar App, people are eager to try it out immediately. If a magazine or newspaper they read isn’t using Layar, the experience can be confusing and frustrating.

We have two main goals with this project, and our first is to make it easy for anyone to experience interactive print right away! Over the coming weeks and months, we’ll be launching more campaigns like this one to provide easy and readily available ways to take the Layar App for a test drive.

You can do it too. Join us!
Our second goal for this project is to offer inspiration to others to start augmenting the world around them with their own custom digital content. We would love to see the entire world’s currency scannable with Layar, and we hope this inspires others to join us!

With the Layar Creator, it’s easy to bring print and other items to life with digital content. Just upload the page or image of the item you want to enhance, drag-and-drop content on top and publish!

And it doesn’t end with movie posters and money. There are lots of things around us in the world that would benefit from being scannable with Layar, and we’ll be showcasing more of these examples in the coming weeks!

Have a great idea for items that should be enhanced with augmented reality? Have a big database of images you think should be made interactive? Is your businesses looking to add AR to its products?

Don’t hesitate to do it yourself in the Layar Creator, or contact us and we’ll talk about collaborating on a project! We’re eager to talk about how we can help you achieve your goals. Drop us a note to get started!

Queen’s Day, a huge public holiday this Tuesday in the Netherlands, has a rich history with Layar. Just last year, the local newspaper where the Queen herself was to visit enhanced its pages with extra content about the royal visit using Layar. It even provided a link to a livestream of the day’s events for supported devices.

This year, it’s not just Queen’s Day – it’s also the coronation of the new King (yes, next year it will be King’s Day) and with this evolution comes more evolution of augmented reality and interactive print with Layar.

A new Dutch augmented reality agency AugmentNL has come up with a unique way to use some of the most prominent space in Amsterdam as interactive print. The tall and wide Overhoeksgebouw has long been a popular Amsterdam ad space and is currently draped in a decoration for Queen’s Day. Scanning this side of building liberates this space to the people of Amsterdam, letting them post messages and drawings for all to see.

For those in Amsterdam this week, by scanning the side of the Overhoeksgebouw you can view the latest tweet featuring the hashtag #FelicitatieXXL and add your own drawn graffiti to the side. This teaser project from AugmentNL shows the wide audience a simple interactive print ad campaign can have when placed in a prominent location.

Using the dynamic widgets available with Layar’s technology, AugmentNL can provide a live feed of tweets along with an interactive canvas for drawing right on the side of the building. It’s certainly a unique idea, but with Layar it’s simple and easy to implement very quickly.

So if you’re in town for Queen’s Day, scan the Overhoeksgebouw by the IJ river and see how interactive print isn’t just for magazines – it’s great for providing interactivity on large outdoor advertising as well!

^{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!}

It’s the final day of HTML Week here on the Layar blog, and we saved a really great example for last!

In the very middle of LAYARED Magazine – pages 16 and 17 – a two page spread advertises the Layar Creator, including the quick steps to making interactive print. The illustrated spread provides a great overview of what it takes to use the Layar Creator, but scanning the page takes this to a whole new level.

Using some of the same basic HTML tricks we’ve been featuring throughout HTML Week, we created an engaging, animated walkthrough of using the Creator. Readers are directed to tap through the various steps of uploading pages, adding augments and publishing a campaign. Just follow along and tap the “Tap Here” buttons and you’ll be a pro at the Layar Creator in no time.

It’s a great example of how the HTML Widget in the Creator can be used to provide an immersive experience for readers. Here’s more about this widget:

• Uses similar jQuery techniques from other HTML Week examples.
• Uses the FlexSlider plugin for the slideshow at the beginning.
• The steps are a series of screenshots from the Layar Creator.
• Includes a “View in Fullscreen” button so users can follow the tutorial without needing to hold their device over the page for an extended period of time.

Again, this example seems more complex than it actually is. Using the FlexSlider plugin mentioned above, we created a few basic slides to introduce the walkthrough widget. When a user taps on a step to enter the tutorial, the slider fades away.

The green “Tap Here” buttons are very simple as well. It’s essentially three different elements that fade in and out on top of one another to produce a nice effect that encourages the user to tap the icon. Using timing and opacity options, the inner circle first fades in, followed by the outer rings. Then the inner circle fades out leaving the rings to guide the user.

The rest of the widget is simply fading from one screenshot to another, triggered by the user tapping the icons. It’s a very simple implementation but in this case it goes a long way toward educating readers of LAYARED Magazine about how the Layar Creator actually works.

After running through the 6 steps, readers are then familiar with how to create interactive print and are ready to hit the ground running when they use the Creator on the Web for the first time. This same widget could be used for any of a variety of purposes, from an app tutorial to instructions on constructing your new furniture. As with all HTML widgets, the possibilities are only limited by your imagination.

And that wraps it up for this example and HTML Week. Follow the links above to review all of our widget breakdowns from this week!

^{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!}

Today for HTML Week we are taking a look at one of our several ecommerce solutions found in LAYARED Magazine. Print is often advertising a product being sold, and now readers can buy items right off the page with interactive print!

We have multiple mobile shopping examples in LAYARED Magazine. On page 18, scanning the advertisement for a men’s briefcase brings up photos and information on similar products, and on page 22, you can interact with detailed information about the products found in the photo spread. But be sure to check out page 20 where things get really interesting!

Simple Shopping Cart

Everyone these days is familiar with an online shopping, and some may have even purchased an item from the mobile device via the web. In this example, we offer a way to bring the shopping cart experience in augmented reality with interactive print.

Essentially this example is a proof of concept, showing how the Layar App can handle “cookies” of information which can be translated into an actual shopping cart experience. On page 20 of LAYARED Magazine, you’ll see an ad for several products, including a wristwatch. Scanning with Layar displays two widgets – one for picking a color and adding the item to a cart, and one for viewing your cart info and proceeding to checkout.

When a user taps on one of the three color squares, the color of the watch in the magazine changes, much like in a traditional web-based shopping experience. This is accomplished with some simple jQuery code. There are many ways to accomplish this effect, but we chose the simplest route.

First we stacked the three different images of the watch on top of each other, but set two to be “hidden.” When a user taps on one of the colored swatches, the corresponding watch image is set from “hidden” to “visible,” and the watch which was previously “visible” is then made “hidden.” It’s a really simple, quick and easy way to showcase different colors of products with interactive print.

Tapping “Add to Cart” then stores the chosen product as a “cookie.” The top widget tracks the changes on this “cookie” and changes the number of items whenever a product is added to the cart. Readers can then tap the link to proceed to checkout with the shopping cart they have filled. In our case, it’s a dummy shopping cart so no product can actually be purchased, but it shows how a shopping cart experience can easily be implemented.

Layar behaves like a normal web browser, which means you can use normal HTML tactics to display different AR content based on user input, providing for a more personalized experience for readers. Here’s more about how this widget works:

• Uses jQuery and “cookies” to save information.
• Multiple “Add to Cart” buttons and widgets could be used.
• More features and options could be added: color, quantity, size, design, etc.
• The ultimate version of the shopping cart widget would allow one widget to be used throughout an entire campaign.

More: Photo Grid & Animated Ad

Of course, the shopping cart isn’t the only ecommerce example found in LAYARED Magazine. Check out page 18 for a dynamic photo grid and page 22 for an animated advertisement. Here’s a little more on how we made these great interactive items.

For the photo grid, we wanted to showcase some similar products to the one in the photo. Using similar jQuery tricks we mentioned yesterday with the Lonely Planet map, we created some slick animation effects and slideshows to provide more information about each product. Alternatively, you could add “Buy now!” buttons for each product and connect it with a shopping cart widget.

The animated ad on page 22 was created to show off the possibilities of simple animation with jQuery. Tapping the button which appears on the page animates more buttons which hover over the various products. Tapping these buttons triggers slick animated windows that provide the reader with added information about the product.

Like a lot of HTML examples, it seems complicated but is actually relatively simple to create using the jQuery tactics we’ve gone over so far in HTML Week.

That’s it for today’s examples! Be sure to keep it here tomorrow as well as we wrap up HTML Week with our final widget example!

^{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!}

Next up for HTML Week we share a really great way to get readers interacting with your print products: maps! Whether you’re providing travel information about far off locales or just trying to help people find your local business, a map does the trick best, and a little interactivity can go a long way!

The interactive map that we added to the “Lonely Planet’s Travel Guides Just Got Better” article on page 12 of LAYARED Magazine is a perfect example of using interactive print to provide extra detailed information to readers.

Just scan the page and up pops a map with different locations throughout the world highlighted. The cities are from Lonely Planet’s annual list of top destinations. Tap one of the icons and photos and links for more information slide out of the bottom of the map. Each city features a YouTube video, links to airline and hotel services, additional country information and a link to download the Lonely Planet app.

Like the Superhero Puzzle from yesterday’s post, this example uses jQuery to produce the animation, namely the “.animate” function. Here’s how we did it.

The points on the map were placed “by hand” with CSS on their corresponding positions on the map. It’s a little time consuming to get right, but easy in the end. The smooth drop effect for the info pane was made using only simple jQuery code. After the map fades in, the info pane fades in behind it, remaining out of view.

When a user taps on one of the map points, three things happen. First the map point becomes white, which is accomplished simply by switching the image with an alternate white version. Second, the pane is dropped by using the jQuery “.animate” code function to increase the top margin. And lastly, all of the elements in the info pane, corresponding to the country map point that was clicked on, are loaded into the pane. When a user taps “View More,” the preliminary content fades out and the new slideshow content fades in.

The slideshow is also very easy to build using a trick with the “overflow:hidden” option for HTML “<div>” tags. Essentially, we created a smaller window ”<div>” through which a larger ”<div>” with the content passes through. That’s just how we did it, but there are lots of ways to create slideshows with basic HTML. Check out this resource for tips.