@ulrik That one didn't work properly for me so I use this:
Link Preview Image
CSS Sprite Generator - CSS Portal
Welcome to CSS Sprite Generator, the fastest way for you to make CSS sprites.
favicon
(www.cssportal.com)
What I did to get this working was:
Trim the empty space from the video edges.
Convert the video to GIF -
https://ezgif.com/video-to-gif
Extract the frames from the GIF as PNG files -
https://ezgif.com/split
Convert all the PNGs into a filmstrip with the above CSS Sprite Generator
attach filmstrip to Panel in HISE.
/** Looping Video Panel */
inline function createHeadSprite(name, x, y)
{
local widget = Content.addPanel(name, x, y);
Content.setPropertiesFromJSON(name, {
"width": WIDTH OF SINGLE PNG,
"height": HEIGHT OF SINGLE PNG,
"saveInPreset": true,
"allowCallbacks": "Clicks, Hover & Dragging"
});
// Asset Strip
widget.loadImage("{PROJECT_FOLDER}FILMSTRIP.png", "filmstrip");
widget.setPaintRoutine(function(g)
{
// Calculate the index (the filmstrip has 100 slices, each ???px high
var index = parseInt(this.getValue()*197.0);
g.drawImage("filmstrip", [0, 0, this.getWidth(), this.getHeight()], 0, index * ???);
});
// This is the sensitivity of the rotation
widget.data.sensitivity = 300;
// Save the down value as reference for all drag deltas
widget.data.downValue = 0.0;
widget.setMouseCallback(function(event)
{
if(event.clicked)
{
// Store the current value for reference when dragging
this.data.downValue = this.getValue();
}
if(event.drag)
{
// Use both axis to allow diagonal drag behaviour
var delta = event.dragX + -1.0 * event.dragY;
// normalize the delta using the given sensitivity
var deltaNormalized = delta / this.data.sensitivity;
// Calculate the new value and truncate it to 0...1
var newValue = this.data.downValue + deltaNormalized;
newValue = newValue - Math.floor(newValue);
// Update the panel
this.setValue(newValue);
this.changed();
this.repaint();
}
});
return widget;
};
const sprite = createHeadSprite("LOOPPANEL", X, Y);
// timer for animation (FPS)
reg count = 0;
sprite.setTimerCallback(function()
{
count = (count+1) % 24;
this.setValue(count * 1/24);
this.changed();
});
//Speed
sprite.startTimer(62); //Play with this to set speed
Hope that helps someone out!
