How to make an image slide into position
May 05, 2017
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
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
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?
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.
Those options don't sound good to me :(
I might have a solution, but I will have to test something out first. I'll let you know later today if it works.
Please do, not one else has written into this post.
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.
Holy cow! I can't believe you've spent so much time on this. Thank you, this solution sounds perfect. I'm going to try it out, if you don't mind I may reach out with more questions as I try to figure out what you've done. Thank you so much for your time, I'll bet it'll help many!
Sure, It does on the surface have some complexity. I'll answer what I can.
This discussion is closed. You can start a new discussion or contact Articulate Support.