The evolution of flash object-oriented programming

Source: Internet
Author: User
Tags continue cos functions modify sin domain
Program | object | design Note: The following references are derived from the <<flash ActionScript 2.0-ria application Development >>, which has been approved by the author of this book: Luar. If you have any copyright issues, please contact me and erase them immediately. Please specify the source.

This section takes an example of a particle motion system (a particle motion system that is in fact a large number of movie clip randomly moving within a range and bounces off when it encounters a boundary), explaining the movie clip object-oriented programming changes.
1. Full-domain function
Development steps:
Prepare a movie Clip ball represent the particles, drag it onto the stage, and enter these movie Clip ball entity names, such as Ball0 to Ball14.

The thinking mode of the time axis with the art angle, Movie Clip ball will be directly controlled on the timeline of the main movie, meaning that the program will be placed on the timeline of the main movie, the path is consistent with all Movie Clip entities, and this is the program in the timeline of the main movie, which is a domain-wide program, Because the _root can be accessed directly by the.
Because the particles to keep moving, in order to make the program responsible for moving continuously, the timeline must loop, and constantly go through the frame of the program, let the particles move.



If you know more about ActionScript, you will write the initialization and movement of the program as a function, or you may simply add the program directly to frame 1th and 2. These functions, the path is _root, as a global function; Until now, most flash developers, is still a global function approach to developing applications or programming interaction effects.
Good programming habits, the function is placed in the 1th frame, in the layer script to add the program code, Initball () is the initialization function, calculate the beginning of each particle movement angle, and then divided into X-speed and Y-speed:
Program code:
function Initball ()
{
var speed = 10;
for (var i = 0; i<ballno; i++)
{
var dir = random (360) *math.pi/180;
this["Ball" +i].xdir = Math.Cos (dir) *speed;
this["Ball" +i].ydir = Math.sin (dir) *speed;
}
}

Continue to add program code, programming the function of the mobile program:
Program code:
function Moveball ()
{
for (var i = 0; i<ballno; i++)
{
Use a common subexpression to remove an increase in execution speed
var ball = this["Ball" +i];
var x = ball._x;
var y = ball._y;
x + + Ball.xdir;
Y + + Ball.ydir;
if ((X<0 and ball.xdir<0) or (x>292 and ball.xdir>0))
{
We can bounce back when we hit the border.
Ball.xdir *=-1;
The particle cannot cross the boundary, so the limit position is the boundary size
x = (x<0)? 0:292;
}
else if ((Y<0 and ball.ydir<0) or (y>292 and ball.ydir>0))
{
We can bounce back when we hit the border.
Ball.ydir *=-1;
The particle cannot cross the boundary, so the limit position is the boundary size
y = (y<0)? 0:292;
}
ball._x = x;
ball._y = y;
}
}

Add variable Ballno to the first frame, representing the total number of particles; Finally, invoke the Initball () function to initialize and continue adding the program code.
Program code:
Ballno = 15;
Initball ();

In the second frame, add the program code and invoke the Moveball () function to move the particles:
Program code:
Moveball ();


In the third frame add the program code, skip to the second frame loop playback, let the Moveball () function is constantly called:
Program code:
gotoAndPlay (2);

This is done with a particle motion system written in a global function that can be used to test the film.

Characteristic analysis:
The global function is the easiest programming technique to learn, but it has the following three questions:
1. The object-oriented component is very low
In programming, the object-oriented concepts involved are few, and the reuse requirements are achieved in graphical use (all particle entities come from the same movie clip component).
2. Lack of encapsulation
The global function separates program code from graphics, and when it needs to be reused in other projects, you must carefully extract the required program code and graphics, and the encapsulation is completely lacking.
3. Pay attention to movie clip path
The global function directly controls movie Clip, assuming that movie Clip and global functions are in the same timeline (for example: the main movie) without path problems, but when controlled movie Clip is in another movie Clip, the global function is modified by the controlled movie Clip path, or move the whole domain function to the movie clip timeline.

2. Image Region function
The area function means to move the entire domain function that was originally placed on the main movie timeline to the object, which is placed in the movie Clip ball timeline.

Development steps:
Select the main movie layer script first to third frame, press the right key to select "Cut Frames", as shown in the figure.

Edit the component library movie Clip ball, insert frames to 3, add layers, select the first 3 frames, right-click "Paste Frames", as shown in the figure.

Edit the code for frame 1th and change to the following program code:
Program code:
function Initball ()
{
var speed = 10;
var dir = random (360) *math.pi/180;
Xdir = Math.Cos (dir) *speed;
Ydir = Math.sin (dir) *speed;
}
function Moveball ()
{
var x = _x;
var y = _y;
x + + Xdir;
Y + + Ydir;
if ((X<0 and xdir<0) or (x>292 and xdir>0))
{
Xdir *=-1;
x = (x<0)? 0:292;
}
else if ((Y<0 and ydir<0) or (y>292 and ydir>0))
{
Ydir *=-1;
y = (y<0)? 0:292;
}
_x = x;
_y = y;
}
Initball ();


The main procedure is to delete the For loop and delete the path (without the path). You can test the movie after you modify it.

Characteristic analysis:
The difference between a zone function and a global function is:
1. The program and graphics are put together, the encapsulation improved, easy to copy to another place to use.
2. There is no path to consider, in other movie clip can be used.

However, the area function has a fatal problem: Although the area function is written in the movie clip component, each movie clip entity has a set of regional functions in its own timeline. Their area functions are exactly the same, so many parts of the domain function can be a serious waste of memory.

3. Prototype (Prototype) extension
Since all the movie clip on the stage are specific manifestations of the MovieClip class (the only visible entity), the MovieClip class directly joins the method of random movement, and all particle entities have random moving methods for calling to avoid wasting memory.

The prototype is used in ActionScript 1.0 to establish inheritance or to add custom properties and methods to an object. Use the keyword "prototype" to add two methods for the MovieClip class, Initball () and Moveball () respectively.

Development steps:
Based on the modification of the source program above. The main movie timeline retains only the first frame, adds the layer script, and adds the program code to extend the MovieClip class method (which can be copied from the movie Clip ball the first frame):
Program code:
MovieClip.prototype.initBall = function ()
{
var speed = 10;
var dir = random (360) *math.pi/180;
This.xdir = Math.Cos (dir) *speed;
This.ydir = Math.sin (dir) *speed;
};
Movieclip.prototype.moveball=function ()
{
var x = this._x;
var y = this._y;
X +=this. Xdir;
Y + + This.ydir;
if ((X<0 and this.xdir<0) or (x>292 and this.xdir>0))
{
This.xdir *=-1;
x = (x<0)? 0:292;
}
else if ((Y<0 and this.ydir<0) or (y>292 and this.ydir>0))
{
This.ydir *=-1;
y = (y<0)? 0:292;
}
this._x = x;
this._y = y;
}

Program code to modify the place is not much, just add the keyword "This" to represent their own properties.
Edit the movie Clip ball in the component library, leaving only the first frame and changing the program code to:
Program code:
Initball ();
This.onenterframe=moveball;


Onenterframe is movie clip one of the events, which executes the program according to the movie frame rate (frame Rate). You can test the movie after you modify it.
Characteristic analysis:
While the prototype extension avoids the waste of memory from the repeating region function, it pollutes the MovieClip class by adding methods such as random moves directly in the MovieClip class, because all movie clip entities on the stage, even if not particles, have these two methods.

4. Packaged into Components
The correct way to build a defect for a prototype is to create a new object (such as a particle class) and inherit the MovieClip class. This approach, in Flash MX, is the so-called object-oriented programming approach with ActionScript 1.0来. In fact this approach with the development of Flash The MX component is no different, in other words, developing the Flash MX component is a common scenario for ActionScript 1.0 object-oriented programming.

Development steps:
Based on the source program above, modify. Copy the program code for the first frame of the main movie timeline layer script, and then delete the layer script. Edit the first frame of the movie Clip Ball layer script in the component library, delete the old two lines of program code, paste the program code of the main movie, The following program code is then modified as follows:
Program code:
#initclip
Constructs a function type
Ballclass = function ()
{
This.initball ();
};
Inherit MovieClip class
Movieclip.prototype = new MovieClip ();
Defining methods
BallClass.prototype.initBall = function ()
{
var speed = 10;
var dir = random (360) *math.pi/180;
This.xdir = Math.Cos (dir) *speed;
This.ydir = Math.sin (dir) *speed;
This.onenterframe=this.moveball;
};
BallClass.prototype.moveBall = function ()
{
var x = this._x;
var y = this._y;
x + + This.xdir;
Y + + This.ydir;
if ((X<0 and this.xdir<0) or (x>292 and this.xdir>0))
{
This.xdir *=-1;
x = (x<0)? 0:292;
}
else if ((Y<0 and this.ydir<0) or (y>292 and this.ydir>0))
{
This.ydir *=-1;
y = (y<0)? 0:292;
}
this._x = x;
this._y = y;
};
Associate the Ballclass class with the movie clip component
Object.registerclass ("Ball", ballclass);
#endinitclip


In the component library movie Clip Ball next to the right button to select "link", as shown in the figure

Check "Exprot for ActionScript", uncheck "Export in-in-fame", identify name input ball. This ballclass class can be associated with this component, all of which are movie clip entities on the stage, Which is the Ballclass entity. You can test the movie after you modify it.

Characteristic analysis:
In Flash MX, this is generally oriented to the design of the procedure, written in the particle components, reusability, encapsulation, etc. have reached the requirements of Flash object-oriented programming. The only drawback is that prototype based's object-oriented programming is not an industry habit, so to flash The MX 2004 has ActionScript 2.0.

5.ActionScript 2.0 class
The particle motion system is rewritten with ActionScript 2.0, and the object-oriented concept is not the same as ActionScript 1.0, except for the different methods.

Development steps:
Based on the modification of the source program above, remove the movie Clip ball layer script. In the component library movie Clip Ball by right-clicking the "link" and entering as 2.0 for Ballclass, This step is already equal to Object.registerclass ("Ball", ballclass);

Create a file named Ballclass.as, add program code:
Program code:
Inherit MovieClip class
Class Ballclass extends MovieClip
{
Property
private Var Xdir:number;
private Var Ydir:number;
Constructs a function type
function Ballclass ()
{
Initball ();
}
Method
Private Function Initball (): Void
{
var speed = 10;
var dir = random (360) *math.pi/180;
Xdir = Math.Cos (dir) *speed;
Ydir = Math.sin (dir) *speed;
Onenterframe = This.moveball;
}
Private Function Moveball (): Void
{
var x = _x;
var y = _y;
x + + Xdir;
Y + + Ydir;
if ((X<0 and xdir<0) or (x>292 and xdir>0))
{
Xdir *=-1;
x = (x<0)? 0:292;
}
else if ((Y<0 and ydir<0) or (y>292 and ydir>0))
{
Ydir *=-1;
y = (y<0)? 0:292;
}
_x = x;
_y = y;
}
}

When you are finished you can test the movie (remember to release it in Flash 6/7 ActionScript 2.0).

Characteristic analysis:
The class of ActionScript 1.0, if there is no domain of names, is established in _root, and the class of ActionScript 2.0 is established in _global and handles the name domain problem on its own.
From the above examples step-by-step evolution, we can see that regardless of object-oriented programming syntax is how to change, the most core control particle random movement of the program are similar, and object-oriented programming design concept is unchanged. So Flash MX object-oriented programming Novice to from the global function to programming ActionScript 2.0 is no obstacle, learned the object-oriented program design concept, learned the ActionScript 2.0 method, should take the first step to try.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.