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

       };

   });

});


分享给朋友:
------分隔线----------------------------
您可能感兴趣的文章:
随机阅读: