Too many buttons will quickly look cluttered. If you have more options to share with your audience, you will need to create a second menu. Learn how to create an expanded menu in the instructions below.

We use an Interactive Campaign which we showed in the previous interactive menu tutorial. We recommend you follow that tutorial first.

To make this a smooth affair, we will change the Campaign Layout from one to two regions. This way, the menu stays on the right, while the text boxes in the middle change with the interaction.

To correspond with this setup, we will create individual Compositions for each text box, as well as one blank Composition as initial filler in the new second Campaign region since a Timeline cannot be empty.

1. Easiest first. Let's start with the blank Composition. The width and height of the Composition has to match the width and height of the second Campaign Region. 
   In our example, the text region will take up a window of 1200 x 800px.
   Create a new Composition. It will already come with a transparent canvas. Adjust the width and height to 1200 x 800px. See step 4 of the Composition tutorial.

   

2. Next, create your first text Composition by duplicating this initial Composition so that you instantly get the matching width and height. Change the background color to black and add the first text.  

   

3. Our menu offers six topics. Therefore, we will create six text Compositions in total. Duplicate the first text Composition five more times and change the text in each of them. 
4. In the end we should have six Compositions. To keep them apart, let's name them 1-1 for the first text on the first menu, 2-1 for the second text on the first menu, all the way to 3-2 for the third text on the second menu. You can put these Compositions aside for now.

   

5. Change the Campaign Layout of the Campaign we created in the previous tutorial to have a second region. Confer how the width and height of this second region are the same as the text Compositions 1200 x 800px.
6. Insert the initial blank Composition into this new Timeline.
7. Let's go back to our Composition from the previous tutorial with the menu on the right side.
   For an expanded menu, add a triangle shape in the bottom right corner which marks where the menu expands. The shapes tab in the Composition menu make it easy to add a triangle. For better distinction, name this Composition the “first menu”.
    
8. Duplicate this “first menu” Composition and rename the duplicate to “second menu”. Then rotate the triangle by 180°. Simple and easy with a Composition.

   

9. Go to the Triggers and Interactivity menu of your interactive Campaign. The initial “first menu” Composition with the new triangle has instantly been updated. 
10. We have to make adjustments to the triggers from the previous tutorial. We should have three triggers, one for each menu item. In the Action setting, the text Compositions will now not play in the Playing Loop any more, but in Region 2. Do this for all three triggers.
    

    

11. Duplicate one of the existing three triggers. This fourth trigger will be for the forward button.
12. Set the touch region to match the location of the forward arrow.
    

    

13. As Action, this trigger should play the “second menu” which will be a Campaign we still have to set up. For now, use any placeholder in this trigger and have it play in the Playing Loop instead of Region 2 of the previous triggers. Save the forward trigger.
14. Briefly leave this Campaign and duplicate it to create the Campaign with the second menu and its corresponding text Compositions.
15. Exchange Timeline 1 for the Composition with the second menu. Timeline 2 stays the same with the blank Composition.
16. Go to the Triggers and Interactivity settings of the Campaign and edit each trigger by exchanging the text Composition they shall execute. The backward trigger shall execute the first menu Campaign. 
17. Go back to the first menu Campaign and exchange the placeholder in the forward trigger with the second menu Campaign. 
    For the first menu Campaign, you will have these four triggers:For the second menu Campaign, you will have these almost identical four triggers:
18. If your first menu Campaign was already published from the previous tutorial, the you are finished and can check out your interactive Campaign with an expanded menu on your Player. 
    If you haven't published this Campaign yet, then please publish only the first menu Campaign. The second menu Campaign will not be published. It will play only when the forward button is pressed.

Interactive Menu for OnSign Player App versions prior to 10.0.0

For player app versions before 10.0.0, you will have to use the legacy interactivity editor.

We build on the previous interactive menu Campaign. All files were already provided in the download set of images. 

Follow the instructions below to create a second menu.

1. For an expanded menu, create a menu image with a next icon at the bottom (see image below). Replace the menu image in your Timeline with this new menu image.
   

   

2. Add a screen division for the next button. At most, a Campaign Layout can have ten screen divisions. In the Timeline, drag again a transparent PNG image to this Timeline like you did for the other three buttons of the Campaign from the previous tutorial.
   

   

3. Create a second menu image. It should have different buttons and a back icon at the bottom (see example below). Upload this image to your OnSign platform, but do not place it into the Timeline.
   

   

4. "Save" the Campaign.
5. On the newly loaded page, click “Triggers and Interactivity” on the sidebar menu.
6. Using the legacy interactivity editor, click the "Add Interaction" button. We will set all remaining interactions to our buttons.
   Our first goal is to trigger the second menu when the “next” icon is clicked. Fill out the settings as shown below:
   

   

   • Which one: Region 6 (next button).
   • Action: Replace.
   • Destination: Region 2, as we want the menu to change.
   • When playing: Because the next button belongs to menu 1, set the action to be carried out only when “menu 1” is playing.
   • With media: Select “menu 2” and confirm with the checkmark icon.
7. The next button will now lead to the second menu. Therefore, we need to add filters to all actions which are already set for the menu 1 buttons. Set "menu 1 (with button)" for the "When playing" field. This will avoid that any content from menu 2 is shown when we click a button from menu 1.

   

8. Then, we need to set up all actions for the second menu. Instead of choosing "menu 1" for "When playing", we have to select "menu 2". Choose the files your option buttons should trigger in the “with media” field.

   

9. At last, configure the "back" button on the bottom for changing the menu back again.

   

   Tip: When you replace media items on a screen zone, set long display durations to allow the user to navigate freely through the content. If you keep a shorter time duration, it may happen that the user is interrupted while reading the text.

    
10. Hit “Save” when you are done. Wait for the Player to synchronize the modifications and check out the outcome on screen!