Making Music with Flash
Interview by Robert O'Malley
Mike Wislocki and Andy King spent 200 hours creating the Flash movie"Chemicals" for the Boston indie band Control Group. At the start of the movie, the central character is imprisoned in a tower in a desolate, surreal landscape. Peering through the barred window of his cell he suddenly imagines another life for himself. He cuts through the wall of his prison and takes a long dive into the sea. The music and the animation have a haunting, surreal quality. Intercut with the animated sequences are video clips of the band and 3D imagery.
Wislocki and King knew each other from high school but hadn't seen each other for years until they met up again in Boston eight months ago. Both had come to the city to attend college and both were interested in web design. They decided to freelance together and eventually ended up working at SkyWorld Interactive.
"We've been spending every waking minute with each other; our girlfriends hate us and our friends don't like us anymore," says King.
Both Wislocki and King are self-taught Flash developers who hope to work someday in multimedia and video. King's been working with Flash for three years, and Wislocki has been at it for a year. They recently spoke with ScreamZine about their movie, which has been featured on Shockwave.com.
Mike Wislocki:
The movie is created entirely in Flash. This was our first one, so it was pretty touch and go. We were pretty ambitious about what we wanted to do but aware of the time constraints. A lot of our ideas ended up on the cutting room floor. We had a storyboard that was only one page in length, and that kind of changed as time went on.
We had a lot of creative freedom because [the band] was busy cutting their album and reworking a lot of their songs. We pretty much had their approval through all stages of making the movie.
Andrew King
A lot of our ideas got pushed by the wayside because of the technology. Unlike TV, you have to program Flash for the lowest common denominator. We weren't able to have it run as fast and smooth as we would have liked; you have to bring the frame rate down and all sorts of other difficult crap to comply with Shockwave's requirements.
Mike Wislocki
Yeah, they give you a time limit and you have to stream a three-and-a-half minute song along with it.
Andrew King
So basically the song occupies at least a meg of your two meg limit, so you've got one meg to play with to do the visuals. Basically all the graphics and all the vectors and all the animations had to be kept within that one meg.
Mike Wislocki
Yeah, that was a large consideration at the beginning. We had to keep things small. And we also had to keep reusability in mind, since if you reuse graphics or animation in Flash (if they're in your library) there's no additional cost to you, as far as file size goes.
Andrew King
Another requirement was that it had to pre-load 55% of the movie and then stream the rest. I think they say there's like an eight minute wait for the first meg, which is basically what you have to pre-load. But it also depends on your line speed. So if you're on a 33.6K modem, you'd have an eight or nine minute wait. But I highly doubt that a lot of people are still on 33.6 modems.
Mike Wislocki
I would say that the biggest bottleneck you're going to hit isn't so much your Internet connection (a slow connection just means that you'll have to wait longer for it). It's your processor that is really going to affect how well you can enjoy the movie. There's a problem if your processor can't keep up with the streaming. We made it a priority that the animation had to keep up with the sound. If the processor can't draw the frames quickly enough it will just start dropping them.
Andrew King
If you're on a slower processor it's going to look very choppy.
Mike Wislocki
They wanted it to be viewable on a P2 200. I've got a P2 450 at home and you can watch it on that. But I prefer to watch it over something a little bit quicker.
Andrew King
It doesn't lose coherence. It's not unwatchable, but it's not as smooth as I'm accustomed to seeing.
Building the Main Character
Mike Wislocki
At the very beginning (the main character) was probably the thing I planned out the most. Since he was going to be the focus I had to make sure he could be easily animated. He originally came from a painting in Photoshop. I had sketched out a side view and a front view, then scanned that in. In Photoshop, I painted over it and had a different layer for each body part so that everything would be proportionate and have the same color. The joints would also match decently. The original painting was a lot different from the character you see in the movie. I saved each body piece as a bitmap, then imported it into Flash. Flash has some native tools for converting the raster image into a vectored image. I did that with the settings fairly low because I didn't want it to have a photorealistic look. (That's why it's got an almost abstract look.)
The main character was cut into smaller pieces to reduce the size of the files and enable us to move those pieces quickly on the stage. The larger and more complex the vectored images are, the poorer they'll move, especially on the lower systems. So they were all brought into Flash, where we built the image up again. We had a library of the body parts. We moved the centers to the ends of the joints so we could animate them cleanly. That was probably the most involved part of the animation. We originally started out with side and front views but we added other ones on the fly. (We hadn't anticipated needing the overhead view.) We whipped up other shots as we needed them.
Andrew King
Some of the shots are actually rasterized graphics rather than vectors. We found they were smaller as bitmaps and so just left them. That's one of the problems with Flash. As Mike already said, a big vector is as bad as a big rasterized graphic. So you've got to be careful.
Mike Wislocki
For the underwater scenes, we adjusted the brightness of the guy all the way down to make the image black. That gave us a kind of silhouette we could use. It helped us with the distance shots. When the guy was scaled down a lot you tended to lose a lot of the image. We also didn't want to be doing the same shots over and over. (We essentially had two main views of the guy that we had to use throughout the video.)
Andrew King
For the [landscapes] we followed roughly the same process we used to make the main character. We used Flash's tracing tools to vectorize photo realistic pictures. We optimized the hell out of them. (This crushes the image quality.) It actually smoothes them out and makes them look very impressionistic.
Mike Wislocki
There are two steps that you have to take. First you trace the image. Then there are a bunch of settings you use to control the tightness of the image, or the color threshold. If you bring those all the way down, you'll get a giant vectored image that is essentially photorealistic, especially compared with what you brought in. If you slide those all the way up, you give it a large threshold and use a large area of pixels. As it calculates what colors to use, you start to get something that's more blocky and dithered. That's the first step. After that you can select the entire image and optimize the curves in it. On the first run you're going to get something that's got maybe 5,000 to 6,000 curves in it, which is pretty heavy. Then you can optimize those to make the image look much smoother and more impressionistic.
Andrew King
To combine the main character and the background we used layers. It's the same technique you'd use in an image program like Photoshop or AfterEffects. You put the background on one layer and the foreground image on the foreground layer.
Mike Wislocki
Occasionally we'd have to do masking to hide parts of the character or other objects that shouldn't be visible. In terms of scale, it was all pretty much eyeballed.
Using Video
Andrew King
For the shots of the band we used a technique that's been going around on the Web for a year or so now. We'd seen it done on the web in some way, shape, or form. A bunch of us got together and said, "How the hell did they do that?" We just kind of figured it out. It's captured video (like VHS tape, DV tape, 8mm, whatever you want to use). You dump it into a computer and you basically take that entire sequence, break it out frame by frame as bitmaps, and basically apply the same technique that Mike was talking about to make them look very curvy and very optimized. You can do that right in Flash.
Mike Wislocki
Before you bring them in, though, you can batch them in Photoshop and crank the contrast up.
Andrew King
To create the drive-in theater scene, we used a lot of masking and compositing. That was one of the scenes that was much more ambitious at the beginning. If I had the time to redo it, I would use a lot more layers and force the perspective a little bit more. The background is static. Originally our intention had been to have the rows of theater polls on different layers. That way we could have moved those to make it seem like the entire background was also moving.
Mike did a lot of the animation and original creation of the character. We would offload pieces to each other and assemble them later. I did some sequences involving text effects and the video vector stuff of the band.
Mike's a much better programmer, so he delves more into that area. I spend a little more time animating. Mike's got a big programming background as well as the 2D and 3D design background.
Mike Wislocki
There were a lot of pieces that got five seconds of screen time but took a long time to do. Probably the best example of this would be the molecules we used. We used a 3D program to create them. We set up cameras and got the motion we wanted. Then we exported the entire animation sequence as bitmaps. Andy took it from there.
But we didn't like the way it looked. We have a plug-in (Vector 3D) for the 3D Studio Max 3.1 program that can export vectored images, but it looked terrible. We found that the images we were bringing out weren't consistent with the rest of the movie. We didn't mind having them be a little different, but they looked too off. So Andy brought each of those frames into Flash, and basically used them as a template and redrew all the images. We're talking about 45 or 50 frames, and it takes a lot of time. So that whole thing took, what, two days?
Andrew King
The thing with Flash is it's so time consuming, because none of this stuff is modular yet. They don't have something, say, that let's you do a bubble effect. There's nothing like that. AfterEffects has a lot of tools for video that let you apply just any kind of effect you want - blurs and stuff like that. But at the stage Flash is at right now it's still very primitive. The effects are mainly custom built.
Mike Wislocki
Yeah, they don't really have anything by way of widgets that you can pick and choose from.
Andrew King
I think that in the next couple of years, Flash and video will merge. Macromedia has already demonstrated it has the capability to do that. Director has no problem with things like that. So if they could somehow merge those technologies.
But I don't think Flash will become obsolete in any way; their whole vector-based design is very smart, especially for the Web. On the Web you don't have a standard screen resolution or a standard screen size. And I don't think that is going to go away. With Flash you can basically have something that's 100 pixels by 100 pixels look exactly the same at 14 inches by 14 inches.
Mike Wislocki
Yeah, I don't see Flash going away. As the web evolves so does Flash. I mean if you look at Flash 3, it was very lightweight as far as programs go. Flash 4 introduced scripting, which was still kind of clumsy and a little bit awkward to use, but people have done some amazing things with it. Now Flash 5 is coming out, and it seems like they have completely redesigned their scripting model so that it's more like JavaScript; it's a lot closer to an object- oriented scripting language. They haven't really flushed that out in Flash 4. So I'm really excited to see where it goes. But there are some things they've really got to work on. Right now Flash isn't very good at painting and repainting bitmaps or moving bitmaps.
Learning Flash
Andrew King
When Flash 3 came out I got the tutorial. I'd heard of Flash 2 and had kind of futzed around with it. But a friend of mind actually sent me a tutorial for Flash 3. I thought I might as well sit down and learn this thing. It just started from there. Flash 3 is like a complex VCR. It doesn't work any differently from tying multiple VCRs together and having one tape head play to this frame and then trigger another tape head to play to that frame. That's about as complex as it is. But then it got more complex with Flash 4, and here we are.
Mike Wislocki
I had just used Flash a little bit and then I ran into Andy and we were talking about what we had done. And by that time he was already an expert in Flash. I really didn't have any idea what I could do with it but I'd done a lot of 2D and 3D work. I was curious to see how they could be merged. I think I've learned a lot about Flash just by watching him. He's self-taught and I'm kind of self-taught by watching him.
Saving Time
Andrew King
We did use a lot of Flash 4 capabilities with the video that really saved us time. We had the ability to make text effects without having to animate the letters frame by frame. Up until Flash 4, if you wanted bubbles to come out of the guy's mouth you had to animate every bubble on a separate layer with a separate starting point and a separate ending point.
Mike Wislocki
We built engines for everything. At the beginning we kind of saw what we had the need for and developed it as we went along. To save us time with this job, we built a text engine. You type your text in and have a number of effects to choose from. We used that for all the text.
We'd drop a movie clip in a keyframe that has the text engine in it, give it a string, and it would do everything by itself. It was the same for every scene with bubbles. We created a spark generator just for fun and were actually able to reuse it. We changed the sparks to bubbles and threw that in whenever we had an underwater scene. We just dropped that in and said give us 20 bubbles. It generated the physics on the fly.
In the dive scene, I used a lot of 3D stuff to create realistic-looking water and the ocean floor. Then I just optimized the hell out of it in Flash so that its look and feel was consistent with the rest of the video. That scene took a long time. The timing of it was a pain because everything had to be in synch with the song. I suppose that was true throughout the entire video, but it was more important there because that was our emotional money shot.
Andrew King
One of the sound options in Flash is to set it to stream. When you're streaming an entire song, you have to make sure that everything synchs up. If your animation is 30 frames per second and you put in a three-and-a -half -minute song, you've got so many frames in the movie you can fill with animation. As the tape head goes through the timeline, you hit an instance of sound and an instance of animation. That's how it synchs up.
Mike Wislocki
Which is kind of a pain because our preferred way to work is to do everything in little movie clips. We kind of lay the movie clips on the stage and play each one. When it's done playing, it tells the next movie clip to start playing. Doing it modular like that is very clean, very easy. You don't have tons of layers and tons of frames on your main stage. But, unfortunately, when you're streaming you can't do that; everything has to be laid out on the main stage.
The Future
Mike Wislocki
There's been some interest in having us develop more of these movies. Hopefully we'll have more coming up soon. The one we did took over 200 hours over three weeks.
Andrew King
Launch and Shockwave said they were really interested in doing these things and would love to send some work our way. Those are mainly the people who are interested in this stuff, and I guess it's for entertainment purposes.
Mike Wislocki
No matter what we do we just want there to be some story, however anemic, behind it - a reason to get from point A to point B. I like a lot of the movies I see but I play the song and watch it and it's like all well and good, but I've seen this part before; they use the Flash reusing thing and it just gets old.
Andrew King
When I talk about what I'll do next, I think it would be a video-oriented career, a merge with multimedia and video.
Mike Wislocki
Yeah, I'd go in that direction as well. Flash is a good program to cut your teeth on; it isn't complex and you can get the basics down. But yeah, I think there's going to be a ceiling as far as what we can do. Who knows when we'll hit it? I'm assuming the program won't evolve too much as time goes on, but maybe the next version will completely blow our doors off. After we're really comfortable here, we'd like to move on to something like video, which offers more freedom.
Meeting in Boston
Mike Wislocki
Actually we went to high school together, but we hadn't seen each other for a lot of years. Then we ran into each other.
Andrew King
Yeah the good years!
Mike Wislocki
We ran into each other about eight months back and we were both kind of doing the same thing. He was doing some freelance work and we had some pretty good skill sets so we started freelancing together. Then he started this job and said, "Hey! do you want to come check this place out?" I did. It seemed like a good setup.
Andrew King
But everybody here hates him, so it wasn't the greatest idea in the world. I'm still getting a lot of heat from that...Nobody's laughing.