WEB开发网
开发学院图形图像Flash [组图]深入理解AS3实现网站分辨率自适应 阅读

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

 2012-02-06 12:13:12 来源:本站整理   
核心提示:本节教程你将学会怎样使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;
    };  
    ”

1.jpg


 图一:四个元件

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

   2.jpg


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

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

 3.jpg


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

4.jpg 

图四:左上角对齐的舞台

  保存,导出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”就可以了。

 5.jpg

图五:浏览器中的效果

Tags:组图 深入 理解

编辑录入:coldstar [复制链接] [打 印]
赞助商链接