Artists and Graphic Designers
For me, graphic designers and artists are angels. No matter how I try, I can only get so far in graphic design. Tools like clip art, templates, and Kuler help me achieve not awful , but that’s it. (I can even screw up clip art.) So, for anything serious, I’ve got to work with graphic artists. That’s no problem—I like working with angels.
Some graphic artist have made the transition to some version of ActionScript, but with ActionScript 3.0 most complained that they were getting left behind. Early Flash had few ActionScript options and a system for entering code that didn’t require any programming background at all. With ActionScript 2.0, things got better for developers, but designers started voicing concern over increased complexity. With ActionScript 3.0 and the loss of the ability to put code into buttons and MovieClip objects directly, some graphic artists became furious with Flash over what they saw as a betrayal. It was like a carload of kids on the way to do something fun ditched the artists and designers on the roadside.
Other than a handful of developer/designers, most designers aren’t going to become competent with ActionScript 3.0, let alone OOP or design patterns—just like I’m never going to be a competent designer or artist. So I was thinking an interesting project for this blog would be to develop some “Clip Code” for artists. However, I’m not sure what kind of code they’d need. Most of the “Clip Art” that I use is from photographs, but while I know the kind of artwork I need, I don’t know what kind code graphic designers need.
In the same way that I don’t want to have shoddy graphics or photographs (I can do that myself), the “Clip Code” I have in mind is grounded in good but simple design patterns and OOP that artists can use. So, I’d like to throw that one out to the readers of this blog for ideas of what would be useful to graphic designers.
Animation and Dante’s 10th Circle of ActionScript Hell
We all remember from our Italian Literature course that Dante Alighieri’s Divine Comedy describes hell as having nine circles—the last circle being reserved for treason. Were Dante an ActionScript developer, he’d have a 10th Circle for those animators who spread 50 little ActionScript code blocks all over the timeline in different frames and on different layers. (In the last mention of Dante’s inferno on this blog, we only got to the 9th circle.)
Don’t get me wrong. I love animation, and in fact I got Flash initially so that I could do animations on the Web. When first working with Flash, I ran out and got Tony White’s The Animator’s Workbook: Step-by-Step Techniques of Drawn Animation, and I was delighted with what Flash could do following traditional animation techniques. (Joe Cartoon is still one of my heroes.)
What drives me nuts is using animations for some little effect that will be forgotten after one or two views that screw up an entire application. I’m convinced that animation is the sine qua non of Flash, and so I would never suggest that it be reduced in any way. Rather, I think that animation in movie clips needs to be controlled outside of the confines of code embedded in frames and the timeline. For example, pressing the green Play button shows a simple movie clip added to an existing fire-the-weapon animation:
The relevant code for the operation is the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | package { import flash.display.Sprite; import flash.media.Sound; import flash.media.SoundChannel; import flash.net.URLRequest; import flash.events.MouseEvent; import flash.display.MovieClip; import flash.events.Event; public class Client extends Sprite { private var m249:MovieClip=new M249(); private var mc:MovieClip; private var weapon:SoundChannel; private var url:String = "M249.mp3"; public function Client() { m249.addEventListener(MouseEvent.CLICK,fireWeapon); m249.x = 50,m249.y = 60; addChild(m249); m249.gotoAndStop(1); } private function fireWeapon(e:MouseEvent):void { playOnce(m249); var urlReq:URLRequest = new URLRequest(url); var gun:Sound=new Sound(); gun.load(urlReq); weapon = gun.play(); } private function playOnce(mc:MovieClip) { this.mc=mc; this.mc.play(); this.mc.addFrameScript(mc.totalFrames-1,reset); } function reset() { this.mc.gotoAndStop(1); } } } |
The m249 instance is of a movie clip that uses a shape tween to simulate muzzle flashes. (The sound routine was borrowed from another application.)
Initially, the problem I encountered, and I am sure all Flash animators encounter, is the requirement of keeping at least some code on the timeline. After a few false starts, I was able to control it with relatively simple functions with no timeline code. The above code simply represents the possibility of allowing animators to do whatever they want while not worrying about code.
Thanks to Steve Mathews and Colin Holgate who introduced me to the undocumented MovieClip.addFrameScript(), I was able to stop the looping movie clip after a single iteration. My initial solution used Event.ENTER_FRAME, but I liked that offered up by Steve and Colin better. Anyway, there’s a good post on addFrameScript() at Troy Gardner’s blog if you’d like to learn more about it. Like all undocumented code, I’m often at a loss to understand why it’s undocumented.
The huge advantage of an approach that is not in anyway tied to the timeline is re-usability. If all of the coding is external to the development of the movie clip with the animation, there’s less worry about getting tangled up in unknown code lurking on the timeline. You can reuse the animating movie clips with the assurance that what you see is what you get and you can add code without tangling it up with code tucked away in some unseen layer on an unseen frame.
For complex animations, planning is essential, and I’d like to find out what animators would find useful included in the examples and projects examined on this blog. Like artist, animators work is some kind of context and I’d like to refactor animations so that no timeline code is included in the application of the animations.
The Artists, Animators and ActionScript 3.0 by William B. Sanders, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Related posts:
Bill Sanders
Ha! I will be using this.
Thanks for this post. i’m with you 100%. It’s a real shame to see artists being left in the dust.
As far as code in the timeline is concerned, i will tolerate stop(), gotoAndPlay(randomFrame), and the occasional dispatchEvent script. In my experience, these are unlikely to bring down the house.
i just wrote a tutorial for people who are a step ahead of spaghetti coders, but who haven’t made the jump to bringing their first-frame code out into its own separate .as Class file:
http://www.untoldentertainment.com/blog/2009/08/25/tutorial-understanding-classes-in-as3-part-1/
BTW, i saw your book at the store this past weekend, and now the money in my pocket feels startlingly warm …
Y’think i’ll be able to wrap my mind around it better than this book?
http://www.amazon.com/First-Design-Patterns-Elisabeth-Freeman/dp/0596007124/ref=sr_1_1?ie=UTF8&s=books&qid=1251241431&sr=8-1
- Ryan
Hi Ryan,
I really like your spaghetti coders explanation–it’s colorful, and I think that artists will warm up to it. Just what they need.
As far as getting started in ActionScript 3.0 Design Patterns, a book named ActionScript 3.0 Design Patterns has a certain attraction. So naturally I’d suggest our book! That’s because you know ActionScript, and ask anyone who tackles design patterns and they’ll tell you it helps to know the language. However, Head First Design Patterns is an excellent book, and if you can understand Java, it’s great. Of course, the original programming design patterns book by the Gang of Four is one you’ll want as well.
Thanks again for the link to your site.
Kindest regards,
Bill
Two roads diverged in a wood, and I— I took the one less toggled by…
I am an artist/developer with a question, not about specific code, but about choosing a direction for study. I have a long-term project in mind. To that end, I am studying your very excellent book, “ActionScript 3.0 Design Patterns.” I just worked my way through Chapter 2, Factory Method Pattern, and I thought I was pretty smart for being able to follow how the little rotating square was brought to life in one class and then passed around like a beanbag, from abstract to concrete, instantiating here and there, to finally achieve the ultimate experience – addChild. I had to write the whole sequence out in prose to understand it, but I did it!
Then I thought I would try to be even smarter and see if I could figure out where and how to add hit testing to your vertical shooter game… Approximately 12 hours later, I hadn’t even figured out how to access all the objects on the stage much less getting them to notice when they bumped into each other. It became painfully obvious that I didn’t know how to set up an array in one class that could be accessed by other classes, or even why I could use getChildAt() to trace objects on the stage, yet could not call those same objects by name using trace!
Here’s my project: I am making a story. I have the plot, dialog, narrative scenes etc planned. I am using my own artwork from Poser (for characters), Vue (for landscapes) and Blender (for settings). I plan to use mostly “stills” – images I create in these programs to tell the story. The programming part comes in with the user/player/viewer clicking here and there, both to advance the story line and to explore interactive diversions/toys/experiences I am making for the various settings. In other words, it’s probably most like a graphic novel you click through with parts of a graphic adventure game added in.
Here’s my question: I would like to have code that is a flexible, extensible framework for doing this, which is why I’m studying pattern design. But do I really need pattern design? I like to think that I could (at my current level of programming) just make a class for each character with some behaviors (facial expression changes for example) and then make some sort of Main class where the events of the story would progress using event dispatches and listeners. I think I could do this right now, but then, I thought I could add hit testing to your vertical shooter right now too. I am trying to decide if I should keep studying or try to make my story framework with the skills I have now. I am biased towards more studying. I love to bend my brain around OOP concepts. But meanwhile my 3D imaging programs are getting dusty, going through whole upgrade cycles without me touching them. I’m in no particular hurry – have a day job, but I would like to feel I am using my time well at working toward my goal. Do you have any advice or suggestions for me? They would be greatly appreciated. Thanks.
Barbara Parkman
P.S. If you want to see my work, it is at bitsong.com. The oldest coding is the piece called Sunroom, then under Stories are Necklace, FlowerHarp and ThroughAGlass with the most recent being StarRescue, under Games.
Hi Barbara,
I enjoyed reading your comment / question – the detail really helped me understand your project. My thoughts about when to integrate design patterns have changed with experience.
My current thinking is to integrate design patterns only if they are immediately useful. Not because a design pattern may come in handy to extend or handle change in your project at some future date (that may never come). Let’s parse the word “useful” for a second. Design patterns are useful not only in a code organization sense, but they help developers visualize how different classes work together as well. For example, if you understand the factory method pattern well, it may very well be “useful” for you to “think” in terms of a “factory” to instantiate and place different types of objects on the stage. If a design pattern helps you to visualize the relationships between different classes and objects for a particular problem, use it up front.
You don’t have to use design patterns in all parts of your project either. Integrate one pattern that you understand well and build from there. This is one of the cool things about design patterns – they can be integrated at any time into a project. So, at some future date, you could take a look at your code and have an aha! moment, and think that maybe integrating a decorator pattern may be a useful substitute for some code that is already there. Of course, you won’t know what patterns are appropriate in a particular context unless you study them. Don’t stop studying design patterns but don’t force patterns into applications either.
I firmly believe that the simpler solution to a design problem is in most cases the correct one. Start your project the way you have described without worrying too much about design patterns. Then extend characters that need custom functionality with classes. In a later iteration, when your characters get complex autonomous behaviors you may see how a state pattern may come in handy to assign different facial expressions to a character. Or how a decorator pattern can be used to get a character to appear in different clothes. Don’t neglect the Flash timeline as it is way more powerful at tweening than code. For example, when your character goes into the smile state, you can just call this.gotoAndPlay(“smile”) on the timeline from your class.
Getting very familiar with OOP is in my opinion way more important than design patterns. In regards to the vertical shooter app and hit-testing, you are very much on the right track. One of the important aspects of OOP is the separation of concerns to minimize how much one part of code depends on another. So, in the vertical shooter, the issue is to figure out the class that should keep track of ships and how to expose the method that does the hit testing to other classes.
Incidentally, the hit-testing question has been asked before and I have included a link to version of the vertical shooter that has been modified for hit testing. The ShipCreator factory now keeps track of all ships created and exposes the static method called hitCheck that does a hit-test against a passed projectile.
Vertical shooter with built-in hit-test.
http://www.as3dp.com/wp-content/uploads/2009/08/vertical_shooter_v3.zip
Take a look at the shooter code and let me know if you have additional questions. Don’t hesitate to keep us informed about how your project is going. Bill and I really appreciate questions like this because they make us think and keep us on our toes.
About the Vertical Shooter code: Wow, a place for everything and everything in its place! You imported ships.ShipCreator to the abstract class, Projectile, which allowed you to send all the projectiles of either type to the new hitCheck method in the abstract ShipCreator class – all this without having to sort out mines from cannonballs, alien ships from hero etc. Then the hitCheck method in ShipCreator just pulled out whichever ship object from the array, shipList, that the target projectile had bumped into and called that ship’s new destroyShip() method. Meanwhile, the projectiles were taken off stage and their listeners removed back in the Projectile class without having to bother any other classes with this task. This is very elegant, I can see why you like this stuff. I can also see why I couldn’t figure it out myself.
Thanks for the long and thoughtful reply. On the one hand, after trying all day to write some code beyond my skill/experience level, I can understand why you recommend integrating design patterns only if immediately useful. But on the other hand, I am just starting to catch the edge of a first wave of awe at the elegance and beauty of design patterns. I think I’m smitten which makes me want to learn more and more about them. But back on planet earth, I have this project I’m working on…
It’s reassuring to know that design patterns can be integrated at any time into a project or to parts of a project. That makes me feel free to go ahead and write my code at my present skill level – I can get a do-over later if needed.
I have a feeling that as I work my way through your book, I’m going to learn a lot more than design patterns. You’re already teaching me concepts about communication between a class and a display object on the stage in your Singleton Alert Message example – with the font color abstraction. Thanks for the tip about the timeline. I was already planning to use it as you describe, as a kind of “state machine.” I can’t wait to get to your chapter on State Patterns to learn about real state machines. Thanks again for your thoughtful advice. I will be in touch.
Barbara
Barbara,
One little thing…about Singletons. You might want to take a look at the Singleton post on this blog before you become too enamored with the little devils. (I wrote the Singleton chapter; so, I can find fault with the Singleton!)
Kindest regards,
Bill
Hi Bill,
Read your Singleton post or as much as I could understand. I’ll be wary, thanks for the warning. I would never have guessed that something that seems black and white, cut and dried could be so controversial!
Barbara
Suffice to say. There’s a time and place for everything even Singletons.
:)
aYo,
I suppose if you put it that way, there’s a place for skin-eating viruses, pedophiles, and Nazis as well. The insistence on Singletons I believe is unnecessary. First, there are alternatives, such as the Facade pattern to act as “door-keepers”. Second, many of the design patterns use the Client as the entry point, and it too can serve the purpose that the Singleton (with all its problems) does without the attending Singleton problems.
Cheers,
Bill
(By the way folks, it was aYo who got me started with Design Patterns–now he must contend with the monster he created!)
‘there are alternatives’ very true and there is also choice. The business with Singletons is contentious at best, in-spite of the arguments of those who strenuously advocate its destruction. As such where I find it provides me a credible option I will use it. Sorry Bill, on this one my jury is out :).
aYo,
Find me a single citation, article, post or serious argument that defends the Singleton, and I’ll be glad to read it. The people I talk with annually at OOPSLA, the posts and articles I have read that really analyze what the Singleton does (including Erich Gamma) do not defend it.
So get your jury in aYo! Then warm up old Sparky!
Warmly yours,
Bill
Hello,
I’m a painter and started programming many year ago. I began with sequantial programme that I did like a can to make it working, but did a lot. I heard talking about Oriented Object Programming but though it was for professionals and I didn’t start it. One day i dessided to take a look at it and suprise, it’s was very easier to programme with that. The same thing now with design pattern witch are starting to make me programming easier and easier…
Programming is for me just an hoby but I think that profesionnal methode are made to programming easier, exactly like proffesionnals tools in real life are better for non proffessionals than cheaspers tools.
I think too that as3 is easier than as2 & 1 because is very more professional and well done.
Thank you so much for very good book !
sorry my very bad english
Patrick
Hi 3a,
Your English is better than my Spanish, French, German, Portuguese, Chinese, Japanese or any other language–so no need to apologize. I’m starting to work on a series called
–it covers starting OOP in ActionScript for artists–I hope to have the first one completed soon.
Design Patterns may be a little difficult at first, but as you get to know them, they are very helpful. I’m glad to hear that you
Kindest regards,
Bill
Hi,
I very like your idee of book. Personnaly I’m very interrested to look programmation with an “artistic” view of it. I think that how work a type of art is very important on what would be this art. For example the perpective is a “tools” to present the world, OPP is too a form to “paint” the world. When artists use it to create it make something directly influenced by this tools. OPP and programming in general is a new way to see the thing and I think that artists have to consider it more than just a think that make working that they want to do.
Waiting for your books !
Good night from France
Patrick
Hi Bill and Chandima,
I know you’re getting ready for the OOPSLA conference but I hope one of you might be able to take a little time to help me with a problem. I’m really stuck and I think just a pointer in the right direction from one of your marvelous OOP-knowledgeable brains (or from the brain of another reader perhaps) might get me there. This is for my story project that I told you about in my first post to your site.
I fell in love with Chapter 7, the Command Pattern, because it seemed ideally suited to my needs in telling a story – I could adapt it a little and have a program that would move on in orderly fashion from one event to the next with each event triggering the next. To test this I made the following classes: ICommand, IReceiver, InvokerPanel, Main and some commands and receivers: MoveBallCommand, MoveBallReceiver, MoveSquareCommand, and MoveSquareReceiver. Here’s a link to the finished demo program with a zip file download link to the FLA and all the classes. http://bitsong.com/forPosting/commandStory/commandStory.html
Basically, Main sets up a series of events in the InvokerPanel by putting them into the commandList array in order. When the first event, commandList[0], is clicked (the red ball) it dispatches an event to a listener in the InvokerPanel which puts the MoveBallCommand together with it’s receiver and executes the event. You keep clicking the red ball and when it reaches 200, its event is finished and it sends an event dispatch to InvokerPanel that advances a counter which moves the commandList array along to the next event, commandList[1], the MoveSquareCommand. Now you click on the blue square and it moves along to 200 and then dispatches the next event, commandList[2], which is the red ball moving again, then the blue square, and that’s as many events as I put into Main.
All this seems to work well, but I would like also to be able to reuse the receiver classes, rather than making a large quantity of new ones. However, I can’t figure out how to send in parameters to the receiver classes so they’re good for more than one use. For example, suppose I wanted to make 5 different commands that each moved the red ball at a different rate: +=5 pixels, +=10 pixels, +=100 pixels etc, or changed the end point of the event from 200 to 400 for example. I could make 5 different but almost identical MoveBallCommand classes and 5 different but almost identical MoveBallReceiver classes and instantiate them all in Main and get what I want, but this seems unnecessarily labor intensive, and also contrary to the spirit of OOP. It’s a fairly trivial problem with moving balls and squares, but my actual project will be using commands and receivers that are much lengthier and more complex.
I have tried various things. I figure I can’t use the Invoker class to pass parameters to the receiver classes because that breaks encapsulation, right? I can make a setter in the receiver class rather than trying to pass in a parameter, but again, how or where to use the setter? Do I need to make more classes? Put in another level of abstraction somewhere, or is the Command Pattern basically the wrong pattern for what I want to do? Or am I just stuck with a novel length list of command and receiver classes? Again, I really appreciate any help you can give, especially at this busy time. Here are the Main and Invoker classes. The rest are in the zip file.
Hi Barbara,
Executing commands generally result in some well-known behavior (not behavior that varies). So, it is a good idea to have multiple commands to move the square/circle by different amounts ( e.g.
MoveBall5Command,MoveBall10Commandetc. etc.)However, you don’t need multiple receivers. The command “knows” the receiver. So, you can call the
setSizeOfStepmethod beforemoveBallfrom theMoveBallCommand.For example for a
MoveBall10Commandclass, the execute method will be:Wow, Thank you Chandima, that works very well. I think I can go ahead with my project now. The solution seems so simple when you hand it to me on a platter. I keep thinking “why didn’t I try that?” But that’s because you wrote the book and I didn’t. Thanks again :-)
Barbara
Hi Bill and Chandima,
If you can solve this one for me, just describe a piece of artwork and I’ll do it for you (if within my powers). You will have earned it. Did you ever hear the expression “pride goeth before a fall?” I thought I had written the ultimate, wonderful, complete, working pattern design for my story project – and in a way, I have. Then I tried to divide it up into packages… Oh woe!
Background: commandStory is based on the command pattern, except instead of making it possible to repeat an action (such as incrementing a counter by pressing a button), commandStory makes it so one action triggers another in order from the beginning of the story to the end. The idea was to make it possible to encapsulate each action (I called them pages) in its own command/receiver pair and then to have a number of these pages encapsulated in a chapter. I wanted separate chapters so I could clean up after each chapter and also possibly implement chapter buttons for the user. The invoker class does most of the work. Instead of having just an execute() function (onBeginPageEvent()), it also has a setup() function (onTurnPageEvent()), that sets up each action via its command/receiver pair and then routes things back to the invoker which then sends out each execute() command to the same command/receiver pair.
I actually accomplished most of this. The demo starts with a chapter 1 button you press, and a red circle appears. Click on the red circle and it moves along the stage and triggers a scene change. You hear whistling. Then a bird head appears in the tree. Click on the bird head and the whole bird pops out of the tree. Drag the bird and he flaps his wings. If you drag him near the left border of the stage, a fly appears. When you touch the fly with the bird’s mouth, the fly disappears and the bird smiles. A few seconds later, a cloud appears. If you touch the cloud to the bird’s body, it registers a hit and a few seconds later you’re in chapter 2 – more objects moving across the stage. I did all this to test and see if I could encapsulate each action in a command/receiver pair – sounds, dragging, hits, etc – which I could.
So what is the problem? This story is going to have many chapters with many pages each, and I assumed it would be easy to put each chapter and possibly each page in its own package. I tried very many things, but I can’t get past an initial road block: If I put Chap_01.as in its own package, chapter_01, and label it correctly as such and put an import statement in TableOfContents.as (import chapter_01.*;), the methods in Chap_01 won’t run. I get an error message: TypeError: Error #1006: run is not a function. (“Run” is the name of the method I am trying to run in Chap_01.) I can run a trace statement from within TableOfContents.as such as trace(chap_01) and it works, but the methods of Chap_01 are apparently not available for some reason. Any help you can give me will be greatly appreciated and if you want a button or an icon or even a banner and I can provide it, just name it. Here’s the link.
http://www.bitsong.com/forPosting/packageProblem/packageProblem.html
Barbara
Hi Bill and Chandima,
Never mind, I figured it out :-) If you are using movie clips from the library and you move their corresponding classes to a to a folder, you have to put the path to the folder in the symbol properties in the class box! So obvious, yet I had never run across this problem before. I tried dot notation and it worked!
Barbara
P.S. I’ll still make you a button or an icon if you want — I’m sure to panic again at some future time :-)
Hi Barbara!
Glad to hear from you. When you solve your own programming problem is that the same as recursion? Yuk, yuk.
Thanks for the button offer, and if you’re still game, I could use something to replace the ugly Play button I made all by myself!
Kindest regards,
Bill
Hi Bill,
Ha Ha! Actually, it’s more like not hitting your head against a brick wall — feels so good when you stop!
Would you like something like your existing button only “punched up?” — more 3D looking for example, or something completely different? Give me a visual direction and I’ll be glad to oblige.
Barbara
Hi Barbara,
My button is based on my artistic skills–in other words, zilch! Any creative idea you have for a button would be most welcomed.
Thanks,
Bill
Hi Bill Chandima and Barbara,
Sorry for poking my nose in but I couldn’t resist the temptation to show off my programming skills and thanking you for all you are giving us.
Here is a text button class which at least adds some movement. It is not very oop and it doesn’t use any design pattern. It is also hard wired (you can’t choose the text color, for example, although that is easy to change)
Hi everybody,
Sorry for my last post. Silly me! I forgot this is html and not flash so my TextButton class is useless here.
I also have forgotten how to insert code in the blog.
Beg your pardon again
Curro
Hi Curro,
It seems to work fine for me. I made a couple of little changes (changed “txt” for “text” so that you wouldn’t use a reserved work and swapped Sprite for MovieClip since you didn’t use any of the MovieClip methods). Here’s what I got:
Here’s the Client code I used:
It looks like a reusable hunk of code to me, and with just a tweak or two, it programs to the interface (Sprite) and not the implementation (TextButton).
Thanks,
Bill