Interactive Timelines #13: Challenge | Recap
This week’s challenge idea comes from community member David Baker who shared a really cool timeline example in the E-Learning Heroes forums.
...
Published 12 years ago
Version 1.0
Blog Post
This took longer than I anticipated. Most do! Finished last week but visiting family and holiday weekend took me offline for a few days.
I took the clone route and accepted the challenge to recreate the Big History Project as close to the original as possible.
For comparison, here's the Big History Project official link > https://www.bighistoryproject.com/pages/syllabus
Here's my contribution > https://s3.amazonaws.com/DEMOS/big-history/1.2/story.html
The first challenge was approaching the visuals. I stole...I mean, cropped a few graphics/images from the official site. It's a demo so no intention of using this as a project. The only images borrowed were the small icons below each number and the video intro images. There are two each for 'normal' and 'hover'. Everything else are graphics and animation created in Storyline.
The biggest challenge was figuring out how to manage the animations. I chose to go with fade in and fade out simply because Storyline doesn't support motion paths. I tried a staggered fly-in and fly-out but the logistics became overwhelming and didn't result in a smooth effect I needed.
One thing I didn't like about the original is the "Welcome Back!" text at the bottom. Every time you rolled off a threshold number it would reappear. I didn't navigate away from that position so the redundant "Welcome Back!" seemed out of sync. It does appear at the appropriate time though and will explain below.
This version navigates exactly as the original. The "Big History Project" logo in the upper left links to the main story.html file (Slide 1) with the opening animation. At the end of the animation there's an auto jump to Slide 2 which is a duplicate without the animation. I needed that duplicate as a 'dashboard' menu of sorts so the animation wouldn't initiate each time it was visited.
Each of the buttons (colored shapes with numbers - or Thresholds) have two states: Normal and Hover. The Hover state shows a layer with the supporting title text below that number. When you click on a number (now on a layer) a couple things happen: 1) variable set from False to True, and 2) Hides that layer and then Shows a "fade out" layer. The "fade out" layer has a 1/2 second timeline and interprets which button was clicked via the variable. Based on the "True" variable, a jump to slide trigger sends you to the appropriately numbered slide that now 'fades in' and an the bigger image of the Threshold title. In summary - hover, click, fade out layer, variable evaluates where to go at end of 1/2 second timeline, next slide fades in.
Once that navigation model was established, it was just a matter of duplicating it for each of the other threshold slides. Because you can navigate anywhere along the timeline from any of the other slides, it became a bit tricky to keep up with all the cross-navigation. Simple logic, but a LOT to manage.
One each of the main Threshold titles (slides) the intro 'play video' image when clicked shows a 'video' layer. That layer contains a WebObject of each of the video .mp4 urls. I found the direct url links to the videos by digging though the site source code. :) Once a video is playing, it will remain playing unless you roll over any of the other numbered threshold buttons. The video will stop and return the intro image for that threshold.
If you click the question on a threshold title slide (middle bar with angled arrow) a new window/tab will launch to the Big History Project's main page for that threshold. The white sequential numbers on the top menu bar also navigate to the same pages.
Finally, remember that "Welcome Back!" footer text? If you click anywhere in the black off of any of the objects, you'll return to Slide 2. Essentially, it "clears the screen" back to its default syllabus where you can freely navigate again. I like that behavior better. There are four hyperlinks in that footer text: Register, Sign In, Watch Video, and About the course. All but one launch a new window/tab to the original site. The "Watch Video" link shows another layer with the main trailer video. Another reason I only wanted this text active on one slide so as to contain that video in one place.
Okay, I think that's it. Let me know if there are any glitches or if you have any questions.
I took the clone route and accepted the challenge to recreate the Big History Project as close to the original as possible.
For comparison, here's the Big History Project official link > https://www.bighistoryproject.com/pages/syllabus
Here's my contribution > https://s3.amazonaws.com/DEMOS/big-history/1.2/story.html
The first challenge was approaching the visuals. I stole...I mean, cropped a few graphics/images from the official site. It's a demo so no intention of using this as a project. The only images borrowed were the small icons below each number and the video intro images. There are two each for 'normal' and 'hover'. Everything else are graphics and animation created in Storyline.
The biggest challenge was figuring out how to manage the animations. I chose to go with fade in and fade out simply because Storyline doesn't support motion paths. I tried a staggered fly-in and fly-out but the logistics became overwhelming and didn't result in a smooth effect I needed.
One thing I didn't like about the original is the "Welcome Back!" text at the bottom. Every time you rolled off a threshold number it would reappear. I didn't navigate away from that position so the redundant "Welcome Back!" seemed out of sync. It does appear at the appropriate time though and will explain below.
This version navigates exactly as the original. The "Big History Project" logo in the upper left links to the main story.html file (Slide 1) with the opening animation. At the end of the animation there's an auto jump to Slide 2 which is a duplicate without the animation. I needed that duplicate as a 'dashboard' menu of sorts so the animation wouldn't initiate each time it was visited.
Each of the buttons (colored shapes with numbers - or Thresholds) have two states: Normal and Hover. The Hover state shows a layer with the supporting title text below that number. When you click on a number (now on a layer) a couple things happen: 1) variable set from False to True, and 2) Hides that layer and then Shows a "fade out" layer. The "fade out" layer has a 1/2 second timeline and interprets which button was clicked via the variable. Based on the "True" variable, a jump to slide trigger sends you to the appropriately numbered slide that now 'fades in' and an the bigger image of the Threshold title. In summary - hover, click, fade out layer, variable evaluates where to go at end of 1/2 second timeline, next slide fades in.
Once that navigation model was established, it was just a matter of duplicating it for each of the other threshold slides. Because you can navigate anywhere along the timeline from any of the other slides, it became a bit tricky to keep up with all the cross-navigation. Simple logic, but a LOT to manage.
One each of the main Threshold titles (slides) the intro 'play video' image when clicked shows a 'video' layer. That layer contains a WebObject of each of the video .mp4 urls. I found the direct url links to the videos by digging though the site source code. :) Once a video is playing, it will remain playing unless you roll over any of the other numbered threshold buttons. The video will stop and return the intro image for that threshold.
If you click the question on a threshold title slide (middle bar with angled arrow) a new window/tab will launch to the Big History Project's main page for that threshold. The white sequential numbers on the top menu bar also navigate to the same pages.
Finally, remember that "Welcome Back!" footer text? If you click anywhere in the black off of any of the objects, you'll return to Slide 2. Essentially, it "clears the screen" back to its default syllabus where you can freely navigate again. I like that behavior better. There are four hyperlinks in that footer text: Register, Sign In, Watch Video, and About the course. All but one launch a new window/tab to the original site. The "Watch Video" link shows another layer with the main trailer video. Another reason I only wanted this text active on one slide so as to contain that video in one place.
Okay, I think that's it. Let me know if there are any glitches or if you have any questions.