Forum Discussion
Use triggers and variables to cycle through multiple layers in sequence
Hello,
I have 73 images that I want to show in sequence to animate the wrapping function for the unit circle. I know that there are several ways to do this, but I'm not sure which is most efficient and easy to replicate. I have created a .story file to test the different methods using only 6 images.
As far as I can tell, here are my options:
- Option A Create a slide with a layer for each image and create a trigger that displays the layers in sequence (see slide 1.3 Layer_TriggerShowLayer)
- Option B Create a slide with one image and create states for each of the other images.
- Option B.1 Use a slider to show the states in sequence, which is easy to setup. However, I cannot figure out how to make the slider move automatically through every state using triggers based on the timeline. I would love to have the states appear in 1 second intervals. I’m not sure this is even possible (see my attempt on slide 1.1 States_Slider)
- Option B.2 Use triggers and timeline markers to move the states in sequence (see my attempt on slide 1.2 States_Trigger_Timeline)
The best effect so far is Option B.2, but it will require a lot of timeline markers to make all 73 images appear. Is there a way to do this using a variable that is linked to the timeline?Or maybe one of the other methods will work better with some tweaking?
All advice is appreciated. I am also happy to watch any training videos that may help me make this smoother.
Thanks in advance!
Update- I tweaked this project a bit to allow for preloading the cache with the list of images. This way, the delay between image swaps is reduced on the first view of each. The difference is very noticeable when using the slider to scroll through the images.
You now specify the maximum image number in a variable and it will preload the whole range. I made some other changes to the code and how it is triggered in Storyline, but otherwise it is more or less the same.
Updated demo: https://360.articulate.com/review/content/f374a316-cf1f-4968-9823-14bbee270116/review
Here is an option to consider that keeps your slides uncluttered with unnecessary images and triggers.
Demo: https://360.articulate.com/review/content/b6d2d687-1a80-451c-b848-d539c8b0ec93/review
With this, you place a sequentially numbered collection of images inside a folder with a blank index.html file, and insert the folder as a web object (see Scene 2).
Set the woFolder variable with the name of the web object folder (see instructions in Scene 2).
You then insert the first image into your slide. Set the accessibility tag with the base part of the image filename (for example, first file= 2400101.png so base= 24001). Size and position as you wish.
Place the included JavaScript in a trigger (Scene 1).
Set the imgNumber variable with the image number you want displayed. My images start with 24001 and run from 2400101 to 2400172, so my variable goes from 1 to 72. The demo uses a slider or buttons to change images.
Activate the script trigger to set the current image to the number in the imgNumber variable.
First of all, thank you!
Is there a possibility I could see the .story file instead of viewing in Review 360 because I ran into the following hurdles:
I'm not sure how to set the accessibility tag - is that under Alternative Text? Also, should I set that as the tag for the web object or for the image?
Is the Javascript generated once I set the accessibility tag? I didn't see any code.
Based on your published file, it looks like I will still need to build a trigger that moves the slider variable?
Right click on the picture entry in the timeline. Near the bottom of the menu is the Accessibility tag. Just type the name to use in the box. The JavaScript is in one of the triggers in the project, which I thought was attached. Oops. The slider and buttons were just for the demo. You just need to set the image number variable in some way and execute the JavaScript trigger. You can use a slider, which adjusts the variable automatically, or use buttons, which you would have to manually set with triggers. Or you can set the variable some other way. See the link in my other comment for the .story file and the demo web object folder with the images (which you don't need unless you want to rebuild the project from scratch, or change the images).
