October 25, 2016

Three Best Things: Tinkering with Animations in Storyline

I like being inspired by other artists. I've recently noticed this interaction concept on Dribbble that seemed to transfer very well into Storyline.

Originally, I intended this as an exercise in professional stealing - for practice, I stalk Dribbble artists and secretly try to recreate what they did, but in the Storyline or in other software programs. I do it as an exercise in understanding the creative process.

So, a couple of moments later and I came up with this:

In this case I used an oversized parallelogram shape that was set to move down on the straight animation path at the start of the slide's timeline. Each slide used "Push" transition. Text has "Fade" animation.

In the original example, my focus point was on the animated yellow shape. In the original we can see the edge of the yellow shape, which moves down when the next photo slides into the screen. This is not something easily achieved in Storyline as it deals with individual slides (it's not impossible, but not easy). Apart from transitions, there are no out-of-box solutions for making the slides interact together. In this case, however, I didn't want to go for anything overly complicated. 

So, while my first version was not bad, it was still lacking the grace of the original. At the same time, I knew that I won't be able to recreate the same animation and go to bed at a reasonable time. So I had to improvise and think about what's possible in Storyline. I played around with different transitions and added extra shapes in the screen, to suggest that there are more screens coming up:

With a little shape on the right side.

I liked the movement, but the added shapes themselves felt weird to me, particularly on the first slide. The last slide was also a bit odd because it didn't have any. Perhaps, it would have been less strange if I had more slides, but for just three it wasn't really good. 

So, I kept experimenting and instead of the sideways "Push" transition, tried the up/down one. It didn't work too well at first, because, contrary to the original design, my shapes had different colors. 
The easy solution would have been to make the color of each shape the same, as I didn't really have any reason to make them different, other than for pure decorative purposes. Still, out of curiosity, I came up with another version of this interaction. I did the following:

  • Added a custom state to each shape, changing it's color to the color of the shape from the previous screen. 
  • Added a trigger to change the shape's state to normal based on the timeline (0.5 seconds).

Here's the result:

Vertical transitions and the color change.

While I was pleased with the result, the obvious weak point in this case is the reverse navigation. Specifically, if you click "Back" button, the shape colors will not match. Again, purely out of curiosity, I wanted to see if there was any way to work around that, apart from creating duplicate slides as I did previously.

With this in mind, I added a custom "Back" state to each shape and added a trigger to change the state of each shape to "Back" when the user clicks "Back" button. Here's what happened:

Going forward and then back with changing states.

It was an interesting outcome, but, in my opinion, too chaotic. As I mentioned before, there was no real reason to change the color of the animated shape and in this case I could really see that it adds more confusion / chaos to the whole concept. With this in mind, my final version of this interaction was this (click here for the published version):

Final version.

Simple yet still interesting and works quite well when going forwards and backwards (if I do say so myself). In any case, definitely an interesting technical exercise.

If you want to play around or use any of the versions of this interaction, you can download the complete Storyline file here. Or grab just the final version. Note that you will need Peace Sans font, which you can download for free.

No comments:

Post a Comment