Blog Post

Discover
1 MIN READ

Storyline 360: Animated Timeline

Montsea's avatar
Montsea
Super Hero
7 years ago

Grab this animated timeline e-learning template to show company history in a digestible way. Quickly swap out the background with a vintage or modern image to show the progress that has been made over time.

See this project in action

Published 7 years ago
Version 1.0
  • PeteBrown1's avatar
    PeteBrown1
    Community Member
    Hello Talia

    Like any other flavour of web content, yes it would be, provided it was placed on a webserver or intranet site that the audience had access to.

    That isn't as technically difficult as it may sound to the uninitiated. For example, consider the methods in this article:
    http://blogs.articulate.com/rapid-elearning/5-easy-ways-share-e-learning-courses/

    In particular, the Amazon S3 option described is popular among the Articulate community.

    Good luck!
    • TaliaTaylor's avatar
      TaliaTaylor
      Community Member
      Also Pete,

      I took a look at your course and am dissecting it. I am not understanding how you enabled new photos to appear after clicking the red buttons. Can you please explain this modality? Thank you.
    • TaliaTaylor's avatar
      TaliaTaylor
      Community Member
      Hello Pete,

      Thank you for this resource. I have made it possible for a prospect to access my eLearning content via my webpage. I really appreciate your tutorial. Extremely helpful!
  • There's one more thing. When you unlock the background, edit states, and move it, then you'll see the states are animated fade ins and outs. (somehow you dont see them if you dont move the background)

    Thats what makes it soo smooth! I somehow never am able to add animations inside states...

    Montse hacked into The Matrix of SL...Are you in fact Trinity?
    • Montsea's avatar
      Montsea
      Super Hero
      HAHAH First rule of the matrix: Don't talk about the matrix.

      To create the animated states, you have to first cut each object from its state to the clipboard. Then, paste the object back into place and you'll be able to apply the entrance and exit animations. Old school trick from version1. Here's a video tutorial on using animated states: https://www.youtube.com/watch?v=8n3pjGPc6cg
  • I will not mention the matrix anymore :)

    WOW! Thats it!
    In holland we have a proverb,
    I did hear the clocks ringing , but I Didn't know where the pendulum was.

    thanx for the link to the instruction!
  • TaliaTaylor's avatar
    TaliaTaylor
    Community Member
    I've been looking for a way to visualize my career experience and this seems like a possibility. Because I am new to Storyline, I can not predict potential issues with usability. Would you mind helping me think through this? One question I have to jumpstart the process is:

    If I were to use this template to visually interpret my resume, would it be accessible to prospective employers?
    • Montsea's avatar
      Montsea
      Super Hero
      Thank you so much, Ronewa. You just made my day:-)
  • GwenHill's avatar
    GwenHill
    Community Member
    I am not able to access the timeline. The download asked which app I would like to use to download. I chose Adobe, which is giving me an error. How can I download using a different add?
  • Can you explain how you enabled new photos to appear after clicking the buttons. Thank you
    • Montsea's avatar
      Montsea
      Super Hero
      Hi Shanna - Talia's reply is spot on. I put all four background images into custom states for a single object. This lets me keep the background images persistently below all base layer and slide layer objects.

      The techniques in this tutorial are the same ones I'm using for the background images: https://www.youtube.com/watch?v=8n3pjGPc6cg
    • TaliaTaylor's avatar
      TaliaTaylor
      Community Member
      Hello Shanna,

      I was wondering the same thing. So, I downloaded the file and played around with it a bit. What I found out is that each photo is embedded in the formatting of his background.

      So, if you go to the triggers pane, you will see that each dot/button is triggered to change the state of the background. When this button is clicked, a new background is shown. Hence the switch in photos.

      I hope I did okay explaining that.
  • IelyzavetaSv's avatar
    IelyzavetaSv
    Community Member
    This is a great template! Could you explain please how you made buttons?
    Particularly that the dots work with text nearby simultaneously whether I press either dot or text and that they change their states correctly.