FLASH MX 2004：平铺底纹

• 角色
• 动感
• 充满
• 构造
• 动作
• STEP
• 提示
• 形状
• 我们
• 身

对于网站designer来经常要用到平铺背景，一般习惯上我们用的方法在PS中先将背景平铺好，然后保存成图，导入到FLASH中，这种方式固然可以，但缺点有两个，一个是文件的大小会比较大，另一个问题是当想要变化文件的大小时，背景图片要重新在PS中来做，在导入。现在我们要研究的如何用ActionScript来平铺背景。
演示：

们需要用到的素材，我们只需要象在PS中平铺一样，一小块底纹素材。如下图

如果你想要更多的图片类似底纹可以在网上搜索，或是去这里pattern

1．首先创建一个新的动画文件，设置宽为400，高为300,当然这是本例的大小，你也可以设置想要的大小。

2．现在你需要做的是将我们选定的底纹小图导入到FLASHMX2004的场景中，选择文件导入，选择小的纹理图片。

3．导入图片后，如果你直接导入到场景中则选中小图，按下F8，将图片转换为影片剪辑。将影片剪辑名命名为tile，如图：

4．此时不要关闭对话框，点击高级标签，选中在为动作脚本导出，在ID中输入我们在程序中所需的ID名称，此处我们输入timage,如下图所示.

代码:

tileBG = function () { 
    tile_width = 26; 
    tile_height = 26; 
    // 
    x_max = Math.round(Stage.width/tile_width); 
    y_max = Math.round(Stage.height/tile_height); 
    trace(x_max); 
    trace(y_max); 
    for (x=0; x        for (y=0; y            bg = _root.attachMovie("timage", "bg"+x+y, this.getNextHighestDepth()); 
            bg._x = tile_width*x; 
            bg._y = tile_height*y; 
        } 
    } 
}; 
tileBG(); 

http://www.flashempire.com/school/img4/050824_tile2.swf

我们发现背景已经被平铺了，但我们发现一个小问题就是在右边有一块地方没有铺上，这个不要急，我们先看一下代码。然后我们在研究什么原因。

代码:

            tileBG = function () { 

定义函数，函数名为tileBG,需要注意的是这个函数没有参数。

代码:

            tile_width = 26; 
            tile_height = 26; 

代码:

            x_max = Math.round(Stage.width/tile_width); 
            y_max = Math.round(Stage.height/tile_height); 

用舞台的宽和高分别除以纹理图的宽高，以计算出水平和垂直方向总共可以铺多少，这里使用的math.round函数。来取一个近似值。

代码:

for (x=0; x<=x_max; x++) { 
for (y=0; y<=y_max; y++) { 

          ..................... 

            } 

            }

代码:

bg = _root.attachMovie("timage", "bg"+x+y, this.getNextHighestDepth()); 

将我们的图像组强到场景中，使用attachMovie方法，具体可以查看帮助文档。

代码:

bg._x = tile_width*x; 
bg._y = tile_height*y; 

*在上面的例子中我们遇到一个问题，就是发现右边有一个白边并没铺上，一般情况下如果你的底纹图片是正方形，而影片的大小也是正方形就不会出现这个问题，可是当前我们用的400*300的大小，我们发现其实是少了一列，我们在取水平和垂直列时只要多出一行就可以。修改下面的代码：

将math.round改为math.ceil取较大的值。这样就会多出一行，问题就解决了。

代码:

x_max = Math.ceil(Stage.width/tile_width); 
y_max = Math.ceil(Stage.height/tile_height);