Animating a filmstrip with a knob

[resonant]

Is this possible to animate a filmstrip with a knob.

For example when we increase gain with a knob, an another filmstip (not knob) changes the state...

I want to make a tube animation that changes the glow color with gain amount.

[staiff]

solution 1 :
making a filmstrip including knob rotation AND light.

Most of time knobman is used for animated knob, but sometimes i use photoshop and After Effects for this.
creating a PSD with a knob and a tube transistor light. animate this PSD inside After Effect (change the glow opacity of the light and the rotation of the knob). Export result as an animated sequence.
re-use photoshop (or better The gimp with the filmstrip plugin - better than 'toshop for this) and ...
Voilà ! :D

Import the result as filmstrip image for your Volume knob in HISE and when you increse the volume, knob turn and light will glow ...

solution 2 :
create a background with knob BG and light in 'toshop. Also create all knob elements that will "turn" but save it as separate alpha image outside the BG image.
Use knobman: import all png s (the background and all knob element) animate the knobs element and just add a glow image where the lamp is, animate it. export the sequence.

Voilà ! :D

[resonant]

Dear @staiff
That's not what I'm exactly asking for. Let me give you an example:) ;
This knob both controls plugin parameter and animation. That's what exactly I am looking for :)
How the code would be like for this situation? I have an animation film strip allready. But I don't know how to animate it.

By the way: I know how to make animations, I use 3Ds max and After effects for cool looking 3D GUIs ;)

[Christoph Hart]

Use a ScriptPanel, check in its timer callback if the value of the knob has changed and repaint it with another offset of the filmstrip image.

Check the ScriptPanel tutorial how to draw images as filmstrip (the infinitely rotatable head example should get you going.

[resonant]

Actually I couldn't managed to handle this.
When I directly copy and paste "infinitely rotatable head example " code, I couldn't see anything. (I modified my image's name within the code)

[Christoph Hart]

If you upload the filmstrip, I'll write an example for you.

[resonant]

Thank you so much....

Width: 414px
Height: 414px
Number of strips: 65

https://www.dropbox.com/s/m0iuyjpti89wpcj/Comp 1_%23[414%2C414].png?dl=0

[Christoph Hart]

There you go:

Content.makeFrontInterface(600, 500);

const var Panel1 = Content.getComponent("Panel1");

const var Knob1 = Content.getComponent("Knob1");

// Set the mode to any arbitrary value
// We'll be using getValueNormalized() which doesn't care about
// the actual range
Knob1.set("mode", "Decibel");

// This loads the image and makes it accessible as "filmstrip"
Panel1.loadImage("{PROJECT_FOLDER}Comp 1.png", "filmstrip");

// Show the default state
Panel1.setImage("filmstrip", 0, 0);

// Set the half width of the image (on retina displays it will use the full resolution)
Panel1.set("width", 207);
Panel1.set("height", 207);

// Here we will store a reference to the knob
Panel1.data.knob = Content.getComponent("Knob1");

// This will contain the last displayed value
Panel1.data.lastValue = 0.0;

Panel1.setTimerCallback(function()
{
    // Returns the knob position from 0...1
    var newValue = this.data.knob.getValueNormalized();
    
    // Check if the value has changed
	if(newValue != this.data.lastValue)
    {
        // calculate the y-offset and set the image
        this.setImage("filmstrip", 0, parseInt(newValue * 65) * 414);
        
        // store the value for the next callback
        this.data.lastValue = newValue;
    }
});

// Starts the timer with 30ms (= 30Hz framerate)
Panel1.startTimer(30);

You'll need one knob called Knob1 and a Panel called Panel1 for the example. I also renamed the image filmstrip, the [#414] stuff is asking for trouble.

[resonant]

You are GREAT. Thank you so much bro, You and HISE is capable of anything, just imagination is enough. :)