设为首页 繁體中文 闪客留言
减小字体 增大字体
FLASHMX2004 AS 平铺背景
对于网站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<x_max; x++) { for (y=0; y<y_max; y++) { bg = _root.attachMovie("timage", "bg"+x+y, this.getNextHighestDepth()); bg._x = tile_width*x; bg._y = tile_height*y; } } }; tileBG();
我们发现背景已经被平铺了,但我们发现一个小问题就是在右边有一块地方没有铺上,这个不要急,我们先看一下代码。然后我们在研究什么原因。
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);