This article explains how to make a vertical drawer with a slide in/out animation with Kontakt 6 (and beyond). (see video)
The download additionally includes a horizontal drawer with a slide right-in/right-out animation. You can customize both the drawer to your needs via some global adjustments

Please accept YouTube cookies to play this video. By accepting you will be accessing content from YouTube, a service provided by an external third party.

YouTube privacy policy

If you accept this notice, your choice will be saved and the page will refresh.

Accept YouTube Content

CONTENT

• first glance

• installation

• global adjustments

• Full code (Vertical drawer)

• ON INIT: setting the width & height of the ui

• ON INIT: defining the drawer’s open & close Positions

• ON INIT: global helper variables

• ON init: creating the drawer & Components

  • The Panel for the Drawer

  • The Drawer’s Background Picture

  • The Drag Button

• Functions: Drawer Slide Animation

  • Animation OPEN / Slide up

  • Animation Close / Slide Down

•  On ui_control: The Drag Button

• Example: Drawer with UI Elements

first glance

Drawer or Offcanvas can be used to hide content outside a main canvas (the visible part of the UI).

Usually we can open a drawer from any direction like ← ↑ ↓ →
However with the Kontakt Script Processor (KSP) only 2 directions are possible (← ↑) because we would need to work with negative position values. And negative values are not allowed (yet?!).

Installation OF THIS SCRIPT

1. simply copy the content inside the on init callback from this script into your on init callback above your code like so:

on init
    {<THIS ON_INIT>}
    {<YOUR CODE>}
end on

{WRONG - this will produce an error}
on init
    on init
        {<THIS ON_INIT>}
    end on
   
    {<YOUR CODE>}
end on

2. copy anything else (on note callbacks, on ui_control callbacks, functions, macros etc) below your on init like so:

on init
  {<YOUR CODE>}

  {<THIS CODE>}
end on

{<ALL THE REST OF THIS SCRIPT AS IS, like callbacks, functions, macros etc >}

{<YOUR CODE like callbacks, functions, macros etc>}

GLOBAL Adjustments

in the beginning of the script you can do some adjustments

{ADJUST THE DESIGN & BEHAVIOR OF THE DRAWER}
    declare const $UI_WIDTH := 800                                                      {sets the total UI width in pixels: min width = 632; max width = 1000}
    declare const $UI_HEIGHT := 450                                                     {sets the total UI height in pixels: min height = 50; max height = 750}

    declare const $DRAWER := 1                                                          {sets the amount of used drawer. Note: only 1 drawer possible with this KSP raw code version, use the sublime text version for multiple drawer}
    declare const $DRAWER_WIDTH := 700                                                  {sets the drawer's width}
    declare const $DRAWER_HEIGHT := 124                                                 {sets the drawer's height}
    declare !canvas_drawer[$DRAWER] 
    !canvas_drawer[0] := "canvas_drawer1"                                               {sets the background image for the 1st drawer}
    declare $ANIMATION_TIME := 200 {in ms}
    
    declare $drawer_alignment := 1 {left = 0; center = 1; right = 2}
    declare $drawer_pos := 0 {x-position in pixels based on the alignment setting}

    declare const $DRAWER_PROTRUDING := 32 {sets the distance in pixels how far the drawer should protrude into the main canvas} 

    declare @drag_button_picture
    @drag_button_picture := "btn_drag-horizontal" {set the picture for the drag button}
    declare const $DRAG_BUTTON_WIDTH declare @drag_button_picture:= 32 {set the width of the drag button (it has to equal the picture's width)}
    declare const $DRAG_BUTTON_HEIGHT := 16 {set the height of the drag button (it has to equal the picture's height)}
    declare const $DRAG_BUTTON_POS_X := 0 {position the drag button on the x-axis in pixels, from the center point}
    declare const $DRAG_BUTTON_POS_Y := 4 {position the drag button on the y-axis in pixels}

FULL CODE

Below you can see the full script.

premium content