First draw a rectangle on the stage to use as a mask. It should have the same size of the stage.
Then get any world map from the internet and put it on a new Movie Clip; drag it to the stage on a new layer below the mask and give the instance name of "Map".
Create buttons for each continent:
- North America � Instance Name = "NA"
- South America � "SA"
- Africa � "Af"
- Europe � "Eu"
- Asia � "As"
- Oceania � "Oc"
Now get the position of the Movie Clip needed to show the continents.
For example, to show the North America the Map needs to be _x = 649 and _y = 357.
These are the Movie Clip positions I got for each continent on MY map:
- North America = 640, 357
- South America = 555, 73
- Africa = 230, 175
- Europe = 222, 395
- Asia = 12, 301
- Oceania = -182, 25
And this is the code to move the map:
//the speed the map will move var speed = 5; //the destination on the x coordinate, just change this and it will move var destX = 0; // destination on the y coordinate var destY = 0; this.onEnterFrame = function() { //difference between the x of the map and the destination var dY = map._y - destY; //difference for the y coordinate var dX = map._x - destX; //distance between the points considering the _x and _y var d = Math.sqrt(dY * dY + dX * dX); //if the distance is bigger than 10 pixel, we can move if ((d > 10) || (d < -10)) { //calculate tangent to calculate angle var tga = (map._y - destY) / (map._x - destX); //calculate angle var ang = (Math.atan(tga) * 180) / Math.PI; //if the destination is to the right if (map._x >= destX) { //calculate the vector for the _x and move map._x -= speed * Math.cos((ang) * Math.PI / 180); //vector for _y and move map._y -= speed * Math.sin((ang) * Math.PI / 180); } //if destination is to the left else if (map._x <= destX) { //calculate vector and move. map._x += speed * Math.cos((ang) * Math.PI / 180); map._y += speed * Math.sin((ang) * Math.PI / 180); } } }
All you need to do now is make the events for the buttons and inside set the destX and destY.
Here is the code for the all buttons:
NA.onRelease = function() { _root.destX = 650 _root.destY = 350 } SA.onRelease = function() { _root.destX = 555 _root.destY = 73 } Af.onRelease = function() { _root.destX = 230 _root.destY = 175 } Eu.onRelease = function() { _root.destX = 222 _root.destY = 395 } As.onRelease = function() { _root.destX = 12; _root.destY = 301; } Oc.onRelease = function() { _root.destX = -182; _root.destY = 25; }
Test it now (Ctrl + Enter). Everything should go ok.
Code Explanation
var speed = 5; var destX = 0; var destY = 0;
The first variable is the speed that we will move the map; the second and the third are the scrolling coordinates.this.onEnterFrame = function() { var dY = map._y - destY; var dX = map._x - destX;
These two variable are the difference between the current position of the map and the destination.//distance between the points considering the _x and _y var d = Math.sqrt(dY * dY + dX * dX);
This variable calculates de distance between the two coordinates using the Pythagorean Theorem:
The square roots function we used:
Math.sqrt(number);
if ((d > 10) || (d < -10)) {
If the distance between the current position and the destination is bigger than 10 px.var tga = (map._y - destY) / (map._x - destX);
Here we calculate the tangent to get the angle we need to move.var ang = (Math.atan(tga) * 180) / Math.PI;
Using the function Math.atan(tangent) we get the radians, but we need the angle so we multiply the radians with 180/Pi.if (map._x >= destX) {
If the destination coordinate of the map is to the right.map._x -= speed * Math.cos((ang) * Math.PI / 180); map._y -= speed * Math.sin((ang) * Math.PI / 180);
Move the map in both coordinates using vector math for the amount of pixels in _x and _y.} else if (map._x <= destX) {
If the destination coordinate of the map is to the left.map._x += speed * Math.cos((ang) * Math.PI / 180); map._y += speed * Math.sin((ang) * Math.PI / 180);
Move the map.} NA.onRelease = function() {
Event handler for this button release_root.destX = 650 _root.destY = 350
Set a new coordinate for the destination and that makes the Map scroll.The only thing that changes on other button is the coordinates
discuss this topic to forum
