Flash读取图片，加入利用自制滚动条

打算为游戏做一个地图编辑器，地图大的时候需要用到滚动条，

而Flash自带的滚动条不太会用，于是自己弄了个简单的滚动条来控制图片的显示，

想想以后需要新功能的话，自己还可以修改添加，应该会很方便

 

首先利用CS4，建立一个竖向的MC

，

里面向上的箭头(up)，向下的箭头(down)，滚动条(ctrl)，背景(bak)，都分别是一个MC，然后同样方法建立一个横向的MC，里面的四个MC分别是left,right,ctrl,bak

接下来，建立图片显示板MapFloor，画一个480X480的遮罩mask，然后将两个滚动条分别拖到左，下，名称设定为barC，barR，遮罩下面建立一个MC（名称：floorImage）

下面就可以用这些MC来控制图片显示了

首先找一个稍微大一点的图片，

利用_loader 读取图片，
   _map = new MapFloor();
   addChild(_map);
   _loader =  new Loader( );
   _loader.contentLoaderInfo.addEventListener(Event.COMPLETE, setJpgOver);
   _loader.load(new URLRequest("images/test.jpg"));

读取完之后，设定滚动条状态：
   _loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, setJpgOver);
   _image = Bitmap(_loader.content);
   _map.floorImage.addChild(_image);
   
   if(_map.floorImage.width > 480){
    _map.barR.bak.width = 480;
    _map.barR.right.x = 466;
    _map.barR.addEventListener(MouseEvent.MOUSE_DOWN,barRMouseDown);
    _map.barR.addEventListener(MouseEvent.MOUSE_UP,barRMouseUp);
    _map.barR.left.addEventListener(MouseEvent.MOUSE_DOWN,barRUp);
    _map.barR.right.addEventListener(MouseEvent.MOUSE_DOWN,barRDown);
   }else{
    _map.barR.visible = false;
   }
   if(_map.floorImage.height > 480){
    _map.barC.bak.height = 480;
    _map.barC.down.y = 466;
    _map.barC.addEventListener(MouseEvent.MOUSE_DOWN,barCMouseDown);
    _map.barC.addEventListener(MouseEvent.MOUSE_UP,barCMouseUp);
    _map.barC.up.addEventListener(MouseEvent.MOUSE_DOWN,barCUp);
    _map.barC.down.addEventListener(MouseEvent.MOUSE_DOWN,barCDown);
   }else{
    _map.barC.visible = false;
   }

  private function barCUp(event:MouseEvent):void{
   _map.barC.ctrl.y -= 10;
   if(_map.barC.ctrl.y < 14){
    _map.barC.ctrl.y = 14;
   }
   mapToY();
  }
  private function barCDown(event:MouseEvent):void{
   _map.barC.ctrl.y += 10;
   if(_map.barC.ctrl.y > 416){
    _map.barC.ctrl.y = 416;
   }
   mapToY();
  }
  private function barRUp(event:MouseEvent):void{
   _map.barR.ctrl.x -= 10;
   if(_map.barR.ctrl.x < 14){
    _map.barR.ctrl.x = 14;
   }
   mapToX();
  }
  private function barRDown(event:MouseEvent):void{
   _map.barR.ctrl.x += 10;
   if(_map.barR.ctrl.x > 416){
    _map.barR.ctrl.x = 416;
   }
   mapToX();
  }
  private function barCMouseDown(event:MouseEvent):void{
   barCToMouse(event);
   _map.barC.addEventListener(MouseEvent.MOUSE_MOVE,barCMouseMove);
  }
  private function barCMouseUp(event:MouseEvent):void{
   _map.barC.removeEventListener(MouseEvent.MOUSE_MOVE,barCMouseMove);
  }
  private function barCMouseMove(event:MouseEvent):void{
   barCToMouse(event);
  }
  private function barRMouseDown(event:MouseEvent):void{
   barRToMouse(event);
   _map.barR.addEventListener(MouseEvent.MOUSE_MOVE,barRMouseMove);
  }
  private function barRMouseUp(event:MouseEvent):void{
   _map.barR.removeEventListener(MouseEvent.MOUSE_MOVE,barRMouseMove);
  }
  private function barRMouseMove(event:MouseEvent):void{
   barRToMouse(event);
  }
  private function barRToMouse(event:MouseEvent):void{
   if(event.currentTarget.mouseX < 14 || event.currentTarget.mouseX > 466){
    return;
   }
   _map.barR.ctrl.x = event.currentTarget.mouseX - 11;
   if(_map.barR.ctrl.x < 14){
    _map.barR.ctrl.x = 14;
   }else if(_map.barR.ctrl.x > 416){
    _map.barR.ctrl.x = 416;
   }
   mapToX();
  }
  private function mapToX():void{
   _map.floorImage.x = -1 * (_map.barR.ctrl.x - 14) * (_map.floorImage.width - 480) /402;
  }
  private function barCToMouse(event:MouseEvent):void{
   if(event.currentTarget.mouseY < 14 || event.currentTarget.mouseY > 466){
    return;
   }
   _map.barC.ctrl.y = event.currentTarget.mouseY - 11;
   if(_map.barC.ctrl.y < 14){
    _map.barC.ctrl.y = 14;
   }else if(_map.barC.ctrl.y > 416){
    _map.barC.ctrl.y = 416;
   }
   mapToY();
  }
  private function mapToY():void{
   _map.floorImage.y = -1 * (_map.barC.ctrl.y - 14) * (_map.floorImage.height - 480) /402;
  }

然后CTRL+回车，测试一下，可以看到滚动条已经可以很好的控制图片了