Introducing RokTok, a Flex mashup featuring particle systems, last.fm and Twitter!

Now that I’m settling in as the new R&D guy at Esria, it’s time to start showing people some of the cool stuff I’m doing. Part of my job is to work with and evaluate new technology, libraries, and tools. The best way to do that, in my opinion, is to use them by building “real-world” applications. So, in order to begin playing around with the Mate framework and the Flint particle system library, I decided to build an app that I call RokTok. This fun Flex app combines the top musical artists on Last.fm with the community conversations on Twitter.

Screenshot of roktok app

I started peeking into the Mate framework just before 360Flex, and it looked pretty cool. I got the chance to see Laura Arguello’s Mate session at the conference, and afterwards I had no doubt that this framework was worth a deeper look.

Mate works a bit differently than the traditional Flex frameworks like Cairngorm, and that’s exactly what I like about it. Most of your work with Mate will be in an EventMap, an MXML tag-based event wiring system. Personally, I think this is a great way to utilize Flex’s native markup language and binding system, and to keep much of the framework code in one place. To me, it felt like I spent less time making the framework do its thing because I wasn’t creating half a dozen different classes to get one minor action to happen, yet it still felt organized. On the other hand, I could tell that larger applications with many events being handled in one place could lead to a large and unwieldly event map. Thankfully, there’s nothing stopping developers from breaking up event maps into multiple parts with only related events appearing in the same maps. Still, though, some developers may find that Mate works best for smaller applications that could still use a framework.

I love particle systems, and I’ve done several little experiments with them in the past. RokTok will be the first time I’ve been able to use them as part of an app, and making them visualize data seemed like a great way to do it. Many folks first head to Flare for data visualization in Flash Player, but I recently discovered the Flint particle system library for AS3. It’s obviously geared specifically toward particle systems, but in that area, this library definitely shines. I found the API extremely intuitive and extensible (good architecture, yay!), and it was super easy to integrate it into a Flex application.

Having designed my own particle systems in the past, and having trouble making them easily customizable, I was excited to see the approach Flint took for extensibility. Using Initializers and Actions to define behavior, Flint makes altering the way particles interact possible through small pieces that are easy to write and reuse. Having a decent collection of Actions that already come with the library and cover many of the most obvious behaviors certainly helps too. If you check out the source code for RokTok, you’ll see a few extensions I made in the com.flextoolbox.flint.* package.

I had way too much fun building RokTok as one of my first Esria R&D projects. If you’re interested in how it was built, check out the source code. It is released under an MIT-style open source license. Stay tuned because I’ve got a lot more cool stuff planned for my R&D and community efforts at Esria.

About Josh Tynjala

Josh Tynjala is a frontend developer, open source contributor, bowler hat enthusiast, and karaoke addict. You might be familiar with his project, Feathers UI, an open source user interface library for Starling Framework that is included in the Adobe Gaming SDK.

Discussion

  3. Mike

    Nice Josh. We’ve been using Mate over here for a new product we’ll be releasing soon, and I’m really digging it. I’ll have to take a look at your source when I get a minute!

  4. John

    Hi Josh,

    Thx for the cool app !
    I’ve got a technical question for ya.
    How did you make those small circles in which an avatar resides ?
    Did you make a custom component for it by Sprite or UIComponent ?
    or swf ? or something else ???

    thanks in advance

  6. Emanuil

    Great work!

    One question if I may. Why do your VOs (Artist.as and Message.as) extend from EventDispatcher if they don’t dispatch any events? Thank you!

  8. ed

    Josh,

    Great work! I’m currently experimenting with Flint and have run into a problem with isolating a single particle when the mouse rolls over it. I checked out your source code and noticed that MoveWithExceptions simply places the particle into an array to isolate it, then removes it from the array to place it back into the fray, but I’m not clear on how it removes that from the effects of the emitter.

    What am I missing in this picture? Any insight you can give me is greatly appreciated!
    Thank you,
    Ed

  9. Josh Tynjala

    ed, you can see where MoveWithExceptions is ignored by the emitter in its update() function:

    override public function update(emitter:Emitter, particle:Particle, time:Number):void
{
    if(this.exceptions.indexOf(particle.image) >= 0)
    {
        return;
    }
    super.update(emitter, particle, time);
}

    The emitter tells MoveWithExceptions to update a particle, but if the particle being updated is in the exceptions list, the update() function just returns without doing anything.