功能详解
【经验分享】点击复制文本效果
原创分享 • qq3a937a8af6 回复了问题 • 4 人关注 • 3 个回复 • 4702 次浏览 • 2022-02-10 11:42
【代码分享】屏蔽长按图片出现的保存图片系统菜单
原创分享 • wxb95416ac84 回复了问题 • 13 人关注 • 5 个回复 • 11643 次浏览 • 2021-11-25 17:14
【经验分享】在app中如何处理发布链接的分享信息
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 1813 次浏览 • 2021-11-08 11:45
mugeda作品的分享信息保存在了window.weiParam变量中,可以在作品加载完成后读取。用户在app中可以在webview中注入js的方法 查看全部
mugeda作品的分享信息保存在了window.weiParam变量中,可以在作品加载完成后读取。用户在app中可以在webview中注入js的方法读取这个变量,必要时可修改分享信息。
以安卓为例,在Java中,定义接口:
private inner class JavaGetFromJavascript{
@JavascriptInterface
fun getShareDataStr(shareDataStr: String?) {
//shareDataStr 即为 html 文件中的变量参数值
Log.d("Mugeda","test:$shareDataStr")
}
}
然后将这个方法注入webview中
webView.addJavascriptInterface(JavaGetFromJavascript(),"android_js")
在需要获取的时候,调用这个方法
webView.loadUrl("javascript:window.android_js.getShareDataStr(JSON.stringify(window.weiParam))")
iOS的方法类似,但使用的函数略有不同,可以自行搜索一下。
【代码分享】强制横屏下的视频在iOS无控制条问题
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 2067 次浏览 • 2021-06-25 17:00
大概现象如下图
现在有一个临时的解决办法,就是把以下的代码复制到作品的代码框中
document.styleSheets[0].insertRule('[data 查看全部
大概现象如下图
现在有一个临时的解决办法,就是把以下的代码复制到作品的代码框中
document.styleSheets[0].insertRule('[data-type="stage"],body,.mugine_scene_clip{ overflow: visible!important; }', 0);
修复后的效果如下:
你可以使用苹果手机访问以下链接看一下效果
https://6.u.mgd5.com/c/n20h/x4hw/index.html
【代码分享】使用代码处理大量数据显示的效果
原创分享 • ddbackhome 发表了文章 • 1 个评论 • 2199 次浏览 • 2021-05-14 18:15
https://dag.h5.xeknow.com/s/7HOQd
里面使用到的代码放到这里了,你可以打开下边的链接另存一下
https://www.mugeda.com/animation/edit/8d5bd33 查看全部
https://dag.h5.xeknow.com/s/7HOQd
里面使用到的代码放到这里了,你可以打开下边的链接另存一下
https://www.mugeda.com/animation/edit/8d5bd33a
或者在手机上打开这个链接观察效果
https://6.u.mgd5.com/c/n20h/lqlm/index.html
【代码分享】随机不重复跳帧或跳页面
原创分享 • qq213bcdccd2 回复了问题 • 9 人关注 • 3 个回复 • 10521 次浏览 • 2021-05-13 11:11
【已解决】api 修改文本字体颜色
BUG反馈 • wx2199026830 回复了问题 • 4 人关注 • 2 个回复 • 6053 次浏览 • 2021-04-01 17:58
制作格式为天/时/分/秒的倒计时动画
案例分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 2317 次浏览 • 2021-03-30 14:35
欢迎交流谢谢
有没有api导入地图的教程
问题答疑 • ddbackhome 回复了问题 • 1 人关注 • 1 个回复 • 2566 次浏览 • 2021-03-26 14:40
【代码分享】自定义视频的进度条(控制块)
原创分享 • lx_mgd 发表了文章 • 0 个评论 • 4563 次浏览 • 2020-08-21 17:30
发布链接
https://6.u.mgd5.com/c/n20h/hwr3/index.html
扫码看效果
使用的代码如下mugeda.addEventListener("renderready", function(){
var scene 查看全部
发布链接
https://6.u.mgd5.com/c/n20h/hwr3/index.html
扫码看效果
使用的代码如下
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var myvideo = scene.getObjectByName('播放的视频');
var videodom;
var durationBtn = scene.getObjectByName('进度');
window.changeduration = function(){
videodom = myvideo.dom.childNodes[3];
console.log('btn position changed');
videodom.currentTime = videodom.duration*(scene.getObjectByName('进度').left - 100)/(500-100)
}
window.getvideoduration = function(){
if(!myvideo.dom) return;
videodom = myvideo.dom.childNodes[3];
console.log(videodom)
}
window.myScript = function(){
if(!videodom) return;
console.log(videodom.currentTime)
durationBtn.left = 100+(500-100)*videodom.currentTime/videodom.duration
}
});
代码里使用到aObject对象的dom属性。在木疙瘩里舞台上每个取了名的物体都可以用api来定位到,定位的就是它的aObject对象,aObject对象可以使用dom属性获取元素实际的dom。
api地址
https://card.mugeda.com/mugedaApiDoc/index.html
作品中添加代码的地方在
在以下公众号回复“视频进度块”,获取本文的源文件链接
2.9.1 API的应用:在动画中添加代码
原创分享 • m8499519 回复了问题 • 6 人关注 • 1 个回复 • 12564 次浏览 • 2020-06-08 08:43
【代码分享】点屏幕时出现爱心动画效果
原创分享 • lx_mgd 发表了文章 • 3 个评论 • 3774 次浏览 • 2020-05-20 14:48
可扫这个码在手机上看效果
主要是用了这些代码,从元件库里新建元件并添加到舞台,然后设置舞台上元件实例的坐标,最后删除它mugeda.addEventListener("renderready", function(){
var scene = muge 查看全部
可扫这个码在手机上看效果
主要是用了这些代码,从元件库里新建元件并添加到舞台,然后设置舞台上元件实例的坐标,最后删除它
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var dianjiquyu = scene.getObjectByName("点击区域");
dianjiquyu.addEventListener("click", function(e){
// 为元件创建新的实例,并增加到主舞台
var aObject = mugeda.createInstanceOfSymbol("爱心");
// this指向aObject
// 提供inputX和inputY属性,获取相对于舞台的坐标值
var x = e.inputX;
var y = e.inputY;
scene.appendChild(aObject);
aObject.left = x - aObject.width/2;
aObject.top = y - aObject.height;
// 1秒后删除刚刚加入的物体
setTimeout(function(){
scene.removeChild(aObject);
}, 1000);
});
//scene.appendChild(aObject, behaindAObject, pageIndex);
//可以将物体添加到舞台上
//第二个参数behaindAObject是舞台上某个动画元素,这个参数也可以是null
//第三个参数是页面的编号
});
api文档: https://card.mugeda.com/mugedaApiDoc/index.html
在以下公众号回复”爱心效果“,获取本文的源文件链接
【代码分享】使用回调函数去掉发布链接里多余的参数
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 3046 次浏览 • 2020-02-10 14:13
比如,绘画板画好后转给新用户,不想让新用户看到上一个用户绘画板的内容。
解决方法是某些地方添加回调函数 reseturl,让用户转发时去掉多余的参数 查看全部
比如,绘画板画好后转给新用户,不想让新用户看到上一个用户绘画板的内容。
解决方法是某些地方添加回调函数 reseturl,让用户转发时去掉多余的参数。其中发布链接那里需要修改成你作品的发布链接。
mugeda.addEventListener("renderready", function(){
window.reseturl = function(){
defineWechatParameters({
url_callback: function(){
return "发布链接";
}
});
}
});
下边是demo链接,可以打开另存https://www.mugeda.com/animation/edit/95388534
【代码分享】模拟手机通话时间效果
原创分享 • ddbackhome 发表了文章 • 2 个评论 • 3145 次浏览 • 2020-01-16 15:07
可以打开另存一下
效果如图:
【代码分享】禁止长按保存,鼠标右键另存图片
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 3733 次浏览 • 2019-10-21 15:41
查看地址
源码地址:https://cn.mugeda.com/animation/edit/c376fde2
把下面代码复制到脚本窗口,把你要禁止长按保存的图片命名,微信号替换为你命名的图片名字。
mugeda.addEventListe 查看全部
查看地址
源码地址:https://cn.mugeda.com/animation/edit/c376fde2
把下面代码复制到脚本窗口,把你要禁止长按保存的图片命名,微信号替换为你命名的图片名字。
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
scene.getObjectByName('微信号').dom.style.cssText += "pointer-events:none";
});
【经验分享】装13印章生成器
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 2831 次浏览 • 2019-10-13 01:31
【经验分享】木疙瘩制作行走的时钟效果
原创分享 • qqf35714a4fc 发表了文章 • 3 个评论 • 3389 次浏览 • 2019-10-07 15:03
木疙瘩制作如需源码请留言
【代码分享】代码实现倒计时效果
原创分享 • qqf35714a4fc 发表了文章 • 1 个评论 • 2928 次浏览 • 2019-10-07 12:09
【代码分享】ios12 ios13系统部分手机键盘无法自动收回问题
问题答疑 • ddbackhome 发表了文章 • 0 个评论 • 5000 次浏览 • 2019-09-25 17:50
window.addEventListener('focusin', function(){
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
});
查看全部
【代码分享】首行缩进2个文字(2个空格)
原创分享 • lx_mgd 发表了文章 • 1 个评论 • 4496 次浏览 • 2019-06-20 10:53
windo 查看全部
【代码分享】超少代码实现到特定时间活动结束的效果
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 3612 次浏览 • 2019-06-10 23:45
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();// 查看全部
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();//返回自 1970 年 1 月 1 日以来的毫秒数:
var aObject = scene.getObjectByName("time");
mugeda.scene.getObjectByName('time').text = x;
});
我们先看看案例效果点击查看案例,到了明天下午1点钟后就会显示活动已结束。
把以上代码复制到你的作品js里面,然后在舞台新建一个文本命名为time。
然后你就会发现time文本就会变成 一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。
【代码分享】设置作品只能在微信浏览器打开
原创分享 • qqf35714a4fc 发表了文章 • 1 个评论 • 3792 次浏览 • 2019-06-09 17:26
var isWeixin = ua.indexOf('micromessenger') != -1; //这里判断是不是微信浏览器
if (!isWeix 查看全部
var isWeixin = ua.indexOf('micromessenger') != -1; //这里判断是不是微信浏览器
if (!isWeixin) {
document.head.innerHTML = '<title>请在微信客户端打开</title>'; //可更改里面的提示文字
document.body.innerHTML = '<h3 style="text-align: center">请在微信客户端打开 </h3><div align="center"><img src="http://t.im/h4w1" width="300" /></div>';
}
//页面提示内容 src=""双引号里面的网址可更换为自己作品的二维码链接
//if (!isWeixin) {} 这个是执行内容
复制上方加粗代码到mugeda代码框里即可,有问题可回复或点击我空间联系。
【代码分享】检测用户屏幕是否是横的,并给出需要横屏的提示
原创分享 • lx_mgd 发表了文章 • 0 个评论 • 4937 次浏览 • 2019-06-06 14:29
作品用到了代码去检测屏幕是否是横的,如果是横的,就把提示移开,如果是竖直的,就把提示移到舞台中。
提示是一张图片,你可以自己修改替换,提示的图片最好加上怎样打开屏幕锁的说明,因为不是所有用户都明白打开屏幕锁是什么意思mugeda.addEventListene 查看全部
作品用到了代码去检测屏幕是否是横的,如果是横的,就把提示移开,如果是竖直的,就把提示移到舞台中。
提示是一张图片,你可以自己修改替换,提示的图片最好加上怎样打开屏幕锁的说明,因为不是所有用户都明白打开屏幕锁是什么意思
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var tips = scene.getObjectByName('提示');
var screenDirection = window.matchMedia("(orientation: portrait)");
screenDirection.addListener(handleOrientationChange);
handleOrientationChange(screenDirection);
function handleOrientationChange(screenDirection) {
if (screenDirection.matches) {
/* 竖屏处理事件 */
tips.top = 0;
} else {
/* 横屏屏处理事件 */
tips.top = -350;
}
}
});
在以下公众号回复“横屏提示”,获取本文的源文件链接
【代码分享】H5里实现微信点击图片全屏预览预览效果,可双指缩放图片
原创分享 • lx_mgd 发表了文章 • 6 个评论 • 7853 次浏览 • 2019-05-31 14:17
https://e.u.mgd5.com/c/ams9/uni0/index.html
下边的是内容里需要添加的代码mugeda.addEventListener("renderready", function(){
var 查看全部
https://e.u.mgd5.com/c/ams9/uni0/index.html
下边的是内容里需要添加的代码
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
window.checkuseragent = function(){
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
return false;
}else{
return true;
}
}
var picArr = ;
window.getimgurl = function(){
var max = 5; //这里的数字是需要按你自己图片的数量修改的
var j;
var picdom;
for (i = 0; i < max; i++) {
j = i+1;
picdom = scene.getObjectByName('pic'+j).dom;
picArr.push(picdom.src);
}
}
window.customview = function(){
if(checkuseragent()){
wx.previewImage({
current: picArr[0],
urls: picArr
});
}
}
});
需要注意的:
1.把需要用户点击的元素放在舞台中,并上添加点击时执行回调函数customview,其他图片需要上传到素材库后再放到舞台外,图片命名规则是pic1,pic2,pic3,pic4等,本例子中是把pic1设置成需要用户点击的物体了
2.图片加载需要时间,所以最好使用一个定时器来初始化预览效果,定时器加回调函数getimgurl,等待定时器结束时执行回调
3.这个效果只在微信里生效,其他地方无效
4.如果你的图片数量不是5,那么需要在代码里把 var max = 5; 这里的数字修改成你图片的数量
在以下公众号回复“全屏预览图片”,获取本文的源文件链接
【代码分享】判断多选控件选中了几个
原创分享 • lx_mgd 发表了文章 • 0 个评论 • 4212 次浏览 • 2019-05-15 14:07
mugeda.addEventListener("renderready", function(){
var scene = muge 查看全部
如果选中了3个,点“验证”文本时,会判断出选中了3个,不然会判断没选中3个。“验证”文本上设置了回调函数,会去检查“复选框1”的内容。
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var fuxuankuang = scene.getObjectByName('复选框1');
window.selectchecklist = function(){
var _arr = fuxuankuang.text.split(';');
if(_arr.length == 3){
scene.getObjectByName('判断结果').text = '已选3个';
}else{
scene.getObjectByName('判断结果').text = '不是3个'
}
}
});
在以下公众号回复“判断多选”,获取本文的源文件链接
【代码分享】在木疙瘩中添加雷达图的方法
原创分享 • ddbackhome 发表了文章 • 2 个评论 • 5773 次浏览 • 2019-03-13 11:34
发布链接:https://6.u.mgd5.com/c/n20h/q8hp/index.html
发布链接预览:
打开下边的链接并另存
https://www.mugeda.com/animation/edit 查看全部
发布链接:https://6.u.mgd5.com/c/n20h/q8hp/index.html
发布链接预览:
打开下边的链接并另存
https://www.mugeda.com/animation/edit/6b202b89
作品中用到了js来生成canvas,并在canvas中绘制了雷达图,两个文本上分别设置了两个回调函数,点击文本,即可调用回调函数生成雷达图。代码使用 scene.getObjectByName('chartContainer').dom 把mugeda对象转换成dom对象,然后才可以使用原生js来进行操作,这里是api文档,可以参考一下:http://card.mugeda.com/mugedaApiDoc/index.html
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var chartContainer = scene.getObjectByName('chartContainer').dom;
var mW = 300; //雷达图的宽
var mH = 300; //雷达图的高
var mData = [['速度', 77],['力量', 72],['防守', 46],['射门', 50],['传球', 80],['耐力', 60]];
var mCount = mData.length; //边数
var mCenter = mW /2; //中心点
var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
var mAngle = Math.PI * 2 / mCount; //角度
var mCtx = null;
var mColorPolygon = '#B8B8B8'; //多边形颜色
var mColorLines = '#B8B8B8'; //顶点连线颜色
var mColorText = '#000000';
var canvas;
//回调函数
window.createRadarChat = function(){
//初始化
// (function(){
// var canvas = document.createElement('canvas');
// document.body.appendChild(canvas);
// chartContainer.appendChild(canvas);
chartContainer.innerHTML = '<canvas id="myCart"></canvas>';
canvas = document.getElementById('myCart');
canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');
drawPolygon(mCtx);
drawLines(mCtx);
drawText(mCtx);
drawRegion(mCtx);
drawCircle(mCtx);
// })();
}
//回调函数
window.changeChart = function(){
mData = [['速度', 70],['力量', 32],['防守', 16],['射门', 90],['传球', 80],['耐力', 60]];
chartContainer.innerHTML = '<canvas id="myCart"></canvas>';
canvas = document.getElementById('myCart');
canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');
drawPolygon(mCtx);
drawLines(mCtx);
drawText(mCtx);
drawRegion(mCtx);
drawCircle(mCtx);
}
// 绘制多边形边
function drawPolygon(ctx){
ctx.save();
ctx.strokeStyle = mColorPolygon;
var r = mRadius/ mCount; //单位半径
//画6个圈
for(var i = 0; i < mCount; i ++){
ctx.beginPath();
var currR = r * ( i + 1); //当前半径
//画6条边
for(var j = 0; j < mCount; j ++){
var x = mCenter + currR * Math.cos(mAngle * j);
var y = mCenter + currR * Math.sin(mAngle * j);
ctx.lineTo(x, y);
}
ctx.closePath()
ctx.stroke();
}
ctx.restore();
}
//顶点连线
function drawLines(ctx){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = mColorLines;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
ctx.moveTo(mCenter, mCenter);
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
}
//绘制文本
function drawText(ctx){
ctx.save();
var fontSize = mCenter / 12;
ctx.font = fontSize + 'px Microsoft Yahei';
ctx.fillStyle = mColorText;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
ctx.fillText(mData[i][0], x, y + fontSize);
}else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
}else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
}else{
ctx.fillText(mData[i][0], x, y);
}
}
ctx.restore();
}
//绘制数据区域
function drawRegion(ctx){
ctx.save();
ctx.beginPath();
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
ctx.restore();
}
//画点
function drawCircle(ctx){
ctx.save();
var r = mCenter / 30;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
ctx.fill();
}
ctx.restore();
}
// 代码参考以下博客
// 原文:https://blog.csdn.net/lecepin/ ... 66711
});
【Mugeda简约版】※Mugeda简约版编辑界面介绍※
回复原创分享 • lichun761014 回复了问题 • 3 人关注 • 1 个回复 • 8841 次浏览 • 2017-05-16 12:16
【经验分享】木疙瘩转盘抽奖模板分析和修改办法
原创分享 • lx_mgd 发表了文章 • 0 个评论 • 4627 次浏览 • 2021-03-23 11:57
木疙瘩自带了一些模板,比如这个转盘抽奖的模板
但是这个转盘模板的中奖行为设置并不是真正的抽奖控件,而是使用随机数来模拟的中奖效果,如果你使用这个模板来抽奖,需要修改成真正的抽奖控件,下边的链接是对这个模板的分析和修改办法。
木疙瘩转盘抽奖模板分析和修改办法
查看全部
木疙瘩自带了一些模板,比如这个转盘抽奖的模板
但是这个转盘模板的中奖行为设置并不是真正的抽奖控件,而是使用随机数来模拟的中奖效果,如果你使用这个模板来抽奖,需要修改成真正的抽奖控件,下边的链接是对这个模板的分析和修改办法。
木疙瘩转盘抽奖模板分析和修改办法
你可以在以下公众号回复“转盘抽奖模板”,得到视频中修改好的作品链接
【新功能】图文编辑器的动态数据功能简介
新功能需求 • lx_mgd 发表了文章 • 0 个评论 • 5975 次浏览 • 2021-02-05 17:48
你可以把它理解为一个特殊的数据库,数据库里的数据是你账号里的作品(特指发布链接)、图片、视频。这些数据可以显示在图文作品的固定区域,这个固定区域可以动态地更新内容。
举个例子,某些图文作品的固定区域需要时不时地新增、减少或者定期更新内容,如果是以前,用户会多 查看全部
你可以把它理解为一个特殊的数据库,数据库里的数据是你账号里的作品(特指发布链接)、图片、视频。这些数据可以显示在图文作品的固定区域,这个固定区域可以动态地更新内容。
举个例子,某些图文作品的固定区域需要时不时地新增、减少或者定期更新内容,如果是以前,用户会多次经历这样的步骤:编辑图文作品,保存,重新发布,编辑图文作品,保存,重新发布等等。
新闻网站里有个今日话题的栏目,网站运营者只用设置好这个区域叫做“今日话题”,里面显示7条数据,以后就只用在新闻库里一直更新新闻就好,今日话题栏目会自动从新闻库里获取最新的7条显示。动态数据功能跟这个效果是一致的。
当作品规划好动态更新区域后,用户不用编辑图文作品本身,也不用多次重新发布图文作品,只需要去编辑和更新动态数据库里的内容,图文作品的动态区域会自动从动态数据库获取内容并更新到图文作品的发布链接里。
要完成这个功能,需要三个步骤
1.账号设置动态数据源
2.图文作品设置动态更新区域
3.后期维护数据源
下面的例子,把账号里的作品(特指发布链接)作为数据源。
第一步:设置动态数据源
动态数据的入口在左边
新增文件夹,取名为“春节专用”
进入文件夹
点添加内容
可以从已发布的作品中选择几个作品添加到此文件夹里
第二步:图文作品设置动态更新区域
新建图文作品
在左侧菜单里,动态数据被分类到了“样式”里面。点加号,将此样式添加到舞台中,这样就添加好了动态数据区域
在舞台中,选中某个动态数据样式中间的任意元素,再点设置按钮。
数据来源选择第一步新建的“春节专用”,显示数量选5,意思是从“春节专用”这个数据库里选5条显示在这个区域。
保存一下,点预览,可以看到动态数据区域的这里显示了3条,而不是5条。因为数据源里只有3条信息。
到这时,可以保存并发布此图文了。再次提示,微信公众号不支持动态数据,所以即使推到微信草稿箱了,微信那边也不显示,建议使用发布作品。
第三步:编辑数据源,发布链接自动更新
回到动态数据菜单,编辑某个文件夹里面的内容,比如进入“春节专用”文件夹
可在这里拖动作品,改变排序,它在发布链接里的顺序也会改变,新增或减少作品数量,发布链接里显示的作品数量也会新增或减少。
这边已经添加了7个作品
打开第二步最后生成的发布链接,发现已经有显示5条信息了。因为第二步设置动态区域时规定了这里显示数量为5个。
至此就完成了作品(发布链接)作为动态数据,显示到图文的发布链接里,并维护和更新数据的作品。
图片和视频作为动态数据,显示到图文作品发布链接里的方法跟上述的类似,你可以自己试一下。
微信公众号文章群发以后不能动态显示部分内容。而动态数据功能会在图文内容的部分区域动态更新,所以有这个功能的图文作品推送到微信那边后,会被微信去掉这部分的功能,导致不能正常使用。
所以,动态数据功能目前暂时只支持图文编辑器,发布作品得到发布链接来使用,而不支持推送到公众号。如果需要在公众号访问这个作品的发布链接,可以把生成好的发布链接添加到微信的原文链接或者把发布链接的二维码图片放到微信公众号文章里当图片。
4.1.18【新功能教程】视频的跳转并播放功能(精确到秒)
原创分享 • qz 发表了文章 • 6 个评论 • 11202 次浏览 • 2019-11-08 19:21
木疙瘩可以方便的插入一个视频,并控制视频的播放、暂停、停止等。
现在,木疙瘩可以更自由的控制视频播放,可以跳转到视频的某个时间点并播放哦!
下面来看具体操作方法吧!
第一步给放置在舞台的视频命名
第 查看全部
木疙瘩可以方便的插入一个视频,并控制视频的播放、暂停、停止等。
现在,木疙瘩可以更自由的控制视频播放,可以跳转到视频的某个时间点并播放哦!
下面来看具体操作方法吧!
第一步给放置在舞台的视频命名
第二步设置视频的跳转行为:1.打开行为弹窗——2.媒体播放控制——3.控制视频——4.编辑行为——5.选择视频——设置控制方式为:跳转并播放或跳转并暂停——设置跳转位置(时间单位为秒)——6.确定。这样我们就设置完成了。
音频的跳转同理,如下图
学会了吗?这功能是不是很实用?赶快尝试吧!
4.1.17【新功能教程】VR全景视频
原创分享 • qz 发表了文章 • 1 个评论 • 12356 次浏览 • 2019-10-31 11:15
木疙瘩的虚拟现实VR功能大家都用过,添加一张全景图片即可实现VR全景效果。
现在,木疙瘩对全景视频开放支持了!
这都得利于广大木友的热情投票参与,感谢木友们积极提出宝贵的新功能建议,让木疙瘩不断地加入用户最需要的新功 查看全部
木疙瘩的虚拟现实VR功能大家都用过,添加一张全景图片即可实现VR全景效果。
现在,木疙瘩对全景视频开放支持了!
这都得利于广大木友的热情投票参与,感谢木友们积极提出宝贵的新功能建议,让木疙瘩不断地加入用户最需要的新功能,笔芯~
下面来看在虚拟现实控件中,如何使用并控制全景视频吧!
第一步:在工具栏选择全景组件并添加至舞台
第二步:添加视频长宽尺寸比例符合2:1或6:1的全景视频
系统提示:全景视频场景,由于不同的浏览器策略不同,在用户和内容交互之前,不同浏览器的策略可能不允许视频自动播放。因此,如果你想要视频自动播放,需要在播放视频之前,在内容流程中引导用户进行“点击”等操作后在播放全景视频。
第三步:引导用户进行“点击”等操作我们可以在全景视频页面的前面一页增加一个引导页,通过用户点击跳转至全景页面
注:上面只是一个例子,你也可以通过增加添加其他帧或页面的交互行为来引导用户跳转至全景视频的播放。
第四步:添加完成,我们可以像设置全景图片一样给全景视频设置一些交互热点及其他配置
马上去试试吧!
4.1.9【新功能教程】改变行为属性增加边框颜色和填充色
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 7150 次浏览 • 2018-08-17 17:32
现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.
演示地址: http://cn.mugeda.com/animation/edit/a604a6ac
首先在页面上绘制两个图形以及两个对应的行为按钮,,一个按 查看全部
现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.
演示地址: http://cn.mugeda.com/animation/edit/a604a6ac
首先在页面上绘制两个图形以及两个对应的行为按钮,,一个按钮用来改变对应图形的填充色,另一个按钮用来改变对应图形的边框颜色。
然后分别给被改变填充色和边框颜色的两个图形分别命名。
然后分别给下面的两个按钮绑定上行为。
然后在作品里点击这个按钮,对应元素的填充色就会变为行为里所选择的颜色。
改变元素边框颜色的行为操作与之类似,选择另一个按钮,,然后点击改变元素属性,点击编辑。
4.1.16【新功能教程】屏幕适配范围与安全框
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 5392 次浏览 • 2018-08-17 17:26
为了方便设计师更好的编辑内容,防止内容在设备上超出可见显示范围(安全框),木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角,可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。
选择后 查看全部
为了方便设计师更好的编辑内容,防止内容在设备上超出可见显示范围(安全框),木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角,可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。
选择后,物体上会出现一个方框指示指定设备的可见范围(安全框)。如果舞台上添加的内容超出了指定设备的安全框,方框会显示为红色以提示设计师调整元素位置。如果没有元素超出安全框,方框会显示为绿色。
4.1.15【新功能教程】计数器组件
原创分享 • mingyueliu 发表了文章 • 2 个评论 • 8640 次浏览 • 2018-08-17 17:24
通常我们在制作作品时,涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图,我们点击计数器工具在舞台上添加一个计数器,设置默认值和计数值。
我们先在舞台上添加相关按钮素材。如图,添加两个文本框分别命名为 查看全部
通常我们在制作作品时,涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图,我们点击计数器工具在舞台上添加一个计数器,设置默认值和计数值。
我们先在舞台上添加相关按钮素材。如图,添加两个文本框分别命名为“显示计数”“获取计数”
为“增加计数”按钮添加“增加计数”行为
数据服务→增加计数→触发条件:点击→设置参数
计数器名称:“计数器1”
显示计数元素:“显示计数”
同理,为“获取计数”按钮添加“获取计数”行为。可点击预览观看效果。
双击舞台上的计数器弹出“计数器”对话框,点击“管理实时数据”,可以修改当前数据。
4.1.14【新功能教程】运动曲线编辑
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6229 次浏览 • 2018-08-17 17:21
编辑地址:http://prerelease.mugeda.com/a ... 15485
预览地址:http://prerelease.mugeda.com/c ... 15485
为了支持更加灵活的编辑运动曲线,关键 查看全部
编辑地址:http://prerelease.mugeda.com/a ... 15485
预览地址:http://prerelease.mugeda.com/c ... 15485
为了支持更加灵活的编辑运动曲线,关键帧动画增加了“自定义运动曲线”的功能。
选择“自定义运动曲线”后,可以点击编辑对运动曲线进行编辑。以一个包含有2个关键帧的基本动画为例,打开“编辑运动曲线”对话框后可以在左侧点击选择想要编辑的运动曲线,即可在右侧显示出运动曲线并可进行编辑。
第一次打开时,默认曲线是线性,并且显示为半透明,表示还没有指定任何曲线。可以从“预置曲线”中选择一个曲线类型,这时候,曲线会显示为实线。运动曲线的横坐标代表时间,纵坐标代表运动进度(即0%指100%)。每一段运动曲线由首尾的两个绿色节点表示,左下角的绿色节点代表对应关键帧动画段的开始时刻和运动进度0%,右上角的绿色节点代表对应关键帧动画段的结束时刻和运动进度100%。运动曲线可以通过拖动红色控制节点进行编辑,实现不同运动特征的运动。
添加了运动曲线后,左侧对应的的属性列表会显示一个关闭按钮,表明该属性已经指定了一个自定义的运动曲线。每一个列出的属性(例如宽度、透明度、滤镜等),都可以定义自己独立的运动曲线。如果没有指定,对应的属性就会采用默认属性的运动曲线。如果没有指定默认运动曲线,则会采用线性运动曲线。
如果关键帧动画包含有多个关键帧动画,运动曲线会显示为多段。每一段都由首尾两个节点来分割。其中,显示为绿色的为当前正在编辑的关键帧动画段。点击任意曲线段可以切换当前编辑的动画段。如果想要只显示当前动画段,可以切换曲线上方“显示所有关键帧”选项。
运动曲线编辑目前支持关键帧动画和变形动画,并支持如下参数的动画曲线定制:
x偏移量
y偏移量
宽度
高度
透明度
旋转角度
滤镜(阴影、模糊、灰度、亮度、对比度、色调等)
变形动画参数(字体大小、字间距、行间距、填充颜色、线条颜色等)
下面是2个常见的运动曲线的例子:
自由落体:自由落体可以由在水平方向上的匀速运动和在垂直方向上的加速运动来模拟。其运动曲线类似下图:
缓动进度:这是一种常见的进度显示方式,即一个减速移动,连接一个匀速缓动,再连接一个加速移动。其运动曲线类似下图:
上述提供的演示地址包含了这两种运动的实现方法和效果。
在连接多段运动曲线时需要注意,由于控制自由度的限制,有时候为了实现平滑的多段运动,需要调整关键帧的位置或者每一段运动的位移数值,以便对运动速度进行微调,实现想要达到的运动效果。
4.1.13【新功能教程】文字变形动画
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 5665 次浏览 • 2018-08-17 17:15
编辑地址(第4页):
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html
变形动画新增 查看全部
编辑地址(第4页):
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html
变形动画新增对文本的支持。即:可以为文本添加变形动画, 并在关键帧上设置文本的属性进行变形动画。目前支持的文本变形动画的属性有:
字体颜色
字体大小
行间距
字间距
滤镜效果
4.1.12【新功能教程】投票、抽奖实时数据管理
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 5911 次浏览 • 2018-08-17 17:13
设计师可以通过实时数据管理的功能,用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).
演示地址:http://cn.mugeda.com/animation/edit/ed60ab32 查看全部
设计师可以通过实时数据管理的功能,用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).
演示地址:http://cn.mugeda.com/animation/edit/ed60ab32
以投票为例:
现在舞台上已经生成了一个标准的投票组件以及给一个按钮绑定了抽奖的行为,当用户发生投票行为时,被投票目标的票数会在当前基础上+1,,假如现在有北京,上海两个投票对象,假如北京目前所得票数为100,现在我们想把北京所得的票数改为50,通过实时数据管理即可轻松修改。
首先点击管理实时数据,会弹出如下对话框。
我们现在想要把北京改为50票,只需要把北京后面的输入框内的数值改为50,点击确定即可。
保存以后,打开作品,会发现北京的票数由原先票数改变成了50票。
同样的,通过抽奖组件的实时数据管理,可以去修改奖品的剩余数量以及领奖码的剩余数量。
4.1.11【新功能教程】首页加载的静态导出
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 4874 次浏览 • 2018-08-17 17:11
动画导出器在动画导出的时候做一层检测,当用了首页作为加载的时候,符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后,当用户打开动画,可以在第一时间看到首页,减少了以前黑屏的时间。
目前符合条件的动画特征 查看全部
动画导出器在动画导出的时候做一层检测,当用了首页作为加载的时候,符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后,当用户打开动画,可以在第一时间看到首页,减少了以前黑屏的时间。
目前符合条件的动画特征:
组件只包含文字、图片、形状、元件、组
填充效果只支持纯色填充、图片背景填充
动画支持关键帧、形状、变形的线性变换
支持组件的2d定位
所有使用的图片的总面积不大于某个阈值
支持新的预定义文字——加载进度,取值0到100
文字组件支持非云字体
屏幕适配支持默认
不含有交互特性(如行为、预置动画)
动画在导出或者发布的时候,如果上述条件满足,则自动将首页作为加载做静态导出。可以观察到的特征是:
导出:在导出包里出现了新的文件msl.js。
发布:查看msl.js链接的存在性。例如:发布地址是http://xxx.xxx.xxx/xxxx/xxxx/index.html,查看http://xxx.xxx.xxx/xxxx/xxxx/msl.js的存在性。
4.1.10【新功能教程】滤镜效果
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 5592 次浏览 • 2018-08-17 17:09
编辑地址:
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html
目前支持如下滤镜:
查看全部
编辑地址:
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html
目前支持如下滤镜:
灰度 Grayscle
亮度 Brightness
对比度 Contrast
饱和度 Saturation
色调 Hue
模糊 Blur
阴影 Shadow
泛黄做旧 Sepia
负片 Invert
为了给元素添加滤镜,选中元素后,在属性面板选择想要添加的滤镜效果,然后点击“+”图标即可将指定的滤镜效果添加到元素上。
根据需要,可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如,模糊滤镜可以调节模糊程度。其中,阴影滤镜包含有多个参数,可以将鼠标移动到阴影效果上显示参数并编辑。
如果不想要使用一个已经添加的滤镜效果,可以通过对应的滤镜效果右侧的删除按钮移除。
滤镜效果也支持动画。即:在关键帧上添加的滤镜效果,可以在关键帧动画时进行插值,实现滤镜效果的动画渲染。在动画插值过程中,如果某个关键帧上没有添加指定的滤镜,那么将会采用默认滤镜效果参数进行插值。例如:
如果第1个关键帧添加了100%的灰度,而第2个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认灰度(0%)进行插值;
如果第2个关键帧添加了8像素的模糊,而第1个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认模糊(0像素,即没有模糊)进行插值;
其它的以此类推。
目前滤镜效果的局限是,由于安卓和iOS手机上仅支持CSS滤镜,不支持Canvas滤镜,
因此手机上需要用Canvas进行渲染的部分(例如遮罩和截屏)暂时不支持滤镜,这一
点在使用中需要注意。
4.1.8【新功能教程】辅助线功能
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 5787 次浏览 • 2018-08-17 16:12
辅助线的作用于photoshop里的辅助线功能类似,开启辅助线后,设计师在拖拽物体至辅助线时,物体会自动停靠至辅助线位置,,辅助线仅仅在ide内可以看到,,渲染后的作品看不到辅助线。
具体使用方法
1、绘制一 查看全部
辅助线的作用于photoshop里的辅助线功能类似,开启辅助线后,设计师在拖拽物体至辅助线时,物体会自动停靠至辅助线位置,,辅助线仅仅在ide内可以看到,,渲染后的作品看不到辅助线。
具体使用方法
1、绘制一条辅助线
按住alt键不要松开,然后在舞台上拖拽鼠标左键至某个方向(上下左右),即可绘制出一条辅助线。
当鼠标移动至辅助线附近时,即可拖动辅助线,同时显示鼠标所在辅助线的坐标.
2、隐藏\显示辅助线及删除辅助线的几种方法
拖拽辅助线的时候,,和pshotoshop一样,将辅助线拖拽至舞台之外即可删除辅助线。
也可以通过视图菜单中的删除所有辅助线进行删除。
点击工具栏中的辅助线工具,即可快速显示\隐藏所有辅助线,也可以通过视图菜单中的辅助线选项,来进行显示隐藏。
3.2.2 UI原型:用Mugeda巧做GIF
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 3844 次浏览 • 2018-08-17 16:02
下面我们介绍用Mugeda导出GIF动画的方法:
1.序列帧动画导出GIF动画
如图,以序列帧形式添加几张图片至舞台,使其形成一个整体的动画效果
导出GIF动画步骤:文件→导出→GIF动画注意:所有导出只支持导出第1 查看全部
下面我们介绍用Mugeda导出GIF动画的方法:
1.序列帧动画导出GIF动画
如图,以序列帧形式添加几张图片至舞台,使其形成一个整体的动画效果
导出GIF动画步骤:文件→导出→GIF动画注意:所有导出只支持导出第1页
可修改舞台大小改变导出的GIF动画大小
2.关键帧动画导出GIF动画
同时,我们也可以在第1页制作一个关键帧动画,点击文件→导出→GIF动画,同样可以导出GIF动画
3.元件动画导出GIF动画
我们制作一个车轮360度旋转的元件动画
将该元件放置舞台第1页(对齐小汽车元素合适的位置),同时在舞台上制作一个小汽车从左到右移动的关键帧动画效果
点击:文件→导出→GIF动画,同样可以导出GIF动画
注意:舞台帧数大于等于元件内帧数
4.曲线变形动画导出GIF动画舞台上的曲线变形动画可以导出GIF动画,元件内的曲线变形动画则不可以导出
5.进度动画导出GIF动画
如图,我们将需导出的进度动画移至第1页,点击:文件→导出→GIF动画,导出GIF动画
以上列举了一些支持导出GIF动画的几种形式,如下图,是一些不支持导出GIF动画的形式
3.1.11【展示动画】小爷吴亦凡
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 5646 次浏览 • 2018-08-17 15:57
本案例的原理是用陀螺仪控制舞台上的图片或视频。
在讲解本案例之前,我们首先需熟悉陀螺仪旋转轴的原理,如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。
上传视频素材
注意:为防止视频在不同手机的不兼 查看全部
本案例的原理是用陀螺仪控制舞台上的图片或视频。
在讲解本案例之前,我们首先需熟悉陀螺仪旋转轴的原理,如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。
上传视频素材
注意:为防止视频在不同手机的不兼容性,我们在制作案例前可先将视频导成序列帧的形式再上传进编辑页面
在舞台上添加一个陀螺仪,选择旋转类型,如下图为“绕Y轴旋转角”,同时将其命名为“Y”
设置关联属性
选择视频素材,点击其“左”属性右边的“关联”按钮,设置关联属性:
参考物体:“Y”
参考属性:“文本取值”
关联方式:“控制点插值”
主控量:“-40”
被控量:“0”
主控量:“40”
被控量:“-1198”
(注意:具体数值可提前在手机上观察得出)
同时添加另外一个陀螺仪,设置其类型为“绕X轴旋转角”,为其命名为“X”。
选择视频素材,点击其“上”属性右边的“关联”按钮,
设置关联属性:
参考物体:“X”
参考属性:“文本取值”
关联方式:“控制点插值”
主控量:“20”
被控量:“0”
主控量:“80”
被控量:“-173”
3.1.10【展示动画】拖动长图类H5制作
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 8740 次浏览 • 2018-08-17 15:50
设置首页
如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面
可为每个素材添加预置动画效果
将“点击”图标右键转换为元件,双 查看全部
设置首页
如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面
可为每个素材添加预置动画效果
将“点击”图标右键转换为元件,双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。
设置长图元件动画
新建图层,在第3帧插入帧,插入关键帧,同时添加进长图背景素材
将背景图片右键转换为元件,进入元件页面。
新建图层,分层导入其他图片素材。
为所有素材图层插入关键帧动画,分别设置素材的动画效果,例如给人物素材设置放大缩小动画,为“向左滑动”图标设置向左滑动动画效果。
回到舞台,补全所有图层的帧数,为长图元件添加预置动画,如图为“向右移入”
如下图,为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”,添加矩形,为其添加一个“出现即暂停”的行为。注意随时保存作品。
选中长图元件,在其属性栏内设置“拖动/旋转”为“水平拖动”
设置点击出现提示效果
新建图层“提示层”,在第4帧插入空白关键帧,同时导入原先预备好的提示素材。可为其添加预置动画效果等。
新建两个按钮层,分别在一个图层的第3帧放置“分享”按钮,在另一个图层第4帧提示页面放置一个“返回”按钮。
补全“行为层”及其他图层帧数,为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为
为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画,同理可为接下来的人物素材设置提示出现消失的动画。
设置分享动画的提示:如下图,新建“分享”图层,添加分享提示的素材,命名为“分享”,将其移至舞台之外。
为“分享”按钮添加“改变元素属性”行为属性控制→改变元素属性→触发条件:点击。 设置“参数” 元素名称:“分享” 元素属性:“左” 赋值方式:“用设置的值替换现有值” 取值:“0”
同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为,即点击将其移至舞台之外。
3.1.9【展示动画】科幻风格H5的制作
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6409 次浏览 • 2018-08-17 15:44
如图,我们可以选择曲线工具、节点工具在舞台上画一个折线,同时可以调节折线的颜色等属性
然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画 查看全部
如图,我们可以选择曲线工具、节点工具在舞台上画一个折线,同时可以调节折线的颜色等属性
然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画
我们新建5个图层,分别在每个图层上绘制一条直线
为第一条直线的某个时间段插入进度动画:右键→插入进度动画→(在特定帧数上)右键→插入关键帧
同理分别为其他几条线插入进度动画,制作出直线一条条绘制出来的炫酷效果
也可新建图层,在合适的位置添加相关图片素材等
2. 制作酷炫logo动画(进度动画)
同理,我们也可以用进度动画制作相关logo的绘制效果。
如下图,我们使用曲线工具、节点工具在舞台上绘制一个Mugeda的logo图形
为其添加进度动画
3. 制作酷炫酒瓶走光动画(遮罩动画)
我们先用曲线工具绘制一个酒瓶形状,同时新建图层2,将酒瓶复制粘贴进图层2
选中图层2,将其物体的填充色去掉,只剩下边框
在图层2下面新建图层3,添加一个矩形,在其属性栏的填充颜色内选择“线性”,制作白色光亮效果
为所有图层添加帧,为图层3的光亮物体制作一个从上往下移动的动画效果
选中图层2,将其转换为“遮罩层”
我们可先将图层1的物体移至最后一帧以防其阻挡走光效果。
最后可点击预览效果。
3.1.8【展示动画】一只挖空心思的行礼箱
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 6006 次浏览 • 2018-08-17 15:39
1.制作元件动画
如图,添加一张图片素材,调整舞台大小使其符合素材大小,同时右键将图片素材转换为元件,双击元件进入元件编辑页面
如图,在元件第20帧插入帧,插入关键帧动画。
选中变形工具,按住Ctrl键 查看全部
1.制作元件动画
如图,添加一张图片素材,调整舞台大小使其符合素材大小,同时右键将图片素材转换为元件,双击元件进入元件编辑页面
如图,在元件第20帧插入帧,插入关键帧动画。
选中变形工具,按住Ctrl键将中间的控制原点移至舞台右侧中间位置
分别选中第一帧、最后一帧,改变其“Y轴旋转”为“-90”“90”
可点击“预览”观察元件动画的效果
同时我们在帧数的中间位置(图片正居舞台)插入关键帧,调整“透视度”为“50”
如下图,我们新建多个图层,复制图层0上的所有帧,分别粘贴进每一个图层内
如下图,在图层8上,删除除第一帧之外的前半部分帧数,同时修改第一帧的“Y轴旋转”为“0”
同理,分别删除图层7、6、5、4前半部分的一些帧如下图,分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72”
移动图层2、1、0上的关键帧如下图位置,即在前面分别插入2、4、6帧
新建图层9,在与图层0第一帧相同帧数上插入一个矩形,调整颜色如下图,制作一个光韵矩形。
如下图为光韵矩形也设置相同的翻页动画,调整其第一帧关键帧的“Y轴旋转”为“-90”,调整其最后一帧关键帧的“Y轴旋转”为“0”,同时在最后插入一个空白帧。
如下图,隔图层复制光韵图层及帧。
之后,可双击元件每个图层的物体,分别进入各自的组,添加相对应的素材。
即做好一个元件动画。
2.制作“左右滑动预览”动画
回到舞台,新建一个图层,添加“左右滑动预览”指示图标、一个文本框、两个定时器
分别为文本框、两个定时器命名为“关联数值”“加”“减”
改变文本框数值为“10”。点击其“添加/编辑行为”按钮,添加两个行为:
属性控制→设置定时器 →触发条件:出现 →设置“参数”:
定时器名称:加
设置状态:暂停记时器
属性控制→设置定时器 →触发条件:出现 →设置“参数”:
定时器名称:减
设置状态:暂停记时器
为“加”定时器添加行为
属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”:
元素名称:关联数值
元素属性:文本取值
赋值方式:在现有值基础上增加
取值:0.01
同理,为“减”定时器添加行为
属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”:
元素名称:关联数值
元素属性:文本取值
赋值方式:在现有值基础上增加
取值:-0.01
设置元件的动画关联如下图:
关联对象:关联取值
关联属性:文本取值
开始值:10
结束值:0
播放模式:同步
为元件添加六个行为,分别为
“向左滑动‘加’定时器继续计时”
“向左滑动‘减’定时器暂停计时”
“向右滑动‘减’定时器继续计时”
“向右滑动‘加’定时器暂停计时”
“点击暂停‘加’定时器”
“点击暂停‘减’定时器”
为文本框添加两个控制定时器的行为:
属性控制→设置定时器→触发条件:属性改变→设置“参数”
定时器名称:减
设置状态:暂停记时器
执行条件:检查元素状态
元素名称:关联数值
参考属性:文本取值
逻辑条件:小于等于
参考值:0
属性控制→设置定时器→触发条件:属性改变→设置“参数”
定时器名称:加
设置状态:暂停记时器
执行条件:检查元素状态
元素名称:关联数值
参考属性:文本取值
逻辑条件:大于
参考值:10
3.1.7【展示动画】2016网易娱乐圈画传
原创分享 • mingyueliu 发表了文章 • 0 个评论 • 5759 次浏览 • 2018-08-17 15:19
1.制作缩放动画
我们先在图层1添加第一张图
在图层2添加第二张图,将第二张图放大,使其放置第一张图的画面大小符合舞台(即与图层1第一张图大小画面重合)
如下图为两个图层第50帧位置上插入 查看全部
1.制作缩放动画
我们先在图层1添加第一张图
在图层2添加第二张图,将第二张图放大,使其放置第一张图的画面大小符合舞台(即与图层1第一张图大小画面重合)
如下图为两个图层第50帧位置上插入帧,在图层1上第二帧插入一个空白帧使其只出现在第一帧上,为图层2插入关键帧动画,在最后一帧关键帧上调整第二张图片的大小使其符合舞台
如图我们新建图层3,在最后一帧插入空白帧,添加进第三张图片,调整图片大小使其放置第二张图的位置大小符合舞台(即与图层2最后一帧图片大小画面重合)
同理我们在三个图层第100帧位置上插入帧,为图层2、3插入关键帧动画,分别在其最后一帧关键帧上缩小图片,使第三张图的大小符合舞台
同理新建图层4添加第四张图片,制作动画效果,此处不详述。
2.制作“长按按钮播放动画”效果
如图,新建图层,添加一个按钮元素
新建“行为层”添加一个矩形,设置矩形“出现即暂停”行为,同时在该图层第二帧添加一个空白帧,使该行为只使用在第一帧
为按钮素材添加两个行为:
动画播放控制→播放→触发条件:手指按下;
动画播放控制→暂停→触发条件:手指抬起。
3.1.6【展示动画】长按手指控制动画播放
原创分享 • mingyueliu 发表了文章 • 1 个评论 • 7642 次浏览 • 2018-08-17 15:15
本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果
1.控制舞台动画
我们首先在舞台上添加一个矩形,设置“出现即暂停”的行为
选择最上图层,在舞台需手指按住的位置上添加一个矩形,设置其透明度为“ 查看全部
本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果
1.控制舞台动画
我们首先在舞台上添加一个矩形,设置“出现即暂停”的行为
选择最上图层,在舞台需手指按住的位置上添加一个矩形,设置其透明度为“0”
随后为该透明矩形添加两个行为:
动画播放控制→播放→触发条件:手指按下;
动画播放控制→暂停→触发条件:手指抬起。
2.控制元件动画
首先,我们可在舞台上添加一个元件动画,如下图,为其命名为“麦穗”
回到舞台,继续为控制矩形添加两个行为,即“手指抬起即暂停”“手指按下即播放”
分别在这两个行为的“参数”对话框内设置“作用对象”为“麦穗”
3.控制提示元素
如下图,在舞台上添加一个“要一直按住才会播放哦”的提示语,为其命名为“提示”
为控制矩形再添加两个行为:
1.属性控制→“改变元素属性”→触发条件:手指按下→设置参数
元素名称:提示
元素属性:透明度
赋值方式:用设置的值替换现有值
取值“0”
2.属性控制→“改变元素属性”→触发条件:手指抬起→设置参数
元素名称:提示
元素属性:透明度
赋值方式:用设置的值替换现有值
取值“100”
这样,一个“长按手指控制动画播放”的效果已做好。
【Mugeda新功能】声音更新功能一览
培训教程 • songyue 发表了文章 • 9 个评论 • 7834 次浏览 • 2017-04-19 11:09
1) 控制音量
2) 控制播放位置
3) 用声音播放位置关联(控制)元素属性
4) 用元素属性关联(控制)声音播放位置
示例:http://beta.mugeda.com/client/ ... 5826a
编辑链接:http://beta.mugeda.com/ 查看全部
1) 控制音量
2) 控制播放位置
3) 用声音播放位置关联(控制)元素属性
4) 用元素属性关联(控制)声音播放位置
示例:http://beta.mugeda.com/client/ ... 5826a
编辑链接:http://beta.mugeda.com/animation/edit/a675826a
在“控制声音”的行为中增加了对音量和播放位置的控制。这两个控制和“控制方式”参数独立,并不依赖于声音播放状态。例如,如果声音目前没有播放,并且设置了播放位置为第2秒,那么声音将会在下一次播放的时候从第2秒开始播放。
选中声音对象,可以对其进行播放位置的关联,其关联方式类似于对动画播放进行关联控制。
也可以将某个元素的属性和声音播放的进度关联在一起,这样,声音播放进度(取值为0~100)将可以用来控制元素的属性。
【Mugeda新功能】连线组件的使用
培训教程 • songyue 发表了文章 • 0 个评论 • 9156 次浏览 • 2017-04-19 10:49
示例地址: http://b13b5c18.u.mgd5.com/cam ... .html
编辑地址: http://beta.mugeda.co 查看全部
示例地址: http://b13b5c18.u.mgd5.com/cam ... .html
编辑地址: http://beta.mugeda.com/animation/edit/c36da7fa
1、首先在工具栏选择连线组件。
在舞台上绘制连线组件,和绘制直线是一样的。区别是:
*连线元素绘制后,具有自身的一些特殊属性(下面会提到);
*绘制在舞台上的连线,只是代表了连线时的初始位置,用于给用户提示;
2、绘制好后,可以对其进行属性配置。
各个属性说明如下:
1) 显示端点提示:是否在连线的端点提供一个脉动的圆形动画提示用户连线;
2) 提示颜色:端点提示的颜色;
3) 允许多线链接:打开之后连线允许同时停留在多个停靠位置
4) 停靠位置:希望连线连接成功的命名元素的列表。连线只能和列表里面的元素连接成功;
在渲染的时候,可以用鼠标(PC)或者手指(手机)按住某一个连线的任意位置拖动连线。当连线的端点靠近了一个设置好的停靠位置时,连线会自动吸附到该停靠位置。这时候如果松开鼠标或者手指,就可以连线成功。连线成功成功后,可以继续拖动连线进行修改。如果一个连线预先设置了多个连线停靠位置,前一个连线成功后,后一个连线会出现在初始位置,提示用户还可以继续连线。直到所有连线都成功为止。
3、连线的结果可以通过下面的方式来获取(假如连线元素的名称是"连线")
{{连线}}: 连接成功的第一个命名元素的名称
{{连线.0}}, {{连线.1}}, {{连线.2}}: 连接成功的第0,1,2个命名元素的名称
如果连线没有成功,上面的表达式返回空字符串("")。
为了支持自动化处理,行为触发条件中增加了“连线完成”。该选项仅对连线元素有效。下图示范了如何利用该条件进行行为处理。
连线上的行为新增了一个判断条件’停靠物体名称’。如下图所示,这样的设置,让这个行为只是当连线连到’红色2’的这个物体上才会触发。如果停靠物体名称不选择任何物体,那么停靠到所有的停靠物体上面都有效。
【Mugeda新功能】抽奖组件使用
培训教程 • songyue 发表了文章 • 11 个评论 • 8595 次浏览 • 2017-04-19 10:25
编辑地址:http://beta.mugeda.com/animation/edit/9b591ea1
抽奖组件具体使用方法:
1、首先在工具栏中选中抽奖组件.
2、然后会弹出抽奖组件的配置 查看全部
编辑地址:http://beta.mugeda.com/animation/edit/9b591ea1
抽奖组件具体使用方法:
1、首先在工具栏中选中抽奖组件.
2、然后会弹出抽奖组件的配置.
开始时间和结束时间:是指抽奖发生时,如果抽奖在时间范围内则可以抽奖,否则不可以抽奖.
允许重复抽奖次数:限制用户抽奖的次数,如果超过设置的值则不可以抽奖
再次抽奖等待时间:限制用户多次抽奖时间间隔,单位为(秒),用户的多次抽奖时间间隔不能超过这个设置
抽奖模式:即抽即中、均匀分布
安全验证:如果开启了安全验证, 用户在抽奖的时候需要输入验证码,验证码输入正确才给抽奖
奖项设置:一行一个奖项,格式为: [奖品名次:奖品名称:奖品数量] ,例
1:一等奖:10
2:二等奖:100
3:三等奖:1000
领奖码(非必填):一行一个领奖码,格式为:[奖品名次:领奖码:奖品数量] ,例:
1:lingjiangma1:10
2:lingjiangma2:100
3:lingjiangma3:1000
奖品的名次对应奖项设置中的奖品名次,领奖码可以设置为任意不重复的值,如果配置了领奖码这个选项,当中奖的时候,中奖信息中会携带所对应的领奖码,比如抽奖时中了一等奖,那么对应的领奖码就是 lingjian
3、以上配置完成后,点击确认按钮即可生成一个完整的抽奖组件.
4、设置4个文本框用来显示抽奖的结果,设计师可根据文本框内的内容来进行判断,然后进行样式的设计.
设置完以后分别给文本框进行命名,用来绑定抽奖组件.
5、绘制一个物体,用来充当抽奖按钮
6、选中绘制出的物体,给物体增加抽奖行为
然后编辑抽奖行为
抽奖组件选择刚刚的生成的抽奖组件
显示抽奖结果类别:抽奖的结果会显示在指定的文本框内, 如果抽奖结果为-1代表没有中奖,如果是0那么他就中了一等奖,如果是1那么就是二等奖,以此类推,设计师可根据返回的数字进行判断来决定样式
显示抽奖结果文本:假如中了一等奖,一等奖对应的名称是小米手机,那么对应的文本框内就会显示小米手机
显示抽奖凭据:如果设置了领奖码,假如一等奖对应的领奖码是 yidengjiang1 那么这个领奖码就会显示在对应文本框内
显示剩余抽奖次数:会在对应文本框内显示用户还有几次抽奖机会
绑定表单提交:如果页面上有物体绑定了提交表单行为,如果配置了这个选项,用户在提交表单的时候,会偷偷的把抽奖结果信息绑定到表单上作为附加信息提交.
用户使用木疙程序制作投票、抽奖等数据组件时,木疙瘩不承担由于黑客或设置出错导致的经济损失.
Mugeda新功能教程:投票组件的使用
培训教程 • songyue 发表了文章 • 1 个评论 • 10883 次浏览 • 2017-01-23 15:59
(点击图片看大图)
1. 添加一个投票组件:
2. 按照提示完成投票的设置:
3. 确认投票数据设置后,会在舞台上生成一个投票组件,并且会自动命名(投票1),同时会在数据库上注册一个投 查看全部
(点击图片看大图)
1. 添加一个投票组件:
2. 按照提示完成投票的设置:
3. 确认投票数据设置后,会在舞台上生成一个投票组件,并且会自动命名(投票1),同时会在数据库上注册一个投票数据点。注意,投票组件是一个服务器数据组件,在内容展示时不会出现。为了能够投票,还需要添加投票行为:
4. 添加3个文字对象,投票给上海、投票数、是否投票。分别对应的功能为:投票按钮、显示“上海”的投票数,和显示当前用户是否给“上海”投过票。后两个文字对象需要命名,后面要引用:
5. 为投票按钮添加“投票”行为:
6. 编辑投票行为进行设置。其中,投票对象是上面添加的投票数据对象;显示结果对象和显示是否投票分别对应上面添加的对应文字对象:
7. 设置成功后就可以进行投票了。投票结果会显示在对应的文字信息中便于后续处理,同时会根据投票设置显示相应的结果文字,便于用关联、条件等方式控制更多的交互行为:
【必看帖】关于H5中声音和视频的处理,看过的问题都解决了!
培训教程 • songyue 发表了文章 • 2 个评论 • 13960 次浏览 • 2016-12-22 16:26
本节视频教程请点击此处。
本节涉及知识点:图片压缩、声音压缩、视频压缩
图片压缩:
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压 查看全部
本节视频教程请点击此处。
本节涉及知识点:图片压缩、声音压缩、视频压缩
图片压缩:
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压缩,如图:
压缩好,点击【Downloud】下载到电脑的指定位置,如图:
声音压缩:
推荐大家【Audacity】这个软件,如图:
把要压缩的声音拖到灰色区域,就能上传并开始编辑,如图:
用选择工具选中音轨中不需要的部分,【Delete】就可删除,如图:
点击放大镜,可以放大音轨,如图:
给声音加特效,需先选中需要添加特效的音轨部分,点击【特效】,如图:
把立体声分离成单声,可以让声音文件变得更小,如图:
在能保证声音质量的前提下,可删除其中一个声道,如图:
【文件】—【导出】,在弹窗的右下角【选项】,可以对声音质量进行选择,数字越小,表示声音质量越差,文件尺寸越小,一般默认为24,如图:
【声道模式】选择【合并立体声】,如图:
视频压缩:
推荐大家用Freemake Video这个软件,它在压缩的质量和大小上都不错,如图:
左上角【视频】可以导入视频,视频右侧【小剪刀】可裁剪视频,如图:
如果只保留前10秒视频,先定位在10s的位置,单击【开始选取范围】,如图:
单击【移动至选取范围的开始】,即此时的点是要裁剪视频的开始,如图:
把鼠标移动到要裁剪内容的末尾,点击【剪下选取范围】,如图:
只保留了前10s的视频,点击右下角【ok】,完成裁剪,如图:
该软件提供了很多格式的导出,如图:
如果要导出MP4,点击【编辑预先设定】按钮,如图:
点击【转换】,画面大小可以自定义,视频编码器一定要选【H.264】,如图:
比特率类型,设置越大导出的视频文件也就越大,如图:
关于视频中音频的设置,音频解码器一定要选择【AAC】,其他可根据自己的需求设置,如图:
特别注意:在H5导入的视频,视频编码器一定要设置成【H.264】,音频编解码器一定要 设置成【AAC】。
2.3.13 动画:复制帧粘贴帧
培训教程 • songyue 发表了文章 • 4 个评论 • 9939 次浏览 • 2016-12-20 17:00
本节知识点:复制帧-粘贴帧、复制关键帧-粘贴关键帧、复制多个图层-粘贴多个图层
复制帧-粘贴帧:
选择某一个图层的全部帧,全选后时间线呈草绿色,右键选择【复制帧】,如图:
在没有帧的地方, 查看全部
本节知识点:复制帧-粘贴帧、复制关键帧-粘贴关键帧、复制多个图层-粘贴多个图层
复制帧-粘贴帧:
选择某一个图层的全部帧,全选后时间线呈草绿色,右键选择【复制帧】,如图:
在没有帧的地方,右键【粘贴帧】,如图:
这时候刚才的一整段动画就被粘贴过来了,如图:
选中第一个空白关键帧,右键【删除帧】,就会得到与复制动画完全一致的一整段动画,如图:
复制关键帧-粘贴关键帧:
选中关键帧,右键【复制关键帧】,如图:
选择要粘贴的位置,右键【粘贴关键帧】,如图:
注意,不能把关键帧粘贴在另外一段动画的时间单元里,否则会出现如下提示,如图:
目前,不支持复制一个图层的多个关键帧,如图:
则会出现如下提示,如图:
但支持同时复制多个图层的关键帧,如图:
然后选择要粘贴的位置,右键【粘贴关键帧】,如图:
复制多个图层-粘贴多个图层:
选中所有的4个图层,右键【复制帧】,如图:
另外新建4个图层,如图:
选择最上面图层第2个没有帧的地方,【右键】粘贴站,如图:
复制的4个图层的全部内容全部都粘贴过来了,如图:
2.1.12 界面与舞台:加载的相关设置
培训教程 • songyue 发表了文章 • 0 个评论 • 5012 次浏览 • 2016-12-13 14:53
说明:浏览器100%才能看到加载页面的设置
本节视频教程请点击此处。
加载页面的制作,具体步骤如下:
1、加载页面默认是进度条,如图:
2、样式、提示文字、文字大小均可自由设置,如果设置了动态 查看全部
说明:浏览器100%才能看到加载页面的设置
本节视频教程请点击此处。
加载页面的制作,具体步骤如下:
1、加载页面默认是进度条,如图:
2、样式、提示文字、文字大小均可自由设置,如果设置了动态文字,在页面加载的时候,可以看到文字在动,如图:
3、图片位置,设置的值越大,前景图片的位置越靠下;图片宽度设置的值越小,前景图片的尺寸就越小,如图:
4、当然你还可以在首页里自己制作加载页,只需要在右侧的样式中设置【首页作为加载页面】,如图:
5、除了自己制作,还可以从Mugeda模板里添加加载页,如图:
Mugeda提供丰富的加载界面模板,除此之外还有表单、交互、逻辑判断等模板供大家免费使用,如图:
点击【确定】添加加载界面到舞台上,并把添加的模板调整至首页,然后在样式上设置【首页作为加载界面】,如图:
关于Mugeda模板的更多使用方法,请点击这里学习。
2.1.14 界面与舞台:元件界面介绍
培训教程 • songyue 发表了文章 • 0 个评论 • 5400 次浏览 • 2016-12-13 14:36
本节视频教程请点击此处。
本节知识点:新建元件、如何把新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件
一、新建元件
点击舞台右侧的元件面板,左下第一个按钮“新建元件”,如图:
查看全部
本节视频教程请点击此处。
本节知识点:新建元件、如何把新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件
一、新建元件
点击舞台右侧的元件面板,左下第一个按钮“新建元件”,如图:
默认命名为“元件1”,自动进入元件编辑界面,如图:
二、如何把新建元件添加到舞台?
在元件编辑界面完成编辑后,点击页面回到舞台,如图:
把元件添加到舞台的方法有两种
1、鼠标放到元件上,成“十字”后拖动不放,到舞台再松开,如图:
2、点击元件面板下方的“添加到绘画板”按钮,也可把元件导入到舞台,如图:
三、复制元件:
点击元件面板左下第二个“复制元件”,即可复制一个新的元件,默认命名为“元件2”,如图:
在复制元件,即“元件2”里进行修改,不会影响到“元件1”内的内容 ,如图:
四、新建元件文件夹:
点击元件面板下方的“新建文件夹”按钮,可以在元件面板里添加文件夹,如图:
文件夹可以方便的对元件、视频、音频等进行管理,如图:
五、导出元件:
点击元件面板下方的“导出”按钮,如图:
如果想让同一个元件应用在不同的作品中,可以用导出功能。选择要导出的元件,点击“导出”按钮,如图:
在新建的作品里,就能看到刚才导出的元件,把它拖动到舞台上就可以使用了,如图:
六、编辑元件:
编辑元件有多种方法,既可以点击元件面板下方的“编辑”按钮,也可以双击元件,进入到元件编辑界面,如图:
七、删除元件:
2.1.13 界面与舞台:物体属性设置
培训教程 • songyue 发表了文章 • 0 个评论 • 5377 次浏览 • 2016-12-13 14:21
本节视频教程请点击此处。
本节知识点:设置坐标,改变物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动
1、熟悉属性面板:
绘制图形 查看全部
本节视频教程请点击此处。
本节知识点:设置坐标,改变物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动
1、熟悉属性面板:
绘制图形,物体的属性都在右侧查找
2、设置物体大小和坐标:
3、设置透明度:
输入值的方式更准确
4、线条类型:
包括实线、点线、虚线、点划线
5、填充:
6、X、Y、Z轴旋转:
7、端点:
端点只能对在Mugeda绘制的线条进行设置,如图:
8、接合:
对绘制物体的线条接合处进行设置,如图:
9、背景图片:
在绘制图形里插入图片,还可以通过图片位置和尺寸进行其他设置,如图:
如果只想保留图片造型,可以通过把线条的颜色设置为空,如图:
10、预置动画:
可以在属性面板上给物体添加预置动画,也可以用选择工具选中物体添加,如图:
11、组类型:
物体成组后,可以对其进行裁剪内容的操作。如果物体有动画,则裁剪后会有类似遮罩动画的效果,但占用空间更小,推荐使用。
12、结束时复位:
首先给物体添加“自由拖动”,然后再打开结束时复位开关,这样物体无论被拖动到什么位置,结束时都会恢复原位。
13、运动:
属性面板中的运动类型,只有给物体添加了“关键帧动画”或“曲线变形动画”才会出现,而且鼠标要选中时间上的关键帧。
2.1.11 界面与舞台:关键帧和页面的命名
培训教程 • songyue 发表了文章 • 0 个评论 • 4631 次浏览 • 2016-12-08 14:54
本节视频教程请点击此处。
1、用一个例子来说明,给关键帧命名,并实现跳转功能
举例:点击右侧的图标(方块、圆、五角星),可以实现跳转到指定帧,具体操作步骤如下:
选择出现红色方框的关键帧,在关键帧处 查看全部
本节视频教程请点击此处。
1、用一个例子来说明,给关键帧命名,并实现跳转功能
举例:点击右侧的图标(方块、圆、五角星),可以实现跳转到指定帧,具体操作步骤如下:
选择出现红色方框的关键帧,在关键帧处命名“方块”,鼠标在空白处单击一下,如图:
命名成功后,关键帧上方会出现一个黄色的三角,如图:
同理,给出现蓝色圆形的关键帧命名“圆”,如图:
同理,给出现黄色五角星的关键帧命名“五角星”,如图:
然后依次给右侧图标添加跳转行为,选择红色方块,如图:
添加“跳转到帧并停止”的行为,触发条件为“点击”,如图:
点击编辑,在帧名称里选择“方块”,如图:
注:其他图标的行为添加方式相同,这里就不一一说明了
给关键帧命名的好处:有时候我们要修改动画,删帧或者增帧,这时候如果采用的是跳转帧号的话,就要一个个去修改,很麻烦,给关键帧命名就方便多了。
如果既填写了帧号,又填写了帧名称,Mugeda会先找帧号,如图:
2、给页面命名
Mugeda默认的页面名,以数字升序排列,把鼠标放到页面名处,就可更改页面名称,给第2页重命名为“尾页”,如图:
给红色方框添加“跳转到页”行为,如图:
在编辑里设置参数,页名称设置为“尾页”,如图:
与帧名称不同的是,如果既填写了页号,又填写了页名称,Mugeda会首先去找页名称。