Introduction

This article will explain how to personalize various dynamic elements and values in the "Company Presentation" sample experience (available for download here or in the Composer/Player Experiences panel). It will not explain how to edit the overall design.

“Home” Scene

The Home scene is comprised of a Scroll Collection in which we incorporate a different number of elements like images, text and buttons.
When you enter the scene you will notice that many items move into focus. To achieve this we used a trigger and action set: when the scene is being entered, then move each item to specific X and Y coordinates.

Go to the Scene Structure panel and, in the Middle layer, select any child item of Scroll Collection; this revels all content within the Scroll Collection. If you then scroll down the scene a bit you'll notice a triangular play button. This button will unhide a Group Collection - located in the Top layer of this scene - comprised of a semitransparent rectangle containing a YouTube video and a Close button. You can change the video by replacing the URL with your own in the Properties panel.

If we continue scrolling farther down the Scroll Collection, you will notice three images that appear from the right side of the screen:

This movement is achieved using triggers and actions. The Scroll Collection's trigger "Vertical scroll is more than" is set to 2025 pixels: when the vertical scroll is more than 2025 pixels then the 3 images are moved to specific X and Y positions.

Scroll down some more you'll come upon a chameleon image. In Composer's Play Mode, the chameleon image appears to stay on top while the background disappears. This is a neat little parallax effect you can achieve by working with bindings and linear converters.

In order to achieve this effect, you need to have one image as a background and one image that is transparent aside from your main foreground element. Both these images have their Y property bound to the Scroll Collection's vertical offset. Then we add a binding converter like so

When the "Vertical scroll offset" is 4886px , the Y coordinate of the chameleon image is set to 5400; when the "Vertical scroll offset" is 6100px, the Y coordinate of the image is set to 6500. We have also checked the two "Limit" checkboxes to ensure the value assigned to the Y coordinate will not go below 4886 or above 6500.

“Projects” Scene

In this scene we used the Excel interface asset as a database for referenced content. If you right-click the Excel symbol in the Scene Structure panel, you will be able to open this spreadsheet and modify it as you wish with your own content and media.

If you look at the "Projects" Asset Grid Collection in the Middle layer of this scene, We have used the data template principle to define a look and feel for each of the company's projects and then we bound each item in that template to the corresponding field in Excel. For example, if you look at the value of the Text Asset named "Title", you'll see that it is bound to the "Title" column of the Excel workbook.:

Here are all of the Excel columns associated with items in the "Projects" Asset Grid Collection.:

If you are interested in learning how to use Excel as a datebase, refer to this article.

"About Us" Scene

In this scene we again used the Excel interface asset](https://support.intuiface.com/hc/en-us/articles/360007431071-Interface-Asset-Excel) to easily generate a dynamic display of the company's employees. The approach is almost identical to the "Projects" scene except that in this scene, we are using toggle buttons to filter certain data elements.

For example, if we select the 'Leadership" toggle button and open the trigger and actions panel, you can see that when the toggle button is checked, we add a filter to the "Tag" column in the Excel workbook in order to display only people who have the "leadership" tag.

“Contact” Scene

This scene is comprised of two principle elements:

• A map that uses the interface asset Address to coordinates
• A contact form that uses the Share via email Interface Asset.

For the map, you can easily change the address entered with your own. Just open the properties of the Address to coordinates interface asset.

Regarding the contact form, it is usable as is but you can easily configure every aspect of the design. You can read more about this "Share via email" interface asset here.