Flash教程：AS打造鼠标控制转动地球仪

【 tulaoshi.com - Flash 】

本文由中国 sanbos 原创，转载请保留此信息！

效果演示：

Flash教程：（后面附图文教程，以方便复制AS代码）

[next]

素材：

首先，准备图片，需要一张世界全图，可以上网去找。（后面我会提供一张），网上的世界全图一般来说，四个角是弧形的，因为我们要拼接，所以必须将图处理成长方形。这个可以用PS来作。如果要用我提供的那张图，最好用PS将图片中间那根缝处理一下。如果图片太大，可以将图片适当缩小，但要以能看清地图上的文字为限。处理后的图片应该是这样的：

好了，图片有了，现在我们进入flash:

打开flash,将准备好的地图图片导入到库中。将场景中第一层命名为：地图，从库中将地图图片拖到舞台上，点击修改-转换为元件，命名为地图，行为选择影片剪辑。回到场景，打开属性面板，将实例命名为dt_mc。图片的位置并不重要，实际上它的尺寸要比舞台大得多，只要覆盖了舞台就行。大小我们先不管它，先点击控制-测试影片，看一下，地图上的文字能否看清楚。如果你觉得图片太大，可以用自由变形工具调整，原则仍然是运行后能看清地图上的文字。图片调整好以后，按ctrl+D两次，复制两份，将三张图在水平方向拼接，位置仍然不重要，能覆盖舞台就行。如下图：

新建一图层，命名为遮照，选择椭园工具，笔触为黑色，宽度为8，填充色随意，在舞台右侧画一椭园，这个椭园就是运行后的地球仪，所以形状和大小你就知道该怎样画了。要注意在舞台上为支架留下空间。如下图：

用选择工具点选椭园的黑边，然后点击修改-转换为元件，命名为：阴影，行为选择影片剪辑，保存。回到场景，删除黑边。在遮照层时间轴上点右键-遮照层。现在请准备一张纸和笔，让我们来记录一些数字，在下面的AS中，我们将用到它们。现在将地图层解锁，用选择工具，移动地图，使地图中中间的北京位于遮照的中心，位置差不多就行了，记录下：a = 地图的X，如图：

向右移动地图，使地图中左边的北京位于遮照的中心，不一定精确定位于上一个北京的位置，差不多就行了，下同。记录下：b =地图的X；

[next]

向左移动地图，使地图中右边的北京位于遮照中心，记录下：c=地图的X；

向下移动地图使地图的上边与遮照的上边对齐，记录下：d = 地图的Y； 

向上移动地图使地图的下边与遮照的下边对齐，记录下：e=地图的Y；

现在画一条直线，使之与遮照的左边垂直对齐，记录下：f=直线的X，实际就是遮照的左边的X， 

然后将直线移到遮照的右边对齐，记录下：g = 直线的X，
删除直线；再画一条直线，使之与遮照的顶边对齐，记录下：h= 直线的Y； 

[next]

将直线与遮照的下边对齐，记录下：i = 直线的Y。删除直线。
这一步有点麻烦哈，不过这些数字的确很重要。
双击库中的阴影元件，进入阴影编辑区，选中阴景椭园环，将透明度设为20%.进入主舞台，在遮照层上新建一图层，命名为阴影，从库中将阴影元件拖到舞台上，打开属性窗口，选择滤镜-模糊，值大约10左右。用自由变形工具，调整椭园环大小，使之与遮照一样大，并与遮照重叠。

新建图形元件，命名为支架，然后画一个支架吧，不要跟我学，我不会画画，我那个支架画得很差，相信你一定可以画出一个很好看的支架的。然后在主场景中新建一图层，命名为支架，将支架元件从库中拖出，按位置放好。
再新建一个图层，命名为边框，内容麻，随意弄啰。
再建最后一个图层，命名为action，点击该层第一帧，然后打开动作面板，AS3(FLASH cs3)请复制下列代码，AS2（flash8,mx）复制后面的。：
import flash.events.MouseEvent;
import flash.display.DisplayObject;
function back () {  //形成水平移动的循环，使上下边界不出界。
        if (dt_mc.x = 1025) { //此处1025用你记录的b的值替换
        dt_mc.x = -114;  //此处 -114用你记录的a的值替换
} else if (dt_mc.x <= -1251) {  //此处 -1251用你记录的c的值替换
        dt_mc.x = -114; //此处 -114用你记录的a的值替换
}
if (dt_mc.y = 44) {  //此处44用你记录的d的值替换
        dt_mc.y = 44; //此处44用你记录的d的值替换
} else if (dt_mc.y <= -346) { //此处 -346用你记录的e的值替换
        dt_mc.y = -346; //此处 -346用你记录的e的值替换
}
}
function yd (event:MouseEvent):void {
        dt_mc.startDrag();
}
function stopyd (event:MouseEvent):void {
dt_mc.stopDrag();
back;
}
function mov (event:MouseEvent):void { //将鼠标拖动限定在地球仪的范围内。
        back;
if (mouseY = 346) { //此处346用你记录的i的值替换
        dt_mc.stopDrag();
} else if (mouseY <= 50) { //此处50用你记录的h的值替换
        dt_mc.stopDrag();
}
if (mouseX <= 186) { //此处186用你记录的f的值替换
        dt_mc.stopDrag();
} else if (mouseX = 490) {此处490用你记录的g的值替换
        dt_mc.stopDrag();
}
}

dt_mc.addEventListener (MouseEvent.MOUSE_DOWN,yd); 
dt_mc.addEventListener (MouseEvent.MOUSE_UP,stopyd); 
stage.addEventListener (MouseEvent.MOUSE_MOVE,mov);
AS2（flash8,mx）请复制下列代码：
function back () {
        if (_root.dt_mc._x = 988) { //b
        _root.dt_mc._x = -131; //a
} else if (_root.dt_mc._x <= -1109) { //c
        _root.dt_mc._x = -131; //a
}
if (_root.dt_mc._y = 40) {  //d
        _root.dt_mc._y = 40;  //d
} else if (_root.dt_mc._y <= -346) { //e
        _root.dt_mc._y = -339;  //e
}
}
dt_mc.onPress = function () {
        this.startDrag();
        
}
dt_mc.onRelease  = function () {
        
        back();
this.stopDrag();

}
dt_mc.onMouseMove = function () {
        back();

}
按注释替换数字。
最后一步，测试，祝你成功！

与本文相关讨论请去这里与作者交流：http://bbs.jcwcn.com/thread-128453-1-1.html