|
|
每当节假日，人们经常相互用手机发送祝福的信息。而现如今，微信已经成为继短信和QQ又一常用的通讯工具。越来越多的人通过微信向亲人和朋友传达节日的祝福。微信开放的特性，使得祝福不仅仅局限于语言和文字，包含图片、声音、动画和交互的电子贺卡，使节日的祝福变得更加生动有趣。让我们先来看看一个采用Mugeda平台制作的生日贺卡的实例：
http://cdn-cn.mugeda.com/weixin/ ... 680a3664e3e03000059
Mugeda制作的动画贺卡，富含动画、声音、交互等特性，而且直接在贺卡中就可以定制转发了，十分方便。你也可以通过关注微信号mucard，查看更多采用Mugeda平台制作的动画贺卡的实例。这些贺卡在2014年春节期间在微信中被传播观看了数千万次，可见动画贺卡在微信用户中十分受欢迎。
本文简单介绍了通过木疙瘩在线动画制作平台制作电子贺卡的流程，相信看完这篇文章，你也能DIY自己的贺卡。我们主要介绍了如下一些制作动画贺卡的关键问题：
- 如何制作动画；
- 如何添加音乐；
- 如何添加按钮触发行为；
- 如何定义贺卡中的可定制元素；
- 如何在开发环境中预览做好的贺卡；
- 如何在微信中查看贺卡；
- 如何在收到贺卡后定制贺卡；
下面我们通过一个实例，来介绍如何制作木疙瘩动画贺卡。我们假定本文的受众具有基本的动画制作，尤其是Flash动画制作的基础。如果你没有Flash动画基础，也可以按照本文快速掌握最基本的流程。对于其中涉及的动画设计部分，建议你参考本系列教程的其它文章了解进一步的信息。
创建画布
这一步的结果见：https://cn.mugeda.com/animation/edit/1863bfb4
访问www.mugeda.com 打开木疙瘩网站，注册或登录账户。点击页面左上角的“创建作品”。
选择动画类型为“css3动画”，画布大小为320×374。
制作动画
这一步的结果见：https://cn.mugeda.com/animation/edit/216fbd27
增加背景图层：点击下图中位置1所示图层名区域，将图层名改为“背景”。确保选中图中位置2的位置（即第1帧），使用工具栏上的图片工具（位置3），打开图片上传对话框，上传背景图片。
将图片放到合适位置。
增加祝福文字：点击下图中位置1新建一个图层，更改图层名称为“文字”，右击图层2的第2帧，选择“插入关键帧”。
在背景层添加帧，使得两个图层对齐。
确保文字层的第二帧处于选中状态，点击工具栏文字按钮，在画布合适位置输入文字。为了在下面的步骤中引用到这个文本框，在图中位置3，将其命名为to。
用同样的方法创建greeting文本框。
增加背景声音
Mugeda贺卡支持两种形式的声音：
1. 自动播放的背景声音：贺卡的接收者打开贺卡，声音作为背景音乐与贺卡一起开始播放。
2. 事件触发的背景声音。声音伴随着用户的点击事件开始播放。例如：当用户点击贺卡中的爆竹图片，开始播放爆竹声音。
在设计贺卡的声音部分时，需要考虑到移动平台本身的限制：
1. 现在市面中的大多数智能手机，只支持在浏览器中播放一个声音。因此，为了贺卡能在大多数手机上正常播放，一般只添加一个背景音乐即可。
2. 在少部分手机的微信中，或者在智能手机的默认浏览器中，背景声音可能无法自动播放，这是智能手机的设计限制造成的。这时候的解决办法有两个：一是Mugeda自动提供了一个声音播放按钮，可以通过点击这个按钮触发声音的播放（如下图）；二是设计者可以考虑在剧情中引入一个点击事件（例如一个按钮），用户点击后即可开始播放背景音乐。
另外，考虑到手机的性能和移动网络，声音建议采用MP3格式，单声道，在不影响效果的情况下，尽量降低码率，如32Kbps，一般声音的大小在100KB左右。
如图，在工具栏上选择声音工具，选择并上传一段声音，点击“添加到元件库”。我们希望这段声音在画面进入时开始播放。
回到第一帧，选中画布中的背景图片，下方面板中的动作改为“行为”，然后点击“编辑”按钮。
在出现的对话框中，点击“电话功能”、“播放声音”，再将事件改为“出现”。这两步操作的意思是，当第一帧的背景图片出现时，播放声音。点击“编辑”按钮。
在出现的对话框中选择刚刚上传的声音1，并将其命名为BGM。
增加声音图标
由于在部分手机上，声音无法自动播放，所以需要增加一个声音小图标，使得这些用户可以点击这个图标，手动开始播放声音。
点击文件、导入、脚本。
新增脚本文件
https://cn.mugeda.com/mugeda_client_utils/js/card_common.js
这个脚本中包含了贺卡的常用操作。
点击工具栏上的脚本按钮（上图位置1），输入如下代码：
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener('imageReady', function(){
MugedaCard.showAudioControl(mugeda.scene, 'BGM', false);
});
其中，上图位置2的BGM是我们在上一步“增加背景声音”中为声音的命名，位置3的false代表，当声音没有开始播放时，不隐藏声音图标。
调整动画为不循环。如图，点击“循环"选项，将前面的√去掉。
在微信中预览动画。点击保存按钮，保存动画。然后点击二维码按钮。用微信中的扫一扫功能，预览动画。
丰富我们的贺卡
在上面的基础上，继续增加贺卡的功能。
增加一个打开贺卡的按钮
这一步的结果见：https://cn.mugeda.com/animation/edit/66655044
上面的贺卡，当用户打开贺卡时，能直接看到贺卡的内容。这里增加一个按钮，当用户点击这个按钮时，才显示贺卡内容。
建立一个新的图层“红心”，然后再这个图层的第一帧插入一个心形图片，删除第二帧，将动作改为“行为”，点击编辑。
在弹出的对话框，我们增加2个行为：首先是当红心出现时，动画暂停；然后当点击红心，动画继续播放。
保存后在微信中预览，点击红心，出现祝福文字。
点击按钮后播放声音
这一步的结果见：https://cn.mugeda.com/animation/edit/ed925221
在上一步的基础上，点击红心按钮播放声音。首先选中背景图片，打开行为对话框，将“出现并播放声音"删除。
选中红心，打开行为对话框，增加行为“点击并播放声音”。
选择声音1，并命名为BGM。
保存后在微信中预览，这时候，当只有点击红心后才出现声音。
增加可定制的元素
这一步的结果见：https://cn.mugeda.com/animation/edit/ed925221
在上一步的基础上，收到贺卡的用户，可以修改贺卡中的内容。在这个例子中，定制“to”和“greeting”两个文本框。
增加定制按钮。新建一个图层，增加“定制按钮”。
编辑表单
选中上述“定制”按钮，将动作改为“表单”。点击编辑。填写提交目标为回调函数，回调函数为createCustomParameters（稍后我们会定义这个函数）。点击“添加表单项”。
增加2个表单项目。
定义脚本
打开脚本编辑器，输入下面的脚本。图中的formTo与formGreeting与表单编辑器中的名称一致；收卡人、祝词与表单编辑器中的描述一致；to、greeting和文本框的名称一致。
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener('imageReady', function(){
MugedaCard.showAudioControl(mugeda.scene, 'BGM', false);
// 定制表单
// 将表单项和文本框绑定在一起
MugedaCard.defineCustomParameters(mugeda.scene, [
{ formName: 'formTo', formDescription: '收卡人', mugedaObj: [{ name: 'to', attribute: 'text' }] },
{ formName: 'formGreeting', formDescription: '祝词', mugedaObj: [{ name: 'greeting', attribute: 'text' }] }
]);
// 定义回调函数
window.createCustomParameters = function (data, evt) {
finalizeCustomParameters(data, evt);
}
});
保存后在微信中预览效果。
定义微信转发内容
这一步的结果见：https://cn.mugeda.com/animation/edit/22d8e5a8
默认情况下，当点击微信的“发送给朋友”时，对方收到的是一个普通的链接。这一步，将使得链接变为一个缩略图、一个标题和一段文字。
如上图，在上面步骤的基础上，增加脚本：
// 定义微信转发内容
MugedaCard.defineWechatParameters({
"img_url": "http://cdn-cn.mugeda.com/weixin/card/cards/52f57274e8ad7e4536000095/thumbnail_128.png",
"img_width": 128,
"img_height": 128,
"desc": data.formGreeting.value || '节日快乐',
"title": "给"+ (data.formTo.value || '小明') + "的贺卡"
});
其中：
img_url: 缩略图的地址
img_width: 缩略图的宽度
img_height： 缩略图的高度
desc：描述
title：标题
data.fromGreeting.value是用户在表单中填写的祝词。|| '节日快乐' 代表当用户没有填写表单的时候，默认为节日快乐。
保存后在微信转发，可以看到预览效果。 |
|
发表于 2015-8-25 14:48:26
