How to make an image slide into position

Hi,

I am reaching out to everyone with more advanced skills with conditions and variables. I am trying to slide my image to specific positions every time a date is clicked. For instance, if "1916" is clicked the images slide to the first image and the corresponding text appears. For "1947" the image slides again and new text comes up. I first thought my image had to be a slider or the "when clicked, move" function would work, but no. I think the answer may have something to do with conditions and variables, which I'm not very good at. Here's my file and this is what I want to make happen:

- click a date, then the image will slide to position x

- also the corresponding text and layer will appear for each date clicked

I would appreciate if anyone has the time to offer a solution. Thank you.

9 Replies
Richard Hill

Hi Vanessa,  There are few ways this can be done, but each has it's own level of difficulty in setting up.

Although it might not move exactly as you would like the easiest might be to use this template from Nancy Woinoski: 

https://community.articulate.com/download/storyline-2-slider-image-gallery

Vanessa M

Hi Richard,

I saw this one, but it doesn't really work since my big image is 15 small images long, so this is a lot of scrolling. It would be better to click each year and have the image know the exact positioning to slide into. What were the more complicated solutions you were thinking of?

 

Richard Hill

The problem is the animation part.  Storyline doesn't easily animate from point to point at all, because there is no coordinate axis built in.  Not many people have ever done this successfully.   The other methods which I don't recommend you try are:

1. creating your own coordinate axis system. Combine all the images together in one state. Create an animation for the new image to move the exact width of your image in the right and left direction.  You'll then need a looping condition that is appended to the animation to see how far the object moves and adjust an xposition variable.  

2. Using Multiple States and placing your images inside, again with some xpostion variable along with  some tweening Javascript to get the movement. 

Sorry to bear bad news.

 

Richard Hill

Ok Vanessa,  It occurred to me that the one thing Storyline can do well is stop a looping timeline on a dime.  So what I did is animate your graphic into a loop, and create triggers for your buttons to stop it at the exact moment the frame it needs is in view.  To do so I added a variable TimelineTime  which changes every time you press a date.  In the looper layer where your graphic now resides are the triggers that make it stop.  Also because your layers were set to hide all other layers, I had to make a special layer to hide all your signs when a button is pressed.  Hope this all helps, and have a Happy Cinco de Mayo!

ps. I also added  a " buttonset"  to your dates to get them to stick with a glow.