[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');

       };

       window.createCustomParameters = function (data) {

           finalizeCustomParameters(data);

       };

   });

});