如何制作[*.fla]形态的组件(Component)
发布时间：2020-12-15 07:08:22 所属栏目：百科 来源：网络整理
导读：下面给大家介绍下如何制作[*.fla]形态的组件(Component),这种组件区别于SWC组件,能够双击进入组件里面编辑. //应该是CS3新增加的一种组件形态 以制作一个MyButton组件为例子. 分如下几个步骤: 1.首先创建一空白的ActionScript3.0的flash文档,然后保存文件命
|
下面给大家介绍下如何制作[*.fla]形态的组件(Component),这种组件区别于SWC组件,能够双击进入组件里面编辑. //应该是CS3新增加的一种组件形态 以制作一个MyButton组件为例子. 分如下几个步骤: 1.首先创建一空白的ActionScript3.0的flash文档,然后保存文件命名为:"FLA_ComponentX".//名称可以任意 2.CTRL+F8,新建一空白剪辑，取名为"Avatar",进入编辑,第一真上我们画一矩形框(Stroke style我们选择"hairline",最细的线条),不用填充,一定要记得设置坐标为(0,0),位置固定的. 3.CTRL+F8,继续新建个空白剪辑,取名为"NormalSkin",点开高级设置，把"导出ActionScript","导出到第一真"两项打勾,class中填入"NormalSkin",最后把 "启动9-scale缩放的引导线"选项打勾，最后确定,画一填充圆角矩形,设置颜色为灰色,摆放位置(0,可以拖动9-scale缩放的引导线,如图对齐， 作用是让圆角矩形进行所放的时候保持四个定位的角不变形,这个矩形用来做按钮的普通模式的皮肤 4.CTRL+F8,同上，取名为"OverSkin",class中填入"OverSkin",设置颜色为红色,这个矩形用来做按钮的鼠标经过模式的皮肤 5.CTRL+F8,新建个空白剪辑(这下我们建立的就是最终的按钮组件，上面建立的都是这按钮的组成部分),取名为"MyButton",class中填入"MyButton",然后确定，进入编辑,第一层取名为"avatar",然后第一真上我们从库中把"Avatar"元件拖放到场景中， 放置到(0,0)位置,这一真的内容在我们最后运行组件的时候是看不到的，作用主要是用来控制整个组件的宽高。 然后我们新建立一层，取名"skins",在第二真上我们把库中的"NormalSkin"和"OverSkin"组件拖进来,位置可以随意摆放,这上面的元件 是我们将来使用组件的时候，双击进入能够进行设置的。 6.点中库中的"MyButton"元件，右键菜单中选"Component Definition"(组件定义)选项,会进入一窗口,把类名填上"MyButton",再把"diaplay in Components panel"选项打上钩,"Tool tiptext"中填入组件名称,我这里填"MyButton".这里还有设置组件 的preview(预览)效果还有图标等，其他内容大家可根据需要自行设置. 7.到这步，我们会发现还缺少一个外部的自定义组件的代码,也就是上面"MyButton"元件连接的"MyButton"类. 由于类中导入了组件类,所以我们要设置FLASH CS3的classPath(类路径),选编辑-->参数设置-->ActionScript-->ActionScript3.0， 添加一新的类搜索路径,我这里为 "D:Program FilesAdobeAdobe Flash CS3enConfigurationComponent SourceActionScript 3.0User Interface" //大家根据各自情况来设置好路径 新建ActionScript文档，填入如下代码: /************MyButton.as**************/ [Copy to clipboard] [ - ]CODE: package{ import flash.display.*; import flash.events.*; import flash.system.ApplicationDomain; import fl.core.UIComponent; public class MyButton extends UIComponent { ? private var nowSkin:MovieClip; ? private var thisDomain:ApplicationDomain; ? public function MyButton() { ? ?super(); ? } ? override protected function draw():void { ? ?if (nowSkin==null) { ? ? thisDomain=loaderInfo.applicationDomain; ? ? var classDef ? ? try{ ? ? classDef=thisDomain.getDefinition("NormalSkin"); ? ? } ? ? catch(e:ReferenceError){ ? ? ?trace("没有在库中找到相关的类!") ? ? ?return; ? ? ?} ? ? nowSkin=new classDef as MovieClip; ? ? nowSkin.addEventListener(MouseEvent.MOUSE_OVER,mouSEOverHandler); ? ? addChild(nowSkin); ? ?} ? ?nowSkin.width=width; ? ?nowSkin.height=height; ? } ? protected function mouSEOverHandler(e:MouseEvent):void{ ? ?removeChild(nowSkin); ? ?var classDef=thisDomain.getDefinition("OverSkin"); ? ?nowSkin=new classDef as MovieClip; ? ?addChild(nowSkin); ? ?nowSkin.addEventListener(MouseEvent.MOUSE_OUT,mouSEOutHandler); ? ?draw(); ? } ? protected function mouSEOutHandler(e:MouseEvent):void{ ? ?removeChild(nowSkin); ? ?var classDef=thisDomain.getDefinition(getNormalSkinName()); ? ?nowSkin=new classDef as MovieClip; ? ?addChild(nowSkin); ? ?nowSkin.addEventListener(MouseEvent.MOUSE_OVER,mouSEOverHandler); ? ?draw(); ? } } } /********************************************************/ 代码的作用对我们建立的按钮组件进行一些设置,我这里只简单设置了鼠标经过和离开。 接着保存,名为"MyButto.as"，位于我们上面建立的"FLA_ComponentX.fla"同目录下. 6.到这里其实还没有结束,我们还需要制作一个"ComponentShim"的组件，这个组件的作用是把外部的自定义组件代码编译成一个影片剪辑。 那怎么建立这个"ComponentShim"组件呢，很简单,创建一空白的ActionScript3.0的flash文档,CTRL+F8建立一空白剪辑,设置名称为"MyButton",CTRL+F8再建立一空白剪辑,设置名称为"ComponentShim source",class中填入"ComponentShim",确定,把库中的"MyButton"元件拖放到场景中.(保存同目录下)然后点中库中的"ComponentShim source"右键弹出菜单选"Convert to Compiled Clip" 选项,这时候库中就会生成一个"ComponentShim source"的组件，前面会有组件图标,我们把这个组件的名称改为"ComponentShim"。 这样"ComponentShim"组件就制作完成。 7.切回"FLA_ComponentX.fla",继续在"MyButton"元件的第2真上新建一层，取名为"ComponentShim",然后将刚才库中的"ComponentShim"组件拖到这层的第2真上。 8.最后CTRL+S,保存,这样fla形态的组件就制作完毕,关闭整个Flash软件. 9.把"FLA_ComponentX.fla"文件复制到以下路径: "D:Program FilesAdobeAdobe Flash CS3enConfigurationComponents" //这里大家也根据各自情况设置. 10.我们再次打开flash软件，新建3.0空白文档,选出组件选择面板，会发现多了一个FLA_ComponentX组件包，点下会下划出 "MyButton"的组件，现在我们可把组件拖到场景上观看效果。 As3组件的内部结构2008-11-06 10:53As3组件的内部结构组件的内部结构 As3的组件只有在Adobe Flash Player version 9.0.28.0及其以后的版本才能支持，这些组件只有在flash cs3或者更高级别的平台上才能使用。 As3组件的外观(UI)基于FLA文件和基于SWC文件的两种，其区别在于：基于FLA文件的组件可以由用户自定义其外观，而后者则不可以。 基于FLA的组件 对于As3基于FLA的组件，当你把它拖到舞台上以后可以双击它，看到组件的“皮肤”，当然，也可以对其进行更改。 下面图中看到的就是基于FLAd的组件Button拖到舞台上被双击后，我看到的景象： 为了提高运行速度，基于FLA的组件内部也包含了一个SWF，其中是已经编译好了的as代码。它被放在第二帧的ComponentShim层里面。 另外：要想在代码中使用组件，必须先把组件放到库中并在其linkage属性中选择“在第一帧输出”和“连接到代码”，如果要想利用代码创建组件，还必须把组件相应的类给import进来。 基于SWF的组件 基本上用于自定义组件的时候用的，在这里不多讲了，flash组件中也有这样的组件。比如：FLVPlayback组件 ? ?
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |