柳州网站建设FLASH AS3在地产网站中的应用

在地产网站中，通常会加入“网上沙盘”版块。在“网上沙盘”中，购房者可以身临其境的在整个楼盘中找到自己喜欢的位置和适合自己的户型。在制作过程中，如果楼盘面积过大，我们为了将完整的楼盘显示只能将整个楼盘的效果图缩小。问题随之而来，整个楼盘鸟瞰图缩小，单个楼也随之被缩小，那么对于用户来说，不能清晰的获取户型信息。

针对这种“鱼与熊掌不可兼得”的情况，本教程讲介绍按钮、鼠标滑动、鼠标滚轮这三种解决此问题的方法。

以某房地产网站中的“网上沙盘”为例。图1为正常大小的园区鸟瞰图，我们可以完全看到每栋座楼的位置以及每栋楼周边的绿化情况。

图1 正常大小的沙盘

图2为放大二倍后的鸟瞰图，我们能够清晰的看到每一栋楼甚至楼间甬路。

图2 放大后的沙盘

我们可以看到，在图片右下角有一个控制条（如图3），它包含3个部分：放大按钮，缩小按钮，拖动滑块。

用到的事件有CLICK ， MOUSE_DOWN，MOUSE_UP ，MOUSE_WHEEL。放大按钮在属性栏中赋予“anf”的实例名称，缩小按钮为“ans”，控制条为“hd”，控制条中的拖动滑块为“thumb_mc”，刻度线为“line_mc”。

接下来我们分别介绍各按钮的制作方法。

将鸟瞰图设置为3个档：原始大小、1.5倍大小、2倍大小。

默认进入状态是原始大小，点击放大按钮鸟瞰图放大0.5倍，当放大到2倍时，停止放大。缩小按钮鱼放大按钮原理相同。代码如下：

hd.thumb_mc.addEventListener(MouseEvent.MOUSE_DOWN,onDownfs);

//为移动滑块添加鼠标按下事件

stage.addEventListener(MouseEvent.MOUSE_WHEEL,fs);

//为舞台添加鼠标滚轮事件

stage.addEventListener(MouseEvent.MOUSE_UP,onUpfs);

//为舞台添加鼠标抬起事件

ans.addEventListener(MouseEvent.CLICK,sxHandler);

anf.addEventListener(MouseEvent.CLICK,fdHandler);

//为放大按钮和缩小按钮添加点击事件

需要注意的是，当鸟瞰图被放大到1.5倍和2倍的时候，SWF的舞台已经不足以将完整的鸟瞰图显示出来，用户可能会自然而然的想把鸟瞰图左右的“挪一挪”，那么就需要用到startDrag()事件 和stopDrag()事件。但是挪动的时候不能将鸟瞰图的边缘挪到画面中间来，所以还需要加入判断以防止此类问题的发生。

在文档类wssp.as中输入如下代码

package

{

import flash.display.MovieClip;

import flash.events.MouseEvent;

import flash.net.URLRequest;

import flash.display.Loader;

import flash.events.*;

import flash.net.URLLoader;

import flash.accessibility.Accessibility;

import flash.geom.*;

import flash.events.Event;

public class wssp extends MovieClip

{

public var url:URLRequest = new URLRequest("");

public var loader:Loader = new Loader ;

public var hdn:Number = 0;

public var bsanArr:Array = new Array ;//别墅按钮

public var yfanArr:Array = new Array ;//洋房按钮

public var ayArr:Array = new Array ;//控制条洋房户型按钮

public var abArr:Array = new Array ;//控制条别墅户型按钮

public var mm:Number =1

public function wssp()

{

if (stage)

{

init();

}

else

{

this.addEventListener(Event.ADDED_TO_STAGE,stageInit);

}

}

//舞台初始化

private function stageInit(e:Event):void

{

this.removeEventListener(Event.ADDED,stageInit);

init();

}

//初始化

private function init()

{

ans.buttonMode = true;

anf.buttonMode = true;

var i:int = 0;

ans.addEventListener(MouseEvent.CLICK,sxHandler);

anf.addEventListener(MouseEvent.CLICK,fdHandler);

stage.addEventListener(MouseEvent.MOUSE_WHEEL,fs);

stage.addEventListener(MouseEvent.MOUSE_UP,onUpfs)

sp.addEventListener(MouseEvent.MOUSE_DOWN ,ydHandler);

sp.addEventListener(MouseEvent.MOUSE_UP ,tzydHandler);

hdn = 90;

hd.thumb_mc.addEventListener(MouseEvent.MOUSE_DOWN,onDownfs);

//hd.thumb_mc.addEventListener(MouseEvent.MOUSE_UP,onUpfs);

hd.thumb_mc.y = 90;

hd.thumb_mc.buttonMode = true;

}

function onUpfs(evt:MouseEvent):void

{

trace(hdn)

hd.thumb_mc.stopDrag();

if (hd.thumb_mc.y < 21.5)

{

hd.thumb_mc.y = 3;

sp.scaleX = 2;

sp.scaleY = 2;

hdn=3

}

else if(hd.thumb_mc.y>21.5 && hd.thumb_mc.y<66.5)

{

hd.thumb_mc.y = 46.5;

sp.scaleX = 1.5;

sp.scaleY = 1.5;

hdn=46.5

}

else if (hd.thumb_mc.y > 66.5)

{

hd.thumb_mc.y = 90;

sp.scaleX = 1;

sp.scaleY = 1;

sp.x = 500;

sp.y = 275;

hdn=90

}

}

private function onDownfs(evt:MouseEvent):void

{

evt.target.startDrag(false, new Rectangle(-1, 3, 0,87));

}

//沙盘移动

private function ydHandler(evt:MouseEvent):void

{

if ((sp.scaleX ==1.5) && (sp.x>=250 && sp.x<=750) && (sp.y>= 137.5&& sp.y<=412.5) )

{

sp.startDrag();

addEventListener(Event.ENTER_FRAME,pd);

removeEventListener(Event.ENTER_FRAME,pd1);

}

else if (sp.scaleX ==2 && (sp.x>=0&& sp.x<=1000) && (sp.y>=0 && sp.y<=550))

{

sp.startDrag();

addEventListener(Event.ENTER_FRAME,pd1);

removeEventListener(Event.ENTER_FRAME,pd);

}

}

//判断图片是否出画面

private function pd(evt:Event ):void

{

if (sp.x < 250)

{

sp.x = 250;

}

if (sp.x > 750)

{

sp.x = 750;

}

if (sp.y < 137.5)

{

sp.y = 137.5;

}

if (sp.y > 412.5)

{

sp.y = 412.5;

}

}

private function pd1(evt:Event ):void

{

if (sp.x < 0)

{

sp.x = 0;

}

if (sp.x > 1000)

{

sp.x = 1000;

}

if (sp.y < 0)

{

sp.y = 0;

}

if (sp.y > 550)

{

sp.y = 550;

}

}

private function tzydHandler(evt:MouseEvent):void

{

sp.buttonMode = false;

sp.stopDrag();

}

//沙盘放大

private function fdHandler(evt:MouseEvent):void

{

if (sp.scaleX != 2)

{

sp.scaleX += 0.5;

sp.scaleY += 0.5;

sp.x = 500;

sp.y = 275;

if (hdn == 90)

{

mm=1.5

hdn = 46.5;

hd.thumb_mc.y = hdn;

addEventListener(Event.ENTER_FRAME,pd);

removeEventListener(Event.ENTER_FRAME,pd1);

}

else if (hdn==46.5)

{

mm=2

hdn = 3;

hd.thumb_mc.y = hdn;

addEventListener(Event.ENTER_FRAME,pd1);

removeEventListener(Event.ENTER_FRAME,pd);

}

}

}

//沙盘缩小控制

private function sxHandler(evt:MouseEvent):void

{

if (sp.scaleX != 1)

{

sp.scaleX -= 0.5;

sp.scaleY -= 0.5;

sp.x = 500;

sp.y = 275;

if (hdn == 3)

{

mm=1.5

hdn = 46.5;

hd.thumb_mc.y = hdn;

addEventListener(Event.ENTER_FRAME,pd);

removeEventListener(Event.ENTER_FRAME,pd1);

}

else if (hdn==46.5)

{

mm=1

hdn = 90;

hd.thumb_mc.y = hdn;

removeEventListener(Event.ENTER_FRAME,pd);

removeEventListener(Event.ENTER_FRAME,pd1);

}

}

}

//鼠标滚轮放缩

private function fs(evt:MouseEvent):void

{

if (evt.delta == 3)

{

if (sp.scaleX != 2)

{

mm+=0.1

sp.scaleX = parseFloat(mm.toFixed(1));

sp.scaleY = parseFloat(mm.toFixed(1));

hd.thumb_mc.y-=(90-46.5)/5

if(sp.scaleY==1.5){

hd.thumb_mc.y=46.5

hdn=46.5

}

if(sp.scaleY==2){

hd.thumb_mc.y=3

hdn=3

}

}

}

else

{

if (sp.scaleX != 1)

{hd.thumb_mc.y+=(90-46.5)/5

mm-=0.1

sp.scaleX = parseFloat(mm.toFixed(1));

sp.scaleY = parseFloat(mm.toFixed(1));

sp.x = 500;

sp.y = 275;

if(sp.scaleY==1.5){

hd.thumb_mc.y=46.5

hdn=46.5

}

if(sp.scaleY==1){

hd.thumb_mc.y=90

hdn=90

}

}

}

}

}

文章来源：新学期 (http://www.xinxueqi.com)