Case Studies

HTML5 Animated Cartoons

Background

A leading provider of learning solutions for the school and higher education markets wished to publish a new series for beginner students of German. The student book was intended to not only offer opportunities in differentiated learning, language practice and language use but also visually engage students of years 7-10 and spark their enthusiasm. This is the main reason they opted to include animated cartoon stories. Animation not only adds a creative dimension to learning but also helps students to grasp unfamiliar concepts with ease.

Project Details

The requirement was an animated version of the cartoon story spreads at the beginning of each chapter of the Student Book. The animation was built in HTML5. As each artwork frame was displayed, the speech bubbles had to be highlighted and corresponding audio played.

diacriTech's solution

diacriTech’s team received individual artwork frames as PSD, as well as a complete PDF layout with instructions, script and audio files from client. The starting point for the animated cartoon was the creation of an animated template. Images were sized to fit into template. The next step was to set the scenes in motion. The animations were built scene by scene with extra features included; to pause and play the audio, toggle visibility of text, add bookmarks, view thumbnails and use zoom options. The final step was to link different scenes together. From designing a professional template to final integration, the team worked with HTML5 and its extensive functionalities to bring the chapters to life.

Result

The project was completed in a timely, efficient and impressive manner. The team combined the instructions from client with their animation skills to create animated cartoons that communicated key concepts of the curriculum. The outcome was a series that offered a stimulating and clean design to visually engage students and assist with their learning.

Testimonial

  • Having had a very quick look at a few of the units, the Alpha build is looking great!
  • Incredible! Thank you for this light speed delivery.
  • I’m delighted to tell you that all of the Ganz Klasse 1 Animated Cartoons have been approved with zero corrections. Thanks for your great work.
  • We were really impressed with the quality of work that diacriTech provided with Ganz Klasse 2 Animated Cartoons Beta 1

    • This case study isn’t the only HTML5 animation done by diacriTech team. With creativity and an ability to think far beyond the box, diacriTech has completed several HTML5 projects successfully for leading publishers. For more information please contact marketing@diacriTech.com.