AS打造鼠标控制转动地球仪

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

　　图1

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

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

　　图2

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

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

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

　　图5

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

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

　　图7

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

　　图8

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

　　图9　　然后将直线移到遮照的右边对齐，记录下：g = 直线的X，

　　删除直线；再画一条直线，使之与遮照的顶边对齐，记录下：h= 直线的Y；

　　图10

　　将直线与遮照的下边对齐，记录下：i = 直线的Y。删除直线。

　　这一步有点麻烦哈，不过这些数字的确很重要。

　　双击库中的阴影元件，进入阴影编辑区，选中阴景椭园环，将透明度设为20%.进入主舞台，在遮照层上新建一图层，命名为“阴影”，从库中将阴影元件拖到舞台上，打开属性窗口，选择“滤镜”-“模糊”，值大约10左右。用自由变形工具，调整椭园环大小，使之与遮照一样大，并与遮照重叠。

　　图11

　　新建图形元件，命名为“支架”，然后画一个支架吧，不要跟我学，我不会画画，我那个支架画得很差，相信你一定可以画出一个很好看的支架的。然后在主场景中新建一图层，命名为“支架”，将支架元件从库中拖出，按位置放好。

　　再新建一个图层，命名为“边框”，内容麻，随意弄啰。

　　再建最后一个图层，命名为“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();

　　

　　}

　　按注释替换数字。

　　最后一步，测试，祝你成功！
本教程由中国教程网提供