|
|
一、邀请卡与普通贺卡的区别
目前，邀请卡在动画的制作流程上普通贺卡的基本无异，只在业务流程上与普通卡片有所区别，体现在：
1. 邀请卡拥有“定制”、“参与”、“查看参与”三个必要按钮，而普通贺卡只有“定制”按钮；
2. 邀请卡通常在发出去后，不允许再次被定制。
3. 邀请卡可能内嵌有百度地图。
4. “查看参与”按钮可能具有权限控制，可以设定为只有发卡人才能看到参与人员（私有），或所有人可以查看参与人员（公有）。
二、制作要点
参考动画编辑地址：https://cn.mugeda.com/animation/edit/70bb6adc
实例预览地址：
https://cn.mugeda.com/client/preview_css3.html?id=70bb6adc
邀请卡没有纳入自动化定制流程，因此目前所有逻辑采用脚本实现。在已做好的动画基础上，按照以下步骤加入逻辑。
1. 确保拥有“定制”、“回复”、“查看回复”按钮，并考虑定制按钮被隐藏的情形。
2. 定制按钮：
定制按钮对应的“行为”为“表单”。在原有表单基础上，增加“权限”，根据需要可以增加“地址”、“允许定制”字段。
2.1“权限”字段
建议使用列表框，取值私有、公有的顺序如下图，对文字内容不做限定，只需保证私有选项在前，公有选项在后。
2.2 “允许定制”字段
建议使用列表框，对选项内容做肯定和否定选择。
2.3 “地址”字段
使用输入框，对内容不做要求。
2.4 绑定表单到舞台物体：
与普通卡一样，下面的脚本定义了“定制”表单项目和舞台物体的映射。可参考：http://support.mugeda.com/?page_id=2292
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' }] },
{
formName: 'hotel', formDescription: '聚会地点', mugedaObj: [
{ name: 'hotel', attribute: 'text' },
{ name: 'ad2/hotel', attribute: 'text' },
]
},
{ formName: 'formTime', formDescription: '聚餐时间', mugedaObj: [{ name: 'time', attribute: 'text' }] },
{
formName: 'tel', formDescription: '联系电话', mugedaObj: [
{ name: 'tel', attribute: 'text' },
{ name: 'ad2/tel', attribute: 'text' }
]
},
{//这部分代码对应于表单2.3“地址”字段，在例子中，绑定了舞台上的两个文本。
formName: 'address', formDescription: '聚会地址', mugedaObj: [
{ name: 'address', attribute: 'text' },
{ name: 'ad2/address', attribute: 'text' }
]
},
{
formName: 'img', formDescription: '',
userUndefined: function () {
scene.getObjectByName("imgFrame").visible=false;
},
mugedaObj: [{ name: 'img', attribute: 'signature' }]
},
{ //这部分代码对应于邀请卡表单 2.1“权限”字段，其attribute被设定为特殊的receipt。
formName: '__receipt_permission',
formDescription: '回执权限',
mugedaObj: [{ name: null, attribute: 'receipt' }],
},
//这部分代码对应于表单2.2“允许定制”字段，其attribute设定为data。
{ formName: 'custom', formDescription: '允許定制发送人', mugedaObj: [{ name: 'custom', attribute: 'data' }] }
]);
除普通卡片的字段以外，还有对应于邀请卡表单 2.1“权限”字段、对应于表单2.2“允许定制”字段和对应于表单2.3“地址”字段，在例子中，绑定了舞台上的两个文本。
2.5 处理“允许定制”字段
在2.4脚本的后面，对表单2.2“允许定制”字段做处理。如用户选择“否”，则隐藏2. 定制按钮。
if ((data['custom'].value || "") === "否") {
scene.getObjectByName('customBtn').visible = false;
}
其中，custom为2.2 “允许定制”字段中定义的名称，customBtn为第1节中，“定制”按钮的名称。“否”应于custom为2.2 “允许定制”中，与定义的否定选项内容相同。
2.6 增加地图
2.6.1参考示例动画，在画布定义地图的外框。
2.6.2 载入百度地图库文件
在脚本的最开头，加入下面的代码。
var scpt = document.createElement("script");
scpt.type = "text/javascript";
scpt.src = "http://api0.map.bdimg.com/getscript?v=1.4";
document.getElementsByTagName('body')[0].appendChild(scpt);
var baiduLoaded = false;
scpt.onload = function () {
baiduLoaded = true;
};
2.6.3 控制地图限制的位置
在renderReady或imageReady事件内增加如下代码：
scene.addEventListener('enterframe', function () {
if (!baiduInited && this.currentId == 104 && baiduLoaded) {//104改为地图所在的帧号
setTimeout(function () {
initMap();//创建和初始化地图
});
baiduInited = true;
}
});
//创建和初始化地图函数：
function initMap() {
createWrap();//动态生成dom
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
}
//创建dom元素
function createWrap() {
var wrap = document.createElement('div');
wrap.id = 'dituContent';
wrap.style.cssText = 'width: 100%; height: 100%;'
scene.getObjectByName('mapframe').dom.innerHTML = '';//"mapframe"为2.6.1中方框的名字。
scene.getObjectByName('mapframe').dom.appendChild(wrap);
}
//创建地图函数：
function createMap() {
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
// 代码区1#
}
//地图事件设置函数：
function setMapEvent() {
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
map.enableContinuousZoom(); // 开启连续缩放效果
map.enableInertialDragging(); // 开启惯性拖拽效果
}
//地图控件添加函数：
function addMapControl() {
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
//var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
//map.addControl(ctrl_ove);
//向地图中添加比例尺控件
// var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
// map.addControl(ctrl_sca);
}
2.6.4 定义地图的显示位置。
2.6.4.1地图的中心点在固定地点：
打开网站：http://api.map.baidu.com/lbsapi/getpoint/ ，找到需要的坐标，将坐标点替换下面代码中的坐标参数。
var point = new BMap.Point(116.416665,39.915267);//定义一个中心点坐标
var start_point = new BMap.Marker(point);
map.addOverlay(start_point);
map.panTo(point);
map.centerAndZoom(point, 14);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
再将上面的代码放置于2.6.3中的代码区1#部分。
2.6.4.2 地图的中心点绑定表单字段
若希望地图显示的地点，与表单2.3中的地址字段相同。使用以下代码，其中address与表单2.3中的地址字段的的名称相同。
if(MugedaCard.data.address && MugedaCard.data.address.value===undefined){
var point = new BMap.Point(116.416665,39.915267);//定义一个中心点坐标（默认北京）
var start_point = new BMap.Marker(point);
map.addOverlay(start_point);
map.panTo(point);
map.centerAndZoom(point, 14);//设定地图的中心点和坐标并将地图显示在地图容器中
} else if (MugedaCard.data.address && MugedaCard.data.address.value!==undefined){
var address = MugedaCard.data.address.value;
var myGeo = new BMap.Geocoder();
myGeo.getPoint(address, function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}
});
}
window.map = map;//将map变量存储在全局
}
再将上面的代码放置于2.6.3中的代码区1#部分。
3. “参与”按钮
在舞台上，定义参与按钮的“行为”为“回调函数”。
QQ截图20150722145805
在代码中，定义回调函数：
window.reply = function(){
cardFrame.replyReceiptCard();
}
4. “查看参与”按钮
在舞台上，定义参与按钮的“行为”为“回调函数”。
在代码中，定义回调函数：
window.viewReply = function(){
cardFrame.showReceiptList();
}
5. 其他支持性代码
这部分代码与普通卡片无异。
5.1 定义转发信息
defineWechatParameters({
"img_url": "http://cdn-cn.mugeda.com/weixin/card/cards/53f2c3d5a3664e3b5d0000db/thumbnail_128.jpg",
"img_width": 128,
"img_height": 128,
"desc": formVal_greetings,
"title": formVal_to + "特邀你来聚聚！"
});
5.2 定制处理
window.createCustomParameters = function (data, evt) {
finalizeCustomParameters(data, evt);
}
6. 预览确认效果。 |
|
发表于 2015-8-25 18:48:28
