快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

FLASH MX 2004:平铺底纹

本文译者:egoldy
文章性质:原创
文章出处:http://www.webstudio.com.cn/tutorial/show.php?id=30

FLASHMX2004 AS 平铺背景


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

« Full Screen »

  我们需要用到的素材,我们只需要象在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

« Full Screen »

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

  代码:

            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);
  看一下结果吧!:)

« Full Screen »




返回类别: Flash教程
上一教程: Flash视频教程:色彩动画
下一教程: Flash光特效综合分析

您可以阅读与"FLASH MX 2004:平铺底纹"相关的教程:
· Flash MX 2004 ActionScript图文教程(十一)
· Flash MX 2004实例制作视频教程:梦幻太空(中)
· Flash MX 2004 模仿出打字效果的制作方式
· Flash MX 2004 ActionScript图文教程(十)
· Flash MX 2004实例制作视频教程:七巧板互动游戏(3)
    微笑服务 优质保证 索取样品