← BACK

This tutorial will provide you with a framework to create a Studio project that highlights a product or service, where the user can customize different aspects of the product. The setup and functionality used in this tutorial is also used in the “AOBass” template in Studio. By the end of this tutorial you’ll understand how to create a unit that swaps through variations in color of a product.  

Download project for this tutorial

 

Step 1: Project Setup
  1. Create 3 scenes using the following naming conventions:
    1. Choice_01
    2. Choice_02
    3. Choice_03
Step 2: Scene Assembly
  1. Select Scene Choice_01
    1. Click and drag from the assets panel to add the asset product_highlight_1.png
    2. Name this image element choice_01_image in the Properties panel. You will see the image appear in the Layers panel.
  2. Select Scene Choice_02
    1. Click and drag from the assets panel to add the asset product_highlight_2.png
    2. Name this image element choice_02_image in the Properties panel. You will see the image appear in the Layers panel.
  3. Select Scene Choice_03
    1. Click and drag from the assets panel to add the asset product_highlight_3.png
    2. Name this image element choice_03_image in the Properties panel. You will see the image appear in the Layers panel.
Step 3: Connecting Scenes
  1. Once you have each of the scenes populated with their corresponding images. We can get started with assembling the manner in which they connect. Begin by going back to scene Choice_01.
    1. In Canvas view, click and drag a “Go to Scene Button” into the window. We are using a Go to Scene Button because it will allow us to reuse the element without having to create a transition out of every scene.
    2. Place the element over the second button at the bottom of the screen, and name it choice_1_button.
    3. In the Properties panel, make sure that in the Go to Scene drop down that it goes to Choice_01
    4. Finally, make this element global, my selecting the icon in the layers panel. This will ensure that the element will be viewable in every scene, as well as exist above any of the image elements.
    5. We will repeat this process for the other two buttons.
  2. In Canvas view, click and drag a “Go to Scene Button” into the window.
    1. Place the element over the second button at the bottom of the screen, and name it choice_2_button.
    2. In the Properties panel, make sure that in the Go to Scene drop down that it goes to Choice_02
    3. Finally, make this element global, my selecting the icon in the layers panel.
  3. In Canvas view, click and drag a “Go to Scene Button” into the window.
    1. Place the element over the second button at the bottom of the screen, and name it choice_3_button.
    2. In the Properties panel, make sure that in the Go to Scene drop down that it goes to Choice_03
    3. Finally, make this element global, my selecting the icon in the layers panel.
  4. Once each of the choice layers are global, your Layers panel should look like this:
Step 4: Hiding the Go to Scene Button
  1. Now we will hide the Go to Scene Button on its corresponding scene.
  2. Select Scene Choice_01 in the Scenes panel
    1. Select the icon in order to hide the element choice_1_button. The Layer should now look like this:
  3. Select Scene Choice_02 in the Scenes panel.
    1. Select the icon in order to hide the element choice_2_button.
  4. Select Scene Choice_03 in the Scenes panel.
    1. Select the icon in order to hide the element choice_3_button.
  5. Once you’ve completed the necessary steps, select Preview in order to see how the unit will cycle through the three different scenes, depending on the button that is selected.

Was this helpful?

Updated October 01, 2019