Interactive Image Slideshows in AR
Creating an interactive presentation using Wiarframe
In this tutorial, we’ll use the wiarframe editor to upload a sequence of 2D images and create an interactive slideshow. We’ll then use the Wiarframe app to preview it in AR.
If you haven’t already, sign up for a free wiarframe account, get an overview of the platform, and check out these introductory tutorials for displaying an object in AR and animating a 3D object in AR.
To get started, create a new room type wiarframe, about 2m square, and call it ‘Tap to Continue’.
Adding a 2D Image Object
Click on the scene canvas to bring up the new object form, and let’s create a 2D object. We’re going to upload a sequence of images, if you don’t have your own you can download some sample images. Upload the images, name the object ‘Presentation’ and hit Create.
Adding Properties
We don’t actually need to do anything to make it interactive. If we look at our created object, we’ll see that it has multiple action tabs that change the image — we can change the specific image associated with an action any point. It also has an interaction that performs the next action in the sequence whenever the user taps — you can change this to any other gesture if you want.
What we can do though, is reposition and rescale it to make better use of the available space.
Making it a Billboard (optional)
We can bind our object’s rotation to the camera, so that it always faces the user. This technique is often called Billboarding, and can help improve visibility. To do this, click the Additional Property button at the base of the object inspector, and select Rotation Binding from popup menu — be sure to add this to the Initial Properties not an Action, as we want to this be applied by default. In the new drawer, set the object to be bound to the camera and always looking at it.
Experience it on mobile
Let’s view it in the App. If you haven’t already, download either the iOS or Android app.
http://bit.ly/wiarframe-ios
http://bit.ly/wiarframe-android
Launch the App, log in, then select and load the ‘Tap to Continue’ wiarframe. You’ll need to move your device around so that the camera can detect the floor. Tap on it once detected. and begin the experience.
One Last Thing
Add a description, and upload a thumbnail. Either, reuse one of the images or take a screenshot from the app and upload that in the editor — tap on the Cog icon in the header bar to bring up the wiarframe settings. You can also save this to your ‘Getting Started’ collection.
Next Steps
Try changing the gesture that triggers the interaction, or adding a new interaction to the final Action which resets it to the default.
