COLLECTION COMPONENT

USING THE COLLECTION COMPONENT

In this Chapter, we will be talking about the Collection component. The collection component can be setup in two modes: Kiosk mode and Slideshow mode. In the Slideshow mode, you can simply drag and drop items and these items can be resources such as video files, images or swf animations, or they can also be scenes you've prebuilt. The Collection is going to cycle from one item to the next. You can setup the duration for all items, or you can set the duration for each item individually. If you are not necessarily a fan of a visual timeline, you can use the collection simply by dragging and dropping items to it and the Collection will cycle through these items.

The second mode will be the Kiosk mode. With the Kiosk mode, you can actually set the Collection to accept touch, or mouse clicks, and with it you can direct each click to a particular scene or resource. Therefore, you can add interactivity to your presentation using the Collection. The Collection will allow you to build a presentation and play it on mobile devices, or on tablets such as the iPad or an Android device. We will be adding a lot of functionality to the collection component in the upcoming releases.

USING THE SLIDESHOW MODE

Navigate to the Timeline in the Campaign's area, and under the Components, you will see the Collection component. Drag and drop the component into the Timeline, and double click on it to see its properties. The default duration is actually 10 seconds. We will change the default duration to 3 seconds.

Next, we will click on the Items tab, and drop a few Resources in the area from the Resources area.

Once we do this, we can see how the Collection cycles through the images. We can also set a specific duration for a particular image.

In our example, we've set the duration of 10 seconds for the wrap product, and this means the image of this product will remain visible for 10 seconds, and then the slide will continue, showing the other images.

The Collection, using the slideshow, is just a simple way to cycle through items. The great thing is: we can also mix some scenes between the items listed. Let's go ahead and add a scene now, next to our images in the Items area.

You will notice the slideshow plays the Scene just like the rest of the items listed.

USING THE KIOSK MODE

Next, we will discuss more about advanced functionality of the Collection; which is the Kiosk mode. With the Kiosk mode you can actually use your finger or mouse clicks to interact with the Collection, and have it switched to other Items or other Scenes. First, navigate to the Scenes editor.

For a starter, we will create four Scenes. Our Collection will be location finder Kiosk.

In the Map Scene, we will be adding a Map image.

In the Library scene, we will add some more information using a Label and the Rich text component --just some basic information.

In the About Scene, we will also be adding some informational text.

Next, switch back to the Collection scene and add the Collection component to it.

With the Collection component selected, click on the Collection tab of its properties panel and select the Kiosk mode.

Under the Items tab, we will add the three scenes we've created.

As soon as we save the presentation, we can see the Collection showing the first Scene in the Items list.

Next, we will add some text above the map using the Label tool.

What we would like to setup now is: when a person touches the About the Library text above the map, it will actually show us the About Scene we've created. In order to do this, first we will make the Label interactive by going to the Definitions tab while selecting.

Next, we will switch back to the Collection, and access the Collection tab. We will rename each Scene / Page.

Now, what we need to do is associate a touch event with the About label. So we will switch to Events tab and click on the + sign to add a new event. Notice that we have a target sign.

Drag the target icon over the About label.

You will see that as soon as you let go of your mouse, this event will be associated with the label.

Next, we will define a command or action, this way we know what will happen once the user clicks on it. So select from the dropdown Selected page

Now, just like before, we are going to hold the mouse and drag the target icon. And as soon as we do this, you will see the Item tab open up, and we can select a Page or Scene. We will select the About Scene.

Now, to test out Collection, go to the Timeline and drop the Collection Scene onto the Timeline, double click on the top to see a preview and click on the text or the label. You will notice this will trigger the About scene to appear on view.

Next, we will setup the Map, when someone touches the Library on the map; he or she can see the operating hours. So we will switch to the map scene and drag a small image on the map from the Resources area. Also, we will make the image interactive and rename it.

Next, we will switch back to our collection Scene, and we will associate another event for the Collection that is for the Library button. But instead of using the Target icon, we will manually type the name of our image.

Then, set the selected page option and associate the Library Scene.

Now, as soon as we click on the Library button, we can access some information about the Library --like the Opening and Closing hours.

In our example we only used a selected page, but of course, you can also use the first page, or the other options.

If you want to find out the order of the pages, just switch to the Items area and see the order of the pages. Another thing we should mention is: you can also create nested collections. So if we switch back to the library scene, we can drop another collection component into the collection scene and we can create a navigation system within this page. As a result, the system can really become navigable. Just remember, the simpler mode of the Collection in the Slideshow mode, and the Kiosk mode, the easier it will allow you to add interactivity to your presentation.