Use Flash to do electronic map example explanation

About Flash, we all know more or less. For example, the Internet, everywhere can see the existence of Flash. The application of Flash is also multifarious. Today we are talking about using Flash to make electronic maps.

Now everywhere in the Internet can find electronic maps, most of which are Java to develop, in fact, with Flash can also do electronic maps. And the interface is also more beautiful. Now on the internet has been useful flash made electronic map. and development trend. Like "China electronic map" inside the map is made with Flash. There are Jiujiang, Wuyi and other maps are also used to complete the flash.

Now we will learn to use Flash to do electronic map, first of all to understand the function of electronic maps, the most important function is to facilitate your search, there is a selective display. For example, I went to a city, I want to go to a place, if there is a map, you need to look at 1.1 points, but also how to find. and the electronic map is not the same, you can search, directly labeled that place, but also can tell you how many bus to, near what hotels, restaurants and so on. Therefore, the electronic map generally has the function is: enlarges, shrinks, moves, the place link (believed to introduce), the search, and so on a series of functions. Such a large amount of data is not saved in Flash, from the technical level, is to achieve data and layer dynamic loading, the realization of data fuzzy, intelligent, regional query and other functions.

Needless to say, first of all, we have to understand the Flash MC (film clips), has made an electronic map of the use of several attributes. As follows:

The x-coordinate of the _x//relative to the local coordinates of the parent movie clip. If the movie clip is in the main timeline, its coordinate system takes the upper-left corner of the stage as (0, 0).

The y-coordinate of the _y//relative to the local coordinates of the parent movie clip. If the movie clip is in the main timeline, its coordinate system takes the upper-left corner of the stage as (0, 0).

The width, in pixels, of the _width//movie clip.

The height, in pixels, of the _height//movie clip.

_xscale//Determines the horizontal scaling of movie clips that are applied starting at the movie clip registration point. The default registration point is (0,0).

_yscale//sets the vertical scaling of movie clips that are applied starting at the movie clip registration point. The default registration point is (0,0).

Use the mouse and keyboard to complete the map zoom, shrink, drag and other functions:

After the StartDrag function//performs the StartDrag () operation, the movie clip remains in a drag state.

The Stopdrag function//And StartDrag is a pair of functions that stop the current drag operation.

Basically so much, one will meet that again in detail.

Now, let's do the electronic map step-by-step:

First, we open flash to create a new movie, size set to wide: 440px High: 316. (Set according to your needs).

Second, then pour in a map you prepared, mine is a 880╳632 (so that the effect will be much better), import into the library. Then open the library, select the map dragged into the scene, converted to movie clips, registration point selected the center, so zoom in on this map of the Central Center. Named MAP_MC (The important thing under the name). Because the program wants to control the map, give him a name.

Three, well, the map clips were built, and we started to program him. First, let's zoom in and zoom out. Some are introduced with _width and _height these two properties, can also be achieved, but there is no _xscale and _yscale convenient. Because _xscale and _yscale are directly percentages of the original size. Create a new layer, select and then draw a box in the scene to convert to a button (as with a map, but select a button). Name the button fangda_btn, select this button, and open the action panel to write a diagram of the program: the same way to create a reduction and restore button.

Enlarge the program on the button:

On (Press) {//When the mouse is down execute the following program
map_mc._xscale=map_mc._xscale+10; The percentage of the map on the x-axis increased by 10.
map_mc._yscale=map_mc._yscale+10; The percentage of the map on the y-axis increases by 10.
}

To shrink a program on a button:

On (Press) {//When the mouse is down execute the following program
map_mc._xscale=map_mc._xscale-10; The percentage of maps on the x-axis is reduced by 10.
map_mc._yscale=map_mc._yscale-10; The percentage of the map on the y-axis is reduced by 10
}

To restore a program on a button:

On (Press) {//When the mouse is down execute the following program
map_mc._xscale=100; The original size of the map on the x axis
map_mc._yscale=100; The original size of the map on the Y axis
}

The program on the timeline: (because the four map dragged, no buttons, of course, other can also write to the timeline)

Map_mc.onmousedown = function () {//execute when mouse is pressed
StartDrag (MAP_MC); Mouse can drag the map
}
Map_mc.onmouseup = function () {//when mouse bounces (not on time)
Stopdrag (); Stop dragging
}

Finally, you may find that if you keep shrinking, there will be problems, and then it becomes bigger, drag can drag the map out, these are not the effect we want, we will specifically explain the problem, in this first revealed, our next section is to limit the magnification and narrowing, moving boundaries. As well as the content will be enlarged with the map to reduce automatic hiding and display problems. In addition, because I am not very proficient, if there are errors or omissions in the place also please to correct, welcome to share the discussion.

Do not know what you have seen the above feeling, perhaps to the master is too simple, but for beginners should also be OK. We step in depth to reach the real electronic map.

If you follow the previous tutorial did, you will find the problem, that is, if you have been shrinking, there will be problems, but then become larger, drag can drag the map out, these are not the effect we want. Today we solve these problems, as well as the display of information and some other content. Volume will be enlarged with the map to reduce the automatic hiding and display problems.

Okay, cut the crap, let's take a look at the main things to learn today:

Limit the enlargement and reduction of the map
Limit the boundaries of a map
Display and hide of content
Measurement of distance between two points

The main ActionScript code used (in addition to the previous section) is as follows:

_visible A Boolean value indicating whether the movie clip is visible. True to be visible false to invisible. You can also use 0.1 to indicate.

Math.floor () returns the lower-bound value of the number or expression specified by the parameter x. The lower bound value is the closest integer that is less than or equal to the specified number or expression. The value of Math.floor (12.5) is-7 for the value of Math.floor (-6.5).

Math.pow () calculates and returns the Y-power of X. Math.pow (X,y) represents the Y-secondary side of X.

MATH.SQRT () evaluates and returns the square root of the specified number. The value of MATH.SQRT (16) is 4.

LineStyle () Sets the style of the line. LineStyle (3,0xff0000,100) indicates that the line to be drawn has a thickness of 3px, the color is red, the transparency is 100, opaque.

MoveTo () moves the current painting position to (x, y). If any one of the parameters is missing, this method fails and the current painting position does not change.

LineTo () Draws a line from the current drawing position to (x, y) using the current line style, and the current painting position is then set to (x, y). If the movie clip you are drawing contains content that was created with the Flash painting tool, the call to the LineTo () method is plotted underneath the content. If LineTo () is invoked before any calls to MoveTo (), the current painting position defaults to (0, 0). If any one of the parameters is missing, this method fails and the current painting position does not change.

Createemptymovieclip () creates an empty movie clip as a child of an existing movie clip. This method behaves like the Attachmovie () method, but does not have to provide an external link identifier for a new movie clip. The newly created empty movie clip has a registration point in the upper-left corner. If any one of the parameters is missing, this method will fail.

Createtextfield () Creates a new empty text field as a child of the movie clip on which this method is raised.

Removetextfield () deletes the text field. You can only perform this action on text fields that are created with Movieclip.createtextfield (). When this method is called, the text field is deleted.

This time is basically so much, below we step-by-step to achieve today's content.

1, we want to achieve the effect is step by step to achieve data display and hiding, first we create a MAP element, named MAP_MC. Double-click inside to edit the component, and then create 4 layers. A total of 5 layers, respectively, showing the main road, government units, medium roads, units, trails.

Write their content separately on each layer. Named respectively: MAP1_MC, MAP2_MC, MAP3_MC, MAP4_MC, MAP5_MC. (as shown on the right)

2, this step we will build the function button, we put them to the left, we first to build a magnified component, first draw an enlarged icon, press F8, build a movie clip called FANGDA_MC. Double-click into the edit, as shown in the figure. (pictured below)

3. Repeat step 2nd to create SUOXIAO_MC (shrink), YUANTU_MC (Restore), TUODONG_MC (drag), CELIANG_MC (measurement).

4, zoom in, shrink, drag, restore more than the festival has been said, but with the increase in functionality, will become more and more chaotic, so we unified the code. and try to write the code to the timeline to manage and modify it. The first is to initialize the code and custom functions of the map:

Stop playing
Stop ();
Zoom in, Zoom out, undo, drag, measure control variables
var Chengxu;
Initialization function for all Left function buttons (Stop the Left function button in the first frame)
function Chushi () {
_root.fangda_mc.gotoandstop (1);
_root.suoxiao_mc.gotoandstop (1);
_root.yuantu_mc.gotoandstop (1);
_root.tuodong_mc.gotoandstop (1);
_root.celiang_mc.gotoandstop (1);
}
Initialize the map function (hide what you don't want to show first)
function Chushimap () {
_root.map_mc.map2_mc._visible = 0;
_root.map_mc.map3_mc._visible = 0;
_root.map_mc.map4_mc._visible = 0;
_root.map_mc.map5_mc._visible = 0;
}
Perform the initialization map function (hide what you don't want to show first)
Chushimap ();
Initialize function prompt function
function Gongnengtishi () {
_root.fangda_mc.fangda1._visible = 0;
_root.suoxiao_mc.suoxiao1._visible = 0;
_root.yuantu_mc.yuantu1._visible = 0;
_root.tuodong_mc.tuodong1._visible = 0;
_root.celiang_mc.celiang1._visible = 0;
}
Perform initialization function prompt function (hide hint)
Gongnengtishi ();
Map area restriction function (Restricted map off screen)
function Xianzhi () {
_root.onenterframe = function () {
if (map_mc._x>320*map_mc._xscale/200) {map_mc._x=320*map_mc._xscale/200}
if (map_mc._x<320-320*map_mc._xscale/200) {map_mc._x=320-320*map_mc._xscale/200}
if (map_mc._y>240*map_mc._yscale/200) {map_mc._y=240*map_mc._yscale/200}
if (map_mc._y<240-240*map_mc._yscale/200) {map_mc._y=240-240*map_mc._yscale/200}
}
}
Display and hide functions for information (zoom in and out to hide)
function Xianshi () {
var dx = _root.map_mc._xscale;
if (DX >= 120) {
_root.map_mc.map2_mc._visible = 1;
if (DX >= 140) {
_root.map_mc.map3_mc._visible = 1;
if (DX >= 160) {
_root.map_mc.map4_mc._visible = 1;
if (DX >= 180) {
_root.map_mc.map5_mc._visible = 1;
}else{
_root.map_mc.map5_mc._visible = 0;
}
}else{
_root.map_mc.map4_mc._visible = 0;
_root.map_mc.map5_mc._visible = 0;
}
}else{
_root.map_mc.map3_mc._visible = 0;
_root.map_mc.map4_mc._visible = 0;
_root.map_mc.map5_mc._visible = 0;
}
}else{chushimap ();}
}
measurement function
function Celiang () {
var sx, Sy;
_root.map_mc.cl_mc.clear ();
_root.map_mc.cl_mc.cl_txt.removetextfield ();
SX = _root.map_mc._xmouse;
sy = _root.map_mc._ymouse;
Draw = true;
OnMouseMove = function () {
if (draw) {
_root.map_mc.createemptymovieclip ("CL_MC", 1);
_root.map_mc.cl_mc.linestyle (1, 0x009900, 80);
_root.map_mc.cl_mc.moveto (SX, SY);
_root.map_mc.cl_mc.lineto (_root.map_mc.cl_mc._xmouse, _root.map_mc.cl_mc._ymouse);
TTT = Math.floor (Math.sqrt (Math.pow (_root.map_mc.cl_mc._width, 2) +math.pow (_root.map_mc.cl_mc._height, 2));
_root.map_mc.cl_mc.createtextfield ("Cl_txt", 1, _root.map_mc.cl_mc._xmouse, _root.map_mc.cl_mc._ymouse-22, 100, 22) ;
_root.map_mc.cl_mc.cl_txt.text = TTT + "M";
}
};
OnMouseUp = function () {
Draw = false;
}
};

5, the MAP_MC function code is as follows (all functions of MAP_MC):

_root.map_mc.onpress = function () {
if (Chengxu = = "Fangda") {
if (_root.map_mc._xscale < 200) {
_root.map_mc._xscale + 10;
_root.map_mc._yscale + 10;
Xianshi ();
}
}
else if (Chengxu = = "Suoxiao") {
if (_root.map_mc._xscale > 100) {
_root.map_mc._xscale-= 10;
_root.map_mc._yscale-= 10;
Xianshi ();
}
}
else if (Chengxu = = "Yuantu") {
_root.map_mc._xscale = 100;
_root.map_mc._yscale = 100;
_root.map_mc._x = 160;
_root.map_mc._y = 120;
Chushimap ();
}
else if (Chengxu = = "Tuodong") {
StartDrag (_root.map_mc,false);
Xianzhi ();
}
else if (Chengxu = = "Celiang") {
Celiang ();
}
}
_root.map_mc.onrelease = function () {
Stopdrag ();
}

6, Left Function button function code is the function hint code:

Left function code
fangda_mc.onpress = function () {
Chushi ();
_root.fangda_mc.gotoandstop (2);
Chengxu = "Fangda";
}
suoxiao_mc.onpress = function () {
Chushi ();
_root.suoxiao_mc.gotoandstop (2);
Chengxu = "Suoxiao";
}
yuantu_mc.onpress = function () {
Chushi ();
_root.yuantu_mc.gotoandstop (2);
Chengxu = "Yuantu";
}
tuodong_mc.onpress = function () {
Chushi ();
_root.tuodong_mc.gotoandstop (2);
Chengxu = "Tuodong";
}
celiang_mc.onpress = function () {
Chushi ();
_root.celiang_mc.gotoandstop (2);
Chengxu = "Celiang";
}
Left feature hint code
Fangda_mc.onrollover = function () {
_root.fangda_mc.fangda1._visible = 1;
}
Suoxiao_mc.onrollover = function () {
_root.suoxiao_mc.suoxiao1._visible = 1;
}
Yuantu_mc.onrollover = function () {
_root.yuantu_mc.yuantu1._visible = 1;
}
Tuodong_mc.onrollover = function () {
_root.tuodong_mc.tuodong1._visible = 1;
}
Celiang_mc.onrollover = function () {
_root.celiang_mc.celiang1._visible = 1;
}
Fangda_mc.onrollout = function () {
_root.fangda_mc.fangda1._visible = 0;
}
Suoxiao_mc.onrollout = function () {
_root.suoxiao_mc.suoxiao1._visible = 0;
}
Yuantu_mc.onrollout = function () {
_root.yuantu_mc.yuantu1._visible = 0;
}
Tuodong_mc.onrollout = function () {
_root.tuodong_mc.tuodong1._visible = 0;
}
Celiang_mc.onrollout = function () {
_root.celiang_mc.celiang1._visible = 0;
}

So far, we have realized the function of the most basic local graph, but it can't be applied in practice. We know that the amount of data on the map is very large, we can not all write in Flash. So we need to write all the data into the database, dynamically from the database you want to see or find content. This is the content of our next class.

The above is the main content to learn today, of course, the code is not optimized, in order to see more direct. Just use the most basic code to achieve the basic functionality. Of course there are mistakes or omissions, and please give correct corrections. We welcome you to share the discussion.