Categories
Design Patterns

Design Patterns in Flash

As Flash developers, sometimes it is counter-productive by simply copying patterns from other languages or environments. Identifying unique Flash patterns is probably more important, because Flash is unique in many ways.

When talking about patterns, the purpose is to identify common problems and provide named solutions for them, so that developers can communicate easily without coming up with different explanations.

Patterns can be in code, or it can be in other forms. For example, here’s one I use for many different applications, which I call an Event Mask:

Problem: When a custom-made dialog box pops up, mouse and keyboard events must not be passed to underlying objects.

Solution: Create a movieclip (either during authoring time or dynamically at runtime), assign mouse and keyboard event handlers to it, turn off its hand cursor, and display it under/with the dialog box.

This is a very simple pattern that I use all the time. It is unique to Flash because of the way movieclips and events work. Luckily, this is now handled automatically in Flash MX 2004 (such as the Alert component).

A common architectural framework (although some refer to it as pattern) is MVC. One of its benefits is to separate the logic from the user interface; however, many Flash developers find that it is overkill in Flash, again, because of the way Flash work. For example, the timeline, movieclips, and UI components already represent most of the view and controller. Breaking the code up further into three classes may complicate the development process. However, the same may not hold true on a different scale in client-server applications. By keeping the three classes separate, different views can be created more easily (e.g. Flash, HTML for desktop browsers, HTML for handheld devices, XML, WAP, PDF…etc.)

What are your most used patterns in Flash development? Have you identified any pattern that you use on a regular basis, but there is no name for it?

10 replies on “Design Patterns in Flash”

One pattern I’ve been thinking a lot about lately is Memento, which allows you to reconstruct the state of an object later. This is particularly useful in flash for undoing operations, or using tricks to implement the browser back button. If you can somehow reconstruct the state of your application from a simple object, or from a string passed through a url, then you can make your application much more responsive and usable.

I tend to use MVC alot with CF/Flash projects. The model is implemented on the server as a .cfc and abstracted in Flash as a responder class (using Remoting). As you said, this makes creating different view layers easy. For non-Flash browsers, we can use all of the same data but display it in HTML instead.

And yes, I’ve used that “stop background click” pattern over and over again…

Interestingly enough, an article was just published (http://www.onjava.com/lpt/a/4161) on web design patterns for j2ee. Some of them directly apply to Flash (mostly the 3 “partitioning patterns”). I’ve used the “Independent Client” pattern a few times…

I use the MVC pattern often too, but recently, like Dylan I’ve also been looking at the Memento pattern (as its very useful in RIAs) and have put together a working implementation on my site. I would appreciate any thoughts on the Caretaker role with regard to using it in a MVC.

As the Originator would be part of the View or least one of its components, would the Caretaker be part of the controller? To me, it would. But are there any other patterns that would work better with the Memento?

I use Creational Patterns the most (Abstract Factory, Object Pool, Singleton…) and Structural Patterns like Fa軋de, Bridge, Decorator, Proxy and so.

I’m having all of those coded in AS2 so I’ll be able to share them soon 😉

I coded a complete one (fla included) of Decorator Pattern. It’s in Spanish as it was intended for an Spanish mailing-list but I don’t really think that’s a huge handycap. You can download it at http://www.m14studio.com/decorator.zip

Apart from that, I do not agree with you when you’re talking about MVC as a Design Pattern. MVC (MVP as well) deals with some Design Patterns but isn’t a Design Pattern itself but a model.

Cheers,
M.

Strategy. So simple most people probably don’t even realize they are using it… Yet it’s benefits are incredible.

Observer. It’s a popular (and powerful) one. But I’ve found you have to be careful about managing who’s listening to who and who is broadcasting to who. It can easily turn into a circus.

Composite. Love it. Especially when you’ve implemented it and the recursive nature just suddenly (and almost magically) works.

Memento and Command are fun. State, Bridge, Facade. They all have something good you can apply to Flash. The fun stuff comes when you start combining things.. like saving(memento) and sharing(flyweight) state(state).

I have issues with MVC. Actually, more along the lines of how I see it implemented. I like the ideology. Seperate presentation from behavior and logic. It’s a great and a smart way to code.. but not at the expense of…

class Model { … }
class View { … }
class Controller { … }

that’s a giant headache. All you get is bloated god classes that you can’t reuse. Personally, I think MVC is much better implented as a micro or component architecture.

At any rate… it would be great to start flushing out some more unique patterns directly applying to Flash. I know they are out there.. just a matter of defining them.

I have done some work with the visitor and iterator patterns. I find robert penner’s tweens especially amenable to iteration.

I have used my visitor over and over again. It helps me differentiate the object, what you want the object to do, and how you want it done.

I have code samples of these classes on my site.

Interesting discussion 🙂
I read a lot about MVC, ecpecially on brande hall’s book, Object Oriente programming for Flash MX. Altough the book was intended for AS1 it has been a great sourse of inspiration.

Besides that, I think that we must know about patterns and try to apply the underlying logic to our applications without following any kind of pre-conceptual trail…

The framework I ended up with to develop my applications is with ultra-specialized classes that then I use to build bigger classes that can be somehow related to one part of the MVC pattern.

Of course it would be stupid to try just to have 3 classes, Model, View and Controller…
What we need, in my opinion, is a whole set of specialized classes that we relate only conceptually to a part of the MVC pattern.

After all a pattern is just a conceptualization of practical work performed by our slaved classes 😉 and if we keep that in mind we can develop robust and reusable code without hand-cuff ourselves to rules that can be both an advantage and a limitation…

ligth
Pippo

I just starting working with design patterns for ActionScript 2 and the only one I really know of is MVC. Currently I知 developing a flash cd-rom application that uses the MediaDisplay component and what I need to do is have jpeg load on the cue points fired by the MediaDisplayed component. I also have a time display that gets updated when the time changes on the MediaDisplay and control buttons (pause. Play, previous cue, first cue, next cue and last cue). I also have navigation buttons that get update to highlight depending on what cue point the mediaDisplay is on. I using MVC deign pattern because I really don稚 know any other that will update all of the observers. The problem is that I don稚 always need to use the update function on my observers on every cue point fired. I need to update the observer when they need to be updated. I知 using my mediaDisplay componet in a class that is my model and my views are my load/create slide(jpg) class, my presentation controls(controls the video cues and pauses, plays etc), my navigation(goes to and plays cuepoints) and my time indicator. Now all of my views send updates to my model to tell it various properties like when it is playing, go to a certain cuepoint and in turn the model sends back a generic update function on all observers. I know this is very long e-mail I just hope you understand what I知 trying to do. I guess my question is�is this the best way to do it? Can I get the the oberservers to update on different events like it is playing, current time, current cue point etc. I know I知 asking a lot of you guy to point me in the right direction but I know you guys are the best with design patterns and if you could just give me some information that would be so much help. Thank you so much.

Leave a Reply to Robin Debreuil Cancel reply

Your email address will not be published. Required fields are marked *