Layar

Add Fun Interactivity with Clickable Image Carousels

By Chris Cameron on Mon 6 May 2013

Not long ago we added a new dynamic widget to the Layar Creator: the Clickable Carousel. Basically, it works just like the existing Image Carousel widget, but offers the ability to add links to each image so users can tap them to visit various links.

There are several cases in which this widget is very useful and fun for the user, including the example in the video tutorial above which we created. We added various dresses and hats to a model that you can swipe through to mix and match styles, and clicking on the images takes you to the mobile shopping pages for those items. You can try it by scanning the image below.

Other great examples have emerged from the community already! One user added the various body systems (muscles, organs, nerves, etc.) as slides on top of a skeleton image. Click here to view this example and scan with Layar!

This gift guide shows users different colors and styles for a bag by letting users slide through and click the one they like! Scan them with Layar to see how Clickable Carousels can add interactivity to your print content.

To make your own Clickable Carousel, just follow these steps:

  1. Drag the widget onto your page
  2. Click “+” to upload the first image
  3. Add the URL it should link to
  4. Repeat steps 2 and 3 until all images are added, then click “Apply Changes”
  5. Resize and reposition the widget
  6. Test and publish!

Check out the video above or scan the image below to see how it works, and log in to the Layar Creator today to get started making your own! 

Add a comment Permalink: www.layar.com/blog/488/

New Best Practices Guide & HTML Tutorial

By Chris Cameron on Wed 17 Apr 2013

It’s been a few months since we first published our Best Practices Guide for the Layar Creator, and a lot has changed since then! So here we are with a completely refreshed and updated guide filled with loads of new insights from successful interactive print campaigns.

In our new guide, titled Steps to Effective Campaign Creation, you can find lots of great tips to make your next interactive print campaign your best one yet. In the guide you’ll find:

  • Getting started with interactive print
  • Best practices for the Layar Creator
  • Concepting your campaign
  • “Dos and Don’ts” for instruction pages, calls-to-action and more
  • Testing your campaign
  • Integrating interactive print into your workflow
  • And more!

We’ve worked very hard to create a friendly guide that should help improve your interactive print campaigns, but let us know if you think anything’s missing or if you have any questions. Just mail georgia@layar.com to get in touch.

Click here to download the all new Best Practices Guide.

Not long ago on the blog we featured HTML Week and the all new HTML-infused LAYARED Magazine. Now we’ve got a great HTML Widget tutorial that shows some of the capabilities of the HTML Widget.

One way to offer readers more content in a single space is to create an HTML Widget with expandable and collapsible content areas. It’s great for adding an FAQ, images or extra product information to your printed pages in a way that’s friendly to users and easy to build.

Follow this link to check out the tutorial and download our example template to build your own!

Add a comment Permalink: www.layar.com/blog/482/

HTML Week - Walkthrough Tutorial

By Chris Cameron on Fri 15 Mar 2013

Catch up with HTML 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!

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!

Add a comment Permalink: www.layar.com/blog/469/

Using Custom Colors in Layar Creator

By Chris Cameron on Thu 20 Sep 2012

We recently released an update to the Layar Creator that makes it even easier to customize your Interactive Print. Now, the normal blue buttons can be whatever color you want them to be, allowing you to coordinate the color pallet of both your print materials and the interactive buttons you place on top of them.

You can use any of our pre-selected default colors, pick from the color wheel or enter in a hex color code to really choose the perfect color.

To see how you can use you own custom colors in the Layar Creator, check out this really quick tutorial video. 

Add a comment Permalink: www.layar.com/blog/424/

New Video: How to Use Layar

By Adriane Goetz on Fri 16 Sep 2011

For many people, Layar is their first foray into an Augmented Reality browser, so we created a video to quickly walk new users through the application (using v5.0.3 for Android).

The goal of this video is to familiarize you with the app interface and browsing options so you can easily find and view all the great AR content on the Layar platform. 

Read more »

Read comments (2), or add a comment Permalink: www.layar.com/blog/339/