独自行走的天空

　　因工作需要，需要在地图上演示各种路线效果，在PPT中只能借助看图软件来实现，并且不具备交互的效果，因此考虑用自己熟悉的Flash来实现。

　　实际演示中，最主要的功能有三个，一是图片的拖拽，另两个是图片的放大与缩小。此外一个功能是选择与显示指定的路线，用下拉列表框来实现的，本文中就不多说了。

　　图片的拖拽依旧是对鼠标的点击、移动、抬起进行侦听，编写相关代码。但是在具体处理的时候，考虑到图片元件包含有很多的点击操作内容，容易与拖拽操作发生冲突，因此，在图片容器上方建立一个与屏幕显示范围大小一致的“触摸屏”(touchScreen)，不想拖拽的时候，就让触摸屏隐藏起来(tScreen.visibl = false;)，需要拖拽的时候，让它显示但是透明度等于零(tScreen.visibl = true;tScreen.alpha = 0;)，这样，不影响外部的观感，编程也得到了简化。

　　图片的放大与缩小是通过指定缩放比(image_mc.scaleX,image_mc.scaleY)来实现，如果组合slider组件，还可以实现平滑缩放的效果，但是实际演示中，通过指定缩放比，点击按钮操作会相对简洁一些，因此在实现的时候，用的是固定的缩放比等级。在完成了上一次的演示任务之后，过节期间考虑了一下用tween类来实现图片在不同缩放比之间的过渡效果，现在已经完成。

完成的代码如下：

import flash.geom.Point;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

//   elements on the stage.舞台上的所有元件。
//min_btn
//max_btn
//image_mc

fscommand("fullscreen","true");//  与较早前版本AS2.0有所不同，两个参数都是字符串型数据。

//trace(stage.stageWidth);
////locate in the center of stage// 将图片缩放到与舞台同宽，并居中摆放。
var scaleTemp = stage.stageWidth / image_mc.width;
//trace( scaleTemp );
image_mc.scaleX = image_mc.scaleY = scaleTemp;
image_mc.x = 0;
image_mc.y = stage.stageHeight / 2 - image_mc.height / 2;
//
//// initial parameters
tScreen_mc.visible = true;
tScreen_mc.alpha = 0;
//
////define touch screen actions 对触摸屏进行事件侦听。

tScreen_mc.lastX = tScreen_mc.lastY = 0;//用来记录每次移动前鼠标在触摸屏上的位置，每当移动发生时，就让图片按照移动的距离相应移动，从而实现“触摸移动”的效果，并不是直接对图片进行移动。
tScreen_mc.moving = false;

tScreen_mc.addEventListener(MouseEvent.MOUSE_DOWN, mdOnImage);
tScreen_mc.addEventListener(MouseEvent.MOUSE_MOVE,mmOnImage);
tScreen_mc.addEventListener(MouseEvent.MOUSE_UP,muOnImage);

//初次点击，记录下图片缩放的中心点的位置，并指定一个移动的参数。

function mdOnImage(evt) {
 tScreen_mc.lastX = stage.mouseX;
 tScreen_mc.lastY = stage.mouseY;
 //trace( tScreen_mc.lastX ,tScreen_mc.lastY);
 tScreen_mc.moving = true;
}

//在鼠标移动过程中，仅当鼠标保持按下状态时，可以移动图片。

function mmOnImage(evt) {
 if (evt.target.moving == true) {
  var moveX = stage.mouseX - tScreen_mc.lastX;
  var moveY = stage.mouseY - tScreen_mc.lastY;

  image_mc.x += moveX;
  image_mc.y+=moveY;
  image_mc.locPt=image_mc.globalToLocal(new Point(stage.stageWidth/2,stage.stageHeight/2));

  tScreen_mc.lastX=stage.mouseX;
  tScreen_mc.lastY=stage.mouseY;

  evt.updateAfterEvent();
 }
}

//鼠标抬起时，将表示状态的参数设成false。

function muOnImage(evt) {
 tScreen_mc.moving=false;
}

//image_mc.locPt 用来记录与舞台中心对应的图片中的位置，当图片缩放之后，再换算回来，与舞台中心相减，得到中心点偏移的数据，按照这个数据进行图片的偏移，就可以保证放大与缩小始终是以舞台中心为基准的。
 

image_mc.locPt=image_mc.globalToLocal(new Point(stage.stageWidth/2,stage.stageHeight/2));

max_btn.addEventListener(MouseEvent.CLICK,onExpandImage);//放大按钮
function onExpandImage(evt) {
 if (image_mc.scaleX<2.50) {
  var myTween:Tween=new Tween(image_mc,"scaleX",Regular.easeOut,image_mc.scaleX,image_mc.scaleX+0.1,0.5,true);
  myTween.addEventListener(TweenEvent.MOTION_CHANGE,freshImage);
 }
}
min_btn.addEventListener(MouseEvent.CLICK,onShrinkImage);//缩小按钮
function onShrinkImage(evt) {
 if (image_mc.scaleX>0.20) {
  var myTween:Tween=new Tween(image_mc,"scaleX",Regular.easeOut,image_mc.scaleX,image_mc.scaleX-0.1,0.5,true);
  myTween.addEventListener(TweenEvent.MOTION_CHANGE,freshImage);
 }
}

//缓动函数的使用，实际上就是将原来一次性完成的内容，分成若干步骤来实现，下面的函数是移动的核心代码，上面两个函数只是将缓动的范围进行了界定，并对缓动的过程进行侦听，每次数据发生一丁点的变化，就刷新显示，因此出现了平滑移动的效果。因为缓动是逐步发生的，scaleX与scaleY有相关性，因此，只需要对其中一个属性进行缓动就可以了，并不需要分别制造两个缓动。
function freshImage(evt) {
 image_mc.scaleY=image_mc.scaleX;
 var pt=image_mc.localToGlobal(image_mc.locPt);
 image_mc.x+=stage.stageWidth/2-pt.x;
 image_mc.y+=stage.stageHeight/2-pt.y;
 image_mc.locPt=image_mc.globalToLocal(new Point(stage.stageWidth/2,stage.stageHeight/2));
}

另附上不带缓动的放大与缩小按钮的代码供大家参考：

///    old code version without smooth action.
/*max_btn.addEventListener(MouseEvent.CLICK,onExpandImage);
function onExpandImage(evt) {
if (image_mc.scaleX<2.50) {// 图片最多放大不超过2.5倍
var pt1=new Point(stage.stageWidth/2,stage.stageHeight/2);
pt1=image_mc.globalToLocal(pt1);
image_mc.scaleX=image_mc.scaleY+=0.1;
pt1=image_mc.localToGlobal(pt1);
image_mc.x+=stage.stageWidth/2-pt1.x;
image_mc.y+=stage.stageHeight/2-pt1.y;
}
}

min_btn.addEventListener(MouseEvent.CLICK,onShrinkImage);
function onShrinkImage(evt) {
if (image_mc.scaleX>0.20) {// 图片最多缩小不超过0.2倍
var pt1=new Point(stage.stageWidth/2,stage.stageHeight/2);
pt1=image_mc.globalToLocal(pt1);// 先记录缩放前的中心点位置
image_mc.scaleX=image_mc.scaleY-=0.1;
pt1=image_mc.localToGlobal(pt1);// 发生缩放后，元件内坐标系会跟着缩放，坐标值不变，但位置已经产生变化，将新位置换算回全局坐标，就可以知道图片需要偏移的距离。
image_mc.x+=stage.stageWidth/2-pt1.x;
image_mc.y+=stage.stageHeight/2-pt1.y;
}
}
*/