Is there a way to position and/or move a shape by a variable length.
I know the slider trick. However I want to have text as part of the shape, and pictures do not render well enough for the text to be legible at any resolution.
You could put each variation of the shape into a different state. Then use triggers to change to the appropriate state based on the value of the variable.
Suppose you have a Storyline variable distance... and a variable duration... This code then gets those vars and acts appropriately...
let player = GetPlayer(); let myDistance = player.GetVar("distance"); let myDuration = player.GetVar("duration"); let myShape = document.querySelector("[data-acc-text='someShape']");
10 Replies
Hi, Thaddeus,
You could put each variation of the shape into a different state. Then use triggers to change to the appropriate state based on the value of the variable.
That has some major limitations.
1. It would not be a smooth transition.
2. it would require N separate states.
The other similar approach is to:
Move Object along Motion path X
when Numeric_Entry changes
Then have a number of
Move Object X+ {1.2.3...) along Motion Path X+ {1.2.3...)
when Motion Path X+ {1.2.3...)-1 completes
If Numeric_entry >/= X+ {1.2.3...)
This will work but it is labor intensive and fragile.
Use GSAP...
This code moves a shape in 2 seconds 100pixels to the right.
Ofcourse you can use Storyline variables.
let myShape = document.querySelector("[data-acc-text='someShape']");
gsap.to(myShape, { duration:2, x:"+=100"});
Suppose you have a Storyline variable distance... and a variable duration...
This code then gets those vars and acts appropriately...
let player = GetPlayer();
let myDistance = player.GetVar("distance");
let myDuration = player.GetVar("duration");
let myShape = document.querySelector("[data-acc-text='someShape']");
gsap.to(myShape, { duration:myDuration, x:"+="+myDistance});
Here is a sample...
https://360.articulate.com/review/content/ca37f1a3-05b6-4f7e-aa53-47dfafed0d09/review
And the Storyline..
Thank you for your help. Unfortunately I'm a contractor and don't want to create anything that my hypothetical successors can't update.
Hi Thaddeus,
the same thing is doable with triggers and variables :)
https://timed.zamczyk.co.uk/
here is the file with left /right buttons to move both ways
only 2 motion paths, 2 variables, and few triggers.
you could also limit the animation by adding hotspots shapes on the slide edges (and triggers), so the object will not go off the screen.
Thank you Adam. I've been struggling with needing a new trigger for every movement.
All I needed to do was Set Relative Start Point for my shapes when I'm animating them.