var player = GetPlayer(); var circleSize = player.GetVar("circleSize"); var identifier = player.GetVar("identifier"); var textElements = document.getElementsByClassName("textlib"); for (var i = 0; i < textElements.length; i++) { if (textElements[i].textContent == identifier) { console.log('identifier found'); textElements[i].style.transform = "scale(" + (circleSize/100) + "," (circleSize/100) + ")"; } }
How it works: It searches for an "invisible" text box applied to the circle to grab the circle's HTML element (this text has to be placed in a variable so that Storyline doesn't convert it to an image, otherwise we wouldn't be able to search for it - again, it would be a great feature if Storyline allowed us to specify our own object IDs instead of being randomly generated). Once we found the circle element, we change the scale of it to match whatever is in our numerical field. In this case the circle started off at 100*100px, hence how the scale is being calculated.
Just a note: You would ideally add some variable checks into the javascript to prevent users scaling the circle too big/too small. And since storyline outputs shapes as images, anything larger than the circle's default size would be pixelated (as you can see in the example). In this case, you should make the circle's have the maximum possible resolution within the Storyline project, then scale it once the timeline starts.
I'm not sure if it works in Flash since it's using javascript to query the HTML, but seeing as how Flash is on its way out I wouldn't be too concerned with that.
3 Replies
Hi Dan
is this what you are after? see this Peek video of a very rough sample
As Wendy's vid suggested, you can use an object with custom states that correspond to the various calculated values.
Hey Dan,
I've wanted something like this in the past - having variables change object parameters (size, colour, etc). I think it would make a great feature! :)
You can kind of achieve this effect using Javascript though. Here's a rough example I put together (.story file attached):
http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/sto_1c2an3s1bbph11p81kac1okn1aq39/story_html5.html
How it works: It searches for an "invisible" text box applied to the circle to grab the circle's HTML element (this text has to be placed in a variable so that Storyline doesn't convert it to an image, otherwise we wouldn't be able to search for it - again, it would be a great feature if Storyline allowed us to specify our own object IDs instead of being randomly generated). Once we found the circle element, we change the scale of it to match whatever is in our numerical field. In this case the circle started off at 100*100px, hence how the scale is being calculated.
Just a note: You would ideally add some variable checks into the javascript to prevent users scaling the circle too big/too small. And since storyline outputs shapes as images, anything larger than the circle's default size would be pixelated (as you can see in the example). In this case, you should make the circle's have the maximum possible resolution within the Storyline project, then scale it once the timeline starts.
I'm not sure if it works in Flash since it's using javascript to query the HTML, but seeing as how Flash is on its way out I wouldn't be too concerned with that.
This discussion is closed. You can start a new discussion or contact Articulate Support.