Hi Lynn, you can sort of recreate this effect in Storyline. Here is a really rough example I just put together using Storyline 360. It has a few bugs in it but you can get the idea from this.
I have attached the story file (bugs and all) if you want to take a look.
If you don't have 360 then the way I created this was as follows.
1. I inserted 2 photos of people and then copied each one. I then cropped the original photos so for the thumbnails. On the copies, I added a wipe entrance and wipe exit animation. (note wipe does not work on mobile devices but it is the best choice for replicating the scrolling example).
2. I then created the Name label and yellow line that appears when you hover over the thumbnails. I applied a fly in and fly out animation to the name and a spit in and split out animation to the line. (again, the split does not work on all devices)
3. For each thumbnail, I created a hover state and a selected state. For the hover state, I copied and pasted the name label and line and positioned them where I want them to appear when the mouse hovers over the thumbnail. For the selected state, I copied and pasted the larger image of the person into the state over top of the thumbnail.
4. I right-clicked on each thumbnail and assigned it to button state 1.
5. I then created 2 move animations for each image - one to move the image to the right and another to move the image to the left and added triggers to initiated the moves when the user clicks the thumbnails.
6. I also created 2 slide layers - one to display the text for Joan and one to display the text for Bill and added triggers to show the appropriate layer when the user clicks the thumbnails.
OK, I took a closer look today. I'm seeing the two pictures in the timeline, but that's it. I'm not seeing the wipe fades or the yellow lines. The only animation that shows up is one motion path on "joan".. Is there a way to see all the animations in the timeline to dissect how it was done?
I've attached a screen capture of what my timeline shows.
Each pic has states. Each pic's selected state has an (wipe) entrance and exit animation. An in the hover state, you'll see that the yellow line also has (split) entrance and exit animations. You won't see these animations on the timeline, but you can select these items in the various states and then click on the Animations tab.
Hi Lynn, take a look at the steps I outlined in my post, they describe what I did to get this to work. Let me know if you have any questions. it is a bit of a fiddley setup.
6 Replies
Hi Lynn, you can sort of recreate this effect in Storyline. Here is a really rough example I just put together using Storyline 360. It has a few bugs in it but you can get the idea from this.
https://360.articulate.com/review/content/0b9a6b19-0078-4c3e-9832-27f50c8b021e/review
I have attached the story file (bugs and all) if you want to take a look.
If you don't have 360 then the way I created this was as follows.
1. I inserted 2 photos of people and then copied each one. I then cropped the original photos so for the thumbnails. On the copies, I added a wipe entrance and wipe exit animation. (note wipe does not work on mobile devices but it is the best choice for replicating the scrolling example).
2. I then created the Name label and yellow line that appears when you hover over the thumbnails. I applied a fly in and fly out animation to the name and a spit in and split out animation to the line. (again, the split does not work on all devices)
3. For each thumbnail, I created a hover state and a selected state. For the hover state, I copied and pasted the name label and line and positioned them where I want them to appear when the mouse hovers over the thumbnail. For the selected state, I copied and pasted the larger image of the person into the state over top of the thumbnail.
4. I right-clicked on each thumbnail and assigned it to button state 1.
5. I then created 2 move animations for each image - one to move the image to the right and another to move the image to the left and added triggers to initiated the moves when the user clicks the thumbnails.
6. I also created 2 slide layers - one to display the text for Joan and one to display the text for Bill and added triggers to show the appropriate layer when the user clicks the thumbnails.
Thanks I'll take a look more closely at the file!
OK, I took a closer look today. I'm seeing the two pictures in the timeline, but that's it. I'm not seeing the wipe fades or the yellow lines. The only animation that shows up is one motion path on "joan".. Is there a way to see all the animations in the timeline to dissect how it was done?
I've attached a screen capture of what my timeline shows.
Each pic has states. Each pic's selected state has an (wipe) entrance and exit animation. An in the hover state, you'll see that the yellow line also has (split) entrance and exit animations. You won't see these animations on the timeline, but you can select these items in the various states and then click on the Animations tab.
Didn't even think to look at the states. This is helpful! Thanks. I'm a total newbie...
Hi Lynn, take a look at the steps I outlined in my post, they describe what I did to get this to work. Let me know if you have any questions. it is a bit of a fiddley setup.
This discussion is closed. You can start a new discussion or contact Articulate Support.