[Mugeda HTML5技术教程之19]制作可定制贺卡
来源:互联网 发布:经济学博士申请 知乎 编辑:程序博客网 时间:2024/04/30 08: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);
};
});
});
- [Mugeda HTML5技术教程之19]制作可定制贺卡
- [Mugeda HTML5技术教程之11]Mugeda API简介
- [Mugeda HTML5技术教程之12]制作跨屏互动应用
- [Mugeda HTML5技术教程之14]案例分析:制作网页游戏
- [Mugeda HTML5技术教程之15]案例分析:制作移动教育课件
- [Mugeda HTML5技术教程之16]案例分析:制作跨屏互动游戏
- [Mugeda HTML5技术教程之1] HTML5: 生存还是毁灭
- [Mugeda HTML5技术教程之2] Mugeda HTML5富媒体平台简介
- [Mugeda HTML5技术教程之4] Studio 概述
- [Mugeda HTML5技术教程之5] 创建新作品
- [Mugeda HTML5技术教程之6]添加元素
- [Mugeda HTML5技术教程之7]添加动画
- [Mugeda HTML5技术教程之8]添加行为
- [Mugeda HTML5技术教程之9]使用元件
- [Mugeda HTML5技术教程之10]发布内容
- [Mugeda HTML5技术教程之13]链接的添加方式
- [Mugeda HTML5技术教程之3] Hello World: 第一个Mugeda动画
- [Mugeda HTML5技术教程之17] 理解Mugeda访问统计结果
- java日志,需要知道的几件事
- 产业转型季运营商现离职潮
- AAC规格(LC,HE,HEv2)及性能对比
- 计算机视觉与图像处理、模式识别、机器学习学科之间的关系
- Qt模块化笔记之network——写第一个Tcp程序(2)
- [Mugeda HTML5技术教程之19]制作可定制贺卡
- 2名女子各投半张1元纸钞乘公交 败露后投诉司机
- mysql在索引上查询非索引类型的值导致的慢查询
- 一个前端与后端分离的架构实例
- linux 学习路线(初级到高级) 转载 SelfImprovement 文章
- 什么是句柄?为什么会有句柄?HANDLE
- vForge学习笔记(开始基础、环境、天空盒、粒子系统、雾)
- 【OpenCV学习笔记】【函数学习】四(origin+imageData+cvcopy()函数+CvMemStorage 类型+CvPoint类型)
- HelperFileUtil打开文件