圖檔框類：
package
{
import controlsEvents.ScrollerEvent;
import flash.display.Bitmap;
import flash.display.Shape;
/**
* 圖檔框類
* @author Jave.Lin
*/
public class PictureBox extends Control
{
private var _hs:HorizontalScroller;//水準滾動條
private var _vs:VerticalScroller;//垂直滾動條
private var _imageMask:Shape;//圖檔的遮罩
private var _image:Bitmap;//圖檔
private var _sW:Number;//顯示圖檔區域的寬
private var _sH:Number;//顯示圖檔區域的高
public override function set width(value:Number):void
{
if(super.width!=value)
{
super.width=value;
onLayout();
redrawMask();
updateScroller();
}
}
public override function set height(value:Number):void
{
if(super.height!=value)
{
super.height=value;
onLayout();
redrawMask();
updateScroller();
}
}
public function get image():Bitmap
{
return _image;
}
public function set image(value:Bitmap):void
{
if(_image!=value)
{
if(_image && _image.parent)
{
_image.parent.removeChild(_image);
}
_image=value;
if(_image)
{
addChild(_image);
_imageMask.visible=true;
_image.mask=_imageMask;
setChildIndex(_image,0);
}
else
{
_imageMask.visible=false;
}
updateScroller();
}
}
public function PictureBox($image:Bitmap=null)
{
super();
image=$image;
}
//提示同時設定寬、高的一個公開方法，因為每設定一下，寬、或是高，都會重繪一次
//而這個方法設定兩個屬性，隻重繪一次
public function setWidthHeight($width:Number,$height:Number):void
{
if(super.width!=$width && super.height!=$height)
{
super.width=$width;
super.height=$height;
onLayout();
redrawMask();
updateScroller();
}
}
private function onLayout():void
{
//計算出顯示區域的寬、高
_sW=width-_vs.width;
_sH=height-_hs.height;
//垂直滾動條的高，及位置
_vs.height=_sH;
_vs.x=_sW;
_vs.y=0;
//水準滾動條的寬，及位置
_hs.width=_sW;
_hs.x=0;
_hs.y=_sH;
}
private function updateScroller():void
{
if(_image==null)
{
_vs.curVisibleRate=1;
_hs.curVisibleRate=1;
}
else
{
//值範圍
_vs.maxValue=_image.height-_sH;
_hs.maxValue=_image.width-_sW;
//顯示比率
_vs.curVisibleRate=1-(_sH/_image.height);
_hs.curVisibleRate=1-(_sW/_image.width);
}
}
private function redrawMask():void
{
_imageMask.graphics.clear();
//背景
_imageMask.graphics.beginFill(0,.2);
_imageMask.graphics.drawRect(0,0,_sW,_sH);
_imageMask.graphics.endFill();
}
protected override function initialize():void
{
_hs=new HorizontalScroller();
addChild(_hs);
_vs=new VerticalScroller();
addChild(_vs);
_w=100;
_h=100;
_imageMask=new Shape();
_imageMask.visible=false;
addChild(_imageMask);
_vs.addEventListener(ScrollerEvent.VALUE_CHANGED,onVsValueChangedHandler);
_hs.addEventListener(ScrollerEvent.VALUE_CHANGED,onHsValueChangedHandler);
onLayout();
redrawMask();
}
private function onHsValueChangedHandler(e:ScrollerEvent):void
{
if(_image)
{
_image.x=-e.value;
}
}
private function onVsValueChangedHandler(e:ScrollerEvent):void
{
if(_image)
{
_image.y=-e.value;
}
}
protected override function refreshBackground():void
{
this.graphics.clear();
//背景
this.graphics.beginFill(0x008800,.2);
this.graphics.drawRect(0,0,width,height);
this.graphics.endFill();
}
}
}
測試代碼：
package
{
import controlsEvents.RadioButtonEvent;
import controlsEvents.ScrollerEvent;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.system.ApplicationDomain;
import flash.system.LoaderContext;
[SWF(width="1200", height="720", frameRate="60")]
public class ControlsTest extends Sprite
{
private var rbt:RadioButton;
private var bt:Button;
private var hs:HorizontalScroller;
private var vs:VerticalScroller;
private var hsLb:Label;
private var vsLb:Label;
private var pb:PictureBox;
public function ControlsTest()
{
stage.color=0;
stage.frameRate=60;
stage.align=StageAlign.TOP_LEFT;
stage.scaleMode=StageScaleMode.NO_SCALE;
rbt=new RadioButton();
rbt.text="test";
rbt.x=50;
rbt.y=50;
rbt.checked=true;
addChild(rbt);
rbt.addEventListener(RadioButtonEvent.ON_CHECKED_CHANGED,onCheckedChangedHandler);
bt=new Button("testButton");
addChild(bt);
bt.x=100;
bt.y=100;
bt.addEventListener(MouseEvent.CLICK,onBtClickHandler);
//bt.width=50;
hs=new HorizontalScroller();
hs.curVisibleRate=.5;
addChild(hs);
hs.x=100;
hs.y=200;
hs.maxValue=1000;
hs.minValue=500;
hs.width=200;
// hs.height=20;
hs.addEventListener(ScrollerEvent.VALUE_CHANGED,onHsValueChangedHandler);
hsLb=new Label();
addChild(hsLb);
hsLb.x=100;
hsLb.y=200+10;
hsLb.text="HorizontalScroller.value:"+hs.curValue;
vs=new VerticalScroller();
vs.curVisibleRate=.5;
addChild(vs);
vs.x=100;
vs.y=250;
vs.maxValue=1000;
vs.minValue=500;
vs.height=200;
// vs.width=20;
vs.addEventListener(ScrollerEvent.VALUE_CHANGED,onVsValueChangedHandler);
vsLb=new Label();
addChild(vsLb);
vsLb.x=100;
vsLb.y=200+60;
vsLb.text="HorizontalScroller.value:"+vs.curValue;
pb=new PictureBox();
addChild(pb);
pb.width=400;
pb.height=200;
pb.x=300;
pb.y=50;
//下面這行代碼，可以看動，在EnterFrame事件時，時刻設定pb的寬、高都是可以的。
pb.addEventListener(Event.ENTER_FRAME,onPbEnterFrameHandler);
var loader:Loader=new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onPicLoadedHandler);
loader.load(new URLRequest("res/test.jpg"),new LoaderContext(false, ApplicationDomain.currentDomain));
}
private var _dW:Number=10;
private var _dH:Number=10;
private function onPbEnterFrameHandler(e:Event):void
{
if(pb.width<=100)
{
_dW=Math.abs(_dW);
}
else if(pb.width>=400)
{
_dW=Math.abs(_dW)*-1;
}
if(pb.height<=100)
{
_dH=Math.abs(_dH);
}
else if(pb.height>=200)
{
_dH=Math.abs(_dH)*-1;
}
pb.setWidthHeight(pb.width+_dW,pb.height+_dH);
// trace("pb.width",pb.width);
// trace("pb.height",pb.height);
}
private function onPicLoadedHandler(e:Event):void
{
// trace(e);
var bmp:Bitmap=e.currentTarget.content as Bitmap;
// trace(bmp);
pb.image=bmp;
}
private function onBtClickHandler(e:MouseEvent):void
{
hs.minValue+=100;
if(hs.minValue>=hs.maxValue)
{
hs.minValue=0;
}
hs.curVisibleRate+=.1;
if(hs.curVisibleRate>=1)
{
hs.curVisibleRate=.1;
}
if(pb.hasEventListener(Event.ENTER_FRAME))
{
pb.removeEventListener(Event.ENTER_FRAME,onPbEnterFrameHandler);
}
else
{
pb.addEventListener(Event.ENTER_FRAME,onPbEnterFrameHandler);
}
}
private function onVsValueChangedHandler(e:ScrollerEvent):void
{
vsLb.text="VerticalScroller.value:"+e.value;
}
private function onHsValueChangedHandler(e:ScrollerEvent):void
{
hsLb.text="HorizontalScroller.value:"+e.value;
}
private function onCheckedChangedHandler(e:RadioButtonEvent):void
{
trace(rbt.checked);
}
}
}
運作圖檔效果：
檢視運作圖檔效果圖全圖
圖檔框裡面的圖檔資源：是一款日本SLG單機遊戲，挺好玩的，遊戲名稱叫：超級魔法大戰，以圖是技能素材圖：
也就是以上代碼中：'res/test.jpg'這圖檔：
