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.
The Hitchhiker’s Guide to ActionScript 3.0: Dragging through the Galaxy—Part 1 by William B. Sanders, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Bill Sanders
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at DragVid/setMedia()
at DragVid()
:)
The first time I do not know what you want to say :-)
Whatever you put into a sprite container should be fine with dragging.
Or are you pointing to having an interface ready to the object whatever kind it is?
Hi Dejan,
That’s odd. I just tried it in both Flash CS3 and CS4 and it works fine. If you have no camera, it cannot find it and throws the indicated error. (My bad—I didn’t put an error routine for a missing camera.) Try it again with your Camera set up. I’m going to give it a run with Flex and see if there’s any difference.
If you have a camera set up, and you’re still getting the error, let me know.
Thanks,
Bill
Composite: Structure and composition of an object can vary
Hi Bill,
Really great initiative/idea. I think that what Design Patterns actually need are some “real life examples” ( as you already pointed out, maybe not too many people will actually ever want to drag a video, but I’m quite sure that many people will want to try to drag different objects so although this “drag the video” example is not 100% “real life” , still the information one can learn from this example is really valuable ) or at least examples that actually do something ( not only trace messages ).
Bravo and keep it up,
Barni
Hi Mark,
You’re right on both counts!
Kindest regards,
Bill
Hi Barni,
Thanks for you comments. The Real Life Examples are with the Take a Design Pattern to Work series. What we found in our survey was that while just about everyone (on this blog) saw the value in OOP and Design Patterns; not many actually used them at work because of the press of schedules. With those simple (yet practical) examples we hope to encourage people to use design patterns at work.
Also, take a look at the Golden Lunch Bucket posts–there we try real world solutions as well.
On some days, though, I avoid 100% real life and have some fun!
Kindest regards,
Bill
Ajay,
Okay, that sounds reasonable. Would you like to expand on that a bit?
Take care,
Bill
Hi again,
Thanks for the link, I somehow missed that category ( I did see the Golden Lunch-Bucket posts but I somehow missed the other examples ). Regarding “not many actually used them at work because of the press of schedules”, well, that does happen but that doesn’t mean that people can’t/shouldn’t use them in their personal projects ( or while experimenting ) where such issues shouldn’t really exist.
“On some days, though, I avoid 100% real life and have some fun!”
Hehe, yeah, I totally feel you on this one. :)
Cheers,
Barni
Hi Barni,
“…that doesn’t mean that people can’t/shouldn’t use them in their personal projects ( or while experimenting ) where such issues shouldn’t really exist…”
You know, I hadn’t thought of that, but you’re right. My focus has been on slipping in DP’s on Sandberg’s little cat feet… in the workplace. Then one day everyone wakes up and finds all these design patterns at work.
Speaking of which…how about participating in our Golden Lunch Bucket contests? Contest #4 is going on now. You can also check out the Golden Lunch Bucket World Cup standings!
Very glad to hear your thoughts,
Bill
Thanks Bill but I’ll have to skip Contest #4 due to “time issues” and other, more personal reasons. I do promise that I’ll do my best on the following contests.
Thanks again,
Barni