Forum Discussion
MagdaDiaz
11 years agoCommunity Member
Using variables to change size of shapes
Does anyone know if there is away to dynamically change the size of a shape using variables without using states? Example: a rectangle used as a sliding scale based on how someone answers questions ...
GastonRAPARIVO
5 years agoCommunity Member
Hi all, If someone is still looking for a solution. You can do it with a picture (it's easier to get the element with the filename of the picture) and JavaScript. Below is the JavaScript code for rotation and you can see the code for scale in the attached file.
var elem = null;
var slide = parent.document.getElementById('slide');
var divs = slide.querySelectorAll('div');
for (var i in divs) {
if (divs[i].tagName == "DIV") {
// data-acc-text attribute contains the filename
var attr = divs[i].getAttribute('data-acc-text');
// eg. avatar.png is the filename of the picture
if (attr && attr=='avatar.png') {
elem = divs[i];
break;
}
}
}
if (elem) {
var style = window.getComputedStyle(elem);
var matrix = style.transform.match(/matrix.*\((.+)\)/)[1];
var values = matrix.split(', ');
// scale value
var s = Math.sqrt(values[0]*values[0] + values[1]*values[1]);
var player = GetPlayer();
// angle from the slider
var r = player.GetVar('rotationValue') ;
elem.style.transform = "translate("+values[4]+"px, "+values[5]+"px) rotate("+r+"deg) scale("+s+")";
}
- EmmaClayton-ea64 years agoCommunity Member
Hi Gaston
Thanks for the demo file, I'd love to adjust it for a project I'm working on. I've tried copying and pasting the .png and the sliders into a new .story file so that I can play with them but it doesn't work when I publish it. The variables and triggers have copied across. Just wondering what it is I've missed.
- GastonRAPARIVO4 years agoCommunity Member
Hi Emma,
Could you please share your .story file so I can see what you missed? (Just a .story file including the slide in question)
- cerikLisans172 years agoCommunity Member
thanks.
Related Content
- 5 months ago
- 10 months ago
- 10 months ago
- 10 months ago