How to create interactive buttons

Allow your audience to interact with your campaign at the touch of a button.

*Supported on screenpublishing App for Android 4.2.0+ and Windows App 9.1.1+

 

Before you create buttons, you have to establish where the button on your screen is going to be and what the button is supposed to do. For designing the image with the button, you can use the Composition creator.

Let’s walk through a very easy scenario where you just want to have one button on screen that will give out an aquarium image at clicking it.

  1. Go into your screenpublishing account and create a composition with a blue background and an orange area where the button is going to be.
    campaign button
  2. Next, create a new Campaign. Name the Campaign and then create a new screen layout that matches the composition you have designed. We have the background area (A) and the button zone (B). The more accurate you are with the position the better.
    interactive button layout
  3. Now, we add the composition we previously created into the Timeline in area A. For area B, we use a transparent png image. In the Timeline, you will not add the image of the aquarium we want to display at the click of the button
    interactive button timeline
  4. “Save and Publish” the Campaign.
  5. On the newly loaded page “Publish to These Players”, click on interactivity.
    interactive button interactivity
  6. This is the last step. You need to set the rules for the interactive button. Click on “Add Interaction” and fill out the fields as follows:
      • What: Touch regionWe want the touch of the button to provoke the image change.
      • Which one: Region 2This is our button.
      • Action: ReplaceWhen the button is clicked a new image will display.
      • Destination: Region 1The image will be displayed on the main screen area (A).
      • When playing: Any mediaSince we only have one item in area B in the timeline, any media is fine.
      • With media: our Aquarium image
      • Duration: For as many seconds as you like

    interactive button interactivity rules

  7. Click on the check mark and “Save”. You are finished.

Once, you have mastered setting buttons, there are many other fun things you can do with interactivity.