Interactive Comic Book – Creating 1st prototype

Building an early prototype

After some discussions among the team members and the stakeholder (student), development started on a prototype using the drawings from the original project by our Year 4 student. These drawings were scanned and carefully traced in Flash before being outputted as a spritesheet (png and xml) and imported into a Flash Builder project.

An example of converting scanned drawings to digital movieclips ready for animating:

From left to right: 1) Original scanned image 2) Each segment of character traced/re-drawn 3) Each segment rounded to better match original 4) Each segments made into separate movieclips (required for animating later) 5) The final result with some added colour and ready for animating

The backgrounds and other items are drawn in a similar way. With items requiring animating demanding more attention to detail.

Why use Flash Builder (FB)?

The team have previously used Flash Builder along with popular game and UI frameworks such as Starling and Feathers to build mobile applications for both mobile and tablet devices that work across iOS, Android, Windows and Blackberry OS’s. The benefit of developing in this way is simply to save time…a lot of time! Program once in FB, then with minimal effort you can export to all the above platforms easily.

Also the beauty of using existing open source frameworks such as Starling is not only again to save time, but to improve performance. Most that know a bit about Flash in recent years know that mobiles don’t run it very well (if at all!). By using FB and Starling together, we’re utilizing Stage 3D¬†which is Adobe’s new weapon to target mobile and tablet devices in particular.

The other added benefit for developing this way is for testing. FB allows you to take the exported file and view in it in a webpage much the same as any other Flash animation (testing on mobiles will come later).

See below screenshot of progress so far:

stage 2 prototype


Leave a Reply

Your email address will not be published. Required fields are marked *