Let the audience decide when to shift the image, differently from the non-stop timeline loop.
*ONLY AVAILABLE FOR SELECTED PLANS!
Assemble photos in an image carousel slider with interactivity feature. Check out the result below:
In this tutorial, we are going to create a simple four photo carousel. You can find the images used for the campaign above on this zip file, or you may set your own images.
Besides creating a campaign from scratch, we are going to use interactivity feature. If you don’t know how to use interactivity, we highly recommend you take a look at the following tutorials to better understand the topic:
- How to create a interactive campaign
- How to create interactive menus
- How to create expanded interactive menus
- On your OnSign TV account, click on “Create a Campaign”. Fill the basic info, such as name and category.
- A carousel slides consists of three basic elements: a photo frame and two buttons to go back and forth the pictures. Hence, click on “Add Custom Layout” and create a zone for each item. We have also created a screen zone for the background image.
- Upload to OnSign TV the images you are going to use on this specific campaign. Place the the buttons on their respective screen zone, place the image background and a single photo of the carousel.
- Publish the campaign to a player. When you reach “Published to these players” page, select “Interactivity” on the left menu below the campaign thumbnail.
- Now we are going to give interactivity to our carousel slider! Before setting up actions, decide the carousel photo sequence. We have used the following sequence to the pictures available at the zip file: IAdea.png > j22.png > minix x5.png > minix x7.png > IAdea > j22 (...) .
With the sequence set, we need to set an action to both buttons around each photo. It is important that the action just happens to a specific photo, so we need to apply filters to each action.
Let’s set first the action to the next button when IAdea photo is exhibited on the campaign. Fill the fields as following:
Don’t place more than one photo to the carousel frame, or else it won't obey the button commands we will set later, playing non-stop on loop.
- Action:Touch region
- Which one: Region four, which is the “next button” region
- Action: Replace
- Destination: Region 2, which is the photo frame
On the row below, we are going to set a filter so it only changes to the next photo on the sequence (j22.png) when the specific photo is diplayed. So, only when “IAdea.png” is being displayed the next button action will change it to “j22.png”.
- When playing: IAdea
- With Media: j22