Robots! Animating Text with Actionscript and XML

source code is available HERE

Recently I decided to tackle a challenge posed by Firstborn in New York on behalf of the Society of Digital Agencies to students at RIT . The challenge: was to animate type completely with Actionscript 3.0. This text had to be loaded and configured using XML, and XML only. Having previously done a text explosion effect in papervision3D I knew that I wanted to do something a little different. I finally decided on everyone’s favorite thing about New Zealand- no not Lord of the Rings. Flight of the Conchords! Being the tech geek that I am their song “Robots” seemed perfect for this assignment, plus it was only two minutes long.

The XML was broken apart into
tags which symbolizes a single line of lyrics. Feature creep got out of control on this quickly as I quickly wanted to be able to set the font, color, start position, end position, whether the positions were relative- just to name a few.

a type line might look like this:

<line continuous=”true” duration=”1.5″  font=”Silkscreen” >
<start x=”-75″ z=”400″/>
<end z=”-400″ y=”0″ x=”0″ />
<lyric >The distant future</lyric>
</line>

other attributes included were changing the background gradient color, and a duration offset that was used to keep two lyrics on the screen at once.

Toward the end of development I realized that I needed a way to embed the fonts so that they were viewable on all computers. After googling and researching several different methods I simply found many of them to be very cumbersome. I couldn’t find any solutions that allowed me to embed multiple size fonts inside a single font.swf. Imagine my frustration when I wanted to embed 12 different font sizes that were key to my animation. So: in not the *best* coding practices I simple included two dynamic text fields and grabbed their font on the fly. Long ago I learned that by placing a space character ” ” inside a dynamic textfield it kept all of it’s textFormat properties, this made coordinating with designers much easier on a smaller page-by-page basis.

This magical method allowed me to quickly embed the font by using these pre-embedded textFields and go about my day.

I posted the source code so anyone can look through it and see exactly how I pulled the XML data and loaded fonts. Unfortunately I cannot zip up the song to go with it because the Flight of the Conchords own the intellectual property, but you can view the final result below.

WordPress is blocking the the .swf file from loading external files so you can view this here

source code is available HERE


, , , , , , , , , , , ,

Interactive  6th April 2010

About... Ben

This author published 20 posts in this site.

Share

FacebookTwitterEmailWindows LiveTechnoratiDeliciousDiggStumbleponMyspaceLikedin

You must be logged in to send a comment.