Connecting to a Skin

When outputting the project as a Web Output (rather than a video format), you can have an animation to control skin elements using additional tracks.

In this example, you show and hide text boxes at a certain point in time using a variable. First, you create the additional track in the Animation Editor, and then you assign actions to skin elements based on the changing variable in the animation editor.

Learn more about variables.

Add a Variable Track

The first step is to add a variable track in the animation editor:

1. Add a clip.
2. Add an additional track. Right-click the track names in the editor and choose Add Track > New, or choose Animation > Add Track > New.
3. In the dialog that pops up, choose Skin Variable for the Track Type.
4. Give the track a meaningful description. For example, show text.
5. Set the skin variable name for this track. This can be anything. For example, our variable is called showtext. Variables can also be defined in the skin. If a skin is already selected in the Web Output, its variables are listed in the Add Track menu, and picking one fills in the dialog for you.
6. Select the variable type. Ours is a text variable.

   

Add Keyframes

Next, add keyframes to that act as triggers to change the value the of variable.

1. Double-click in the track to add.
2. Set a value. Since the type of our variable is text, we’ll add a text value: text1. This first keyframe indicates when the first textbox appears.
3. Add another keyframe. Give it a different value from the first keyframe. For instance, text2. The second keyframe indicates when the second textbox should appear and when the first box should hide.

So far, we’ve added two keyframes that change the variable’s value. In the Skin Editor, we’ll add this variable, a few text boxes, and actions that react to a change in the variable.

Add Actions to Skin Elements

Now, add elements to the skin and give them actions.

1. Open the Skin Editor from the web output properties, or press Command-K (macOS) or Ctrl+K (Windows).
2. Click inside the Canvas to reveal the skin properties. You’ll see a table with the variable we added in the Animation Editor.

We can now start to add elements to the skin. For our example, we add only two text boxes. One shows at the time of the first keyframe, while the other appears at the second keyframe.

Add a Textbox

1. Draw a text box.

2. Deselect Visible. (Textbox properties > Appearance > Visible)

   

3. Add some text. (Textbox properties > Text)

4. Customize the textbox. We selected Center alignment, Word Wrap, Auto size, and changed the padding to 10. We also changed its background color (Text box properties > Rectangle > Background).

5. Add the changed variable action:

   1. Double-click in the Actions table to add the action.

   2. For the Source, choose Variable Changed.

   3. Choose the variable you created. Ours is called showtext.

   4. Choose the Action, Visibility.

   5. Type is Show Element.

   6. Target is _self.

   This action shows the textbox when the variable, showtext, is changed in the Animation Editor. But we don’t want this box to show at every variable change. So, we’ll add a filter to the action.

Add an Action Filter

1. Click the Action Filter button to open the filter settings.

   

2. Double-click in the table to add a condition.

3. For the Trigger, choose a variable added in the skin properties. Ours is called showtext.

4. Set the Comparison to =.

5. Set the Value to whatever you set as the keyframe value. We set ours to text1.

6. Click OK.

This condition states that the action should only be performed if the variable’s value has been changed to text1.

Add a Hide Element Action

Finally, the textbox needs to hide itself when the second textbox shows.

1. Copy the first action in the action’s table. Right-click, choose Copy.

   

2. Right-click in the table and choose, Paste.

3. Double-click the action to open its parameters.

4. Change its action to Hide Element.

5. Change the action filter to execute only if the variable showtext = text2.

Add another Textbox

1. Draw a second textbox.

2. Change the Element’s ID.

3. Deselect Visibility. (Textbox properties > Appearance > Visibility)

4. Add some text. (Textbox properties > Text)

5. Customize the textbox.

6. Add the changed variable action.

   1. Double-click in the Actions table to add the action.

   2. For the Source, choose Variable Changed.

   3. Choose the variable you created. Ours is called showtext.

   4. Choose the Action, Visibility.

   5. Type is Show Element.

   6. Target is _self.

7. Add a filter.

   1. Double-click to add a condition.

   2. For the Trigger, choose the variable you added in the skin properties. Ours is called showtext.

   3. Set the Comparison to =.

   4. Set the Value to whatever you set as the second keyframe value. We set ours to text2.

   5. Click OK.

8. Add the Hide Element action.

   1. Copy the first action. Right-click, choose Copy.

   2. Right-click in the table and choose, Paste.

   3. Double-click the action to open its parameters.

   4. Change its action to Hide Element.

   5. Change the action filter to execute only if the variable showtext = text1.

9. Save the skin.

Output the Project

Finally, it’s time to export the project.

1. Open the web output properties.

2. Add the skin you’ve created.

3. In the Auto Rotation pane, select Animation.

4. Choose the correct sequence. For this example, we used the Default Sequence.

5. Click the Generate Output button or upload to the Gnome Cloud.

See also…

• About the Animation Editor

• About the Skin Editor

• Animating a panorama

• Animating a tour

• Editing keyframes

• Keyframe