Antti Kupila

Personal Blog, Portfolio and Online playground

View over the green room at Sid Lee, Montreal

FDT 3.0 out — in three flavors

My tool of choice, FDT 3.0, has been officially released. No more beta! I was in the beta test program and it has been very exciting to see the progress of this wonderful tool. As I said before, if you haven’t tried it out; please do so. There’s a free 30 day trial too.

FDT Logo

FDT 3.0 packs a whole bunch of features which put the older 1.5 to shame (I won’t even try to compare it to flash, or even flex builder). Features include advanced code completion, an automatic formatter, quick fixes & assists, templates, organizing imports & automatic importign, launchers, semantic highlighting and much, much more. The biggest one though is definitely AS3 support which works like a charm. In short, it has changed the way I work. If Actionscript is the language that brings the bread to your table, go give FDT a spin.

I was kind of surprised to see the split into different versions. While I understand this step as a good “excuse” to make some extra cash (which is well deserved), i find it kind of annoyed. I own a license for FDT 1.5, which I bought when I read that the upgrade will be 99€. Now, however, I’m reading this is just for the basic version which is kind of disappointing. 599€ for the enterprise version is still quite a bit more (i definitely want the debugger and advanced refactoring tools).

FDT 3.0 public beta

I’ve been working with FDT for quite some time. There’s no going back to any tool I’ve ever tried (then again I haven’t worked in Flashdevelop, which many developers working on Windows recommend). Still, FDT is awesome, it has changed the way I work. I simply get more error free code out in less time.

Now FDT3 is now open beta, meaning anybody can try it right away! If eclipse is your tool of choice, go give it a test drive.

FDT3 will be 299€ or 99€ when upgrading from 1.5.

Of course you should realize that it’s still in beta status, so judge for yourself if you want to use it for production work. The private beta has been updated quite frequently and sometimes introduced bugs that made work quite annoying. Keep this in mind ;)

Slow motion flash for debugging

So, here’s the deal. You’re working on something in flash, you test several simultaneous scripted (or not) animations out and notice something’s wrong. There’s some weird overlapping or something going on there, but it’s really hard to tell since it all happens so fast. Sure, you could leave it there as it’s barely noticable, but we want to make products that aren’t just good but perfect.

So, how do we solve this? Well, by now—since you’ve read the title—you probably know where I’m heading. Me and Svante from ACNE Digital (the company i worked for before) were talking about this and i decided that i’d come up with some slick solution that’s easy and quick to use whenever this happens. So, that’s what I did. And of course to support open sourcen and help other people make better products, you’ll get it too. For free as always.

The Recorder is a pretty simple class that let’s you specify an area to record and then simply record that into RAM, which you can then play back at the desired speed. To keep it easy to share I put everything in one class, including the recorder, the playback, and the gui with an animation engine. This of course makes it more difficult/annoying to create & modify, but it’s easier to download and use as it’s only one file.

So, how do you use it?

Well, it’s pretty simple. Place the class in a folder /com/anttikupila/debug/ in your classpath. Then just import the class, and call Recorder.initialize( );. That’s it.

  1. import com.anttikupila.debug.Recorder;
  2. Recorder.initialize( );

Here’s an example with some motion graphics, courtesy of Alexander Petterson (thanks Alex!):

To try it out. Click inside it first to give it focus, press and hold space, then drag an area to record and click the area. Then press space again to stop recording and start playback. Adjust speed with the up and down keys or with the dial to the right. You can hide it again by clicking space, which obviously also frees all resources required (this thing's really ram-hungry). If you want, you can download the source to the example too.

There is really no limit on the length (except your ram/patience), but I'd keep it pretty short - basically just for the time you see the problem. After this it'll start playing those frames in a loop at the original speed. You can adjust the playback speed from the dial to the right.

Now I know some people will say that there's no timeline etc. But people, think about it; do you really need it? I don't think so, and it looks nicer like this :) Less is more, 'aye. Still, if you want, feel free to add additional controls (if so, please help everybody else and share the code).

Actionscript 2.0 only at the moment, sorry about that. Still, it's very easy to port to AS3 if you need to do so. Also i want to mention that this is something i made in like one or two days, so please don't use it in any production environment as it is. It's meant as a debug tool so bug threshold isn't the same as on production sites ;)

I'd love to hear your comments & suggestions

Enjoy :)

Papervision3D goes public beta


The guys who changed the flash world (by adding a third dimension) and indirectly even the flash player (Adobe added mip mapping) have released their drop-dead-gorgeus open source project Papervision3D as a public beta.

After 7 months of development the open source (MIT licenced!) actionscript 3d engine is available to anyone to use, for free, for anything. It even comes in both flavours, as2 and as3 (the as3 version is a lot faster). Papervision3D will (or has) change the way websites look in the future. I’m sure we’ll see more 3d as it’s so easy to work with nowadays.

So, get your copy, try it out and show off your creativity without having to get your head around the rather complex math lies under the hood!

Closer instructions on how to get Papervision3D and get started in their blogpost:

ps. I even got my 3 seconds of fame by having flame in the showreel :)

Flash, SWFAddress and Google analytics

It’s been quiet here for a while, sorry about that, “been busy”.

Anyway, i was browsing through my news today and noticed that SWFAddress automatically gives google analytics hits. This means that if you build your site with the back button (etc) enabled using SWFAddress, Google Analytics will also track the visitors internal navigation, automatically! Nice! To some of you this maybe isn’t any news (1.1 has been available since February), I just hadn’t noticed it before.

To use this you don’t really need to do anything, as long as you have the _uacct="UA-xxxx-x"; part from the google analytics script, it’ll work fine. Also you don’t need to call it the first time, SWFAddress does it automatically.

Now come on people. I know most of the people reading this are more or less experienced flash developers. Today it’s so friggin easy to have a fully functional, accessible and search engine friendly flash site that there’s not really a reason not to do it. Sure, it requires a little extra time to implement if you haven’t done it before, but when you’ve built a framework of some sort for it, it doesn’t really require any extra effort to implement.

Overall I think experienced flash developers should take responsibility for doing things right and show a good example to those who are learning. The people who say flash sucks have their reasons, but there’s a way to fix it (or at least parts of the problem).
Have it as a requirement, not a bonus, in your next project, ok? Thanks :)


Actionscript 2 utility class: Grid

I’ve been working on a project with fullscreen flash. Everybody who has worked with something like this, or even without working with something like this probably knows that a grid for checking positioning can be handy. Well, I know I thought so, so I wrote this simple utility class.

Below is an example, you can enable it with the SPACE key (click inside it first, to give it focus). Change resolution with the arrow keys.

It's nothing special or new, I know, but still can be very helpful.

Download with example

Update: Hehe, since my tilde key wasn't working for anybody else, i changed the default key to SPACE. You can of course change the response key, just use Grid.key = keycode