Today I did another ‘coffee break experiment’: How to display and move very wide panorama images in Storyline. I found a huge image (14200*2122) of Alcatraz that I wanted to add to a Storyline project. The first hurdle was to resize and tile the image (Storyline can only handle images with max. 2048*2048). I ended up with three tiles, totalling 5139*768.
I wanted to try two variations; 1. Move the image back and forth automatically and 2. use buttons to move the image interactively.
The first option was very simple to implement. I simply added two linear motion path animations and added a few triggers so that the animations loop perpetually.
This type of self-running animation could be used as a screen saver in a kiosk-style application.
The interactive variation was a bit more challenging, because I wanted the image to be moved as long as the mouse is HOVERED (not CLICKED) over either navigation button. I also wanted the nav buttons to disable once they hit the left and right edge of the image.
But with a few more triggers and a counter variable that counts up/down to disable and enable the buttons at the right time, this variation worked too.
And with that my coffee break was over, back to work!
Edit 10/2016: Here is the .story file for download.