Animate a Label With a Press of Your Keyboard

In Performance View it is now possible to apply a custom image to various control elements. These custom images can be transparent and also animated. In this quick tutorial, i’ll show you how easy it is to Animate a Label With a Press of Your Keyboard.

[aside title=”Pro Tip!”]Images require a text file to describe their properties. You can set the transparency and the number of frames the image has here![/aside]

Using Kontakt’s internal scripting language, Instruments can provide custom control panels, called Performance Views. The idea behind this feature is that it makes Instrument-specific settings available in a user-friendly way that doesn’t require the user to switch into Instrument Edit mode. It also opens up the possibility to create some amazing looking user-interfaces with custom fonts, images and animations. Let’s look at how we can animate one of the controls in Performance View, the ui_label.

Here’s an image that has 4 frames. Save it (right-click, save as) in your user picture folder (Documents/Native Instruments/Kontakt 5/pictures)

When you use images in Kontakt, they must have a txt file of the same name containing important information on how Kontakt should read this image. If a text file is not provided, any image file in the user picture folder will have a default one generated. If the image file is in the factory folder a text file will not be generated, but the image will be read by Kontakt as if the values were set to default.

Here is an example of the content of one of these text files:

Has Alpha Channel: yes
Number of Animations: 6
Horizontal Animation: no
Vertical Resizable: no
Horizontal Resizable: yes
Fixed Top: 0
Fixed Bottom: 0
Fixed Left: 0
Fixed Right: 17

What this means:

1 Has Alpha Channel: (yes or no) tells Kontakt whether or not the image file contains a transparent (alpha) layer. If in doubt, set this to “yes”, as this will cause no problems either way.

2 Number of animations: sets the number of frames in the image. Kontakt then equally divides the image using this number.

3 Horizontal Animation: (yes or no) designates in what direction the image should be split.

4 Vertical Resizable: (yes or no) if set to yes, it is possible to adjust the height of the im- age file in Kontakt using the $CONTROL_PAR_HEIGHT constant in the set_control_par command.

5 Horizontal Resizable: (yes or no) if set to yes, it is possible to adjust the width of the image file in Kontakt using the using the $CONTROL_PAR_WIDTH constant.

6 Fixed Top/Bottom/Left/Right: if you wish to be able to resize an image, but keep a cer- tain area around the edge intact, simply set the number of pixels in the desired area. In the above example, the image is able to be resized horizontally, but the 17 pixels on the right side of the image will not be stretched.

In order for Kontakt to treat the image correctly, it must be provided in as stack of animations. So if you want one knob with 100 states, you need to build a very long image with all of these states in a row or column. Kontakt will read the file top to bottom or left to right, depending on the setting of the .txt file. So your lowest value for a knob should be at the top or left and the highest at the bottom or right.

Switches and Dropdowns should always have six animations, in a set order:
1 off
2 on
3 off, mouse down
4 on, mouse down
5 off, mouse over
6 on, mouse over

Create a string_main.txt file in your pictures directory with the same name as the image downloaded earlier, but with a txt extension. Use the following parameters:

Has Alpha Channel: yes
Number of Animations: 4
Horizontal Animation: no
Vertical Resizable: no
Horizontal Resizable: no
Fixed Top: 0
Fixed Bottom: 0
Fixed Left: 0
Fixed Right: 0

In Kontakt, create a new Instrument, enter Instrument Edit mode, open the Script Editor and click the Edit button.

Initialize the script with following lines of code:

on init
make_perfview
set_script_title(“Animated Label”)
set_ui_height(4)
message(“ADSR “)
end on

Declare a UI label.

declare ui_label $ui_violin (0,0)

Set the Label’s Text Parameter to blank so that no text is displayed.

set_control_par_str(get_ui_id($ui_violin), $CONTROL_PAR_TEXT, “”)

Get the UI ID and associate our image to the label

set_control_par_str(get_ui_id($ui_violin), $CONTROL_PAR_PICTURE, “string_main”)

Set the initial frame of the animation as the first frame.

set_control_par(get_ui_id($ui_violin), $CONTROL_PAR_PICTURE_STATE, 0)

Position the Label.

set_control_par(get_ui_id($ui_violin), $CONTROL_PAR_POS_X, 75)
set_control_par(get_ui_id($ui_violin), $CONTROL_PAR_POS_Y, 5)

Add the Note On and Note Off callbacks.

on note
set_control_par(get_ui_id($ui_violin), $CONTROL_PAR_PICTURE_STATE, 1)
end on

on release
set_control_par(get_ui_id($ui_violin), $CONTROL_PAR_PICTURE_STATE, 0)
end on

And now when you press a Note on your Keyboard or Kontakt’s Keyboard, the label will be animated with Note On and Note Off events.

Performance View and Scripting is definitely one of Kontakt’s most powerful features. We only scratched the surface today with animating a label. Most other controls can have have custom images and be can be animated. Be sure to be on the look out for future tutorials as we tackle customizing the UI of Performance View.

Until next time…now go make some music.