Flash interactive electronic Map production manual--an example of getting Started

At present, many electronic maps have sprung up on the internet, which are easy to operate, and have the powerful functions of data query, distance measurement and even precise positioning.
Most of the existing electronic maps are developed in Java, powerful and easy to operate. More typical is Mapbar (mapbar.com) and MAPABC (mapabc.com), Turing (lingtu.com).
In addition, some of the electronic maps made of flash, such as the grid Shenzhen (wanggesz.com), Jiujiang electronic map (jjmap.cn), Jiangmen (Wuyi) map (5emap.com), Hengyang electronic map (hyemap.com) and so on.

Compared with Flash, Java has obvious advantages, and it is the main direction of electronic map technology. However, a client using a Java map must have a Java virtual machine installed, and the Java electronic map cannot be used immediately for computer users who do not have the relevant plug-ins installed.

But for amateur enthusiasts, Flash is easier to master than Java. Especially for the mapping of real estate, community or small city, and there is not much too strong functional requirements, the use of flash production is enough.
For flash electronic maps, almost all PCs have the Flash Player plugin installed and can be used as long as the browser is open. So for amateur enthusiasts, whether to use or learn to make flash electronic map more realistic. As long as mastered the basic knowledge of a certain flash ActionScript, you can make their own satisfactory interactive electronic map through learning system.
　　
This series of topics will be a step-by-step introduction to the use of Macromedia Flash Professional production of flash electronic map knowledge for everyone to exchange learning.
Today we start from the simplest electronic map , we make a map of a region as an example step-by-step to explain the production process. The finished effect is as follows.

The simplest flash electronic map
Click on the left five function buttons to get the corresponding function
Distance measurement with the mouse in the map need to distance from the starting point click Hold and drag to the end of the release can be

　　First, determine the map function

　　First of all, we have to determine the functionality that this electronic drawing needs to implement. Generally speaking, the most commonly used function is only the scale of the map, mobile, by name query and measurement distance. Here we only choose the simpler "zoom", "shrink", "move", "reset" and "range".

　　Second, the production map of the bottom

Map of the bottom of the picture can be produced by a lot of graphics and image processing software, of course, can also use flash production, here do not do a detailed explanation.
Open the Macromedia Flash Professional, and import the map image as the base image. (This example uses a bottom chart made with Flash Professional.) ）

　　Third , make the function button

Create a new layer, named "button," which creates "zoom in," "Zoom Out", "move", "reset" and "range" 5 buttons in sequence. As shown in the following figure.

Figure 1 Creating Basic function buttons

　　Assign the As function code for the button

Go to the Actions panel and match the following ActionScript function control code for each button.

　　1, "enlarge" the ActionScript code as follows:

On (release) {///When Mouse is released perform the following actions Map_mc._xscale *= 1.2; The X-axis coordinates of the map magnify 20%. Map_mc._yscale *= 1.2; The Y-coordinate of the map magnifies 20%. }

Note: The _xscalet and _yscale are the level and vertical scaling (percentage) of the movie clips that are determined to be applied from the movie clip registration point. The default registration point is (0,0). Adjusting the values of these two properties at the same time can be used to change the size of the map.

Of course, we can also use the following ActionScript code:

On (release) {///When Mouse is released perform the following actions Map_mc._width *= 1.2; The width of the map is magnified by 20% Map_mc._height *= 1.2; The height of the map is magnified by 20% }

Note: The width and height of the _width and _height movie clips in pixels.

　　2. The ActionScript code for the "shrink" button is as follows:

On (release) {///When Mouse is released perform the following actions Map_mc._xscale *= 0.8; The X-axis coordinates of the map are reduced by 20%. Map_mc._yscale *= 0.8; The Y-coordinate of the map shrinks by 20%. }

Or:

On (release) {///When Mouse is released perform the following actions Map_mc._width *= 0.8; Reduce the width of the map by 20% Map_mc._height *= 0.8; The height of the map is reduced by 20% }

　　 3, "move" the ActionScript code is as follows:

On (release) {///When Mouse is released perform the following actions Move (); Call the Move () function } function Move () {//define move () functions Map_mc.onmousedown = function () {//When the left mouse button is pressed StartDrag (MAP_MC); Start dragging the map MAP_MC } Map_mc.onmouseup = function () {//When the left mouse button is released Stopdrag (); Stop dragging the map MAP_MC } The definition of the//End Move () function

Note: The global function StartDrag called here enables a movie clip to be dragged during movie playback. You can drag only one movie clip at a time. After you perform the StartDrag () operation, the movie clip remains in a drag state until you explicitly stop dragging with Stopdrag (), or until you call the StartDrag () action on another movie clip.

　　 4. The function of "reset" button is to restore the map to the initial state when the file is opened, and its ActionScript code is as follows:

On (release) {///When Mouse is released perform the following actions Map_mc._xscale = 100; Restore the x-axis scaling ratio of the map MAP_MC to its original size Map_mc._yscale = 100; Restore the y-axis scaling ratio of the map MAP_MC to its original size map_mc._x = 200; Restores the map MAP_MC's registration point x coordinates to the center point Map_mc._y = 150; Restore the registration point y-coordinate of the map MAP_MC to the center point }

Note: Scaling the local coordinate system will affect the _x and _y property settings, which are defined in whole pixels.

　　 5. The function of "ranging" button is to measure the distance between two points on the map, and its ActionScript code is as follows:

On (release) {///When Mouse is released perform the following actions Measure (); Call measure () Range function } function measure () {//define measure () functions This.createemptymovieclip ("Canvas_mc", this.getnexthighestdepth ()); Create a movie clip named "CANVAS_MC" var mouselistener:object = new Object ();//Create a MouseListener listener objects Mouselistener.onmousedown = function () {//When the left mouse button is pressed This.isdrawing = true; Start drawing lines this.orig_x = _xmouse; Record the x coordinate of the mouse pointer at this point this.orig_y = _ymouse; Record the y-coordinate of the mouse pointer at this point THIS.TARGET_MC = Canvas_mc.createemptymovieclip ("", Canvas_mc.getnexthighestdepth ()); } Mouselistener.onmousemove = function () {//when mouse is moving if (this.isdrawing) {//When the line starts to draw This.target_mc.clear (); Clear the last line you drew This.target_mc.lineStyle (1, 0xff0000, 100); Set the style of the line This.target_mc.moveTo (this.orig_x, this.orig_y); Set the starting point for the line you are drawing This.target_mc.lineTo (_xmouse, _ymouse); Set the end of the line you are drawing } Updateafterevent (); } Mouselistener.onmouseup = function () {//When the left mouse button is released line_width=_xmouse-this.orig_x; The distance between the end of the line and the x-axis coordinates of the origin line_height=_ymouse-this.orig_y; The distance between the end of the drawing line and the y-axis coordinate of the origin This.isdrawing = false; Stop drawing lines var l:number = math.sqrt (Math.pow (Line_width, 2) +math.pow (Line_height, 2)) *2500/map_mc._xscale; Calculate the length of the line and convert it to the actual length Line_mc.createtextfield ("Length" +nextdepth+ "_txt", Canvas_mc.getnexthighestdepth (), (this.orig_x+_xmouse)/2-10, This.orig_y+_ymouse)/2-20, 1, 1); Create a text box to display the measured length results line_mc[' length ' +nextdepth+ ' _txt '].text = Math.Round (l); Show measurement Results } }; Mouse.addlistener (MouseListener); }

　　 Note: The Createemptymovieclip method is to create an empty movie clip as a child of an existing movie clip;
The Math.sqrt method computes and returns the square root of the specified number.
The Math.Round method is to round the value of the parameter up or down to the nearest integer and return the value.
The Math.pow (X:number, Y:number) method computes and returns the Y-power of X.
Through the above 3 methods, using the triangular Pythagorean theorem to convert the length of measurement.

　　V. Marking of place Names

Add the place name annotation to form a most basic electronic map frame, the effect is as follows.

Figure 2 The simplest flash electronic map
Click on the left five function buttons to get the corresponding function
Distance measurement with the mouse in the map need to distance from the starting point click Hold and drag to the end of the release can be

If it's just a map of a neighborhood or a small city, for example, Jiujiang electronic map, directly in the new layer on the label name can be, but if it is to make similar grid Shenzhen, China electronic Map Network and other large cities map, its annotated content is too much, and need to update constantly, it is not suitable for in flash annotation, Instead, call the external database to complete.

In the next lecture, we will describe how to implement a massive tagging and background management method by loading an external XML file .