00:00
00:00
Newgrounds Background Image Theme

BorfDoggo just joined the crew!

We need you on the team, too.

Support Newgrounds and get tons of perks for just $2.99!

Create a Free Account and then..

Become a Supporter!

AS: prototype, proto & inheritance

4,128 Views | 15 Replies
New Topic Respond to this Topic

AS: Main

Have you ever had an occasion when you had to copy and paste the same code over and over to a bunch of different movieclips? Then you have been missing out on prototype. What is it? It will add a method or variable to any class. This means all instances of that variable will have this method or variable. Basic example:

MovieClip.prototype.onEnterFrame = function () {
this._x += 5;
}

Plop a few movieclips on your stage and test the movie. They will all move to the right because every one of them has the onEnterFrame function telling it to ad 5 to its x each frame. You can do variables the same way.

MovieClip.prototype.BleeBlapIsCool = true;

Combine that with a little change to the first example:

MovieClip.prototype.onEnterFrame = function () {
trace(this.BleeBlapIsCool);
}

And you will see true traced in the output window once each frame for each movieclip on the stage. That's a lot of coolness.

Inheritance is more a practice commonly used in OOP. It allows you to create custom classes that have all of the properties of another class. This is good if you only wanted some of the objects on stage to fly to the right. (Note: delete the MovieClip.prototype from above) An example of this would be:

circle = new Object();
circle.prototype = new MovieClip;
circle.prototype.onEnterFrame = function () {
this._x += 5;
}

Now on the first line we define circle. We must first define it before we can do anything to it. The next line tells Flash to take all of the methods and variables in a new MovieClip object and put them into circle's prototype. This means any instance of circle will now have all of those methods and variables (Note: this includes any custom variables or methods added to the MovieClip class's prototype before that time.)

Thats all fine and dandy but how do we use one of our custom classes? Well thats where Object.registerClass() or__proto__ come in. First, we'll use Object.regiserClass because its a little more straight foreward.

Object.registerClass("linkage", circle);

This code would go with the code above for the circle class. To use this we have to give a library element the appropiate linkage. Do this by creating a new symbol. Give it a standard name and make sure its type is set to movie clip. Then if the advanced options are expaded expand them by clicking the little triangle at the bottom right of that box and you will see some new options. Put a check in "export for actionscript" This will also add a check for "Export in first frame" leave both check. It will also copy your symbol's name to the identifer box. Change that to 'linkage' without the ''. This is just so that Flash will know which library objects you are refering to. If you have already created the movieclip you can access these options by right clicking (control clicking macs) on the movieclip in the library and then going to the linkage option and following the instructions from above.

Now that you have your brand new class associated with a library element you just have to attach one:
attachMovie("linkage", "circleTest", 0);
circleTest._x = 100;
circleTest._y = 100;
The first line attaches the element to the stage and the next two just make sure its visible. For more information about attachMovie check out: AS: Duplicated MovieClips by Denvish

Well that was fine and dandy but will only help with movieclips that are dynamically attached to the stage. So I present to you, the final piece of the puzzle: __proto__! Why they the guys over at macromedia insisted on having a double underscore before and after this one, I have no idea, but thats the way the cookie crumbles so we are going to have to deal with it. Example use:

createEmptyMovieClip("circleTest", 0);
circleTest.__proto__ = circle.prototype;

Of course the movieclip is empty so there is noting you can see for this example but the basic concept is still there. The first line just creates a basic movie clip named circleTest. __proto__ is a reference to the prototype property of the object's constructor by documentation's definition. If you think of prototype as a list of all of the methods and variables a function has, proto is a variable that specifies which list to use for each instance. So initially circleTest's proto refered to MovieClip's prototype but we redefined it to equal circle's prototype. Alternatively we could add this code to a movieclip:

onClipEvent (load) {
this.__proto__ = _root.circle.prototype;
}

Make sure the path name on the custom class is correct and you will see that whatever movieclip you put that on inherits the circle's onEnterFrame function and begins moving.

That's about all I have for you today folks. Some of this stuff is rather convoluted and complicated to learn but once you get the hang of it, it's pretty neat. For further reading check out: Actionscript.org's Tutorial. As always, feel free to post any question comments or concerns and myself or one of the other knowledgeable BBS regulars will do what we can to help.

Response to AS: prototype, proto & inheritance 2005-09-05 01:28:42


Good tutorial. An example of when you'd want to use it:
Button.prototype.useHandCursor = false; // Use the arrow cursor for all buttons
Or if you have some Movie Clips with button actions:
MovieClip.prototype.useHandCursor = Button.prototype.useHandCursor = false;


BBS Signature

Response to AS: prototype, proto & inheritance 2005-09-05 01:29:50


wow dude, that's wrong, sorry but prototype shoudln't be used where you can extend a class and redefine it's functions, I think I explained that in AS OOP

Response to AS: prototype, proto & inheritance 2005-09-05 06:31:43


At 9/5/05 01:29 AM, Inglor wrote: wow dude, that's wrong, sorry but prototype shoudln't be used where you can extend a class and redefine it's functions, I think I explained that in AS OOP

AS: OOP doesn't mention anything about prototypes or proto. I understand that it isn't true OOP, but it is an alternative thats available in versions of Flash earlier than MX 2004. Also in some instances it can be quicker to just prototype something rather than setting up a whole new .as file with a custom class and a constructor and everything else. Regardless of wheather or not you like to use them, they are properties available to users that hadn't been covered in any AS: thread yet.

Response to AS: prototype, proto & inheritance 2005-09-05 06:40:23


At 9/5/05 06:31 AM, BleeBlap wrote: they are properties available to users that hadn't been covered in any AS: thread yet.

Cool, I've always wondered exactly what prototype does. That's pretty useful stuff.


- - Flash - Music - Images - -

BBS Signature

Response to AS: prototype, proto & inheritance 2005-09-05 06:42:59


I guess you're right, proto still shouldn't be used unless really needed, which is mainly in flash mx

Response to AS: prototype, proto & inheritance 2006-09-26 23:54:53


ok so wait, if i were to put:

circle = new Object();
circle.prototype = new MovieClip();
circle.prototype.onEnterFrame = function() {
this._x += 5;
};
Object.registerClass("linkage", circle);
attachMovie("linkage", "circleTest", 0);
circleTest._x = 100;
circleTest._y = 100;

it would take a symbol from the library put it at 100,100 and it would move right. correct? or am i doing something wrong, because its not working. it spawns but doesnt move right.

Response to AS: prototype, proto & inheritance 2006-09-27 00:49:04


cmon bleeblap, i know your readin this

Response to AS: prototype, proto & inheritance 2006-09-27 01:01:29


At 9/27/06 12:49 AM, ImpotentBoy2 wrote: cmon bleeblap, i know your readin this

he's comming. NOW THANK ME!


BBS Signature

Response to AS: prototype, proto & inheritance 2006-09-27 01:11:51


Hurmph. I'm tired so I can't really explain it at the moment but this code is working for me:

circle = function () {};
circle.prototype = new MovieClip;
circle.prototype.onEnterFrame = function() {
this._x += 5;
};
Object.registerClass("linkage", circle);
attachMovie("linkage", "circleTest", 0);
circleTest._x = 100;
circleTest._y = 100;

I'm sure I tested the code before I put it into this tutorial though. I'll have to mess around with actionscript 1.0/2.0, flash publish settings, or the version of flash to see if that makes a difference and I might be able to tell you why.

Response to AS: prototype, proto & inheritance 2006-09-28 18:51:27


it works, thanks.

Response to AS: prototype, proto & inheritance 2006-09-28 22:31:20


OOP is a style of programming, i dont like it, i dont use it. I miss out on nuthing, and i dont lose time.

This is extrmely usful, prototypes save me time, so i use them.

Response to AS: prototype, proto & inheritance 2006-09-29 03:12:41


At 9/28/06 10:31 PM, xWELSHxDRAGONx wrote: OOP is a style of programming, i dont like it, i dont use it. I miss out on nuthing, and i dont lose time.

This is extrmely usful, prototypes save me time, so i use them.

wait... isnt this OOP

Response to AS: prototype, proto & inheritance 2006-09-29 11:36:44


At 9/29/06 03:12 AM, ImpotentBoy2 wrote: wait... isnt this OOP

it can be considered a derivative thereof. its basically just modifying class structures at runtime. but, essentially, this is a direct spinoff of OOP, yes.


BBS Signature

Response to AS: prototype, proto & inheritance 2006-09-29 20:06:28


At 9/28/06 10:31 PM, xWELSHxDRAGONx wrote: OOP is a style of programming, i dont like it, i dont use it. I miss out on nuthing, and i dont lose time.

This is extrmely usful, prototypes save me time, so i use them.

i hate oxymorons

Response to AS: prototype, proto & inheritance 2007-01-09 08:49:16


the only thing that messed with me in this tutorial is that when I was using it, you never said to use this. with every local variable you change/reference.

other then that, this is awesome, no more copy and paste enemies.