Help Topics Version 2.0

Understanding Components

Components are the basic building blocks of multi-touch scenarios. Learning how to use components and their properties is an essential step to mastering Touch Creator.

The order in which components are shown in the Scene Manager is not arbitrary. Components can take roles as parent and child components determining the way they interact with one another. You can learn more about this crucial part of structuring your multi-touch scenario in the Scene Manager section.

What are Components?

For you as the maker of a multi-touch scenario in Touch Creator, components have three basic functions: They give you control over the visual structure of the scenario, they give you logical and temporal control of the events in a scenario, and they let you control the interactivity in the scenario.

Visual Structure

To make content visible, Button, Image, Media Player, Text and Drop Pane components are used in Touch Creator. Various component settings allow you to create a visual structure to your liking within the scenario. You can change the location, size, rotation and other parameters of the components used.

Also, Layer components can be given a visual representation by assigning a background image asset to them, but that's not their primary function, which lies in structuring multi-touch scenarios.

Logical and Temporal Structure

The Scene and Layer components allow you to group assets and components. This facilitates acting on a number of items at a time. For instance, toggling a layer invisible also hides all its assigned children, so you don't have to care about changing settings of multiple items. Timer components give you temporal control of events.

Note: You can create parent-child relations between almost any components, with the exception of Scene components that are always on the top level and can't take the child role.


Many components offer Touch Behavior, and Drag and Drop properties that give you control of how users can interact with them. The Drop Pane component offers an interesting drop target for many kinds of user interactions.

Even the Network Sender and Network Receiver components that don't offer the mentioned property settings add to user interactivity for they allow Touch Player to control remote devices, and also to be controlled by remote interactivity.

Creating a Component

Creating a component is easy. Just drag and drop the component from the Library into the Stage. The component will appear where you dropped it in the Stage. Its position in the Scene Manager depends on the hierarchical level of the item currently selected in the Scene Manager.

You can now make any adjustments to the new component by changing its parameters in the Inspector, or by directly manipulating it in the Stage, if the Stage is in Edit mode. Components are automatically named according to the order they were added, for instance, "Scene 1", "Scene 2” and "Scene 3".

Working with Components

Most changes to a component are done in the Inspector. There you can change its Layout, and Touch Behavior, properties specific to the component and assign actions to it. This is how you create and set up attractive components. Let's look at an example.

Work example

Suppose, you want to display a brand logo in your multi-touch scenario. After you have imported an image asset called 'logo.png', you can create a component to use it in. You could use a Media Player component or an Image component.

The Media Player component offers a wide array of features and functions for media playback, whereas an image component only displays a single image. However, since the logo is a simple .png image, and since you want to permanently show it, you can go ahead and use an Image component. One way is to create an Image component and assign the logo to it.

The other way is easier. Just drag and drop the logo into the Stage. An image component will be created automatically and appear in the Stage and in the Scene Manager. Select it in the Scene Manager and drag it in the place you want it to be. Then go to the Inspector. Make sure the Properties tab is selected.

In the Layout section, enter the position that you want the logo to have in the interface. Now adjust the Size property to fit the interface. Alternatively, you can switch the Stage to Edit mode and adjust the properties via mouse.

If you like, add Tint to the logo or change its Opacity. You may want to rotate the logo by a few degrees to give the scene a relaxed look. These are aesthetic choices that are up to you. In the Image section, select the logo asset, which will fill the image component.

Let's think about Touch Behavior. Most likely, you don't want to give the logo touch interaction. Logos are usually just static elements meant to remind users who is providing the content they're currently watching. So go ahead and deselect Draggable, which will automatically disable Scaling and Rotating. Another way of doing this is to select Inactive, which will disable all other Touch Behavior options.

You now have an attractive looking logo in your scene that identifies your brand. You can further improve the appearance, for instance by having your logo move in the scene. To do that, create a custom style for it with a different position and periodically switch the styles by means of actions in a Timer component.

Related Topics

© ~sedna gmbh 2016