I was wondering if any of you have found a way to change the size of an object, either using a trigger, animation or JS. For example: making a 4x4 square turn into a 6x6 square.
I know I can code it using CSS, but I don't know if there's a way to alter a storyline object using CSS via JavaScript, and then again that seems like an oddly difficult approach.
Do you want the square's size to change from 4x4 to 6x6 right away or increase gradually from the first size to the second size?
If the former, then you can use the object's states. The "Normal" state could be the 4x4 size and you could create a new state (you could call it "Large") for the 6x6. Then you just have to create a trigger to change the state of the object from "Normal" to "Large" when... (i.e. when the user clicks on the object, when the timeline reaches a certain point, when the variable changes, etc.) (You can also add a "fade-in" animation to the "Large" object, to make the change smoother, if you'd like.)
If the latter, then I think you can achieve it with JS, as you've already mentioned. If you happen to discover the relevant JS code, please share it here, as I would love to learn how to do this too! :)
Yes, specifically I want to gradually change an object's size. I'm trying to find a bit of JS code that might do that, but I'm coming up empty handed so far. I'm thinking a 'for' loop might do the trick, but then again I'd stil have to work out how to apply that loop to an object already created in Storyline.
If anything comes up, I'll be sure to let you know!
I’ve added that JavaScript code to a Storyline project to try to duplicate what the author has done, but so far haven't had success… perhaps you will have more luck?!
Anne, that's precisely what I'm talking about!! I'll get into cracking the JS code and see what it's all about! Once I have the code up and running, I'll post it!
Oh, that's great! I'm so glad that it helped. I'd love to see what you come up with because I (and I'm sure others) could really make use of it too! :)
5 Replies
Hi Bob,
Do you want the square's size to change from 4x4 to 6x6 right away or increase gradually from the first size to the second size?
If the former, then you can use the object's states. The "Normal" state could be the 4x4 size and you could create a new state (you could call it "Large") for the 6x6. Then you just have to create a trigger to change the state of the object from "Normal" to "Large" when... (i.e. when the user clicks on the object, when the timeline reaches a certain point, when the variable changes, etc.) (You can also add a "fade-in" animation to the "Large" object, to make the change smoother, if you'd like.)
If the latter, then I think you can achieve it with JS, as you've already mentioned. If you happen to discover the relevant JS code, please share it here, as I would love to learn how to do this too! :)
Hope this helps!
Anne
Hi Anne!
Yes, specifically I want to gradually change an object's size. I'm trying to find a bit of JS code that might do that, but I'm coming up empty handed so far. I'm thinking a 'for' loop might do the trick, but then again I'd stil have to work out how to apply that loop to an object already created in Storyline.
If anything comes up, I'll be sure to let you know!
Bob
Hi Bob,
I looked into this some more and came across this article, which you might find helpful:
https://www.wired.com/2010/02/make_images_grow_and_shrink_with_javascript/
The JavaScript code can be found in the index.html file in the .zip folder that the author provides:
https://www.wired.com/wired/webmonkey/stuff/Make_Images_example.zip
I’ve added that JavaScript code to a Storyline project to try to duplicate what the author has done, but so far haven't had success… perhaps you will have more luck?!
Cheers,
Anne
Anne, that's precisely what I'm talking about!! I'll get into cracking the JS code and see what it's all about! Once I have the code up and running, I'll post it!
Thanks so much!
Bob
Oh, that's great! I'm so glad that it helped. I'd love to see what you come up with because I (and I'm sure others) could really make use of it too! :)
This discussion is closed. You can start a new discussion or contact Articulate Support.