Flash as practical map enlargement and information display practices

Practical map enlargement and information display practices

Many friends ask how to use flash to create a large map on a limited page for work or hobbies, and link and display information about the location, to this end, I have simplified and modified a flash map that records the travel location, the key practices are described as follows (the original text including the displayed information and travel photos are nearly 10 MB, which is too big to be uploaded ).

See the lower part of the file (I haven't posted a post for a long time. I don't know how to issue the swf file, so I can easily understand the examination screen)

 

Source File: Geographic Map ..rar


Features:
Zoom out the map to adapt to the limitations of the page size. Use a magnifier to zoom out the map so that you can clearly see the required details.Use the AS to correct the defects of the ordinary mask to make a magnifier, and the enlarged part is not misplaced in the center of the lens (red cross.Use the AS button to control the display of required information (in the work, move the cursor to the Red Cross in the center of the magnifier ).

Because the size of the map window is proportional to the length and width of the selected map, if the page is appropriate, you can also display the information on the right or bottom of the map window. I made a map to record the travel location, text information is displayed on the right side, and a scroll bar is added to the component. The MC component is used for the photo, and the position is in the map window. It is played cyclically, so that the displayed information can be very large.Figure 1 (another practice of displaying information)

This work is only used as a signal. 1. Friends from all over the world should never make bricks on geographical issues. 2. Some cities that are too close to each other are lazy and do not set the information display link (the solution is to narrow down the response area of the button ). 3. For easy upload, the map is only doubled, and the image quality is also selected very low. 4. Similarly, only one image is shown in Beijing at the same time.
Practice introduction:
1. The screen of each layer is shown in figure 2. The layers are further divided to make it easier to see.
The size of the stage (or map window) must be proportional to the length and width of the selected map (to make it easier for the full stage to be displayed without deformation). The stage I use is 400*330, the map size is 800*660 (the two dimensions are used in the following frame action), which is only doubled. You can determine the magnification by yourself. You only need to change the corresponding data in the frame action AS in step 7.

Tip: If the map window is smaller than the stage, the coordinates of the map window should be (0, 0 ). Figure 2:

2. Create a movie editing component (MC) "map component" and import the selected map image. The X and Y coordinates of the image are all 0, that is, the top left corner of the component interface +.The simple method is to select the image, open the attribute panel, change X and Y to 0, and then press Enter to confirm.

3. Drag the prepared MC into the scene "thumbnail" layer and set the MC coordinate to (0, 0) in the scene attribute. The width and height values are the same as those on the stage, then press Enter to confirm.

4. Drag the prepared MC into the "big picture" layer of the scenario, set the coordinates of MC in the scenario to (0, 0), and select MC in the "big picture" layer, name the attribute aa,

5. Make a magnifier
Create a MC component "Magnifier component", draw a circle, and center the left and right sides of the circle.You can cut and paste the color block and border of the circle into two layers.Convert the color block in the lens layer to the MC component "lens element ". Select the lens MC in the magnifier component and name it ee in the attributes.A color block is used as a mask. It cannot be seen in the swf file, but the screen in the hidden "big Image" layer can be seen in the colored part, so the color is arbitrary.The frame is visible in the swf file, and the color and style are customized.Add another layer and put it in the cross line. It can be seen in the swf file like the frame. Use the "extremely fine" line.

Tip: If a scale is required during work, you can also set the cross line to a scale. The calculation method is as follows:
The distance indicated by each grid = the actual distance between two points on the map corresponding to each grid * pixel per grid/pixel of the distance on the map.
The actual operation can determine the pixel value between two points of the horizontal (or vertical) known distance on the map, and calculate the number of kilometers of one pixel on the map, then, determine the number of pixels per cell on the lens and calibrate the scale.

6. Drag the "Magnifier component" MC into the scene magnifier layer. Select the magnifier MC and name it ff.

7.
Review, the three MC names have been named respectively, and the names should be consistent with those in the following.
In the scenario, map MC is named aa,
In the scenario, the magnifier MC is named ff.
In the magnifier element, the magnifier lens MC is named ee,

Select a frame on the AS layer and write the following frame action:

_ Root. onEnterFrame = function (){
Mouse. hide (); // hide the Mouse
StartDrag ("_ root. ff", true); // controls the telescope ff to move with the mouse
_ Root. aa. setMask (_ root. ff. ee) // mask aa with ee in ff
_ Root. aa. _ x = _ root. _ xmouse * (1-80/40); // use the mouse coordinates to control the x coordinates of the large image to follow
_ Root. aa. _ y = _ root. _ ymouse * (1-66/33); // use the mouse coordinates to control y coordinates of the large screen to follow
}

Because there are two types of images visible and invisible in the magnifier, use the AS script to control the mask,
_ Root. aa. setMask (_ root. ff. ee)
That is, use the ee in ff to mask aa. The MC in the brackets is masked, and the MC in the front is masked.

Use mouse coordinates to control large Image follow
_ Root. aa. _ x = _ root. _ xmouse * (1-800/400); // use the mouse coordinates to control the x coordinates of the large image to follow
_ Root. aa. _ y = _ root. _ ymouse * (1-660/330); // use the mouse coordinates to control y coordinates of the large screen to follow

According to my calculation, to keep the coordinates unchanged, the x coordinate of the aa image to be enlarged should be: (1-magnification) multiplied by the x coordinate value of the mouse (likewise, y coordinate is calculated as well ),The current screen magnification is 800/400, so
_ Root. aa. _ x = _ root. _ xmouse * (1-800/400 );
800 is the map width of the work, and 400 is the width of the flash stage (you can divide it by minute, even if it is too time consuming). You must change the size of the map and the actual pixel size of the flash.
Similarly, _ root. _ ymouse * (1-660/330.

8. Add a button to map components,Add a layer button to map components. Select each button and write it.Take "Beijing" AS an example. The AS is AS follows:

On (rolover ){

_ Root. gotoAndStop (2 );
}
On (rolout ){

_ Root. gotoAndStop (1 );
}

Because the buttons are set in the MC map element, they are the action of the control scenario, so _ root .,When on (rolover) is used, the required information will be produced on the frame where gotoAndStop is located. In this work, the information in Beijing is made in 2nd frames. Therefore, gotoAndStop (2) has produced information in 31 cities.On (rolout) returns to 1st frames.

Friendly reminder;
Move the cursor to a specific point (for example, the red circle flashing in this example) according to the above method to control the movement of the map ), in fact, it can only be in a specific position in flash. Therefore, if you want to avoid this location, you can arrange the location, size, and quantity of the information to be displayed at will. In this example, only one Lhasa information is blocked and placed on the right.

If the page is appropriate, you can also display text and image information on the right or below of the map window, but to display it on the left or top, the calculation of map coordinates will be much more complicated, no.

Its