Forum Discussion

metutel's avatar
metutel
Community Member
19 days ago

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!

advice
layers
states
storyline 360
triggers
  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    19 days ago

    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. 

     

     

    • metutel's avatar
      metutel
      Community Member
      18 days ago

      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?

       

  • Nathan_Hilliard's avatar
    Nathan_Hilliard
    Community Member
    18 days ago

    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

     

Related Content