Posts Tagged ‘flash’

Interactive Allakhazam! Part 1: Runtime Sprites

This post will be the first in a series of short articles that describe the many different projects DANA’s interactive department works with, the challenges each project presents, and how we work towards solutions for those challenges.

In working on creating material for an interactive proposal request for one of our clients, I started working with creating sprites (graphics) at runtime (when the movie plays) rather than having those sprites already on the stage before the movie starts. The time you can save when working in this method is significant when you have a project with many many objects. For example:

The project I was working on required was an interactive calendar – so a big grid of boxes with numbers on them, and then text that described the event. If I wasn’t creating the sprites at runtime, I’d have to create 30 unique box graphics, each with a different number, unique text fields explaining the events (something like the events happening on that day), place them in their positions, and give them each a unique name. Quite a bit of set-up. Then, to interact with these boxes, their numbers, or their sub-information I’d have to call them out individually, and tell them what I want changed, or go change it manually by editing the graphic of each square. If I wanted to move all of them I’d have to either call them out by name, or keyframe animate each square – that could take hours!

When creating the sprites at runtime, I instead make a single box, with a single text field for the date, and empty spaces for the events to go in. Then, I write code that says, “Hey, put 30 of those on the stage, space them 10 pixels apart, make 4 rows. Each time you put one down, change the number inside of it to the order in which it was placed (So the 5th one put on the stage will say 5), give the box a unique  numbered name, and put that name in a list. Then, load this text file I give you, and put all the event information in those empty boxes.” So now I’ve got a stage full of exactly positioned squares, with correct numbers, full of information, and I’ve got all of their unique names in a list! So if I want to change anything about them – say I want them all to double in size so we can zoom in and read more text in each square – I can do that by writing code that says, “That list you made? Check through that, and scale all of those up. Make sure they’re still spaced nicely. Then expand the text boxes so we can read more.”

Creating Flash in this manner is really exciting for me. There’s something beautiful and elegant about writing code that does all this in a few lines, about having nothing on the stage when you start a movie, and have it automagicly populate. Like the idea of magic, we re-create our reality (or virtual reality) with words (or ActionScript); instead of carving a castle from stone, we take a single rock, and sculpt it into a grand palace that dances and sings at our very suggestion. Romancing the code aside – I hope this has been somewhat educational in regards to the benefits of runtime artistry for projects with many elements.