Using apps

An app can be used to create a group of interactive widgets that can be reused in any timeline project.

When using the app in a timeline project, any changes made to the app itself will instantly change the instance of the app in the timeline project.

A good example of app use would be creating a standard menu or reusable form but any reusable interaction will benefit from using an app.


Creating an app

To create a new app click on the create new button in the bottom left of the VMS and select "app".

After entering a name and pressing "ok", you will be taken to the app creation screen.

The app screen is mostly the same as the normal timeline editor with 3 differences.

  • The green background. This is there to indicate the app editor instead of the normal timeline editor.
  • All time-related elements are gone. Yes, an app editor is the timeline editor without time. You will be creating interactive content that will be used 'as a whole' in a normal timeline project with time. Having multiple timelines with multiple apps would become very confusing.
  • There is no content on which you make the interaction. Therefore it is shown as a 'transparent' background

Let's create a simple app as an example.

Add an image widget and a rectangle widget to the timeline. Now when we select a widget, the right side of the screen is as expected: edit the widget properties and handlers. When no widget is selected (click on empty space to deselect a selected widget) the right side of the screen shows the app properties.

Graphical representation

The graphical representation is how the app will be shown when the app is selected within an app-widget in a normal timeline (don't worry if you do not understand this yet, it will become clear shortly).

To show you how this works, let's not make one yet and publish and save the app (with the image and rectangle).Publish without graphical representation.png

If you would use this app in an app-widget it would still be shown in the player, but not in the timeline editor. This might not be a problem but if you, for example, want to move the whole app to a different position that would be hard to do.

To visually work with the app you need a graphical representation. To do this click on the snapshot icon .

This will create an image of all the widgets that are currently visible.

If your app has many widgets and you don't want all the widgets to be visible in the snapshot, you can use the eye-icon on the events to hide them before making the snapshot.


Exposed widget properties

On the right side of the app properties there is a list of all widgets used in the app.

Clicking the plus-sign next to a widget will expand a list with all properties of that widget.

The checkboxes allow you to select properties of the widget that will be exposed when this app is used in an app-widget.oeps 

In the above screenshot the imageid and alpha properties are checked. This means that those two properties are exposed and therefore can be overridden in the app-widget that uses this app.


Reusing an app as a widget

To use an app we need the appWidget. After creating an appWidget we need to use the widget properties to select an app.

After selecting an app, the graphical representation will be used to draw the widget on the editors stage.

The exposed properties will be editable from within the appWidget properties.

You can use an app like this in many mediaclips. Any changes made in the app later will be reflected in any clip using the app utilizing the appWidget.


Generic apps

Generic apps can be found on the apps screen in the lower section. Generic apps are apps that are pre-created and have a generic use.

You can use these apps as they are and change properties of its widgets in the widget properties.

To edit these apps you have to make a clone first so you have a local copy of the app. After this you can edit the app.