The Pincers

When two companies that are intertwined with my fate get into a spat, I get itchy. Because we are all linked to ActionScript 3.0 in one way or another, and Adobe is linked to ActionScript 3.0 through Flex and Flash this sad state of affairs may have consequences for us all. However, those of us who do our primary development using Apple computers (Macs), our fates are doubly impacted.

Until now, I’ve always considered ActionScript 3.0 to be a friend of the world. A large proportion of Apple’s success can be traced to the applications produced by Adobe, and yet this current parting of the ways seems to be more than a hiccup in a long symbiotic relationship between these two high technology giants.

Many of this group were primed to begin writing applications for the iPhone and iPad (and some may have), but now that seems out of the question. In a strongly worded broadside against Adobe, Steven Jobs, Apple’s Boss. Now, look what we’ve got…

With Ate by his side come hot from hell,
Shall in these confines with a monarch’s voice
Cry ‘Havoc,’ and let slip the dogs of war;
That this foul deed shall smell above the earth
With carrion men, groaning for burial.

So Adobe responded to Jobs rant.

Anyway, here are my comments, and we’d like to hear from you as well:

1. He rightfully acknowledges that Apple was one of Adobe’s initial customers. However, Apple needed Adobe’s fonts as well as the PostScript language that made their initial laser printer more than really good dot-matrix printer.

2. Also, while Jobs is probably correct in noting that about half of Adobe’s products are purchased by Apple owners; most of the Apple upgrades we purchase are because of the improvements Adobe makes in its CS5 suite. I’d still have my old iMac GooseNeck were it not for the fact that Adobe’s new products required new Apple hardware.

3. In looking at the apps in my Dock, the ones I use the most are by Adobe. Were it not for iTunes, I would not use Apple software (aside from the OS) all that often. The second most-used is Microsoft Office. It’s down the line when I find Apple software not related to iTunes that I find using a good deal. QT is sometimes used, but rarely anymore because Adobe Media Player is more responsive.

4. Several software developers have argued that, “It’s just not worth it to create Macintosh versions.” Adobe was always there for Apple when a lot of other software developers threw in with PCs only.

Being a fan of both camps, I truly hope that Apple and Adobe find a common ground. Even the Mafia knows it’s more profitable to cooperate than bicker.

What do you all think?

A Closer Look

In the initial example using the MovieClip.addFrameScript() (noted above), all I wanted was some way to have an animation play once and stop. As soon as the playhead reached the last frame, it jumped to a function named in the second parameter of the addFrameScript() method. However, I didn’t do much by way of clarifying that. So I’d like to start with a general view of the method shown in Figure 1:

Figure 1: Structure of the addFrameScript() method

Oddly, the trick to using the method effectively is not just in the ending frame to fire the function, but also in the starting frame. In looking around, one thing I found is that the method can have multiple trigger frames that launch a function. The following shows the format:

    mc.addFrameScript(n1, func1, n2, func2, n3, func3);

Each trigger frame is the frame number in the movie clip minus 1. However, when you have multiple triggers, you want to play the movie clip from some starting point other than the one that fires the function. To be purposeful, I believe that using this method must take advantage of multiple animations that can be generated in a single movie clip either at different starting points and/on on different layers. In other words, anywhere in the movie clip. The general setup for this kind of functionality looks like the following:

    mc.addFrameScript(n1, func1, n2, func2);
    mc.gotoAndStop(1);
    . . . .
    mc.gotoAndPlay(seqBegin);

In this case the parameter, seqBegin is where the animation segment begins. It plays until it hits the trigger frame that fires the function that stops the animation or causes some other action.

Adding an Exoskeleton

When placing code on the Timeline or inside the MovieClips themselves, the code is hidden and unavailable to the larger structures provided by Design Patterns. So, I continue to think of the code in terms of an exoskeleton that can reach all parts of the MovieClip objects in the Library and at the same time be available for ActionScript 3.0 in ActionScript files. In order to illustrate something useful with the multiple function addFrameScript() method, I decided to continue with an example for the bellicose Wrong Way Warrior. I create three animations for an exploding grenade, rocket and mortar. The only difference is in the size of the explosion, but the animations could be as complex or simple as desired.

Taking an eight-sided star drawing, I placed it into a graphic symbol. Then, I created a MovieClip giving it the class name Boomer. It used motion tweens to expand the graphic star from small to large. Depending on the weapon, the explosion varied. Figure 2 shows the MovieClip’s timeline with the motion tweens:

Figure 2: Animated Explosions in MovieClip

Each tween was either 5 or 6 frames — explosions are quick and short. Further, each started in a different position on the timeline and on a different layer. Given that the same symbol was re-used on all three, I suppose I could have put them all on the same layer, but it was clearer to place the tweens on separate layers.

Once that was done, all I had to do was to write a script that made use of the animations in the MovieClip object. Because I set it up for Export for ActionScript, I was able to address each in turn. (The example is a test bench, and they are not integrated into the Wrong Way Warrior or connected to sounds.) The following script shows how the ActionScript controlled the MovieClip’s playhead movement.

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

package
{
	import flash.display.MovieClip;
	import fl.controls.Button;
	import flash.events.MouseEvent;
 
	public class AddScript extends MovieClip
	{
		//Create MovieClip instance
		private var boomer:MovieClip=new Boomer();
		//Starting frame
		private const THROW_GRENADE:uint = 1;
		private const FIRE_ROCKET:uint = 7;
		private const LAUNCH_MORTAR:uint = 12;
		//Frame to trigger function (minus 1)
		private const GRENADE:uint=(6-1);
		private const ROCKET:uint=(11-1);
		private const MORTAR:uint=(17-1);
		//UI
		private var grenade:Button=new Button();
		private var rocket:Button=new Button();
		private var mortar:Button=new Button();
 
		public function AddScript()
		{
			setUI();
			boomer.x = 250,boomer.y = 200;
			boomer.addFrameScript(GRENADE,ceaseFire, ROCKET,ceaseFire, MORTAR,ceaseFire);
			boomer.gotoAndStop(1);
		}
 
		private function setUI():void
		{
			grenade.x = 10,grenade.y = 20;
			grenade.label = "Throw Grenade";
			grenade.addEventListener(MouseEvent.CLICK,fireWeapon);
			addChild(grenade);
			rocket.x = 10,rocket.y = 50;
			rocket.label = "Fire Rocket";
			rocket.addEventListener(MouseEvent.CLICK,fireWeapon);
			addChild(rocket);
			mortar.x = 10,mortar.y = 80;
			mortar.label = "Launch Mortar";
			mortar.addEventListener(MouseEvent.CLICK,fireWeapon);
			addChild(mortar);
		}
 
		private function fireWeapon(e:MouseEvent)
		{
			addChild(boomer);
			var weapon:String = String(e.target.label);
 
			switch (weapon)
			{
				case "Throw Grenade" :
					boomer.gotoAndPlay(THROW_GRENADE);
					break;
 
				case "Fire Rocket" :
					boomer.gotoAndPlay(FIRE_ROCKET);
					break;
 
				case "Launch Mortar" :
					boomer.gotoAndPlay(LAUNCH_MORTAR);
			}
		}
 
		private function ceaseFire():void
		{
			boomer.gotoAndStop(1);
			removeChild(boomer);
		}
	}
}

In setting up the constants for the values where the timeline position would fire the functions, I used expressions to remind us that the addFrameScript() function uses a zero-base numbering system for frame reference. That is, the first frame is zero (0), and all of the rest are the frame number minus 1.

Why Undocumented?

It always makes me nervous to get too close to an undocumented feature in ActionScript 3.0. That means at any moment the method will be deported like an unwanted immigrant. However, the method has been around since Flash CS3 and I’ve seen it referenced in some Flex listings. Why it remains undocumented is a mystery to me, but I hope that they decide to keep it or replace it with a documented method that allows direct access to the timeline with code that is in an ActionScript 3.0 file in either Flash or Flex (Flash Builder).

As an alternative to onEnterFrame(), this method is much cleaner and far less processor intensive. It patiently waits until the playhead reaches the trigger and then launches the appropriate function. Compare this to the onEnterFrame() method that keeps running back and fourth asking, Are we there yet? like some annoying kid in the back seat.

In the meantime, the addFrameScript() method is quite valuable for developers who want to free themselves from the limitations of script on the Timeline and keep all of the advantages of controlling the play on the Timeline. If you feel the same as I do, we can launch a whining campaign at Adobe—just like the annoying kid in the backseat.

A Closer Look

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.

Adding one object to another object in ActionScript 3.0 takes many forms, but when it comes to adding an object to a Sprite, a simple method is to use the addChild() method. The statement,

      mySprite.addChild(myObject);

does the trick. By referencing all drag methods to the Sprite instance, you can drag the Sprite and anything that’s been added to it. The following program takes care of the initial query I had—it allows you to drag a video.

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

package
{
	import flash.display.Sprite;
	import flash.media.Camera;
	import flash.media.Video;
	import flash.events.MouseEvent;
 
	public class DragVid extends Sprite
	{
		private const WIDE:uint=320;
		private const HIGH:uint=240;
		private var vidSled:Sprite=new Sprite();
		private var vid:Video = new Video(WIDE,HIGH);
		private var cam:Camera = Camera.getCamera();
 
		public function DragVid()
		{
		setMedia();
		vidSled.addEventListener(MouseEvent.MOUSE_DOWN,doDrag);
		vidSled.addEventListener(MouseEvent.MOUSE_UP,unDrag);
		}
 
		private function setMedia():void
		{
			cam.setMode(WIDE,HIGH,20);
			cam.setQuality(0,100);
			vid.smoothing=true;
			vid.attachCamera(cam);
			vid.x = 100,vid.y = 100;
			addChild(vidSled);
			vidSled.addChild(vid);
		}
 
		private function doDrag(e:MouseEvent):void
		{
			this.startDrag();
		}
 
		private function unDrag(e:MouseEvent):void
		{
			this.stopDrag();
		}
	}
}

You may notice that no net elements are included, such as NetConnection or NetStream. However, they could be added for anything from a video playback to a Flash Media Interactive Server application. The objects associated with the dragging lose none of their functionality. As you can see the code sets the mode and quality of the Camera instance. Likewise, the Video instance takes advantage of mipmapping by setting the smoothing property to true.

Hook up your camera and give it a try by clicking the “Play” button:

Figure 1 shows this simple process. The hand icon in the upper right corner of the video object shows where the mouse has seized the image and is dragging the video embedded in the Sprite object.

Figure 1: Video hitchhiking on a Sprite gets dragged as startled subject looks on

Originally, I added a graphic in the Sprite to provide a visual background, but that was just added bling with no function other than distracting readers from the purpose of the Sprite. However, for those who like backdrops, you can add one using the graphics property and methods in the Sprite object.

What Varies?

For some food for thought for Part II of this post, get the Magic Table (if you don’t already have it) to determine what variation you need to control. That will give you a guide to the design pattern we can use. (Hint: We do not need to vary the sole instance of a class).

Essentially, here’s what we need to figure out:

What varies that we need to deal with when creating any dragable object?

Once that question is answered, we can begin working on the program using the design pattern that takes into account the variation. In the meantime, we’d like to get your comments on both the variation and the task of dragging objects using OOP and ActionScript 3.0.

A Closer Look

Gentle Reader Every now and then I run into something of possible interest to ActionScript 3.0 and Design Patterns. Since I spend a lot of time in the forest (Design Patterns), I may miss the trees (Program Elements). So what I may run across might be known (and obvious) to all but me. On the other hand, some may find these short digressions of possible interest and use. So as to alert readers to these random snippets I put together a Closer Look logo for these small posts that live in the nooks and crannies of OOP and Design Patterns.

Programming with MovieClips in the Library

When you create a MovieClip in the Library and set it up for Export to ActionScript, you can treat it as a child of the MovieClip class. Basically, a named MovieClip in the Library is the same as setting it up as:

        public class MyMC extends MovieClip …

One of the fundamental design pattern principles is program to an interface; not an implementation. For example, instead of declaring a movie clip instance as,

        private var myInstance: MyMC = new MyMC()

we’d write it, thusly to program to the interface:

        private var myInstance: MovieClip = new MyMC()

We could even make it looser by typing it as a Sprite instance;

        private var myInstance: Sprite = new MyMC()

Does it really matter? I believe that programming to the interface instead of the implementation definitely matters, but whether it is to the Sprite or MovieClip depends on what you need.

Create two movie clips that you can place in the Library. One is a simple green block. The second movie clip does a shape tween turning from blue to green as it moves from left to right. Now, consider the following program:

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

package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
 
	public class Client extends Sprite
	{
		private var sansTL:Sprite;
		private var conTL:MovieClip;
		{
			public function Client()
			{
				//No Timeline use
				sansTL=new NoTL();
				sansTL.x=100, sansTL.y=100;
				addChild(sansTL);
				sansTL.rotation=20;
//rotation property assigned value
 
				//Needs Timeline method
				conTL =new McTL();
				conTL.x=100, conTL.y=200;
				addChild(conTL);
				conTL.gotoAndStop(6);
				//gotoAndStop() method used
//(cannot be used by Sprite)
			}
		}
	}
}

If you type a movie clip instance as a Sprite, you can use all of the Sprite properties and methods, but you cannot use the additional MovieClip properties and methods that use the timeline. Figure 1 illustrates what the above program does.

Figure 1:Two differently typed movie clip instances

Like I said, this was one of those little things that hit me and amounts to no great shakes. However, if I plan to use drawn figures in the Library as imagery and nothing more, I would type them as Sprites—why bring along the Timeline if I’m not going to use it? (In Part II of the Wrong Way Warrior, all of the images were static MovieClip instances typed as Sprites.)