Forum Discussion
Storyline: Interactive Photo Collage
Lists and buttons are the typical go-tos for creating menus. But if you have content that loans itself well to visuals, why not consider an interactive collage instead? In this example, learners can tour a collection of beautiful travel locations by simply clicking each image.
Want to create a similar menu? Storyline 360 makes it easy with states. They’re a simple solution for allowing learner actions to change the appearance of an object. To make each image interactive, select it and open the States panel. Next, create two new states using the built-in options from the dropdown list: hover and visited. Customize the look of each state using Storyline 360’s image recoloring options or your favorite photo-editing software. Then finish up by adding a trigger that links to the related content.
Repeat those steps for each photo and just like that you’ll have an interactive collage that can track which content learners viewed!
Want to try building something similar in Storyline 360, but don’t have Articulate 360? Start a free 30-day trial.
13 Replies
- Any chance you can share this template?
- Hello! Thank you so much for your comment. Unfortunately, I no longer have access to this profile, so I'm not receiving any notifications.
After some digging, I found the walkthrough and template for this one. However, I think it may be a bit complicated since I used illustrator and photoshop to create the images for the hover states.
You can find the walkthrough and storyline file here:
https://www.dropbox.com/sh/3vijh3rf4vzzyxu/AACvXFa5_bcIvnSts0GXrU3ha?dl=0
- Yes, please - it is great!
- Samara this is beautiful and clever!! Love it!
Depending on how the hover and visited states are set up for the first menu image, the format painter may be able to copy the states to the other menu images (or at least do some of the work). - Great job, Samara!
- Loved it.
- Really like this. On your layers you have it cycle through picture, how did you get that effect?
- If memory serves me right, I used states on a basic shape for the imagery. Then I used triggers to change the state of the object to the desired picture when the timeline reaches X seconds. You can find a copy of the Storyline file here:
https://www.dropbox.com/sh/3vijh3rf4vzzyxu/AACvXFa5_bcIvnSts0GXrU3ha?dl=0
- So nice!
- Magnifique ! Beautiful !
- This is really amazing! Visually appealing, and beautifully done!
- Beautiful job Samara! Simple and effective. Many thanks for sharing your file.
