分享
 
 
 

FLASH MX 2004:平铺底纹

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

本文译者:egoldy

文章性质:原创

文章出处:http://www.webstudio.com.cn/tutorial/show.php?id=30

FLASHMX2004 AS 平铺背景

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

演示:

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

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

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

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

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

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

5.此时仍选中刚刚转换为的图像符号,打开属性面板观看它的宽和高的值,在本例中使用图像宽是26,高是26。要注意这个大小,并记下它在后面的AS需要用到它。

6.除场景中图像符号,不要提心因为它已经保存在库中,并且我们已经为它设置了ID号。设置链接ID是为后面我们要用attachMovie方法和贴加它。

7.选择场景中的第一帧,按下F9,打开动作面板,将下面的代码贴在第一帧上OK了。如下:

代码:

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();

测试影片,你会看到得出下面的结果:影片1.swf

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

代码:

tileBG = function () {

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

代码:

tile_width = 26;

tile_height = 26;

上面初始我们纹理图的大小,当前我们用的图像长宽均为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++) {

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

}

}

这两次循环是为为形成我们的平铺网格,如当x=0时,y要铺一列,当x=1时,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);

看一下结果吧!:)

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有