This eLearning course highlights the new features of the 2014 CLA. A multidimensional background animation adds depth to the page, as well as puts focus on the vehicle. Notice the subtle background overlays and textures. The grit and sportiness of those textures emphasize the look and feel of the vehicle.
Photoshop Production / Illustrator Production / Flash Production / Flash Development
Module 1 Page 1 – Welcome
Highlights of this video:
0:01 – Multidimensional background animation and focus on the vehicle
0:12 – Swiping transitions to reveal new hero shots of the CLA and text build sync with voiceover
0:41 – Subtle animations can be seen in the foreground and background, as well as on the front of the vehicle with the use of highlights on the headlamps and grille
Example of the interactives in the course
The interactives in this course focuses on a large full screen image with voiceover and popups. This particular interactive allows the user learn the different parts located under the hood of the CLA.
After the initial animation, the user is presented with these hotspots. Each of these hotspots corresponds to a particular part of the vehicle.
Each hotspot has an animated hover state. It is a white pulsing animation, and stops when the user rolls off of the button.
When the user clicks on a hotspot, the red button animates into a close button as it brings up the popup window for that particular part.
There is corresponding voiceover with text and image building. When the voiceover is complete, the "X" appears in the button and the user can close the popup.
The popup will animate back down to it's original location and the hotspot will turn gray for the "visited" state.
Once all of the hotspots have been viewed, the user receives a prompt. They can either review the hotspots or continue to the next page.
