Flash as Game tutorials: people and control

Tutorials | control

Demo Effect:

Click here to download the source file

On the basis of the first map we made, we made a character and then let the character walk comfortably on our map. Of course, the figure how to do, the image of how to design, we do not speak, because the art of the great fool is a bit ..., well, don't say, we find a ready-made person from the Internet (note: This material is provided by Baste Long Friendship), as shown in Figure 1:

Everyone carefully, this figure a total of 16 clips, the top row is still image, representing the figure in the 8-position stationary state, what? Which 8 directions? Big foolish, is (up, down, left, right, upper left, upper right, lower left, lower right). The following row is a dynamic clip that walks in the appropriate direction. It's very important here.

And then we started making.

1, create a new movie clip (named: player, as the output of the action script), put the static 8 characters to 1-8 frames (order unimportant), and then put the dynamic character material to 9-16 frames. Note: The static frame and the same azimuth dynamic frame are just 8 frames apart, here is the key. Why do you ask? Big fool first suspense, wait will see the program you will know. Then the following 8 frames to define the label separately, according to their respective orientation ("Shang", "Xia", "Zuo", "You", "Zuoshang", "Youshang", "Zuoxia", "Youxia") to define, here must not be mistaken.

2, after these preparations are done, your stage and timeline should be like this, as shown in Figure 2

May be slightly different, because the old fool here with an onion skin tool, the contents of the 1-16 are shown. What did you say? How do you use the Onion peel tool? This is not difficult, click on the timeline below a edit multi-zhen button, and then adjust the selection of the range to defend all the 16 Zhen, you see. Wow, that's so cool.

3, we can edit multiple frames at the same time through onion skins. We use the selection tool to select all 16 clips, and then use the alignment panel (press Cont+k to open) to align the contents of 16 frames horizontally, vertically to the stage, and then adjust the position as shown in Figure 3.

Okay, here's the program we started. (I'm talking so much nonsense, looking for death, do you think no royalties?) ）

4, back to the scene, select the first frame, open the Action panel (press F9)

5, add the following code to the Action panel (add to the back of the previous lesson map code):

var stepx,stepy
Define 2 variables to control the movement of characters on the X and Y axes
_root.attachmovie ("Player", "Play1", 1000);
Connect a character movie clip, named Play1, with a depth of 1000
play1._x = 200; play1._y = 100;
Set his initial position.
Somelistener = new Object ();
Create a new listener object to monitor the mouse action
The following defines the function for this listener object
(function is to detect mouse click Release action, judge the character should be facing, as well as moving characters to the mouse click position)
Somelistener.onmouseup = function ()
{
ABSR = Math.Abs (play1._xmouse) +math.abs (play1._ymouse);
The meaning of Play1._xmouse is introduced here, is the mouse position relative to the position of the location of the location of the x coordinates
Play1._ymouse is the y-coordinate of the mouse position relative to the position of the person's registration point
ABSR is this 2-distance and
if (absr> 10)
{
At this distance of more than 10, we allow the character to exercise
DX = _root._xmouse-play1._x;
dy = _root._ymouse-play1._y;
Dx,dy is the coordinate difference between the mouse position and the character registration point in the x,y direction respectively.
MUX = _root._xmouse;
Muy = _root._ymouse;
Mux,muy is where the characters are going.
Sqr = math.sqrt (Math.pow (DX, 2) +math.pow (DY, 2));
Sqr is the straight distance between the target position and the current position,
The above meaning is equivalent to the root of dx and dy squared sum, this is a right angle 3 angle, the standard algorithm for hypotenuse
The following code is based on the position of the mouse and the current position of the person to determine the direction of the person//If you do not understand the code, you can look at (Figure 4)
if (dx> 0)
{
When the horizontal x value of the mouse is greater than the character
if (Math.Abs (Dx/dy) > 2)
{
And Dx/dy> 2, you can determine that the character is walking right, the following are the same some judgments
Play1.gotoandstop ("You");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
}
else if (Math.Abs (dx/dy) >0.5 and dy <0)
{
Play1.gotoandstop ("Youshang");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
}
else if (Math.Abs (Dx/dy) >0.5 and dy< 0)
{play1.gotoandstop ("Youxia");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
else if (Math.Abs (Dx/dy) <0.5 and dy> 0)
{Play1.gotoandstop ("Shang");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
} else
{
Play1.gotoandstop ("Xia");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
When you know the character is headed, add a code to the event onenterframe for the character instance,
The purpose is to let the characters move stepx.stepy every run.
Play1.onenterframe = function ()
{
Play1._x + = stepx;
Play1._y + = Stepy;
if (Math.Abs (Play1._x-mux) <6 and Math.Abs (play1._y-muy) <6)
{
When the x,y coordinate between the character and the target is only 6 pixels, we think the play1 reach the target position.
Delete (play1.onenterframe);
Delete this to the character instance's event Onenterframe the defined function
Play1.gotoandstop (play1._currentframe-8);
The character stops at the same direction as the current dynamic position, which is the play1._currentframe-8
Remember why you put the relevant static material and dynamic material to the distance between the 8 of the corresponding position?
}
};
else if (DX <0)
{
Here and the above code is the same meaning, just to judge the situation of DX <0 time
if (Math.Abs (Dx/dy) > 2)
{play1.gotoandstop ("Zuo");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
}
else if (Math.Abs (Dx/dy) > 0.5 and dy <0)
{
Play1.gotoandstop ("Zuoshang");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
else if (Math.Abs (Dx/dy) > 0.5 and dy> 0)
{
Play1.gotoandstop ("Zuoxia");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
else if (Math.Abs (Dx/dy) <0.5 and dy> 0)
{
Play1.gotoandstop ("Shang");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
}
Else
{
Play1.gotoandstop ("Xia");
STEPX = 5*DX/SQR;
Stepy = 5*DY/SQR;
}
Play1.onenterframe = function ()
{
Play1._x + = stepx;
Play1._y + = Stepy;
if (Math.Abs (Play1._x-mux) <10 and Math.Abs (play1._y-muy) <10)
{
Delete (play1.onenterframe);
Play1.gotoandstop (play1._currentframe-8);
}
};
}
}
};
Mouse.addlistener (Somelistener);
Finally, register this huge listener to the mouse.
Then the mouse has occurred listener-defined events, will notify the listener, where the mouse event is: onMouseup

Figure 4: