Go To Different Spots
| Category | : Flash | Views | : 12749 | ||
| Version | : 8 | Rating | : | ||
| Type | : Text | Source File | : go-to-different-spots.zip | ||
| Result | : See the result | ||||
In this tutorial we are going to animate a world map, when you press a continent button the map will move until it shows the continent. We have seen this animated dynamic movement used in many flash web sites to create a sense of huge space. Beside that, this dynamic movement with Actionscript will also give you different feel of website's navigation. So, rather than changing pages when visitors click on the menu, a flash web site will move towards the area that contains the information requested by visitors. You can use this dynamic movement in your web sites to create the same effect.
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.
 |
 |
 |
 |
 |