Lima Bean recently collaborated on an innovative project to produce an interactive digital comic. We were approached by Strika Entertainment, a Cape Town-based comic and animation production studio, with the concept of taking their “Supa Strika” comic digital.
Supa Strika is a South African comic and animated television series about the world’s greatest soccer team. It follows the team’s adventures both on and off the pitch as they try to win the Super League trophy. Along the way they meet soccer’s best players, travel to soccer-loving destinations, and face opposition from deceitful coaches and players.
The comic book has been hugely successful. It is distributed in 38 countries to over 1.4 million people each month. Since its inception in 2000, 130 issues have been created. It has also been made into an animated television show, which debuted in 2009.
The digital comic was launched at the beginning of the year to complement the success of the print and television series. The project was challenging, because there was nothing to base the web development of this type of animation on. None of the major comic book creators like Marvel and DC had developed an interactive comic, so this project would be breaking new ground.
In this sense, “interactive” implies that the user has to do something, like click frames and click through the pages of the comic. It is also interactive in the sense that elements of the comic come to life once you’ve clicked on them, making the traditional comic book experience more engaging.
The technology used to develop the comic had to be platform independent, i.e. it had to work on all types of devices such as tablets, PCs, Macs, and mobile. Consequently, flash animation could not be used as it does not work on Apple mobile devices. Instead, Lima Bean decided to develop and design the comic using cutting edge HTML5, CSS3 and JavaScript technology. This way, the comic would be viewable from all devices, including iPads and iPhones.
The project is a collection of layered images, which are animated using JQuery, and supported through HTML5 media protocols. Each page of the comic contains up to 50 different image layers, producing a seamless animated sequence. The use of masking and intelligent image transparencies enables the JQuery-based animations to come to life.
The end product is a never before seen or attempted interactive comic that combines the traditional comic with the immersive experience that animation provides. The reaction from fans has been very positive. The release of the comics generated hundreds of comments and likes on Facebook, as is evident from the fan page.
Four digicomics have been released so far. These comics are a copy of their magazine version, only digitalised and animated. Readers can look forward to a fifth one which will be out at the end of September. A new digicomic gets launched about every two months. You can find them all online at supastrikas.com.ph/digital-comics.