We want to show you how to create a fun and simple Augmented Reality learning experience.
If you haven’t seen Part 1 of the tutorial, please take a look at what we’ll be creating by scanning the QR code that you can find in the bottom left corner of the image above and enabling the camera to see the AR content on top of the book cover image:
After creating the 3D models (Part 1), you need to go to Hololink’s editor at https://editor.hololink.io and click Create New hololink.
Give the Hololink a name and click Create, which will take you to the storyboard. Once there, click on Scene 1 and go to the interface.
The interface should have a text and a button. Add a text box and set it’s width to full. Then add a button and set it’s width to ⅔. Then give a background color, (we chose yellow), and type the text “Continue” on the button. Move the button almost to the bottom of the interface, while keeping the text at the very top of the interface.
Then, go back to the storyboard. For this interactive AR experience, the storyboard needs to have different scenes, so we’re going to duplicate the scene 5 times to have 6 scenes in total.
Rename all the scenes so you can distinguish between them (We chose Scene 1, Scene 2, Scene 3, Scene 4, Scene 5, Scene 6).
Then, go back to Scene 1 and go to the interface. The ‘Continue’ button needs an action type. Set it to ‘change scene’ with the target scene set to Scene 2.
Next, add the text for the white text box. Remember that you can personalize the background color and the width. The text here should be “Volume = The space occupied by a 3D (three-dimensional) object”.
Go back to the Storyboard and click on Scene 2 to edit the text so that it says “Volume = Length x Width x Height.” Next, the ‘Continue’ button needs to be set to “change scene” with the target scene set to Scene 3.
Add one more text to this interface, with width set to Full. Pull it further down the interface and write the text “V = LWH” in it.
Now go back to the storyboard and open Scene 3.
Scene 3’s text should be “Volume of the cube V = 1 cm x 1cm x 1 cm= 1cm3” and the button should change the scene to Scene 4. Now close the interface and click Upload in the left hand vertical bar to find the 3D model we created with Tinkercad (Tutorial Part 1).
Select the model YellowCube.
First rescale YellowCube by setting it’s Scale to 0,01. Pull the blue and red gizmo arrows to center the model on top of the anchor image. To make sure that the model floats a bit above the anchor image, set the height to 0.25 (and make sure to use the same height in all the scenes with models).
Then, click the ‘back’ button to go to the Storyboard, where we’ll continue with the following scenes.
Go to Scene 4, where the text should be “We add 11 more cubes” and the action for the button should change to Scene 5. Click the back button, so you’re not on the Interface and click Upload to add the TwelveCubes model. Resize it to 0.01 and adjust the height to 0.25. Adjust the position with the gizmo.
Go to Scene 5 and in the interface set the text to “they become a box with volume V= 2 cm x 3 cm x 2 cm= 12 cm3”. The button should take the user to Scene 6. Click the back button and add the last model, which is TwelveCubeBox. Rescale it and adjust the height, as you did with the other 3D models.
Go to Scene 6’s interface and add the text “The volume of an object is equal to the number of 1 cm3 cubes needed to create it”. This time, the button should say “Learn More,” and the action type should be Open link, add any link you want, for example to your favourite maths site. We’ve just added the link for Google, as we didn’t have a maths site to link to.
Go to the Storyboard and click the preview window so that you can change the anchor image.
Click Change anchor image and upload a picture that you want to use. We’ve used the front page of a Danish Maths book, but you can use anything you want to. Remember that we use square anchor images, so if your phone has a square photo option, use that and take a photo of the book/poster or whatever that you want to use. Then send the photo to your computer, so that you can upload it.
Now the hololink is ready! Scan the QR code and enjoy the hololink experience for learning 3D volume.
P.S. We took a screenshot of the QR code from the screen, printed it and glued it to the front of our book, as seen in the image at the top of the article.
Hope you’d enjoyed it! If you want to watch a video tutorial of this AR experience, click here.
And once you’ve gotten the hang of it, we can’t wait to see what you’ll create!
