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, we will show and hide text boxes at a certain point in time
using a variable. First, the additional track will be created in the animation
editor, and then actions will be assigned 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 in the track header and choose, Add
   Track > New or choose Add Track from the Animation menu.
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 will be called, showtext. Variables can also be defined in
   the skin. If a skin is already selected in the
   Web Output, a list of the defined
   variables will be available when adding additional tracks.
6. Select the variable type. Ours will be 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 will appear.
3. Add another keyframe. Give it a different value from the first keyframe. For
   instance, text2. The second keyframe will indicate 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. Open via
   the web output properties or use the keyboard shortcuts, Command-K (macOS)
   or Control+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’ll just add
two text boxes. One will show at the time of the first keyframe, while the other
will appear 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 will show 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 just 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