Change size of shape based on value entered via input field

Dec 23, 2017

How cand I change the diameter of a circle based on a value entered via the numerical input?

Scenario:

  1. Initially there is a layer  with a circle (MyCircle) with a diameter of 50 pixel (MyCircleDiameter = 50) and a numeric input box
  2. User enters a value of 5 in the Numeric Input box (NumValue = 5) 
  3. How can I change the diameter of MyCircleDiameter  = MyCircleDiameter *NumValue

Many thanks,

Dan

3 Replies
Ben McKenna

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

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.

This discussion is closed. You can start a new discussion or contact Articulate Support.