[Mugeda HTML5技术教程之19]制作可定制贺卡
本文档通过一个实例介绍可定制贺卡的动画的制作过程。实例包含两部分：
1. 动画部分：介绍动画制作过程中如何给祝福词和落款的文本对象命名，如何给定制按钮定义表单动作。
2. 代码部分：介绍贺卡的脚本逻辑的编写。
例程编辑地址：
https://cn.mugeda.com/animation/edit/0326f6a1
例程预览地址：
https://cn.mugeda.com/client/preview_css3.html?id=0326f6a1
动画部分
动画需要注意修改的地方：
1. 给祝福词和落款等文本对象命名；
2. 给定制按钮定义表单动作。
给祝福词和落款等文本对象命名
下面的例子说明了祝福词和落款的命名过程：
给祝福词命名：选中祝福词所在的组，双击进入组中，选中祝福词文本对象，在属性栏中给该文本对象命名为“greetings”。
给落款命名：同样选中落款文字所在的组，双击进入组中，选中落款文本对象，在属性栏中给它命名为“from”。
用同样的方式，可以为更多的对象进行命名。
给定制按钮定义表单动作
选中定制按钮，在属性栏中的动作中选择“表单”，然后点编辑。
在弹出的编辑表单对话框中依次做如下操作：输入表单名称；选择提交方式为”回调函数”回调函数名称为”createCustomParameters“；确认消息是定制成功后弹出对话框中显示的信息，可以根据需要编写；表单项\添加表单项，来添加表单的表单项。
编辑祝福词表单项：添加表单项后弹出的编辑表单项对话框中，依次做如下操作：名称输入greetings；描述：编辑祝福词；类型选择文本域；取值是祝福词的默认值，可以根据需要填写。完成上面操作后点击保存。
编辑落款人表单项：编辑完祝福词表单项后，再次点击添加表单项，来添加落款人表单项。在弹出的对话框中，依次做：名称输入”from“；描述：”发送人落款“；类型选输入框；取值是落款人的默认值，可以根据需要填写。完成后点击保存。
用同样的方法可以输入更多的表单项目。
表单编辑完成后，点击确认。这样动画中所有的修改都做完了，保存动画。
代码部分
引入外部库文件
我们将贺卡的常用操作封装成了库文件card_common.js，使用这个库文件，简化代码的编写。
首先需要将公共代码库的引入我们的IDE：点击“文件”、“导入”、“脚本”，引入公共脚本：
点击“增加”，然后输入https://www.mugeda.com/third_party/general-usage/js/card_common_mini.js，确定。
编写用户代码
点击工具栏上的脚本按钮，输入用户代码。请参考例程中的代码，以此为基础，修改用应用于自己的贺卡中。
绑定表单和动画元素
绑定表单的意思是，保持表单的内容和动画中的某些元素的内容始终保持一样。如下面例子，defineCustomParameters函数绑定了表单和动画元素。它接受一个mugeda.scene对象和一个数组。
defineCustomParameters(mugeda.scene, [
{ formName: ‘to‘, formDescription: ‘收信人‘, mugedaObj: [{ name: ‘to‘, attribute: ‘text‘ }] },
{ formName: ‘greetings‘, formDescription: ‘编辑祝福词‘, mugedaObj: [{ name: ‘greetings‘, attribute: ‘text‘ }] },
{ formName: ‘from‘, formDescription: ‘发送人落款‘, mugedaObj: [{ name: ‘from‘, attribute: ‘text‘ }, { Name: ‘from2‘, attribute: ‘text‘ }] },
{ formName: ‘url‘, formDescription: ‘发送人网站‘, mugedaObj: [{ name: ‘‘, attribute: ‘data‘ }] }
]);
数组的意思是这样的，它formName和formDescrition对应于表单中的‘名称’和‘描述’字段，mugedaObj是一个数组，对应于主舞台上的对象。name指的是这个对象的名字，attribute指的是这个对象的属性（如上面的name: ‘to‘, attribute: ‘text‘指的是mugeda.scene.getObjectByName(‘to‘).text）。这样就将一个动画元素和表单元素绑定在了一起，它们的值会保持一样的。
不过这样有一个问题是，如果要引用元件实例中的一个物体，怎么办。可以用”/”分隔层级，例如name: ‘obj1/obj2’指的是名字为obj1元件的实例中的名字为obj2的元素。
attribute = data是一个特殊的值，它不绑定任何动画元素，例如上面的例子中的最后一行，效果是，表单中的url字段，被绑定到了全局变量data.url.value，可以在脚本中直接设值或者取值。
定义微信转发和共享所需要的参数
defineWechatParameters({
"img_url": "https://mugeda-mobile.mugeda.com/weixin/logo_128.png",
"img_width": 128,
"img_height": 128,
"desc": "木疙瘩自己定义的描述",
"title": "木疙瘩自己定义的标题"
});
就像上面那样，img_url、img_width、img_height，定义了缩略图的地址、长、宽，desc和title是描述和标题。
定义表单提交后的行为
通常，用户提交表单后，会调用用户自定义的回调函数，用户可以在回调函数中做一些想要的操作。在完成用户自定操作后，调用finalizeCustomParameters(data)方法，card_common.js将完成贺卡定制的后续操作。
例如：
window.createCustomParameters = function (data) {
finalizeCustomParameters(data);
}
使用
通过网页中的script标签，或者IDE中的载入外部脚本功能，引入https://www.mugeda.com/third_party/general-usage/js/card_common_mini.js
例子
action脚本的例子：
Mugeda.script.push(function (mugeda) {
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener("renderReady", function () {
defineCustomParameters(mugeda.scene, [
{ formName: ‘to‘, formDescription: ‘收信人‘, mugedaObj: [{ name: ‘to‘, attribute: ‘text‘ }] },
{ formName: ‘greetings‘, formDescription: ‘编辑祝福词‘, mugedaObj: [{ name: ‘greetings‘, attribute: ‘text‘ }] },
{ formName: ‘from‘, formDescription: ‘发送人落款‘, mugedaObj: [{ name: ‘from‘, attribute: ‘text‘ }, { name: ‘from2‘, attribute: ‘text‘ }] },
{ formName: ‘url‘, formDescription: ‘发送人网站‘, mugedaObj: [{ name: ‘‘, attribute: ‘data‘ }] }
]);
defineWechatParameters({
"img_url": "https://mugeda-mobile.mugeda.com/weixin/logo_128.png",
"img_width": 128,
"img_height": 128,
"desc": "木疙瘩自己定义的描述",
"title": "木疙瘩自己定义的标题"
});
// 加载音频
var audio = loadAudio(‘52e374dbe8ad7e2968000099.mp3‘);
// 点击屏幕后，播放音频
window.light = function () {
try{
audio.play(1);
}catch(e){
audio.play(0);
}
};
window.directLinks = function () {
window.open(data[‘url‘].value, ‘_blank‘);
};
});
});
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
