Designing for interactive performance

An opportunity to embark on

Not long ago, I was with a subject team that led student groups to create interactive animations in collaboration with Singapore Wind Symphony, Youth Wing. With the explicit time constraint given and the implicit demand for high quality, we felt the need to embark on certain form of rapid project development workflow that would not snuff out the creative process at the meantime. I am delighted that Adobe creative tools allow for such possibility.

Letting the creative tool does the creative lead

We gave the student groups full autonomy with regards to their animation development. Armed with Adobe creative tools, they operated as self directed teams. The tutor’s roles were transformed to become project facilitators - to oversee the project timeline, and technical gurus - to answer their technical queries with regard to the tools.

Below are screen captures of animations created by the student groups:

Anime - using Adobe Flash, PhotoShop and ActionScript

Cut Out Animation - Photo taking and editing, frame by frame animation - using Adobe Flash, PhotoShop and ActionScript

Pencil-mation - Painstaking frame by frame line drawing - using Adobe Flash and ActionScript

Video Special Effects - using Adobe Flash, After Effects and ActionScript

Stop-motion, lots of photo taking with frame by frame animation - using Adobe Flash, PhotoShop and ActionScript

Wayang Kulit, an animation genre that uses shadow - using Adobe Flash, PhotoShop and ActionScript

SMS Game, audience uses sms to affect the animation on screen. - using Adobe Flash, PhotoShop and ActionScript with other SMSing technology.

Wii Flash, the conductor uses the Wii stick as his baton to conduct his orchestra and affect the animation on screen at the same time. -using Adobe Flash, PhotoShop and ActionScript with WiiFlash Playable APIs.

Letting the language do the interactive syncing

With ActionScript, it became possible to interactively sync the animation with the live performance. We accomplished this with the following strategy:

1. The students broke each animation into various scenes. Each scene was created as a separate standalone SWF. This allowed for parallel production workflow, and also prevented bulky SWFs from crashing.
2. A main holder SWF was programmed to interactively (using keyboard events)
   • Load these SWF scenes to play in sequence.
   • Command the jumping of frames within a SWF scene. (e.g. mc.currentFrame+5 or -5)
3. Create interactive controls on each of these SWF scenes that corresponded to the music’s mood. For example objects of a scene could rotate or move according to the drum rhythm in the music.

Impact on student learning

I witnessed students taking ownership of their own learning with the help of Adobe tools. They ventured into various creative works that I had not previously taught them. The Adobe online community (both forums and expert blogs) empowered my students to explore new techniques on their own. I found my students growing in confidence because of their work on this project.

Conclusion

My department’s main goal has been to nurture students to become interactive designers cum programmers. We use Adobe creative tools extensively in our training program. Our tag line is "where the creative minds inspire technology." However, my recent experience with Adobe has made me think that the tag line might well read instead "where creative tools inspire the minds."

Links

• My technical blog: http://rick.triunebonds.net.
• My department's showcase site: http://www.minds.org.sg/
• My EIA 2009 portfolio submission: http://en.wikipedia.org/wiki/Blowing_wings