Forum Discussion

MagdaDiaz's avatar
MagdaDiaz
Community Member
10 years ago

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 during a course.

14 Replies

  • anoyatis's avatar
    anoyatis
    Community Member

    Sorry Magda, this is not currently possible in Storyline.

  • MagdaDiaz's avatar
    MagdaDiaz
    Community Member

    Thanks. I will hack together a workaround. These are the times I miss Flash:)

  • mariapizzoff's avatar
    mariapizzoff
    Community Member

    Cannot dynamically do much with it at all?

    Flash is so much more advanced than this powerpoint macro program. Going backwards with HTML5.

  • 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-ea6's avatar
      EmmaClayton-ea6
      Community 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.

      • GastonRAPARIVO's avatar
        GastonRAPARIVO
        Community 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)

  • Just changed Gaston's version to use GSAP as that is build into Storyline360. Gives many more possibilities too... like easing and more.

    This was the original code...
    var elem = null;
    var slide = parent.document.getElementById('slide');
    var divs = slide.querySelectorAll('div');

    for (var i in divs) {
        if (divs[i].tagName == "DIV") {
            var attr = divs[i].getAttribute('data-acc-text');
            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(', ');
        var r = Math.round(Math.asin(values[1]) * (180/Math.PI));
        var player = GetPlayer();
        var s = player.GetVar('scaleValue') ;
        elem.style.transform = "translate("+values[4]+"px, "+values[5]+"px) rotate("+r+"deg) scale("+s+")";
    }

    And this is the same but then using GSAP.
    As you can see...shorter and simpler.


    //this needs to be the 'acc-name' of the image
    let imageToChange = document.querySelector("[data-acc-text='avatar.png']");

    let player = GetPlayer();
    let s = player.GetVar('scaleValue');
    gsap.to(imageToChange, { duration:0.1,scale: s });

    Added the adapted version.

    • GastonRAPARIVO's avatar
      GastonRAPARIVO
      Community Member

      Good job Math! Your version is indeed shorter.

      You can even set duration to 0 instead of 0.1 cause you don't need any animation.

      gsap.to(imageToChange, { duration:0,scale: s });
      • MathNotermans-9's avatar
        MathNotermans-9
        Community Member

        True...even better then to use gsap.set
        gsap.set(imageToChange,{scale:s});

        Used to the syntax... and it makes it easier to add eases or anything else.
        GSAP is really magical.
        https://greensock.com/

        And luckily Articulate is now quite aware of its power...they update it now regularly.
        The latest version 3.10.4 is active in Storyline360