When working with high level and complex structures like Design Patterns, the focus is squarely on the relationship between objects—classes, inheritance, composition, implementation, interfaces and related concepts and structures. The “details” are the details of these various relationships and how they work in concert. Using Algorithm 1 or Algorithm 2 is only pertinent insofar as it relates to a method or property that needs to be loosely bound to some other object. If you start thinking about algorithm details as a primary concern and fretting over internals, you can easily lose sight of the larger structures that are under development and never really understand Design Patterns.

Seismic Shift

Every now and again we encounter a seismic shift in the way things are done, and you have to make adjustments.(Some of you may remember the Commodore 64 that went the way of the Dodo Bird. At one time it was the most popular personal computer on earth, but if you insisted on sticking with it, you probably don’t have any clients for your services.) In my own case, shift to mobile devices forced me to spend some quality time with the event processes in ActionScript 3.0. Going to the base, I reviewed how the Display List is handled in Flash and by AS3. Then I went to look at the AS3 Event Flow and among the several articles I read, one of the best is Jody Hall’s. Adobe has several good ones as well, and I’m sure many more are available that some of you may want to share.

On to Gestures

I wrote some gesture events and handlers. The results were unsatisfactory. It wasn’t that they didn’t work, but after one would work, another would not. Very baffling and frustrating. My goal was to create a ‘workbench’ where I could try all kinds of gesture events, but I had very poor luck with just about everything at some point. So I backed away and tried an application with only two gestures; neither available with MouseEvent. One was Rotate and the other Zoom. Christian Cantrell has a good article on using gestures, and in addition to getting some good information on using gesture events, I also got a nice little piece on using gestures with bitmaps. (I had been having a devil of a time with Sprite objects in the Library with gestures.) Click the download button below to get the source code and FLA files for Flash Pro 5.5, 5 and 4 along with the image files and ActionScript 3.0 code:

In my last post, I was convinced that TOUCH_TAP from TouchEvent works better than CLICK from MouseEvent with a mobile device. That conclusion was not based on the inner-workings of events and event handling, but rather from testing the different event handlers using my iOS device, a 4S iPhone. In the Adobe documentation, they point out that it might be better to use a MouseEvent rather than a TouchEvent or GestureEvent. It depends on the app, device and device OS. That pretty much makes it an empirical question.

In this application, there was no choice to use MouseEvent because it does not contain the required finger-flipping gestures I can make on my iPhone—GESTURE_ZOOM and GESTURE_ROTATE. Likewise, TouchEvent did not have the kinds of gestures; so I had to use TransformGestureEvent. The following code shows how it is employed in a simple picture flipping/zooming app:

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

package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.TransformGestureEvent;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;
 
	[SWF(width=640, height=960, frameRate=24, backgroundColor=0xcc0000)]
	public class PicFlip extends Sprite
	{
		[Embed(source = "vanBillz.png")]
		public static var BillzImage:Class;
		private static var billzBitmap:Bitmap = new BillzImage();
		private static var carrier:Sprite = new Sprite();
 
		public function PicFlip()
		{
			carrier.x = 320, carrier.y = 550;
			carrier.addChild(billzBitmap);
 
			billzBitmap.x = (320 - (billzBitmap.bitmapData.width / 2)) * -1;
			billzBitmap.y = (480 - (billzBitmap.bitmapData.height / 2)) *-1;
 
			this.addChild(carrier);
 
			Multitouch.inputMode = MultitouchInputMode.GESTURE;
			carrier.addEventListener(TransformGestureEvent.GESTURE_ZOOM, doZoom);
			carrier.addEventListener(TransformGestureEvent.GESTURE_ROTATE, doRotate);
		}
 
		private final function doZoom(e:TransformGestureEvent):void
		{
			carrier = e.target as Sprite;
			carrier.scaleX *=  e.scaleX;
			carrier.scaleY *=  e.scaleY;
		}
 
		private final function doRotate(e:TransformGestureEvent):void
		{
			carrier = e.target as Sprite;
			carrier.rotation +=  e.rotation;
		}
	}
}

I tested it on an iPhone, but there’s no reason it won’t work perfectly well on an Android or some other mobile device. Further, I found it to be very responsive. The zooming seemed to work quite well with bitmapped graphics, and so I assumed that it would work just as well, if not better with a vector object in the Library. So I put together a little test symbol using the drawing tools in Flash and stored it as Sprite class in the Library. (By the way, in case you were not aware, to make a Sprite class in the Library, when you create a New Symbol, just classify it as a MovieClip and in the Base Class window change the type from flash.display.MovieClip -> flash.display.Sprite. The Library icon turns from Blue to Green to indicate it is now a Sprite.)

I used the following code:

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

package 
{
	import flash.display.Sprite;
	import flash.events.TransformGestureEvent;
	import flash.ui.Multitouch;
	import flash.ui.MultitouchInputMode;
 
	public class PicFlipLib extends Sprite
	{
		private static var carrier:Sprite = new Sprite();
		private static var billzVector:Sprite=new BillzVector();
 
		public function PicFlipLib()
		{
			carrier.x = 220, carrier.y = 350;
			carrier.addChild(billzVector);
 
			this.addChild(carrier);
 
			Multitouch.inputMode = MultitouchInputMode.GESTURE;
			carrier.addEventListener(TransformGestureEvent.GESTURE_ZOOM, doZoom);
			carrier.addEventListener(TransformGestureEvent.GESTURE_ROTATE, doRotate);
		}
 
		private final function doZoom(e:TransformGestureEvent):void
		{
			carrier = e.target as Sprite;
			carrier.scaleX *=  e.scaleX;
			carrier.scaleY *=  e.scaleY;
		}
 
		private final function doRotate(e:TransformGestureEvent):void
		{
			carrier = e.target as Sprite;
			carrier.rotation +=  e.rotation;
		}
	}
}

One of the features that seemed to make a difference was that instead of having the event listener connected directly to the Library Sprite (BillzVector), I used an object container Sprite, carrier. Figure 1 shows the zoom and rotation on an iPhone 4S. This was used with both the bitmap and the vector Sprite objects, and they both worked quite well.

Figure 1: Both rotation and zoom worked fined with the vector-based Sprite

Back to Design Patterns

I was going to post my final matrix motion solution, but I got jammed up with event handling. Next time, I should be able to post the next stage in my Samurai game. It uses a State design pattern to move through nine cells in a 3 X 3 matrix. Everything was working well except that my event handlers were not as crisp as I wanted. I’ll have a chance to see now whether the time-out with AS3 event handlers was enough. The Design Pattern does its job; I just was not getting the event handlers to do theirs. In the next post you’ll be able to see whether they are all working well together in a mobile environment.

If you think everyone is heading for HTML5 now, you're nuts!

According to The Economist (Oct 8-14, 2011), in 1993 there were 100 million PCs. By 2008, PCs had topped 1 billion. Many of us tapped into that market one way or another, and some of us came out well rewarded—Adobe certainly did. By 2020 (barely 8 years from now), they expect 10 billion mobile connected devices. In looking at the number consider this: The current #1 Free App on iOS devices is called ‘Hair Plucker’ and who knows how many people bought ‘Angry Birds’, 2010′s top paid for app? Among other apps I saw was a ‘Halloween Mouth’ selling for 99¢–it’s a picture of a mouth you hold up to your face. (How long would that take to create?) Another popular app is not one, but several, that make farting sounds–with prices ranging from free to $1.99.

Latest Update on Flex’s Fate!: Because so many questions about Flex were asked (e.g. Is this the end of Flex?) Adobe posed the following:

Adobe settles concerns about Flex and Flash.

Now let’s say, that you create a simple app using a Factory Method. You’ve got 10 billion units out there. We’ll say that you have a ‘Sneezing App’ that makes different sneezing sounds, and it sells for 99¢. If just 1% of 1% of 1% of 1% of 1% of 1% bought your app, that’s $10,000–a half million Indian rupees. If 1 person in 10,000 bought that app, you’d be a millionaire. (The good thing about language-independent apps like the ‘Halloween Mouth’ and ‘Fart Factory’ is that they are language independent.)

20 Billion Mobile Connected Devices Can’t Be Wrong!

I have no idea how many people will be using PCs as we know them. Maybe they’ll go the way of the 5 1/4 inch floppy and all we’ll have is some kind of tablet that we can connect up to the Internet. Development may be done with apps that we rent from a cloud. What is important and key now and later are mobile devices. At this point in time very few Web developers are actively developing apps for mobile devices, and tools like AIR for iOS, Android and Blackberry provide us with a key opportunity.

So, you can be certain that Adobe did not bow out of the Flash-Player-in-the-Mobile-Browser market because they thought it was not going to be a huge market. Look for Dreamweaver to be optimized for HTML5 and some HTML5 development tools. The development tool from Adobe for mobile, though, will be Flash Builder and Flash Pro working with AIR.

A Browser/AIR Mobile Strategy

Keeping in mind that I have nothing against HTML5 and it’s ability to do many things Flash has done for years—Canvas features some great elements and attributes—let’s look at a new strategy for development in Flash (including AS3 and the different flavors of AIR).

First off, if you’ve done much with with mobile browsers, you must have learned they have little to offer, and they are a mixed bag of HTML5 implementation. (The non-mobile browsers are an equal mixed bag as far as having implemented HTML5.) It’s only the mobile browsers that Adobe is no longer supporting. Not too many years ago, there were no mobile browsers; so basically, Adobe is doing what it has always done as far as providing a Flash plugin for the browsers on our computers. It’s just not going to make them for mobile browsers. I developed several apps for iOS, and while most have been simple and small, I was able to use the same programming structures I did for “regular” AS3.

Second, Adobe has been making big strides with Flash Builder and Flash Professional in creating AIR tools for working with mobile devices. This allows us to create ActionScirpt 3.0 apps for mobile devices—forget Web pages. Imagine knocking together an app that does something useful (like calculating the best point in relationship to a parabolic mirror to place a kettle to boil water) that can be used worldwide. Or even a game using some of the little structures we’ve been developing and discussing on this blog that you can sell for 99¢ (or more!). So quit thinking of yourself as just a “Web site developer/designer.” You’re an app developer/designer.

Everyone Runs to HTML5! Not!

Earlier this year I wrote a book (Smashing HTML5) published by Wiley, and one of the chores I encountered was testing the examples against several different browsers, including mobile ones. There was not a lot of compatibility, and most mobile browsers were successful with only a small subset of the HTML5 elements. Over time, let’s hope this improves because if it doesn’t we’ll enter the Second Dark Age of incompatible browsers.

In order to get most of the cooler stuff to work, you need either JavaScript or PHP, and so I included chapters on both. (PHP seems to be more compatible for all browsers than anything else–probably because of the simpler subset of HTML it generates.) I added as much OOP to both as possible, and some of the reviewers didn’t like the fact that it was not more oriented to the DOM or that I didn’t use more procedural examples in the PHP/JavaScript section. What I was trying to do was to write an HTML5 book for 2011 and not 2001, which meant that I used several examples of dealing with a mobile environment. Further, some OOP in JavaScript/PHP is a good thing; so I hope that will move some folks towards structure in both JavaScript and PHP.

However, without Flash in the mix, creating Web apps and pages is frustrating, not because JavaScript and PHP aren’t good programming tools but rather because of browser incompatibility. I’ve got a feeling that to effectively use HTML5 and all of the related CSS3, developers are going to be spending a lot of JavaScript code determining which browser is being used and making the appropriate accommodations. Who wants to sub-code for every possible browser? This includes mobile browsers. My hunch is that they’ll all head for the lowest common denominator, which is probably one of the mobile browsers that is just slightly better than HTML4.

So, I’ve started thinking “Build an App; Not a Web Page.” Let’s hear your thoughts on Adobe’s decisions.

Make Your Own Apps with Design Patterns

Having finally got my magical combination of permissions set up just so, the process began coming fairly easily. The problem is not Adobe, but rather getting the files from Apple just right. Once you get the files, you can use them over an over. One is a certificate file with a .p12 extension, and the other is a provisioning file. It looks like a lot of people are having the same problem because when I finally found a solution on the Web at StackOverflow several other developers indicated (with heart-felt thanks) that they were encountering the same problem. (The solution that worked for me was to start over and delete all provisioning profiles and login keychain.) So if you got your Apple iOS Developer ticket ($99 or free to University students/faculty), that’s just the first part. The next part is to hook up your iOS device (mine is a 3S iPhone) and using the Xcode development tools, go through a process that generates the files you need. The following image shows what these little gems look like. If you put those two files in with your AIR iOS files, it’s a piece of cake. (Go ahead and download the files as well.)

Same files can be used with different apps

Apple provides videos and a whole slew of tools and aids, and if you follow the instructions, you should be able to develop the right files. (Sad experience had led me to suggest that you take your time and follow instructions carefully.) Anyway, whether you get the certificate and provisioning files on the first time or whether you struggle like I did, once you’ve got them; they’re good for about four months. You can develop on either a Mac or Windows PC and re-use the same files on different apps. (I haven’t gone through the process that Apple has for getting an app in the App Store; so you’re on your own in that department.) The image on the right is a screenshot taken with an iPhone:

Animated tween, text and graphic

Step-By-Step

This section walks you through the process of working with a Flash Pro project set up for use with iOS. In the previous post on iOS, the sample project was to create banners that can be used in a Factory Method context by loading external .SWF files. On the iPhone, that didn’t work. The problem seemed to be the mobile device’s inability to grab the external .SWF files even though, the .SWF files were included in the General settings for the Included files window. So, using the same tweens, I created MovieClips and put them in the Flash Pro library and then set them up as classes. Then in the concrete product files, I just instantiated classes with the tweens instead of loading external .SWF files, and the rest of the program was unchanged. (That is where design patterns really shine—easy to make changes.)

Okay, now to step through the process. This was all done using AIR 3.0, Flash Player 11 public betas on a iMac running the new Lion OS. After you open a new AIR for iOS and write all of your code and add any graphics and text, the first step is to select the FLA file, make sure that nothing is selected on the stage and then click the little wrench icon next to the Player selection where it should indicate ‘AIR for iOS.’ That will open the AIR for iOS Settings window as shown in Figure 1:

Figure 1: General Settings of AIR for iOS

For getting started, choose Full screen instead of Auto orientation. Use the CPU for the Rendering processor, specify your device and choose the Standard resolution. The included files will be an .SWF and .XML file. Leave those alone, and for this app, you do not need to add any others.

For this next step, you’ll need both the certificate and provisioning files in the same folder with the other class files. So if you haven’t created those files and linked them to the device you’re testing it on; do so now. The click the Deployment button next to the General button at the top of the AIR for iOS Settings window. Figure 2 shows the deployment settings:

Figure 2: Deployment window

The password for the certificate is the one you entered when you created the certificate—not one associated with your computer. Use the search folder to find your Provisioning profile file. The App ID is the name you gave your initial FLA file—I’m in the habit of calling all of mine “Client,” but now I’ve got to think about what users will see on their mobile device..

This post does not get into the iOS deployment beyond the local development stage. So, select the “Quick publishing for device testing” or “Quick publishing for device debugging.” I selected the former because I chose to do the debugging using the standard Flash tools. After all I went through to get the certificate and mobile provision files to work right, I wasn’t about to tempt fate just yet and do more than the minimum.

This final step is fun. You can easily create your own iOS icon. Here’s what you need to do to get started:

1. Create a square image with your logo or some symbol you want to use to identify you application. Save it as a .PNG file. (In the image at the top of this post, you can see the two application icons using the Sandlight logo.) Be sure that the image has equal width and height.
2. Save three images in sizes 29 pixel square, 57 pixel square and 512 pixel square. Depending on the mobile device, you may want to create other sizes as well. I started off with the Adobe Illustrator version and saved each size as a PNG file.
3. Place the three image files in a folder named “icons” and place the icons folder in the directory where you are creating your mobile app.

In Figure 3, you can see the preview window showing the image used for the application described in this post.

Figure 3: Assigning icons for app image

Be sure to click each icon size for each of the three sizes and load the URL (icons/iconXX.png) before you click OK. Note also that two of the icons are settings for iPads, and so if you have an iPad, create image files for those as well.

Installing your iOS on your Mobile Device

Now you’re set to Publish your files required for an iOS mobile app. When you click “Publish” you will find that it takes a while to process everything. Once you’re finished, you will see all the files generated for your iOS device. Figure 4 shows the files you will see—including the all-important .IPA file.

Figure 4: Files used and generated

As you can see in Figure 4, one of the files is named BannerFactory.ipa. That is the file that will install your app onto your iOS mobile device. Connect your iPhone or iPad or iWhatever that runs on iOS, and double-click the IPA file and it will upload your app into the iTunes Apps folder. (On your iTunes, click Apps in the LIBRARY folder, and you should see your new application as shown in Figure 5.)

Figure 5: iTunes Apps folder

If you see your application icon and file, you’ve been successful—up to this point. The last step is to install your app onto your mobile device. The final step is to select your device and then check your application Sync. Figure 6 shows iTunes with your application selected (checkbox) and ready for Sync.

Figure 6: App set for installing in iPhone

Note in Figure 6 that the iOS device is selected under DEVICES in the left panel and that the new application (BannerFactory) has a check next to it. Click the Sync button (or Apply and then Sync) and if you have your device properly identified, you will see your icon and app on your mobile device.

Code your own Sprite classes

When I’m working on an example, I’ll use a combination of Flash Pro and Flash Builder. However, using Flash Pro, all of my drawings are in the Flash Library and may not be accessible to Flash Builder users. Besides, my drawings are pretty simple composed of basic shapes—rectangles, circles and triangles. These images are transformed into Sprite classes in the Symbol Editor of Flash Pro, and the type is changed from the default MovieClip to Sprite. If I coded the images as Sprites using ActionScript 3.0, the Flash Builder users would be able to more easily use them and the Flash Pro users could use them with equal ease.

Let’s face it, my graphics are not going to get any better whether I code them or draw them; so why not code them? So that’s what I’ve done. In the previous post on the Decorator design pattern for beginners, I had three graphic “armor” pieces that were used with concrete decorator classes. All I’ve done for this mini-post is to provide the “armor” sprites as pure code. From now on when I have a Sprite image, I’ll just code them up in ActionScript 3.0 as Sprite classes and make it easy for everyone. Here’s the Shield, BodyArmor and Helmet classes: (Next page.)

Shield

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
 
	public class Shield extends Sprite
	{
		private var shield:Shape = new Shape();
		public function Shield()
		{
			shield.graphics.lineStyle(1,0x0066ff);
			shield.graphics.beginFill(0x0033ff,.50);
			shield.graphics.drawCircle(25, 30,31.25);
			graphics.endFill();
			addChild(shield);
		}
	}
}

Body Armor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	public class BodyArmor extends Sprite
	{
		private var bodyArmor:Shape = new Shape();
		public function BodyArmor()
		{
			bodyArmor.graphics.lineStyle(1,0x990000);
			bodyArmor.graphics.beginFill(0x999999,.50);
			bodyArmor.graphics.drawTriangles(Vector.<number>([0,0, 116,0, 58,100]));
			bodyArmor.graphics.endFill();
			addChild(bodyArmor);
		}
	}
}

Helmet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

package
{
	import flash.display.Sprite;
	import flash.display.Shape;
	public class Helmet extends Sprite
	{
		private var helmet:Shape = new Shape();
		public function Helmet()
		{
			helmet.graphics.beginFill(0xcc0000);
			helmet.graphics.moveTo(0, 25);
			helmet.graphics.curveTo(30, -20, 60, 25);
			helmet.graphics.endFill();
			helmet.graphics.lineStyle(2,0x996600);
			helmet.graphics.moveTo(2, 25);
			helmet.graphics.lineTo(2, 0);
			addChild(helmet);
		}
	}
}

I realize that this is pretty simple stuff, but if it helps beginners working with OOP and classes, not to mention design patterns, it’s worth it. Now, all that you have to do is to create the Warrior!!

However, since we agreed to let you decide, our next post will be to get those who are beginning, intermediate and advanced programmers through the worm hole and into the land of OOP and Design Patterns.

In the meantime ponder this: C’est magnifique, mais ce n’est pas la guerre. C’est de la folie. That’s how the new series begins.

Everything in your life will get better if you drop naming classes “Main.” I even made a class diagram of the point as shown in Figure 1.

Figure 1:Why to Quit Calling the Client Main

So let’s focus on design patterns and use names that describe the roles. The term “main” is a tradition, but programming is not Fiddler on the Roof; so we can cut it out!

ActionScript 3.0 Design Patterns for the iPhone

We were delighted to hear that our book was selected by O’Reilly to be among the first to be made available for the iPhone! If you click on the App Store icon (located just below the picture of the book’s cover), it’ll take you right to the store. Check out the tweet on our MicroBlog to see iPhone application with our book. Or just open iTunes and search for “O’Reilly Design Patterns” and there it is. Even better, it’s only $4.99, and you can have it handy wherever you and your iPhone or touch-pad iPod go. (Now if Bill can only figure out a way to get an iPhone…)

Bill

Chandima

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.

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.

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.