FLASH MX 2004:平铺底纹

本文译者: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); 

  看一下结果吧!:)

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索函数
, 代码
, 大小
, 纹理
, 背景
, 一个
, 背景平铺
平铺图片
flash mx下载、flash mx官方下载、flash cs6、flash mx 2004、flash动画制作软件,以便于您获取更多的相关知识。

时间: 2024-09-04 02:50:44

FLASH MX 2004:平铺底纹的相关文章

Flash MX 2004新特性实例学习一

    Flash MX 2004的试用版终于可以下载了,它帮助文件中自带的例子很好地反映了2004中新增加的功能.下面我们通过学习这些例子的制作,来熟悉在2004中新增加的功能.这些例子都是从Flash MX 2004的帮助文档中来的.在我的windows2000中的保存路径是C:Documents and SettingsAdministratorLocal SettingsApplication DataMacromediaFlash MX 2004enConfigurationSampl

Flash MX 2004 编程(AS2.0)教程(六)

编程|教程 1.4.4代码编写 现在开始进入最麻烦的步骤--代码编写,我们将会接触到很多新的东西. 1.文本文件数据加载 在最开始的时候,我们曾建立一个文本文件,将其命名为"subtrahend.txt",存在.fla文件所在的目录下,这个文件中包含有程序需要读取的参数,现在我们就要编写代码将这些数据读取出来. 选中"脚本"层中的第一帧,然后打开行为面板,输入这样的代码: var externalData:LoadVars = new LoadVars(); ext

Flash MX 2004 编程(AS2.0)教程(五)

编程|教程 1.3.4独立脚本文件 打开菜单"文件->新建",从新建文档对话框中选择"动作脚本文件"可以建立独立.AS文件,这种文件的最大优点是可以重复使用.比方说,你在一个项目中建立的脚本可以放在独立的.AS文件中,其他项目要使用到类似的功能,你就可以直接调用这个.AS文件中的代码.这样可以大大提高开发效率,减少代码的冗余程度. 1.4第一个脚本程序 下面我们通过一个非常简单的ActionScript程序演示ActionScript的操作过程,虽然这个例子看

Flash MX 2004 编程(AS2.0)教程(二)

编程|教程 1.3ActionScript编辑器 Flash MX 2004中提供了一个非常易用的ActionScript编辑器,这一小节我们就来熟悉这个编辑器的使用方法. 1.3.1启动ActionScript编辑器 在Flash MX 2004中打开菜单"窗口-〉开发面板-〉动作"(快捷键F9)即可打开ActionScript编辑器. 1.3.2ActionSctipt编辑器的结构 从图中可以看出,ActionScript编辑器由四个部分组成 脚本面板 这个区域相当于一个文本编辑器

Flash MX 2004 编程(AS2.0)教程(一)

编程|教程 第1章入门 ActionScript是一种编程语言,Flash专用.ActionScript的语法类似Javascript或者Java,如果你以前接触过这两种语言,你会发现ActionScript非常易懂易用.即便你没有接触过Java或者Javascript,掌握和运用ActionScript也绝非什么难事. 1.1ActionScript的演变过程 ActionScript是不断发展的,最早出现在Flash 5种,目前的最新版本是ActionScript 2.0,已经趋于成熟.Fl

Flash MX 2004升级 AS改进是重

7月26日,Macromedia公司发布了Flash MX 2004的升级包,该升级包修正了原2004文档中的很多BUG,功能更完善,以下节选自Macromedia关于该升级版Flash MX 2004文档的最新改进的描述: 增加了400多个新的代码范例 将ActionScript语言参考示例的个数百分比从43%增长到98% 增加ActionScript文档大小到85% 增加了21个新的文档范例FLA源文件,进一步证明用FLASH开发通用应用软件的强大功能 修复了2000多个文档BUG 增加了2

Flash MX 2004 Media组件实现多首mp3连放

Flash MX 2004 的Media组件确实不错,大家在使用的时候可能发现MediaDisplay组件只能播放一首mp3,如果要让他播放完一首歌曲后再接着播放另一首歌曲就不行了.今天就来给大家介绍一下怎样用MediaController和MediaDisplay组件实现多首mp3的联播. 播放器界面如图: 思路如下: 歌曲列表用一外部XML文件来记录,便于修改.开始的时候定义一XML对象,并载入外部XML文件,载入后再将歌曲列表提取出来放入一数组中.接着用attachMovie()方法将Me

Flash MX 2004精彩实例视频教程:《江南》MV制作(2)

教程|视频教程 第 106 节:<江南>MV制作 (2) 课程目标:制作<江南>MV 课程要点:使用Flash MX 2004制作流行歌曲<江南>的音乐视频MV.分五集讲解,这是第二集.同时提供fla源文件下载,方便大家学习和参考. 观看教程:[全屏观看] (2.36MB) (必须安装Flash Player 7.0或更高版本的播放器,[官方下载] [太平洋下载]) 下载教程:[下载教程] [下载源文件(86.4MB)]

Flash MX 2004实例制作视频教程:《江南》MV制作(1)

教程|视频教程 第 105 节:<江南>MV制作 (1) 课程目标:制作<江南>MV 课程要点:使用Flash MX 2004制作流行歌曲<江南>的音乐视频MV.分五集讲解,这是第一集.同时提供fla源文件下载,方便大家学习和参考. 观看教程:[全屏观看] (11.8MB) (必须安装Flash Player 7.0或更高版本的播放器,[官方下载] [太平洋下载]) 下载教程:[下载教程] [下载源文件(86.4MB)] 效果预览: