My new project: Tact, a simple chat app.


February 13, 2008

I’ve had a pretty interesting past few days. One of my classes is Basic Interaction Design where we learn how to ideate, prototype and build interactive systems. Today was the final delivery of a project. They’re done in teams of three and my team for this project was pretty awesome. Over the past few weeks, we worked on persona and scenario design, wireframes and sketches, and so finally the time came to learn how to put it all into a working Flash thing.

I hadn’t opened Flash ever until a month ago, but I was hoping this program and course provide me an opportunity to learn about Flash in the form of actually doing something with it, versus “dry” training. So when time came, we somehow worked it out so that I did most of the Flash work, even though I marked myself as not having much prior experience. But I’m used to learning things fast.

So over the past weekend and past few days, I found myself immersed in Flash and working with crazy architectures and timelines four or five levels deep and putting it all together. We had done all of the concept work with teammates and came together to propose some UI designs and the final UI was somewhat of a mix of our individual work. In the end for the final-final thing, it worked out so that they provided me the artifacts and things like static Illustrator screens and text copy, while I put it in Flash.

The last few days were especially awesome. I worked on the thing Sunday night from 9 until 3am in the morning. On Monday, I got up at 7 to go to classes. At 3pm, I was done with classes and fortunately didn’t have much other immediate work to do, so I could immerse myself again into the project and prepare for our agreed 8pm meeting. The three of us sat together until 2am and it was mostly a work session where we just agreed the final deliverables and the things that go into it and then proceeded to flesh everything out and integrate.

I wanted to do work around transitions in Flash to make static Illustrator “screenshots” into a coherent flow. This meant that very quickly I had to learn things about multi-level masking (which you can’t do… but you can nest movies and have masking in each) and sort of learn on the go about what’s the right way to organize things in a scalable manner.

I hit a low point somewhere around midnight and 1am, where it was evident that a layer structure that I had picked would no way support the kind of interaction that I wanted to do, since it involved masking on multiple levels. I had to redo some work and mind you, I had had 4 hours of sleep the previous night. But I got my act together and said the presentation is not until 8 in the morning, and realistically looking, this work is doable in 6 hours. :)

So by 2am, the other artifacts were done and we had all the static pieces like screens, photos and text, but I was nowhere near done with my UI flow and transitions. So the rest of the team went home to get some well-deserved rest while I stayed at our MHCI lab to wrap it up. And indeed, the same thing applied that I’ve seen many times over in other projects. The most important thing is that you find a method, approach, or architecture that you’re really happy and confident with. (But as illustrated in my case, it may take some probing and a few errors, dead ends and retours until you get there.) And once you’re there, it’s a simple matter of plugging all the artifacts into it and making it work.

So indeed, I was done with the meat of it by 6am, and then had two hours to go over it and kill the most annoying bugs. There were a few left in the final deliverable, but nothing super bad – mostly the kind of bugs you have to actively look for to notice them. So in general, I’m really happy with my personal progress in Flash with this project. I’m going to publish the actual content and deliverable in a short while, once we get results back from class.

It was definitely one of those kinds of projects where you make a really focused effort to get the thing done by deadline and have to make many compromises and decisions in a very quick timeframe while shooting for the original high goals. So the equivalent of this is constructing, say, a chair of whatever materials and parts you can find the quickest, which may or may not be actually intended for whatever you’re using them for, and applying liberal quantities of duct tape to hold it all together, and hoping that it doesn’t break during the final use/presentation. And when you come back to it in three months, you look at it, amazed that it’s still standing, given that the codebase is a total mess and you can’t really make much sense of it, even though you know that it was yourself who wrote it ;)

Flash has some annoying bugs

I was exposed to some of the Flash bugs the hard way and had to quickly find ways to work around them. I work with Flash CS3 and this is the only version I know, it may be different in other versions.

My absolute favourite bug of the week/month in Flash is that even though the Edit menu says that Command-Z is the standard “Undo” command as it is in other apps, IT DOES NOT WORK. I’m not sure what it actually does, but it seems to be some kind of “Redo”. So, the Edit menu has an option for Undo with the key shortcut Cmd-Z. When you actually press Cmd-Z, it does something else. If you pick the option from Edit menu, it works as expected (so I had to do it this way for Undo, instead of hitting Cmd-Z). I have no idea what’s going on here.

I also had some trouble when reorganizing things. For example, I was expecting that you could move layers between movies. So that layer is an object which you could, for example, copy, cut, and paste between movies, together with all its frames and objects. Turns out you can’t do that. So when you need to move the content of a layer over, the quickest working method for me seemed to be to recreate it manually. Which, in case of this project, worked because the content wasn’t actually that long.

Then there’s the whole publishing thing. I have a movie that includes an MP3 soundtrack. First of all, Flash always seems to transcode the MP3, since the maximum bitrate in Flash 160 kbps, but my original MP3 was 192 kbps. I wish there was an option to just leave it as is. But what’s worse, the transcoding seems to not work that reliably and sometimes fails spectacularly. If you publish your movie with MP3 soundtrack, then sometimes the sound comes through, sometimes it has random artifacts like a loud click in the beginning, but sometimes it’s basically just random white noise. It’s highly unpredictable and I haven’t found what this actually depends on. And the only workaround for me is to keep publishing and testing until you’re sure there’s no unwanted stuff in the final produced SWF.

There are also other minor things like the weird model Flash uses to produce shapes – that when you do a shape, it does the stroke and fill as different objects which is very different from, say, Illustrator. But these are just little things to be aware of.

General Flash model

One of the things I always try to do when learning a new environment is to construct a model of its operation for myself. The more environments I work in, the more I’m convinced that on a very very basic level, the model for all development and programming environments is the same :) i.e you have some basic entities in the system like variables or objects, and then you have various methods of manipulating them. And then the approaches branch across what exactly are those objects and manipulation methods.

in Flash, the main things are frames, timelines, and objects. I have yet to read more about what are the different “objects” and “symbols” that you can have in Flash, and what are the finer relations between them. But basically you have a movie with a bunch of primitives, say, shapes or graphic objects. And then you drop them into frames, and you work with the frames across a timeline. And what makes it fun is the concept of a “movie clip” which is “movie inside movie”. In other words, you can have nested timelines of arbitrary depth which is actually great for organizing things. I definitely did it this way so that my outer container timeline is minimalistic and then nests into things that actually do something useful.

And then there’s the whole ActionScript thing to apply programmatic action to the objects and basically program. I was suggested to start with AS2 since it’s more like a “script”, whereas AS3 is a more heavyweight thing which has classes as first-level objects (maybe AS2 has too, but I didn’t get so far as to need them) and so AS2 is a good thing to start with.

AS2 in Flash is very duct-tape-like. It’s very powerful, as there’s a nested object model (remember nested timelines?) so you can address pretty much anything from anywhere wherever you are in the timeline, and you can start, stop and jump around in animations in all sorts of crazy ways. This means you can do a lot of things, and there are some tools there to help you. For example, one thing I found sort of by accident is that you can have labels for keyframes and then use those from AS, instead of referring to frame numbers. This means that if you experiment with animation and timings, you may often need to make things longer or shorter and take multiple passes until you’re happy with the results. If you address frames by number in AS, it means that your scripts break when you do this. Frame labels make life so much easier.

But there are also some quirks to make the programmer’s life more exciting. For example, objects have methods as you would expect, but if you write something like object.method() in AS, it makes no effort to check whether the object actually exists, so there’s no safeguard against typos or such. You can happily apply a method to an object and then it doesn’t work as you would expect. So it could mean that either there’s a genuine bug in your code in the form of a logic error, i.e the object exists but you’re giving the method wrong parameters, or that you’re simply calling methods of a nonexisting object.

Also, nesting is what makes things powerful in Flash, but it’s also an excellent method to shoot yourself in the foot and waste time on silly things. For example, I had a movie clip with some stuff in it, and I was trying to animate some of that stuff, and nothing happened. So it took a while until I realized that I had previously set the alpha level of the parent movie clip (the container) to 0%, meaning that the movie clip was completely transparent/invisible, which of course applied also to all the nested objects inside it. But again, the only way I could figure this out was to carefully go and check the whole “nesting tree” and all the objects.

So a summary could be that Flash is a pretty powerful environment, but it’s also very easy to shoot yourself in foot and produce horrible, ugly, unmaintainable mess with mysterious bugs. So it’s mostly up to the developer to stay organized.