[组图]深入理解AS3实现网站分辨率自适应

核心提示：本节教程你将学会怎样使FLASH在网页中自适应浏览器窗口——这是构建纯FLASH网站须要实现的基本功能，先要说明的是，[组图]深入理解AS3实现网站分辨率自适应，用户的浏览器访问的窗口是各不相同的，我们要确保一个元件一直处在某个位置，上下左右都是会留页边距的，我们可以在Dreamwerver中修

　　本节教程你将学会怎样使FLASH在网页中自适应浏览器窗口——这是构建纯FLASH网站须要实现的基本功能。
　　先要说明的是，用户的浏览器访问的窗口是各不相同的。我们要确保一个元件一直处在某个位置，比如菜单要一直要在页面左上角或右下角，其中还要考虑用户在访问过程中改变窗口大小。所以呢，FLASH里面所有的元件的坐标都是相对性的。则页面走，元件走。从而实现自适应窗口。

　　使用工具：Adobe Flash CS3 或更高； Adobe Dreamwerver 或文本工具(如果你对HTML比较熟的话) 　　脚本语言版本：ActionScript 3.0

　　首先新建一个AS3的文档。 舞台大小根据自己需要决定，这里是500*500。帧频推荐使用 30 fps 。我们新建A、B、C、D四个矩形元件。实现始终位于网页窗口的左上、左下、右上、右下四角。

　　打开“动作”面板，在第一帧中键入我们的“定位”代码：
　　
　　“
　　　　fun_stage();
　　　　function fun_stage(){
　　　　A.x=0;
　　　　A.y=0;
　　　　B.x=0;
　　　　B.y=stage.stageHeight-B.height;
　　　　C.x=stage.stageWidth-C.width;
　　　　C.y=0;
　　　　D.x=stage.stageWidth-D.width;
　　　　D.y=stage.stageHeight-D.height;
　　　　};　　
　　　　”

　图一：四个元件

　　这时，我们拉大预览窗口，会发现这四个元件并不会一直保持在页面的四角上。这是因为“定位”的函数“fun_stage”只是执行了一遍，我们可以多插入一帧或使用循环让函数反复执行。但AS3提供了一个更为方便的解决办法——“Event.RESIZE”事件，只须添加一个侦听事件：“stage.addEventListener (Event.RESIZE,接收函数)”，当FLASH的宽高大小发生改变的时候则触发该事件。
    修改代码，预览，再次拖动窗口，会发现窗口越拉得越大B、C、D三个元件就“跑”得越远(图二)。而A元件并没有一直靠在左上角。出现这个原因，是跟舞台对齐方式有关。

　 

图二:居中对齐的舞台效果

　　当我们放大预览窗口，这时就必会露出舞台外的区域，而舞台，还是我们之前设定的大小(500*500)。所以，在这种情况下，舞台就必须要有默认的对齐方式。在Flash中，舞台默认是在整个“可视”区域里居中对齐的。所以坐标0的地方并不是在我们所见的整个“可视”区域的左上角。所以我们要改变它的这种对齐方式,使之左上角对齐,才是我们想要的效果。

　

　　改变舞台的对齐方式，我们只须改变舞台的align属性就可，在代码中插入“stage.align=StageAlign.TOP_LEFT”这条语句即可。大家可以在“帮助”里找到关于舞台的其它对齐方式。这里是左上角。
　　这时，不管怎么拖拉，A、B、C、D这四个元件始终顶着窗口的四个角。

 

图四：左上角对齐的舞台

　　保存，导出SWF文件。再用Flash Player打开(注意，在Flash中用Ctrl+Enter预览与播放SWF文件是有区别的)，这时拖动窗口你会发生元件的大小会根据窗口大小相对地发生改变。而在Flash中预览却没有这个问题。这根舞台的缩放模式有关。我们只须再增加一条代码:“stage.scaleMode=StageScaleMode.NO_SCALE”，强行控制舞台的缩放模式即可。

　　来看看完整的代码：

　　“

　　　//控制舞台的缩放模式
　　　stage.scaleMode=StageScaleMode.NO_SCALE   

　　　//改变舞台对齐方式
　　　stage.align=StageAlign.TOP_LEFT

　　　//舞台大小改变侦听
　　　stage.addEventListener (Event.RESIZE,test);
　　　function test (e:Event){
　　　fun_stage();
　　　}
　　　function fun_stage(){
　　　A.x=0;
　　　A.y=0;
　　　B.x=0;
　　　B.y=stage.stageHeight-B.height;
　　　C.x=stage.stageWidth-C.width;
　　　C.y=0;
　　　D.x=stage.stageWidth-D.width;
　　　D.y=stage.stageHeight-D.height;
　　　}
　　　fun_stage();


　　　”

　　最后一步，向HTML中插入你的SWF文件。
　　宽高设置为100%，使之撑满整个页面，HTML在默认的情况下，上下左右都是会留页边距的。我们可以在Dreamwerver中修改“页面属性”，在“外观(CSS)”栏把左右上下边距手动写入“0px”就可以了。

 

图五：浏览器中的效果