1、首先创建
空白
ActionScript3.0flash文档
然后保存文件命名为:"FLA_ComponentX".//名称可以任意
2、CTRL+F8
新建空白剪辑取名为"Avatar"进入编辑第真上我们画矩形框(Stroke style我们选择"hairline"最细线条)不用填充定要记得设置坐标为(00)位置固定.3、CTRL+F8
继续新建个空白剪辑取名为"NormalSkin"点开高级设置把"导出ActionScript""导出到第真"两项打勾
中填入"NormalSkin"最后把"启动9-scale缩放引导线"选项打勾最后确定进入编辑画填充圆角矩形设置颜色为灰色摆放位置(00)可以拖动9-scale缩放引导线如图对齐作用是让圆角矩形进行所放时候保持 4个定位角不变形这个矩形用来做按钮普通模式皮肤.4、CTRL+F8
继续新建个空白剪辑同上取名为"OverSkin"点开高级设置把"导出ActionScript""导出到第帧"两项打勾中填入"OverSkin"最后把"启动9-scale缩放引导线"选项打勾最后确定进入辑画填充圆角矩形设置颜色为红色摆放位置(00)这个矩形用来做按钮鼠标经过模式皮肤.5、CTRL+F8
新建个空白剪辑(这下我们建立就是最终按钮组件上面建立都是这按钮组成部分)取名为"MyButton"点开高级设置把"导出ActionScript""导出到第真"两项打勾中填入"MyButton"然后确定进入编辑第层取名为"avatar"然后第帧上我们从库中把"Avatar"元件拖放到场景中放置到(00)位置这真内容在我们最后运行组件时候是看不到作用主要是用来控制整个组件宽高.然后我们新建立层取名"skins"在第 2帧上我们把库中"NormalSkin"和"OverSkin"组件拖进来位置可以随意摆放这上面元件是我们将来使用组件时候双击进入能够进行设置.6、点中库中
"MyButton"元件右键菜单中选"Component Definition"(组件定义)选项会进入窗口把类名填上"MyButton"再把"diaplay in Components panel"选项打上钩"Tool tiptext"中填入组件名称我这里填"MyButton".这里还有设置组件preview(预览)效果还有图标等其他内容大家可根据需要自行设置
7、到这步
我们会发现还缺少个外部自定义组件代码也就是上面"MyButton"元件连接"MyButton"类.由于类中导入了组件类所以我们要设置FLASH CS3Path(类路径)选编辑-->参数设置-->ActionScript-->ActionScript3.0添加新类搜索路径我这里为"D:Program FilesAdobeAdobe Flash CS3enConfigurationComponent SourceActionScript 3.0User Interface"大家根据各自情况设置好路径
新建ActionScript文档填入如下代码: /************MyButton.as**************/
package{
importflash.display.*;
importflash.events.*;
importflash.system.ApplicationDo
;
importfl.core.UIComponent;
publicMyButtonextendsUIComponent{
privatevarnowSkin:MovieClip;
privatevarthisDo:ApplicationDo;
publicfunctionMyButton
{
super;
trace("MyButton");
}
overrideprotectedfunctiondraw:void{
(nowSkin
null){
thisDo=loaderInfo.applicationDo;
varDef
try{
Def=thisDo.getDefinition(getNormalSkinName);}
catch(e:ReferenceError){
trace("没有在库中找到相关类!")
;
}
nowSkin=
DefasMovieClip;
nowSkin.addEventListener(MouseEvent.MOUSE_OVERmouseOverHandler);
addChild(nowSkin);
}
nowSkin.width=width;
nowSkin.height=height;
}
protectedfunctionmouseOverHandler(e:MouseEvent):void{
trace("over");
removeChild(nowSkin);
varDef=thisDo.getDefinition(getOverSkinName);
nowSkin=DefasMovieClip;
addChild(nowSkin);
nowSkin.addEventListener(MouseEvent.MOUSE_OUTmouseOutHandler);
draw;
}
protectedfunctionmouseOutHandler(e:MouseEvent):void{
trace("out");
removeChild(nowSkin);
varDef=thisDo.getDefinition(getNormalSkinName);
nowSkin=DefasMovieClip;
addChild(nowSkin);
nowSkin.addEventListener(MouseEvent.MOUSE_OVERmouseOverHandler);
draw;
}
protectedfunctiongetNormalSkinName:String{
"NormalSkin";
}
protectedfunctiongetOverSkinName:String{
"OverSkin";
}
}
}代码对我们建立
按钮组件进行些设置我这里只简单设置了鼠标经过和离开接着保存名为"MyButto.as"位于我们上面建立"FLA_ComponentX.fla"同目录下8、到这里其实还没有结束
我们还需要制作个"ComponentShim"组件这个组件作用是把外部自定义组件代码编译成个影片剪辑.那如何建立这个"ComponentShim"组件呢很简单创建空白ActionScript3.0flash文档CTRL+F8建立空白剪辑设置名称为"MyButton"点开高级设置把"导出ActionScript""导出到第帧"两项打勾中填入"MyButton"CTRL+F8再建立空白剪辑设置名称为"ComponentShim source"点开高级设置把"导出ActionScript""导出到第帧"两项打勾中填入"ComponentShim"确定进入编辑把库中"MyButton"元件拖放到场景中.然后点中库中"ComponentShim source"右键弹出菜单选"Convert to Compiled Clip"选项这时候库中就会生成个"ComponentShim source"组件前面会有组件图标我们把这个组件名称改为"ComponentShim"
这样"ComponentShim"组件就制作完成了9、切回"FLA_ComponentX.fla"
继续在"MyButton"元件第2帧上新建层取名为"ComponentShim"然后将刚才库中"ComponentShim"组件拖到这层第2帧上10、最后CTRL+S保存
这样fla形态组件就制作完毕关闭整个Flash软件Software.11、把"FLA_ComponentX.fla"文件复制到以下路径:"D:Program FilesAdobeAdobe Flash CS3enConfigurationComponents"
这里大家也根据各自情况设置.12、我们再次打开flash软件Software
新建3.0空白文档选出组件选择面板会发现多了个FLA_ComponentX组件包点下会下划出"MyButton"组件现在我们可把组件拖到场景上观看效果完成
最新评论