PNG Slider LAF || See Example
-
Just sharing this here on a new post so its easy to find if anyone else needs it.
I see alot of people trying to find a good work around for animating custom images for sliders. I've searched and tried a bunch of software myself and what I've found is that if you're not a graphics designer already, these programs might be a bit much of a learning curve. I've found a simpler solution that doesn't require any filmstrips but still allow you to use your custom designs.
Here's an example of making a slider with 2 png images.
This method requires 2 images:
A Slider Background Image:
.PNG
A Slider Cap Image:
.PNG
And a simple LAF function:
const var LAF = Content.createLocalLookAndFeel(); const var SliderBackground = LAF.loadImage("{PROJECT_FOLDER}SliderBackground.png", "Background"); const var SliderCap = LAF.loadImage("{PROJECT_FOLDER}SliderCap.png", "SliderCap"); const var Knob1 = Content.getComponent("Knob1"); LAF.registerFunction("drawLinearSlider", function(g, obj) { var a = obj.area; var h = a[3] / 13; var y = a[3] - a[3] * obj.valueNormalized - (h + 10) + (h + 10) * obj.valueNormalized; g.drawImage("Background", [0,0, 80, 560], 0, 0); g.drawImage("SliderCap", [-10, y, a[2] + 20, h + 20],0 , 0); }); Content.getComponent("Knob1").setLocalLookAndFeel(LAF);
STEPS:
- Create your 2 images.
- Place images in your projects 'Images' folder.
- Create a knob/slider in 'vertical' mode.
- Declare your slider knob.
- Right-click and create a LAF
- Paste this code as an example.
- Press F5
You'll have to adjust the areas to your own needs. This is just my quick example.
Hope this helps some people!
Chee!Working example:
BLESS!
-