主页 » RIA文档中心 » RIA杂志速递

创建一个流式的网站布局

Posted 七月 13th, 2009 by migsr

在这篇文章中，我们来介绍一下如何实现一个流式的网站布局，原文地址在：

http://flash.tutsplus.com/tutorials/web-design/build-a-fluid-website-lay...

在开始之前，首先介绍一下什么是一个流式的布局。简单的说，流式的布局就是一个根据屏幕的尺寸可自行改变位置以取得相对定位的一种布局方式。在网页的HTML中流式布局很常见，比如可以设置一个DIV的宽度是100%，而里面的元素可以居于DIV的右侧，当浏览器的宽度发生改变，这个DIV的宽度的像素值就会发生改变，而内部的元件的位置也会做出相应的调整。在这篇文章里，就会介绍一下如何在Flash里面实现这种方式。当你试图缩放浏览器窗口的时候，你会发现所有的元件都会自行改变自己的位置。

源代码下载：

http://flashtuts.s3.amazonaws.com/054_FluidWebDesign/source.zip

示例演示：

http://flashtuts.s3.amazonaws.com/054_FluidWebDesign/website.html

使用这个功能，我们需要创建ActionScript 3的类文件，来确保可以在Flash里面实现流式的布局。在这个示例里创建的ActionScript类文件可以很方便的移植到其它的项目中。

步骤一：流式布局图解

如下面的图片所示，所有的元件都会通过“fluid objects”根据浏览器的尺寸而改变自己的位置。

步骤二：Fluid Object的定位方式

每一个fluid对象都包含了对齐属性，属性包括x,y,x offset,y offset（相对于x,y的偏移量），这几个属性决定了对象该如何定位。

设置x和y都为0，意味着fluid object将定位在屏幕的左上角。而设置x和y都是1，则意味着fluid object将定位在屏幕的右下角。同样的，设置0和1代表屏幕的左下角，而设置1，0则代表右上角。它们的具体位置的像素值则是根据屏幕的尺寸计算出来的。

offset X和Y定义元件的偏移量，这个非常有用，因为元件的默认注册点是0，0，而你通过设置x,y都是0.5的时候，元件并没有居中（由于元件本身具备宽度和高度属性）。这个属性可以帮助你实现完美的居中效果。

步骤三：创建一个目录来存放类文件

在工作目录中创建一个名为“FluidLayout”的目录，这个目录用于存放所有的类文件。

步骤四：创建一个新的ActionScript类（FluidObject.as）

创建一个新的类文件，命名为“FluidObject.as”，保存到步骤3创建的目录中。这个类将包含当浏览器缩放的时候改变元件位置的属性。

步骤五：生成的类代码

  1. view plaincopy to clipboardprint?
  2.  
  3.    1. package FluidLayout {  
  4.    2.   
  5.    3.     /* Add import classes here */  
  6.    4.   
  7.    5.     public class FluidObject {  
  8.    6.   
  9.    7.         /* Declare instance variables here */  
  10.    8.   
  11.    9.         /* Constructor of the class */  
  12.   10.         public function FluidObject(target:DisplayObject,paramObj:Object)  
  13.   11.         {  
  14.   12.         }  
  15.   13.   
  16.   14.         /* Function that repositions the monitored object */  
  17.   15.         protected function reposition():void  
  18.   16.         {  
  19.   17.         }  
  20.   18.   
  21.   19.         /* Function that is called when the RESIZE event is fired */  
  22.   20.         protected function onStageResize(e):void  
  23.   21.         {  
  24.   22.         }  
  25.   23.     }  
  26.   24. }

步骤六：实现

首先导入需要的类文件，包括flash.events.Event，flash.display.*。然后定义变量，实现构造方法，最后实现重新定位的方法（reposition），并实现当场景尺寸发生改变的时候的侦听方法。最后完成的类代码是：

  1. view plaincopy to clipboardprint?
  2.  
  3.    1. package FluidLayout {  
  4.    2.       
  5.    3.     /* class needed on resize Event */  
  6.    4.     import flash.events.Event;  
  7.    5.       
  8.    6.     /* classes needed for MovieClip and DisplayObject */  
  9.    7.     import flash.display.*;  
  10.    8.   
  11.    9.     public class FluidObject {  
  12.   10.           
  13.   11.         /* alignment parameters */  
  14.   12.         protected var _param:Object;  
  15.   13.           
  16.   14.         /* target object to be monitored */  
  17.   15.         protected var _target:DisplayObject;  
  18.   16.           
  19.   17.         /* stage instance of the flash document */  
  20.   18.         protected var _stage:Stage;  
  21.   19.           
  22.   20.         /* Setter for the alignment param */  
  23.   21.         public function set param(value:Object):void {  
  24.   22.             _param=value;  
  25.   23.             this.reposition();  
  26.   24.         }  
  27.   25.           
  28.   26.         /* Constructor of the class */  
  29.   27.         public function FluidObject(target:DisplayObject,paramObj:Object)  
  30.   28.         {  
  31.   29.             /* Assign the instance variables */  
  32.   30.             _target = target;  
  33.   31.             _param = paramObj;  
  34.   32.             _stage = target.stage;  
  35.   33.               
  36.   34.             /* add event handler for stage resize */  
  37.   35.             _stage.addEventListener(Event.RESIZE, onStageResize);  
  38.   36.               
  39.   37.             /* reposition the object with the alignment setting applied*/  
  40.   38.             this.reposition();  
  41.   39.               
  42.   40.         }  
  43.   41.           
  44.   42.         /* Function that repositions the monitored object */  
  45.   43.         protected function reposition():void  
  46.   44.         {  
  47.   45.             /* get the current width and height of the flash document */  
  48.   46.             var stageW = _stage.stageWidth;  
  49.   47.             var stageH = _stage.stageHeight;  
  50.   48.               
  51.   49.             /* update the x and y value of the monitored object */  
  52.   50.             _target.x = (stageW * _param.x) + _param.offsetX;  
  53.   51.             _target.y = (stageH * _param.y) + _param.offsetY;  
  54.   52.               
  55.   53.         }  
  56.   54.           
  57.   55.         /* Function that is called when the RESIZE event is fired */  
  58.   56.         protected function onStageResize(e):void  
  59.   57.         {  
  60.   58.             /* reposition the target */  
  61.   59.             this.reposition();  
  62.   60.         }  
  63.   61.   
  64.   62.     }  
  65.   63.   
  66.   64. }

步骤七：如何使用

首先创建一个Flash 文件，使用绘图工具制作出用户界面的各个部分，并在库面板中设置“导出为ActionScript”类，为每个类定义好名称。

如上图所示，这个一个Title的继承自电影剪辑的类，那么我们可以在代码中用New的方式来声明它，并绑定到FluidObject上面，比如：

  1.   var title = new Title();    
  2.             addChild(title); 
  3.             var titleParam = {         
  4.                   x:0,        
  5.                   y:0,         
  6.                   offsetX:0,        
  7.                   offsetY:0   
  8.             } 
  9.             new FluidObject(title,titleParam);

完成每一个部分的配置之后，你可以运行你的应用，并缩放浏览器的窗口来查看效果了。

具体过程请参照作者的原教程：

http://flash.tutsplus.com/tutorials/web-design/build-a-fluid-website-lay...

riadevID: 
瑞研社区最新地址：http://www.riadev.com/flex-thread-124-1-1.html
您给予的分值: None 平均分: 9 ( 3 票)

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证：请回答下面的问题