ActionScript 3.0 Design Patterns

Cave drawing from Chauvet-Pont-d'Arc

In looking for some game images for this post, I came across one of the cave drawings from Chauvet-Pont-d’Arc, France created about 17,300 years ago. All told, about 2,000 images decorate the cave walls in Lascaux. Some years ago, I copied one of the cave drawings and made a Flash animated bison based on the works of Eadweard Muybridge. (See the running bison here.)

I decided to kick things off with Flash CS6 and Flash Builder 4.6 with a simple animation to find out where things break with Flash and mobile—primarily iOS. This is not to criticize either Adobe or Apple. Things have changed, and I want to see what in Flash and ActionScript 3.0 we can take with us and what will have to be changed further. In this next series of posts, I want to create a simple animation. After all, animation was the original sine qua non of Flash. Once a mobile animation is established, move on to using ActionScript 3.0 in a mobile environment with the new versions of Flash.

Starting from Scratch: Animation Without Tweens

The first thing I want to do is to create a simple mobile app; so I took my animated buffalo (bison) and placed him on the desktop using an AIR for iOS template. Figures 1 and 2 show the basics of the app:

Figure 1: Desktop animaiton

Figure 2: Timeline and keyframes

World’s Easiest Mobile App: 1, 2, 3

While this example shows how to set up a mobile app for an iOS device, Android is just as simple. Just use the AIR for Android template instead of the iOS one. All this does is to show an animated bison on the screen. You can download the files in Flash CS5 format here (just in case you don’t have CS6 yet.)

Once you have your animation set up (use the download), you follow three steps to get your ipa file for putting into your mobile device. You’ll have to set up the accompanying files required by Apple (use Xcode) or check out the developer’s guide for Android. In either case you can easily create an app using nothing more than the simple animation discussed (the download). Before going on, save the FLA files as ‘MobileBison.fla.’

First, select the Properties panel and open it, as shown in Figure 1. Now, click on the little wrench icon highlighted in Figure 1. Figure 3 shows what comes up. It’s a lot like CS5.5 with a few differences:

Fgiure 3: General menu in AIR for iOS settings

Second, at the top of the AIR for iOS Settings window click the Deployment option. Figure 4 shows an example of what you will see with your Certificate and Provisioning profile set. My only advice on this is to work patiently with your Xcode developer (for iOS) to get your certificates and provisioning profiles squared away. Once that’s done, you can use the same ones for about a year (for development purposes). When I added my new iPad, it worked but only for my iPhone. All I had to do was to update my Xcode app to the latest version, and my new iPad was recognized. I didn’t even have to change my certificate or provisioning profile (or it was done automatically for me.) I leave mine on Quick publishing for device testing just to move the project along. Figure 4 shows the Deployment window after being filled out:

Figure 4: Deployment window

Third, and this step is optional, add your icons. I just took my logo and using Fireworks made sizes to match most of the sizes they had for iPhone and iPad. The same graphic was employed and re-sized in Fireworks. When I added two more for my iPad, a little jiggling around was required, but that proved to be just a matter of using the same folder as used for my certificate. Figure 5 illustrates what my icon page looks like:

Figure 5: Added icons

Finally, click on the Languages tab to include the languages that may be relevant to your app. I’ve been trying to think in terms of icons that transcend languages, and then I can check off all of them. Once you’re all set, just click the Publish button and wait for it to generate your ipa file. On your computer, open iTunes, select “Apps” and drag and drop your ipa file into the iPhoe, iPod touch, and iPad Apps folder. Connect your iPad and/or iPhone, select iPad or iPhone in iTunes and select Apps. Click the Sync button, and your new app will be installed. Figure 6 shows the app and app button created with the single operation:

Figure 6: Completed Flash App and App Launch button

So there you have it, a Flash animation (such as it is) app on a mobile device—actually 2— an iPhone and iPad. It was easy, Flash CS6 made it so, and other than lacking a tween, we ought to be all set. In some respects, only.

Where’s The ActionScript 3.0 and Design Patterns?

The next step is to do something with the movie clip using ActionScript 3.0 and a design pattern. Further, I’d like to use Flash Builder 4.6, and I’d like to begin looking at AIR 3.3 (download) and Flash Player 11.3 (download)—while you’re downloading Flash Player, be sure to get the Flash Player 11.3 Beta Global SWC at the same URL. We can really extend Flash and Flash Builder with these Adobe Labs player and AIR updates. I’m expecting some very exciting things coming out of the labs and I think we would be well-advised to begin using them. The emphasis will remain on design patterns, but some new tools can be used even if they’re “Lab” tools that will make our creations run faster in a mobile environment. The operational speed will not be in the design patterns but in the new statements that we can use in classes that will be participants in a pattern. (DPs are for development and maintenance speed!)

Finally, I’d like to begin working with a little more sophisticated examples for the class content. Chandima and I have tons of easy design pattern examples so that we could focus on the structure. However, now I think we’ve reached a point where we can start working with SDKs in both Flash Pro and Flash Builder. I have no idea where Flex is going, but most Flex developers don’t need a lot of help with the nitty gritty of setting up their work environment, and through examples with Flash Pro and Flash Builder, there’s no doubt they’ll miss out on anything since most of what this blog does is with ActionScript 3.0.

Using Gestures

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.

As ActionScript 3.0 grows and changes, we can apply the old design patterns and begin looking for new patters to accommodate some changes.

AIR for Androids, iOS and Blackberry

Currently, the focus of most of the posts on this blog have been design patterns using ActionScript 3.0 with an occasional visit to some interesting structures such as dependency injection and skip lists. Now, a lot of the discussion will shift to newer statements and elements that make up the Flex/Flash family of APis and platforms. In particular you will want to take a look at the AIR 3 reference guide. Herein lie the statements, packages and namespaces that make up a lot of the new features we need to consider. Adobe helpfully marks each AIR class with a little red triangles with balls on the points. In creating an AIR app, whether for a mobile device or computer, there are differences depending on the hardware device. Once we’ve covered several and created sample examples, we can cast them into design patterns. So, consider this next set of posts to be a temporary detour that will take the knowledge set forward but keep the utility of what has passed.

Why Design Patterns are Hard

Some of the key parts of Pugh’s article, along with lots of articles you see in professional programming journals have all of these cool formulas. If you’ve seen Flash Math Creativity: 2nd Ed by Keith Peters and some other folks, you’ve seen lots of formulas like the one’s in Pugh’s article although Flash Math Creativity tends to be more trigonometry and geometry than calculus—in any case they’re über cool.

So how do we calculate the efficiency of Design Patterns? The algorithm crowd gets all kinds of cool formulas from every nook and cranny of math—even statistics in some cases. However, in going through The Gang of Four’s Design Patterns, there’s not a single formula that has that kind of proof.

Here’s What I’m Talking About…

In discussing how to work through the cost of running a skip list versus a balanced tree, Pugh offers the following formula:

C(0) = 0
C(k) = (1–p) (cost in situation b) + p (cost in situation c)

which he follows up with:

C(k) = (1–p) (1 + C(k)) + p (1 + C(k–1))
C(k) = 1/p + C(k–1)
C(k) = k/p

Eventualy he comes up with the total expected cost to climb out of a list of n elements as:

≤L(n)/p + 1/(1-p) which is O(log n)

In all of this, C(k) is the the expected cost —length— of a search path that climbs up k levels in an infinite list. So now Pugh can take his formula to the Balanced Tree makers, and say,

See, my formula proves that Skip Lists work as well as Balanced Trees and they take less effort.

So with formulas you can demonstrate mathematically and using math logic that a certain course of action is a reasonable one. So where do we start looking for formulas that can:

• Help determine which pattern to use
• Prove that a design pattern is a better choice over a non-design pattern

Why not start with OOP principles and see if they can help?
Read more…