Storyline: how to change fill color or/and line color for shapes and pictures

Sep 20, 2016

Hi there,

I tried to make some kind of interactive painter and tried to fill shapes and PNG transparent images with Javascript code but couldn't make it. I named in timeline these object as Rectangular1, Rectangular2... Image1... and by using classic Javascipt code for filling PNG image with some color by using ID of the object and in HTML page it is working, but here not. Where I could ask for this code suggestion or a little help? Thanks.

4 Replies
Leslie McKerchie

Hi Eli!

Articulate Storyline supports JavaScript triggers, letting you extend the functionality of your courses. Although we don't provide support for JavaScript coding, this article has some examples and can help when you're developing JavaScript triggers in Storyline.

As for your specific need, hopefully someone in the community will be able to pop in and assist.

Eli Pod

Hi Leslie,

thank you for your fast response. I do understand Javascript enough to build web pages and I due that I don't need some kind of support about plain Javascript, I just don't understand how to reach particular object i change its properties. I tried this code and it works very well as plain page:

<img id="apple1" src="blank_apple.png" style="background-color:red" />
<script>
document.getElementById('apple1').style.backgroundColor = 'blue';
</script>

where JS code changed PNG image with transparency into blue. Based on this syntax I wrote Javascript code inside Storyline but without success. Referencing by using: document.getElementById doesn't work anyway! I'm clueless how to solve it.