欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

创建Flash MX组件

javascript 夜阑小雨 911℃ 0评论

Flash MX引用了我们在VB程序中熟悉的组件概念(功能相似在VB中称为控件),替代和扩展了Fash5中的智能剪辑(SmartClip),在FlashMX中有一个新的组件面板(Component Panel)定制了一些常用的组件 ,比如列表框(listboxes,)滚动条(scrollbars), 单选按纽(radio buttons), 复选框(combo boxes),等等我们在Html文件中常用的功能元件,对于广大的flash开发者来说是一个不错的福音,定制的常用组件不仅减少了开发者的开发时间,提高了工作效率,而且能给flash作品带来统一的工业化的界面。

什么是组件?

  什么是组件?笔者实在是很难给组件概念下一个全面正确的定义,FlashMX的的组件概念是由flash的智能剪辑延伸而来的,比较各种FlashMX中内建的常用组件,可以归纳以下特点:

  •  拥有某种功能的电影剪辑
  •  有参数变量(属性),改变参数来改变组件的属性
  •  参数改变的情况下,组件的功能不变
  •  能够重复应用和改变组件的外观(skins)

  flashMX中内建了一些常用的组件,作为广大flash开发者的共有资源,当然你也可以自己创建自己的组件,做为第三方开发者,你也可以共享他人的组件资源,你只要拿来用就可以。为了组件适合自的开发环境,你可以改变组件的一些参数,比如一个拨盘组件(dial Components)

  你所能拨指针的范围(最大值和最小值)是一个可调的参数。从广义上说,组件是用户化的可ActionScript控制的动画。

  我们可以用属性监视面板(property inspector)来“监视”组件 只要你选中了场景的组件实体,在属性面板上就显示该组件对应的参数(属性),通过改变这些参数你可以“个性化”你的组件。

实例说明

  为了演示如何创建一个组件,我们来创建一个简单的等腰三角形状的组件,这个组件包括如下属性:底长,高,填充色以及是否显示填充色布尔值,也可以得到和获得这个组件的一些属性,比如面积。

  有的朋友可能会问创建一个三角形状的组件有什么用?我们可以用它来做什么? FlashMX中自带的一些组件都能实现某一功能,比如列表框(listboxes,)可以做一个列表,滚动条(scrollbars)能实现IE浏览器中滚动的功能。我们创建的这个组件笔者现在也不知道可以用来干什么,不过 ,创建这个三角行状的组件的方法是和任何其他组件是相同的,笔者只想通过这个例子来说明自定义组件的原理和方法。

操作步骤

1. 创建一个三角形状电影剪辑

新增一个电影剪辑(Ctrl+F8)画一等腰三角形图形,高和底边宽均为100px,并使图形的中心坐标(电影剪辑舞台的中心点)在底边上的中点重合,这样图形的大小变化就基于底边。

2 定义组件类

  这是自定义组件的关键,FlashMX新增加了自定义组件的函数#initclip #endinitclip和方法Object.registerClass(),大家可能对这些函数和方法感到陌生 。不过没有关系,我们先来看下面一段代码:

#initclipfunction TriangleClass () {     this.cobj = new Color(this);     this.update();}// Allow TriangleClass to inherit MovieClip propertiesTriangleClass.prototype = new MovieClip();// Update draws the triangle at the current base and height values.TriangleClass.prototype.update = function () {     if (this.applyTint) {         this.cobj.setRGB(this.tcolor);     }     this._xscale = 10 * this.tbase;     this._yscale = 10 * this.theight;}// Connect the class with the linkage ID for this movie clipObject.registerClass(“FTriangle”, TriangleClass);#endinitclip

  注意这段代码是是“捆绑”在三角形电影剪辑内部的第一桢上的。看到上面的代码你可能不明白,没有关系,说实话笔者看FashMX的联机的帮助文件的相关内容看了半天也不知道意思。要明白这段代码的意义,我们先必须熟悉一些面对对象语言的知识。如果你熟悉一些面对对像编程语言,比如Java C/C++,Javascript,应该知道类(class)对象(object),对象构造器(Constructor )类的继承。先来了解这些概念:

A. 创建类

  从flash5开始,actionscript就是面对对象编程语言了,和其他程序语言一样,flash中的也有类(对象)的概念,类是具有相似功能元素的集合,flash中有很多预定义类(对象),比如电影剪辑就是一个图形化的对象。我们也可以来自定义类(对象)。方法是:

  首先定义一个函数构造器

  function functionname([argument0, argument1,…argumentN]) {
    statement(s)
  }

  或
  function([argument0, argument1,…argumentN]) {
    statement(s)
  }

  我们称为函数,函数有有名函数和无名函数两种,比如有名函数function functionname( )和无名函数 function()

  然后通过关键字new定义一个对象 ,假如刚定义的构造器函数名为myfunction

  myobject=new myfunction( )

  就定义了一个类

B. 类的继承

  所有函数都有Prototype(原型)的隐藏属性,Prototype属性在函数定义的同时也自动的定义,所有的函数的Prototype属性和方法都自动的转变成隐藏在实体中的_proto_属性和方法。可以给函数的Prototype定义一个新的函数:

  myfunction.prototype.myevent = function () {…}

  注意prototype是必须的

  明白了这些概念我们再来深入的研究上面代码的意义

  自定义组件的过程主要有四步骤:

  1. 自定义组件类;
  2. 定义这个组件类的继承类, 一般是电影剪辑类;
  3. 为类添加成员和方法;
  4. 将组件注册(register)给组件类。

  我们来看看这四个步骤对应怎样的代码

#initclip and #endinitclip

  这两个指令是Flash MX 新增加的,用来自定义一个组件,这一对指令中包含的代码块就是一个定义组件的四个步骤,#initclip和 #endinitclip总是同时出现,这有点像Html的标签。#initclip ,#endinitclip代码块在.swf文件反复的播放中只执行一次,代码块在.swf文件中的任何元素载入时间轴前就已经运行了,这与flash5中在播放头运行时代码执行有所不同。

自定义组件类

function TriangleClass () {   this.cobj = new Color(this);   this.update();}

  定义一个构造函数TriangleClass,这个构造函数的成员拥有新的对象cobj和方法

定义这个组件类的继承类

  TriangleClass.prototype = new MovieClip();

  给这个函数的原型创建一个电影剪辑实体,也就是这个新创建的对象是电影剪辑的一个继承类,这样这个组件类的原形就继承了电影剪辑的所有属性和方法。

为类添加成员和方法

TriangleClass.prototype.update = function () {if (this.applyTint) {this.cobj.setRGB(this.tcolor);}
this._xscale = 10 * this.tbase;this._yscale = 10 * this.theight;

  给TriangleClass的原形(prototype)定义一个update函数,函数可以改变组件(实体其实是三角形,在后面的代码中把三角形组件注册给组件类)的色彩和底边长和高属性

将组件注册(register)给组件类

  Object.registerClass(“FTriangle”, TriangleClass);

  这是Flash MX新增加的用于自定义组件的函数,作用是使TriangleClass类与所在的组件挂接,使得组件不是MovieClip的直接对象,而是从新的类实体化得到的。Ftriangle是组件的一个linkage ID,打开linkage属性面板(右键点击库中的三角形电影剪辑,选择linkage)按下图定义。

  为了这个组件的属性更加丰富,还可以给类添加以下方法 ,下面代码是一个定义组件的全部代码:

#initclipfunction TriangleClass () {     this.cobj = new Color(this);     this.update();}// Allow TriangleClass to inherit MovieClip propertiesTriangleClass.prototype = new MovieClip();// Update draws the triangle at the current base and height values.TriangleClass.prototype.update = function () {     if (this.applyTint) {         this.cobj.setRGB(this.tcolor);     }     this._xscale = 10 * this.tbase;     this._yscale = 10 * this.theight;}TriangleClass.prototype.setBase = function (b) {     this.tbase = b;     this.update();}TriangleClass.prototype.getBase = function () {     return (this.tbase);}TriangleClass.prototype.setHeight = function (h) {     this.theight = h;     this.update();}TriangleClass.prototype.getHeight = function () {     return (this.theight);}TriangleClass.prototype.setTintColor = function (c) {     this.tcolor = c;     this.update();}TriangleClass.prototype.turnOnTint = function () {     this.applyTint = true;     this.update();}TriangleClass.prototype.getArea = function () {     return (0.5 * this.tbase * this.theight);}// Connect the class with the linkage ID for this movie clipObject.registerClass(“FTriangle”, TriangleClass);#endinitclip

3.定义组件参数

  好了,自定义组件的代码我们已经写好了,但在、定义组件的过程还没有完,这个组件还不能用,

我们必须对三角形电影剪辑(这个时候还是一个电影剪辑,还不是组件),我们还要对这个电影剪辑做

一些参数的设置。过程如下:

  右键点击库中的三角形组件,打开组件定义面板(Component Definition),如下图:

  开始对参数设置,你可以点击 图标添加参数或删除参数,你可以设置变量名字(Name),

变量(Variable),数值(value)和数值类型(Type)进行设置。

(变量名)Name变量(Variable数值(Value类型(TypeBase Lengthtbase10NumberHeighttheight10NumberTint Colortcolor0ColorApply Tint?applyTintfalseBoolean

  在面板上还有几个参数Custom UI,live ,Description,复选框选项,说明如下:

  Custom UI:给组件提供一个外部的.swf文件链接,这个文件可以显示在属性监视器中,通过改变.

Swf文件中的参数,可以直观的反映组件的外观。

  Live:和Custom UI相似,给组件提供一个外部的.swf文件链接,这个.swf文件可以不通过播放

器直接在源文件中显示组件的外观和功能,真正做到所见即所得。

  Description:说明组件的功能,作者和版权等相关信息

  Option:有两个选项 Parameters are locked 和Display in Component panel,分别表示

参数是否锁定和是否在属性监视器中显示外部的Custom UI文件。

  对于组件Custom UI和Live的定义在后面的教程中有说明,现在只有不对这两个参数进行设置,

组件的Description设置根据读者的情况而定。

  由于我们希望自定义好三角形状的组件能够出现在Components面板中,沟选第二个选项Display

in Component panel。  设置好后点击oK确定。

4.设置组件图标

  大家可能注意到FlashMX中Components面板中的一些自建的组件都有一个很漂亮的图标,比如复

选框是一个 图标,那么自定义组件的图标是怎样设定呢?下面具体说明:

  1.用图形处理工具(Photoshop ,Fireworks),绘制一个大小为20—24px像素的图形,图形

格式为GIF或PNG的透明色。

  2.导入图形,图形自动存在库中,新建一个文件夹,命名FcustomIcons,把图形拖到这个文件夹

内,并给图形命名Triangle Component(注意文件夹是必须的,文件夹的命名也是唯一的—FcustomIcons,图形的名称必须和组件的名称相同),组件的缺省图标 被自创的图标替代(如果看不到的话,关闭库面板,再重新打开),这是一个很有意思的能给组件作者带来个性的的设置。

5.设置组件属性

  右键点击库中的组件,选择元件属性面板,出现如下图形面板(如果你发现弹出的面板很小,只是

一部分,点击advance按纽,全部的元件面板就会展开),如下图:

  根据上图所示设置参数,然后确定关闭属性面板。

  从库中拖出三角形组件,放在主场景中,保存。

  这样一个简单的组件就基本上做了,但是这个时候你在你的Components面板中还看到这个组件,我们

还要做最后一道“工序”

6.安装组件

  你之所以在Components面板中看不到刚刚自定义的组件,是没有把这个组件.swf文件放在本地机器

正确的文件夹内。

  假如你的操作系统是安装在硬盘C上,和笔者一样使用的win2000操作系统,把三角形组件文件存为

C:\Documents and Settings\User\Application Data\Macromedia\Flash MX\Configuration

\Components\路径下,文件名为”Triangle”(注意是源文件而不是生成文件)。然后重新启动FlashMX,

打开Components面板,发现面板内多了一个列表Triangle,点击就发现一个红的的三角形图标,说明组件

创建成功。当然如果你的操作系统不是笔者的win2000,文件存放有所差异,下面是各种常用操作系统下组

件源文件存放的路径列表:

Windows 2000 and XPC:\Documents and Settings\User\Application Data\Macromedia\Flash MX\Configuration\Components\Windows 98 and ME C:\Windows\Application Data\Macromedia\Flash MX\Configuration\Components\Windows NTC:\WinNT\Profiles\User\Application Data\Macromedia\Flash MX\Configuration\MAC OS XHardDrive:Users:Library:Application Support:Macromedia:FlashMX:Configuration:ComponentsMac OS 9.x (multi-user)Hard Drive:Users:User:Documents:Macromedia :FlashMX:Configuration:Components:

转载请注明:夜阑小雨 » 创建Flash MX组件

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址