ActionScript 3.0 Design Patterns

Like the tale of Goldilocks and the Three Bears we’re seeking a way to get more of you involved in the Golden Lunch Bucket contests—trying to find the one that is just right. As noted in our original announcement (where you find the link to download the Dragon Factory) all you need to do is to add classes to the existing parent classes. A slight change in the contest makes it easier. Just set up the draggable elements so that you can create a single Design Pattern of your choosing. By clicking the Play button below, you will see a finished example that does exactly that:

As you can see in Figure 1, by dragging the different pieces you can create a Class Diagram of a design pattern.

The little gray splotches are drag handles I added. Also, the fat lines are for the same reason—they’re easier to drag. Grab anything with an arrow by the arrowhead, and it’s easy to drag. Here are some tips:
Read more…

In a recent post, I looked at using the undocumented MovieClip.addFrameScript() method. It is a solution for accessing MovieClip objects with embedded tweens using external ActionScript 3.0. Not only is this important for controlling animations, but it is also a way to add code in classes that are part of a Design Pattern with ActionScript 3.0 files. In other words, you don’t have to use the Timeline or the Actions panel at all in taking advantage of the animation capabilities of Flash and at the same time have all of the advantages of using Design Patterns. In the initial use of the MovieClip.addFrameScript(), I didn’t take time to really look at what the method can do or even exactly how it works other than by example. This short post, tries to provide better documentation for this undocumented feature and an example of using it. Clicking the Play button provides an experience of the final product.(It just plays explosion flashes from the tweens in the movie clip in the library.)

Read more…

First off, let me say that Chandima is the go-to guy when it comes to the Model-View-Controller (MVC) framework, including PureMVC. So if you’re interested in MVCs, I’d suggest you start where I did—Chapter 12 in our book and any of Chandima’s posts on PureMVC. Further, if you have GoF’s original Design Patterns you might want to look up the several references to the MVC there, especially the initial explanation of its purpose in Chapter 1. Finally, by way of introduction, last year about this time, I broached the query, Is MVC Obsolete? based on a post by Brian Lesser. That kicked up very little dust either on our blog or Brian’s, but it helped to take a closer look at the MVC. You’ll be relieved to hear that I’m not going to trash MVCs in this series. Rather I want to explore the MVC as a compound pattern (or perhaps framework) to see some different things we might do with it.

MVC in a Nutshell: The Great Decoupler

To get started, GoF show the MVC to be three distinct components in what they call a a triad of classes. As such, they discuss its elements in terms of objects. The application object is defined by the Model, the screen presentation by the View and the way the way the user interface reacts to the user input by the Controller. Prior to MVC, the application, its appearance on the screen and the UI were grouped together in a single class. By decoupling the objects into separate units, the MVC loosens the relationship following a key good practice. (I used to cram them all together in a single class thinking that I was tightening up my code—how dumb was that?) As a first image of the MVC, then, think of it as a tool to loosen up code.
Read more…

In the fourth Golden Lunch Bucket Contest, Barbara Parkman entered for the first time and won the Grand Prize. This moves the US from last to second place in the World Cup.

Barbara Parkman, USA
Barbara’s entry added a Movement interface and implemented a movement class for each of the characters. In this way, each character had his/her own movement.

Contest #5: Our next contest (#5) is a good one for both Flash and Flex (FD) developers. Contestants first download the Dragon Factory files, and then create draggable objects that can be used to create class diagrams for any of the GoF class diagrams. That means you’ll need the proper set of relationship lines (e.g., ones for subclassing, aggregates, associations, etc.) and either input text fields for the different names of the design participants or make a huge number of graphic names. All elements must extend or implement the existing classes/interfaces in the ‘Dragon Factory’ files. All entries are due, October 20, 2009. This one is both fun and useful. (I’ll be putting up a sample of what the final product looks like to encourage entries.)

Click Here to see contest standings:
Read more…

Here is another introductory video for artists and beginning OOPers. I was almost finished with it when the other one went up this morning. This one covers using other classes (besides ones in the Library) for making things happen. The Client class is often part of a Design Pattern, but you can do a lot with a Client class on its own, making requests from other classes. Click the download button to go to the download site.

I don’t want to bore everyone with the trials and tribulations I’ve been going through with the technical problems I’ve had with Adobe Premier CS4, Snow Leopard and the new QuickTime screen sharing feature, but I think I’ve got them solved. For some reason the .mov files generated with QT screen sharing work fine with Adobe Media Encoder CS4 (AME), but if I put the QT files into Premier and export them to AME, they cannot be processed. Who’s the culprit? I have no idea—Colonel Mustard in the Library with the candlestick, perhaps. Anyway, one of our readers, Patrick, suggested Camtasia, and since I’ve been lusting after that application for years, I thought I’d give it whirl. Apparently, they now have a reasonably priced version for the Mac, and it’s lived up to its billing. Still, though, I have to get used to it, and these first several videos may leave something to be desired. Reader feedback is always valuable for fine tuning these things.
Read more…

What’s 100 Posts?

Here we are at 100 posts already since we started our humble blog in 2007. Our original goal was simply to cover the design patterns that didn’t fit in our book and try to generate a discussion among ActionScript 3.0 developers about OOP and design patterns. However, we ended up going in several different directions and learned a lot (mostly from our readers) at every turn. Here’s a summary list:

• Completed all of the original design patterns
• Introduced PureMVC in ActionScript 3.0
• Created Posts and Tools for OOP Principles
• Started OOP for Artists Series
• Launched Lunch Bucket Series: Take a Design Pattern to Work
• Began Golden Lunch Bucket Contests and World Cup
• Established the Closer Look Series for idiosyncratic topics
• Lively Discussions (aka Brawls) About Contentious Topics
• Generated best group of readers of any blog

We found that our readers are far more diverse than thought. Originally, we expected advanced and intermediate ActionScript 3.0 developers with fairly hefty programming backgrounds. However, we also found that some very smart people who were beginners at programming found their way to our site. Further, they were interested in learning ActionScript 3.0 using OOP structures. We were most gratified to find that comments from the advanced readers were directed at the less experienced in supportive and helpful ways.

What should we write about?

Instead of doing periodic polling, we are trying out a new ongoing feedback feature. See the new What should we write about widget in the center column? Type in new topic suggestions or vote on existing ones by clicking on the green button with the plus icon. You can also comment on suggestions already made.

In memorium

The cat in my simpsonized photo is in memory of my longtime pet of 15 years who was euthanized this Monday. She was suffering from liver and kidney failure. Although in pain, she remained a loving kitty until the very end.

You will remember the initial query that launched this two-part post started with an inquiry into the possibility of dragging a Video while it was playing. In order to make the query more relevant to design patterns, this second part looks at the process for expanding the larger issue of dragging objects inside a Sprite. Whenever undertaking such a project, begin with the Variation Table (aka Magic Table) to find the possible variations. The wrong way to start developing a design pattern for a practical problem is to look at all of the different class diagrams and pick one that looks like it will fit your problem. Instead, always start by asking, what varies?

In this case, the “hitchhiker” to be dragged is the particular type of object in question. We saw how to drag a Video object, but what about other objects that need to hitchhike on a Sprite to be dragged? So, we’re talking about different objects—or put otherwise—object variation. The closest matching variation in the Magic Table is the variation of the subclass of the object that is instantiated. That means a Factory Method design. (See how easy that was?)
Read more…

In a recent post I voiced my admiration for artists, designers and animators but noted that they seem to have been left out in the cold with ActionScript 3.0. I added a little helper statement not in the ActionScript 3.0 documentation—MovieClip.addFrameScript(). The idea was to encourage artists not to be too hasty in giving up on coding altogether.

Quite frankly, I was surprised by the number of comments we received on that post. I didn’t think artists bothered with our kind of discussions, and was more than a little gratified to find that some of our readers identified with the issues discussed. So I started thinking about a series of posts for helping artists.

I didn’t want to do a “dumbed down” ActionScript 3.0 for artists; so I opted for an approach that would cover the same principles that we’ve discussed throughout the life of this blog. However, I would move more deliberately and touch more bases—especially the basics of OOP. Further, I decided to use video and take advantage of the new Quicktime Player that comes with Screen Sharing. So, I created a simple class to start things off, and put it in an .f4v file (H.264 format) and you can download it by clicking the download button:

You will need an Adobe Media Player that is free to download. I did not include any .fla files because I’d have to put in at least two because some have CS3 and others CS4; so you’ll have to use your own .fla files. Each video is short and will play full screen using the Adobe Media Player. The only thing I need is feedback to let me know whether this kind of thing is helpful or not. I will be focusing on graphics and loading graphics, but I welcome ideas from one and all.

I have no idea how things pop into my head or why. However, they do, and like unscratched itches, if I don’t attend to them they stay put. One such idea that cropped up was…

How do you drag a live video across the screen?

I have no idea why someone would want to do that either; so don’t ask. For 95% of you reading this, the answer is simple, but for the 5% of you in rehab this post may be of some use—at least until the pink elephants go away.

Because this is a Design Pattern blog, I should include some design pattern. I could slap a Singleton in front of it, but I pretty well shot my chances of doing that with my ongoing persecution of that miserable pattern. So I need to pose my question in a broader context,

What design pattern could be used to drag anything across the screen?

Well, put that way, we can make a more interesting project. This short post simply examines how to embed and drag a non-Sprite object in a Sprite object. In Part II, we’ll see how to create a design pattern that easily allows production of objects and placing them into a Sprite instance for dragging anything.

Hitch Your Wagon to a Sprite

Back in the days before ActionScript 3.0, about the only thing you could address on the stage was a MovieClip instance—or a derivative of a MovieClip. For some of us, the lesson was too well learned, and I often think, MovieClip instead of Sprite. Anyway, you can address a Sprite just as well and you don’t have the Timeline to go along for the ride. The trick back in the day was to dump anything you wanted to go along with the MovieClip into the movie clip. So if you had a graphic symbol, for instance, that you wanted to drag, you’d just put it into the MovieClip object and drag the movie clip. However, because the key methods of startDrag() and stopDrag() are part of the Sprite class, you can use the Sprite to do the same thing.

Read more…