问题答疑

问题答疑

提出您在创作作品时遇到的问题和疑惑
BUG反馈

BUG反馈

反馈您在使用Mugeda时遇到的BUG
原创分享

原创分享

分享您的原创作品,创作经验,操作技巧
新功能需求

新功能需求

写下您期待Mugeda增加的新功能
Mugeda培训

Mugeda培训

加入我们的培训,提高您的技巧

【代码分享】贴边UI功能!

totalacg 发表了文章 • 0 个评论 • 303 次浏览 • 2016-12-14 17:50 • 来自相关话题

由于手机尺寸各异,无论选择什么样的自适应模式都会被截取一部分内容,如果你刚好有一个按钮的设计是属于贴着边框的,通常可以通过选择“高度适配”或者“宽度适配”就可以解决,但是如果左右侧边和上下侧边同时都有贴边设计的按钮或者我们不希望有留边的话,就无法通过木疙瘩自带的适配来防止按钮被切割了,这时候就需要我 查看全部
由于手机尺寸各异,无论选择什么样的自适应模式都会被截取一部分内容,如果你刚好有一个按钮的设计是属于贴着边框的,通常可以通过选择“高度适配”或者“宽度适配”就可以解决,但是如果左右侧边和上下侧边同时都有贴边设计的按钮或者我们不希望有留边的话,就无法通过木疙瘩自带的适配来防止按钮被切割了,这时候就需要我们手动去计算这些贴边按钮应该出现的位置!(具体设置方法请看相关教程)
先来看看这个案例:http://www.linovel.net/activities/jdzj2016
这个案例使用的是“覆盖”的自适应效果,也就是无论屏幕是怎样的比例,绝对不会出现留边的情况,高度超出比例时候按高度适配,宽度超出比例的时候就按宽度适配,配合贴边UI就可以让整个画面始终保持饱满的状态了!
 
进入正题,如何实现贴边UI?这个还需要通过当前显示范围大小配合选择的自适应效果,通过计算来实现!首先我们要先显示现在的显示窗口大小:
在舞台上新建两个文本框,分别命名为“窗口高度”“窗口宽度”
然后选择发布按钮左边的 [JS] 按钮,插入如下代码:
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener('renderReady', function () {
var scene = mugeda.scene;
var yemianW = scene.getObjectByName('窗口宽度');
var yemianH = scene.getObjectByName('窗口高度');
var oldW;
var oldH;
var updateTime = function () {
         
        if(oldW != window.innerWidth || oldH != window.innerHeight){//防止持续更新文本框
            oldW = yemianW.text = window.innerWidth;
            oldH = yemianH.text = window.innerHeight;
        }
     }
     scene.addEventListener('enterframe', function () {
          updateTime();
     });
});
之后就可以通过“窗口高度”“窗口宽度”这两个文本框,知道现在显示的窗口大小了!
接下来就是分析显示窗口和木疙瘩舞台的关系了,就那“宽度适配”来举例说明吧!
宽度适配情况下,是显示的内容始终让宽度占满整个屏幕,并且宽高比不改变,内容居中显示,如下图:
未标题-2.jpg

我们想要按钮1贴着上边,按钮2贴着下边显示的话,我们需要先求出上下边界线在作品里的坐标。
由于宽度自适应,可以观察的出 显示区域高度/作品宽度 = 窗口高度/窗口宽度
所以  显示区域高度 = 窗口高度/窗口宽度*作品宽度。
由于作品内容是居中的,因此,显示的上边界所在上坐标为:  上边界上坐标 = (作品高度-显示区域高度)/2
所以按钮1上坐标应该为:(作品高度-窗口高度/窗口宽度*作品宽度)/2
同理按钮2上坐标应该为:作品高度-(作品高度-窗口高度/窗口宽度*作品宽度)/2-按钮高度
知道怎么算出来之后,就可以通过“改变元素属性”的行为,填入取值公式就可以实现贴边UI的功能了!为了每次窗口变化都能触发,行为需要添加在显示区域的文本框上,触发方式选择为“属性改变”,就可以确保每次窗口改变时候都能实时改变啦!赶快去试试吧!
觉得本篇文章对你有帮助的请点个赞!
 
PS:我上面制作的这个案例的翻页功能也是通过代码实现的,目前木疙瘩还不支持不受翻页影响的导航功能,据官方人员了解,这个功能可能需要到明年才能完成!
 
 
我的其它文章:
【高级互动】如何制用木疙瘩做游戏? http://bbs.mugeda.com/?/article/392
【代码分享】用鼠标进行控制(鼠标响应事件)! http://bbs.mugeda.com/?/article/267
手机上播放木疙瘩的H5动画很卡怎么办?5招教你解决!    http://bbs.mugeda.com/?/question/230

【Mugeda统计数据】浏览量和用户数以及传播来源,传播层级,事件统计

mingyueliu 发表了文章 • 0 个评论 • 775 次浏览 • 2016-12-13 14:43 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​)
 Mugeda统计数据可以查看该作品的浏览量和用户数以及传播来源,传播层级,事件统计。

统计数据可以通过选择“开始时间”和“结束时间”来筛选数据的时间范围进行查询数据。(如下图) 





(点击查看大图)

浏览 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​)
 Mugeda统计数据可以查看该作品的浏览量和用户数以及传播来源,传播层级,事件统计。

统计数据可以通过选择“开始时间”和“结束时间”来筛选数据的时间范围进行查询数据。(如下图) 

1.png

(点击查看大图)

浏览量(PV):页面被查看的次数。用户多次打开或刷新同一个页面,该指标值累加。

用户数(UV):页面的访问人数。所选时间段内,同一访客多次访问会进行去重。

下图数据表可以通过选择“时”“天”“周”“月“进行筛选查看。

2.png

(点击查看大图)

传播来源:是指通过某些途径进行传播。Mugeda的传播来源包括微信的(单聊,群聊,朋友圈)等,其他包含浏览器,QQ等。

3.png

(点击查看大图)

传播层级:可以查看每一层传播的相关数据。

所谓层级:比如“我”通过朋友圈传播给“a”“b”“c”,“a”“b”“c”又分别通过朋友圈或者私聊传播出去,那么“我“为第一层级,abc分别为第二层级,依此类推。如下图  

9.png

(点击查看大图)

从下面可以了解到,一层传播数据最高,其次是五层。 

4.png

(点击查看大图)

事件统计:在Mugeda编辑界面,你可以给元素——行为添加一个可选的“事件名称”,凡是包含“事件名称”的行为,都会记录在统计数据的“事件统计”中,你可以在后台查看这些事件的统计数据。例如:用户点击某个按钮的次数。 

5.png


如何添加事件统计?

编辑界面——选择您想要添加事件统计的物体——行为——添加事件名称即可。(所有事件可以添加统计哦)

例如:用户点击某个按钮的次数。

1、选中要添加事件统计的按钮
2、点击”行为“图标,进入行为操作界面(如下图) 

6.png

(点击查看大图)

3、选择要添加”事件统计“的任意一个行为,比如:我想添加”跳转到帧并播放“的事件统计,点击编辑——添加”事件名称“即可。现在可以到动画作品——统计,查看你添加的事件统计了。(统计最长需要等待1个工作日)

7.png

(点击查看大图)
 
 

【原创分享】同一物体的两种变量关联

15639029798 回复了问题 • 3 人关注 • 2 个回复 • 460 次浏览 • 2016-12-08 18:41 • 来自相关话题

查看定制的图片地址

mingyueliu 回复了问题 • 3 人关注 • 2 个回复 • 369 次浏览 • 2016-12-02 18:00 • 来自相关话题

【公告】Mugeda官方客服服务时间

mingyueliu 发表了文章 • 2 个评论 • 697 次浏览 • 2016-12-01 15:43 • 来自相关话题

Mugeda官方客服服务时间如下:





 (点击查看大图)

Mugeda学习交流QQ1群: 237082431(已满)
Mugeda学习交流QQ2群:262201240(已满)
Mugeda学习交流QQ3群:263360290(已满)
Mugeda学习交流QQ4群:475633109
客服 查看全部
Mugeda官方客服服务时间如下:

1.png

 (点击查看大图)

Mugeda学习交流QQ1群: 237082431(已满)
Mugeda学习交流QQ2群:262201240(已满)
Mugeda学习交流QQ3群:263360290(已满)
Mugeda学习交流QQ4群:475633109
客服电话:010-53384810 
论坛地址:bbs.mugeda.com
 

【Mugeda公告】版本更新1130:操作界面优化,设计师空间免费开通,bug修复

mingyueliu 发表了文章 • 0 个评论 • 550 次浏览 • 2016-11-30 16:31 • 来自相关话题

Mugeda本周优化内容如下:

一、优化了工作台整体样式,更易操作。 





图片说明如下:(点击图片查看大图)
1)选中——鼠标拖动该作品可以移动至任意“我的作品”文件夹内。

2)当鼠标滑动至作品名称的范围内,可以显示该作品的全称。

3)优化了已发布标志,避免遮住作品名称。

4)删除 查看全部
Mugeda本周优化内容如下:

一、优化了工作台整体样式,更易操作。 

优化1.png

图片说明如下:(点击图片查看大图)
1)选中——鼠标拖动该作品可以移动至任意“我的作品”文件夹内。

2)当鼠标滑动至作品名称的范围内,可以显示该作品的全称。

3)优化了已发布标志,避免遮住作品名称。

4)删除按钮,点击直接删除该作品。

5)统计:点击可以查看该作品的统计详情。

6)点击该区域可以预览作品 。

优化2.png

图片说明如下:(点击图片查看大图)

1)优化了预览页面,看起来更加美观。

2)Mugeda为所有的设计师开放了个人空间,点击”加入空间“可以将该作品添加至您的空间。(必须是发布作品才可以)

3)可以将该作品转为您自己的模板,重复使用。

4)直接可以查看该作品的二维码,不需要再用其他的第三方软件了,是不是很方便。

二、优化了教程页面的一些操作体验问题,更方便Mu友们学习

三、优化了发布作品的操作界面

优化3.png

图片说明如下:(点击图片查看大图)

1)点击作品名称可以直接修改备注名(第一次发布不可以改哦)。

2)点击可以复制链接,Mu友再也不用担心找不到发布地址啦。

3)删除:点击之后该作品的发布地址将不能再访问,但是该作品还可以您的“动画作品”找到。(注意:如果选择删除,该作品发布地址无法找回,必须发布新链接才可以访问,但是跟之前链接不同哦)

4)可以直接查看该作品的二维码,点击鼠标右键另存为,可以保存1000*1000高清大图。

四、优化了模板的操作界面和使用流程

优化4.png


五、管理账号可以查看子账号的作品,还可以看到作者哦。 

5.png


六、增加了“推荐设计师”标志,点击设计师昵称可以查看该设计师的所有作品。 

优化6.png


七、设计师空间免费开通(每个Mu都有自己的个人空间啦) 

优化7.png


如果您想在Mugeda官网的设计师页面展示,并且被推荐,您需要添加至少3个优质的作品(添加方法如下图“1”,然后选择“我要被推荐”下图“2”,按照要求发送资料就可以啦,敬请期待我们的通知吧。

优化8.png


成功申请设计师后的福利:(联系QQ:3024076303)

H5作品宣传/享受会员折扣/赠送任意2个模板/免费外包接单

八、bug修复

使用回调函数跳转链接以及弹出默认系统提示

回复

zgs 发起了问题 • 4 人关注 • 0 个回复 • 624 次浏览 • 2016-11-25 11:32 • 来自相关话题

分享后的行为代码

回复

zgs 发起了问题 • 5 人关注 • 0 个回复 • 742 次浏览 • 2016-11-25 11:25 • 来自相关话题

【公告】Mugeda更新39个超实用H5单页模板,全部免费使用

mingyueliu 发表了文章 • 7 个评论 • 1377 次浏览 • 2016-11-16 15:37 • 来自相关话题

总是被问有没有免费模版可以使用?

总是被问加载页面可不可以多些样式?

总是被问大转盘抽奖类H5怎么做?

Mugeda本周更新39个超实用的单页模板,你想要的都有,并且全部都可以免费使用,包含热门案例,加载页,幻灯片,交互,滑动/拖拽,可定制内容,插入内容,陀螺仪,逻辑判断等9大类型模版。
1、 查看全部
总是被问有没有免费模版可以使用?

总是被问加载页面可不可以多些样式?

总是被问大转盘抽奖类H5怎么做?

Mugeda本周更新39个超实用的单页模板,你想要的都有,并且全部都可以免费使用,包含热门案例,加载页,幻灯片,交互,滑动/拖拽,可定制内容,插入内容,陀螺仪,逻辑判断等9大类型模版。
1、热门案例

热门案例图片.jpg

 
2、加载页

加载图片.jpg

 
3、幻灯片

幻灯片图片.jpg

 
4、交互

交互图片.jpg

 
5、滑动/拖拽

滑动/拖拽.jpg

 
6、可定制内容

可定制图片.jpg

 
7、插入内容

插入内容图片.jpg

 
8、陀螺仪

陀螺仪图片.jpg

 
9、逻辑判断

逻辑判断图片.jpg

 
如何使用单页模板?

登录Mugeda,打开操作界面,添加模板,如下图:

使用模板方法.png

(点击图片查看大图)

推荐设计师是什么?如何将已发布作品加入个人空间?

mingyueliu 发表了文章 • 0 个评论 • 1555 次浏览 • 2016-11-16 14:51 • 来自相关话题

一、推荐设计师是什么意思?

为了给大家提供更好的平台,有机会展示自我,展示自己优秀的作品。Mugeda特推出设计师页面,在这里你可以展示您的个人信息以及作品,让更多人去发现你,帮助你找到更多商业机会。
 
二、成为推荐设计师有哪些好处呢?
 
1、拥有独立展示个人作品的空间,方便个人收藏和给其他朋 查看全部
一、推荐设计师是什么意思?

为了给大家提供更好的平台,有机会展示自我,展示自己优秀的作品。Mugeda特推出设计师页面,在这里你可以展示您的个人信息以及作品,让更多人去发现你,帮助你找到更多商业机会。
 
二、成为推荐设计师有哪些好处呢?
 
1、拥有独立展示个人作品的空间,方便个人收藏和给其他朋友/客户查看自己的H5作品。
2、购买Mugeda付费会员享受8折优惠。(详情咨询QQ:3024076303)
3、可以自己制作H5模板,在Mugeda平台售卖,收入归个人所有。(Mugeda会收取少许的平台费用,该功能近期上线)
 
三、如何成为推荐设计师?
 
1、至少将3个已发布的优秀H5作品加入空间。(参考下面信息)
2、提供您的个人信息(姓名*、电话*、微信、QQ、邮箱、Mugeda用户名*、空间地址或者任意作品的链接*);
3、尺寸为300*300的个人或公司头像;
4、100字以内的个人或公司简介;
5、将个人信息和头像发送至:mingyueliu@mugeda.com
我们审核通过后,将推荐您的个人空间。

 
四、设计师如何将已发布作品加入个人空间?

 1、动画作品——选择【已发布的作品】——加入空间,如下图:

2.png


2、点击“加入空间”按钮,选择分类——添加缩略图——加入空间——确定即可。如下图:
 
3.jpeg

(点击图片查看大图)

3、在设计师页面,点击“我的空间”可以查看添加的作品。

4.jpeg

(点击图片查看大图)
 
恭喜你,作品添加成功了!

1.png

 

【分享案例】画花纹!

totalacg 发表了文章 • 3 个评论 • 140 次浏览 • 2016-11-12 15:08 • 来自相关话题

http://102f1cea.u.mgd5.com/campaigns/57831537a3664e4735000300/20161112025043/5826b89092b579729b444c3a/index.html





用画笔可以在上面画出很多不可思议的花纹图形!只用了一种行为,各 查看全部
http://102f1cea.u.mgd5.com/campaigns/57831537a3664e4735000300/20161112025043/5826b89092b579729b444c3a/index.html

huawenhuaban.jpg

用画笔可以在上面画出很多不可思议的花纹图形!只用了一种行为,各位同学可以自己实现一下试试看哦!
运行起来可能会有些卡!

【代码入门】如何在mugeda中,实现H5作品和外部 网页之间实现数据连接

qq1f07c 发表了文章 • 9 个评论 • 699 次浏览 • 2016-11-11 17:24 • 来自相关话题

先看案例






这个案例核心点在于,如何将在H5中输入的 数据传递到外部网页中。本人曾尝试过无代码去实现,但是结果不是很理想,没能达到在两者之间实时传递数据的效果 。
最终做出这个案例觉得还是用代码比较方便一点。用代码的话,其实方法很简单
逻辑分析,该类案例简单点说就是如何将输入的信息与查询 查看全部
先看案例

微信截图_20161111164116.png


这个案例核心点在于,如何将在H5中输入的 数据传递到外部网页中。本人曾尝试过无代码去实现,但是结果不是很理想,没能达到在两者之间实时传递数据的效果 。
最终做出这个案例觉得还是用代码比较方便一点。用代码的话,其实方法很简单
逻辑分析,该类案例简单点说就是如何将输入的信息与查询的网址合成一个链接,然后点击按钮就可以打开这个合成后的链接,如果理解了这个逻辑的话,我想应该下面的制作就不会太难了
切入正题:
首先、要了解相关查询网站的规则,一般都是查询网站查询时都会在网址后面附带输入信息的,(需要先查询一下看一下查询后网址变化,并复制)举个栗子:
QQ截图20161111165544.jpg


截图为某天气查询网站查询某地的天气情况"id="后面的数据即使我们需要传递的数据
第二步、在舞台出入一个文本输入框(sr) ,一个文本框(addr)和一个按钮(btn)
注:括号内为 元素名称,可自定义,建议采用英文格式
第三步、将输入框内的数据传输转化为查询链接传递给 文本 (此项为重点)
我们以电话号码查询为例,查询链接为http://shouji.supfree.net/fish.asp?cat=数据
这里我们将输入框中的数据带入即可,即addr=http://shouji.supfree.net/fish.asp?cat={{sr}} 


微信截图_20161111170614.png



注意:一定不要忘了“http://”这个前缀。
剩下就是见证奇迹的时刻了 :
微信截图_20161111170904.png


在上方代码编辑框输入
var mugeda = Mugeda.getMugedaObject();
mugeda.addEventListener("renderReady", function () {
var scene = this.scene;
var btn = scene.getObjectByName("btn");
btn.addEventListener("inputend", function (event) {
var addr = scene.getObjectByName("addr”);
window.location.href=addr.text;
});
});

截图.png


注上方括号内下划线所代表的即为上方所命名的元素
至此,所有结果就已完成 。
ps.如果还需要增加其他查询想的话,在复制一段中间代码(下图),并对元素(下图标红部分)重新命名即可。
截图_(1).png



了解了以上的操作后,我们就可以在木疙瘩上实现更多的H5和网页之间的数据传递了,比如 :天气查询、火车票查询等查询类的H5制作,甚至是讲述距提交到自己的数据库中,更多想不到等待着你去探索.....
本教程主要针对无代码基础用户,代码大神勿喷。

2.6.6 微信功能:如何在后台收集图片?

qqbc8b5 回复了问题 • 2 人关注 • 1 个回复 • 285 次浏览 • 2016-11-09 21:18 • 来自相关话题

如何在mugeda上无代码实现倒计时(天、时、分、秒)

qq1f07c 发表了文章 • 2 个评论 • 581 次浏览 • 2016-11-08 21:10 • 来自相关话题

本教程以上一篇教程为基础如何在mugeda上无代码实现日期倒计时(天、时、分、秒),想要理解本教程的话先看上一篇教程
直接切入正题,
设置:
目标时间设为:TIME,即Y月D日H时M分00秒(注:你可以想直接将目标时间填写为你要达到的目标时间);
当前时间是time1,即y1月d1日h1时m1分s1 查看全部
本教程以上一篇教程为基础如何在mugeda上无代码实现日期倒计时(天、时、分、秒),想要理解本教程的话先看上一篇教程
直接切入正题,
设置:
目标时间设为:TIME,即Y月D日H时M分00秒(注:你可以想直接将目标时间填写为你要达到的目标时间);
当前时间是time1,即y1月d1日h1时m1分s1秒;
倒计时剩余时间设为time,即剩余时间为d日h时m分s秒(注:没有月)
(ps.本教程目标时间的“秒”不建议自定义,因为如果加入秒的话,操作难度将会无限增大,不信的话你可以先懂这篇教程再说)
直接上逻辑判断方法:
微信截图_20161108210922.png


注:以上执行结果一栏并不符合标准的数学语言写法,大家可以将括号内的理解为一整体即可。


QQ截图20161109152350.jpg

只要大家将上面的大写字母换成你想要的目标时间
,即可制作倒计时案例了作品了。(什么 逻辑表达式不会写,看这里http://bbs.mugeda.com/?/question/480
微信截图_20161108210404.png


顺便附赠一份本人做的demo案例:http://7b2a3775.u.h5mc.com/campaigns/56ea907ba3664eea6b000015/20161109031439/5822b91792b579135a79d031/index.html
 
http://beta.mugeda.com/client/preview_css3.html?id=3554102e
特别声明:因本教程每月天数按30天计算,所以存在误差,如果要求比较严格建议用代码实现或者计算好相应月数天数更改每月天数即可(此方法较为麻烦)

案例课程/实用教程

totalacg 回复了问题 • 3 人关注 • 1 个回复 • 627 次浏览 • 2016-11-08 17:46 • 来自相关话题

【Mugeda新功能教程】最新上线的小功能(超实用,赶紧马)

songyue 发表了文章 • 3 个评论 • 560 次浏览 • 2016-11-08 17:06 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1、增加给单页命名的功能 
具体操作步骤,在左侧页面栏中,每一页默认的命名是“第1页”、“第2页”……,如图:




 
把鼠标移至默认命名处,就能给单页重新命名,如图:




 
2、增加当使用舞台上的播放功能 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1、增加给单页命名的功能 
具体操作步骤,在左侧页面栏中,每一页默认的命名是“第1页”、“第2页”……,如图:
1.PNG

 
把鼠标移至默认命名处,就能给单页重新命名,如图:
2.PNG

 
2、增加当使用舞台上的播放功能时,点击舞台任意位置【暂停】功能 
具体操作步骤,点击舞台上的播放按钮,如图:
3.PNG

 
随意点击舞台任意处,即可暂停动画。
 
3、增加在属性栏改变某元素宽高属性时,锁定长宽比的功能 
具体操作步骤,如图:
4.PNG

 
4、可直接将图片粘贴在舞台上原有“上传”按钮消失,直接点击“选择”按钮就可以将图片添加到舞台,图片会在后台上传
具体操作步骤,点击工具条中的“导入图片”功能,如图:
5.PNG

 
然后选择图片,直接点击“选择”按钮,直接上传图片,如图:
6.png

 
5、绘画板功能增加只显示编辑颜色和画笔粗细的功能 ,不显示勾叉 
具体操作步骤,点击工具条中的“绘画板”功能,如图:
7.png

 
在舞台上拉出画布大小,并保持选中状态,如图:
8.png

 
在右侧属性栏中,选择“仅显示线宽和颜色”,在预览中就不会显示勾叉,如图:
9.png

 
6、鼠标点击范围精确识别为矢量图形范围(例:三角形就是三角形),目前任何图形的点击生效区域都是矩形的
具体操作步骤,在舞台中绘图圆形,并给圆形添加一个“点击跳转到上一页”功能,如图:
10.png

 
预览动画可以看到,动作只在圆形部分生效。
 
7、单选框、多选框增加横板显示 
具体操作步骤,在左侧工具条添加“单选框”工具到舞台,如图:
11.png


12.png

 
然后选择工具条中的“变形工具”,对单选框进行调整,即可调整成竖版,如图:
13.png


14.png

 
8、点赞控件增加:不可以取消赞的功能 
具体操作步骤,在左侧工具条添加“点赞”控件到舞台,如图:
15.png


16.png

 
在属性栏新增,不允许撤销点赞的选项,如图:
17.png

 
 
 

如何在mugeda实现,距某日8点35分20秒的倒计时案例

qq1f07c 发表了文章 • 1 个评论 • 140 次浏览 • 2016-11-07 15:23 • 来自相关话题

点这里
墙裂(墙裂到地震)要求mugeda加入倒计时模块,同意的点赞 查看全部
这里
墙裂(墙裂到地震)要求mugeda加入倒计时模块,同意的点赞

如何在mugeda上无代码实现日期倒计时(天、时、分、秒)

qq1f07c 发表了文章 • 4 个评论 • 368 次浏览 • 2016-11-07 13:55 • 来自相关话题

如何在mugeda上无代码实现日期倒计时(天、时、分、秒)

前段时间有人在论坛抛出倒计时如何实现的问题,本人觉得无代码实现倒计时挺有趣的,就是做了个里约奥运会倒计时的demo,不过昨天又有人问,本人又重新翻回以前的demo,发现demo有bug,
到底什么bug,看图






所以本人决定大 查看全部
如何在mugeda上无代码实现日期倒计时(天、时、分、秒)

前段时间有人在论坛抛出倒计时如何实现的问题,本人觉得无代码实现倒计时挺有趣的,就是做了个里约奥运会倒计时的demo,不过昨天又有人问,本人又重新翻回以前的demo,发现demo有bug,
到底什么bug,看图
1.png



所以本人决定大一下补丁,同时为广大mu友分享(chun)下(shu)经(zhuang)验(b),下面开始装B时刻:
本人首先做了一个2017年元旦倒计时的demo,不要问为什么,因为元旦做起来比较简单,结束时间是2017年01月01日00点00分00秒,百度了一下,目前时间2016年11月7日,距离元旦还有54天,下面就是操作了,基本操作请查看mugeda教程,
首先,在舞台新建几个文本工具,分别分别分别设置其预置文本为当前时间/日期,格式最好设置为英文,格式最好设置为英文,格式最好设置为英文格,(说了三遍因为这很重要)我这里除了小时用了英文,其他用的中文(因为本人比较懒,所以没改英文格式,不改的话,出现bug后果自负!!!)

2.jpg


3.png


4.png


并且将获取的当前时间分别命名为h1、m1、s1,
剩余时间则为d、h、m、s,(计算倒计时要从秒开始算起,不要问为什么 ,你长大就懂了)
s=59-{{s1}},(也许你会问为什么是59而不是60,因为当前时间是0秒的时候,如果是60的话,s=60-0=60,所以差一秒而已,就忽略了吧,毕竟工作量可以减少不少,如果你是处女座的话来找我,来找本人给你开小灶)
m=59-{{m1}}
h=23-{{h1}}
剩下的看图,

5.png


关于剩余天数,可以直接用文本工具输入55,(问为什么是55,看上面)然后设置属性改变行为,,执行条件为:{{h.text}}=0&&{{m.text}}=0&&{{s.text}}=0&&{{h1.text}}!=23,什么看不懂什么意思,看这里http://bbs.mugeda.com/?/article/34,自己猜,
设置方式看下图

6.png


注:需要在桌面添加个计时器,是否循环设置为循环,所有的属性改变行为都要设置在这个计时器上,所有的属性改变行为都要设置在这个计时器上,所有的属性改变行为都要设置在这个计时器上。

7.png


到此,整个demo应该算结束了,为了圆满一点,本人加上了背景元素什么的装饰一下,然后插入了第二帧,当时时间到元旦的时候,就可以跳转到第二帧了,(怎么设置跳转的方法我就不说了,自己百度)。
下面看看demo:http://7642bdb8.u.h5mc.com/cam ... .html


8.png

 由于本人技术有限,以上教程如有bug,纯属胡扯,敬请见谅
特别声明:因本教程每月天数按30天计算,所以存在误差,如果要求比较严格建议用代码实现或者计算好相应月数天数更改每月天数即可(此方法较为麻烦)
未完待续......
下期预告《如何在mugeda上无代码实现倒计时(天、时、分、秒)

【双十一来啦】一年仅一次,5折抢购Mugeda会员!

songyue 发表了文章 • 8 个评论 • 449 次浏览 • 2016-11-04 15:06 • 来自相关话题

双十一来啦,Mugeda怎么能没有活动呢?  
 
全年仅一次的会员5折疯抢,这次错过再等一年,而且此次优惠力度史无前例,聪明的宝宝们们都会快人一秒点击这里
 
·双十一狂欢日 5折抢购Mugeda会员 




活动形式: 购买会员享5折优惠(不含加量包,存储空间),新用户入会、老用户续费均可参 查看全部
双十一来啦,Mugeda怎么能没有活动呢?  
 
全年仅一次的会员5折疯抢,这次错过再等一年,而且此次优惠力度史无前例,聪明的宝宝们们都会快人一秒点击这里
 
·双十一狂欢日 5折抢购Mugeda会员 
微信-90.jpg

活动形式: 购买会员享5折优惠(不含加量包,存储空间),新用户入会、老用户续费均可参加。 
下单就送:99元案例课程包
 
活动时间: 11月10日——11月12日(3天)  
 
特别注意: 在双十一期间成功抢购会员的Mu友,凭自己的用户名与班主任—松月联系(QQ:154065262),兑换99元案例课程。
 
·5折会员有什么服务? 
huiyuan.png

Mugeda会员能享受什么服务,值得在双十一剁手呢?请听小编细细掰着指头跟你数数:海量H5模板免费使用、最热H5案例课程免费听、一对一专属答疑服务……更多会员服务请点击这里
 

【高级互动】如何用木疙瘩做游戏?

totalacg 发表了文章 • 1 个评论 • 833 次浏览 • 2016-11-04 12:34 • 来自相关话题

在众多H5作品中,游戏无疑是最吸引人的类型!而木疙瘩强大的行为功能合集已经足够实现大部分的游戏功能了,这里将分享一下 如何用木疙瘩来做游戏!
首先我们来看看木疙瘩目前都有哪些优秀的游戏案例吧!













1.休闲游戏大合集
2.神射手
3.抓蝴蝶
4.炒茶大师
5.像素鸟
查看全部
在众多H5作品中,游戏无疑是最吸引人的类型!而木疙瘩强大的行为功能合集已经足够实现大部分的游戏功能了,这里将分享一下 如何用木疙瘩来做游戏!
首先我们来看看木疙瘩目前都有哪些优秀的游戏案例吧!
111.jpg
222.jpg
333.jpg
444.jpg

1.休闲游戏大合集
2.神射手
3.抓蝴蝶
4.炒茶大师
5.像素鸟
更多案例→http://www.mugeda.com/cases.php 选择互动游戏分类
 
那么怎么用木疙瘩做游戏呢?
 
1.准备素材
   首先需要把游戏所要用到的所有素材尽可能的先准备齐全,这样可以更直观的观察到游戏的效果,在做的过程中遇到还没有的素材可以临时绘制几何图形代替。
2.充分了解游戏规则
   这一部分很重要,充分了解游戏规则并不只是和我们平时看到的游戏规则说明那样,而是要在玩游戏过程中更深度的去理解!
   就拿上面的第五个案例《像素鸟》来说明吧
   像素鸟的游戏规则说明是:点击屏幕让小鸟上下移动,每穿过一次柱子并且没有碰到柱子则记一分
   但我们要结合游戏理解为:
   1.小鸟会在场景中前行
   2.柱子的出口位置随机变化
   3.小鸟会匀加速向下掉落,并且旋转角度也随其改变
   4.鼠标点击屏幕会使小鸟瞬间向上移动一段固定的距离,仅仅在手指按下瞬间时有效,持续按下无法连续触发
   5.小鸟碰到柱子或者屏幕上下方均使游戏失败,成功穿过柱子则记1分
   ……等
3.将每一条游戏规则翻译成逻辑语言
   到这一部分开始就需要费点脑子了,这里将涉及逻辑判断、数学和物理的各种运算,这一步的翻译可能需要进行很多次,先是翻译成木疙瘩功能可以实现的方法,再翻译成具体的各种公式,这是相对比较难的一部分,也是最容易让人开始放弃的部分。我们要对木疙瘩现有的各种行为的作用以及逻辑表达式的书写格式有足够的了解,详情请参考教程贴:http://bbs.mugeda.com/?/article/289
   示范:(对应第二部分游戏规则编号进行翻译)
   1. 创建随机数控件,设置变化频率为0.1秒,并在控件上添加行为,使得“改变元素属性”行为持续响应
     第一个“改变元素属性”行为持续改变背景图片和柱子的横向坐标
     第二个行为判断当坐标超出屏幕范围后,将坐标改为进入屏幕前的坐标
   2.在更改柱子坐标的同时再改变柱子的纵向坐标,坐标每次与随机数进行一个取值关联
   3.在舞台外创建一个文本框,定义为数值,在随机数控件上添加“改变元素”行为,实时改变小鸟的纵向坐标,使得小鸟按每次按速度下降,同时每次下降增加速度的数值,产生加速掉落效果
   4.在屏幕前放置一个透明的块,用来触发鼠标点击行为,鼠标点击触发行为改变速度为向上数值,产生小鸟瞬间向上移动的效果。
   5. 在判断小鸟纵向坐标在柱子缝隙范围内,并且小鸟穿过柱子宽度后,坐标小于小鸟坐标时,加1分,用改变元素属性行为对舞台外用于记录分数的文本框进行数值改变。
     当小鸟纵向坐标超出屏幕范围、或者在进入柱子区域时候纵向坐标并不在柱子间隙范围内的时候判断游戏失败
   ……等
4.问题(BUG)检测
   在做第三步的时候,绝大部分人都会有BUG产生,有可能是因为行为触发方式选择错误,也有可能是逻辑表达式写错,取值公式算错等等各种原因,这时候我们就要在这种情况下更精确的寻找到BUG是如何产生的。
   这里提供几个BUG查找的几个要领:
   1.如果出现关联动画失效,或者通过“改变元素”行为无法正确使得物体改变的时候,可以新建一个用于测试的文本框,用来显示关联的数值,或者公式计算结果,可以直观的看到数值的变化,以检查公式是否有错。像陀螺仪这类数值就通常与我们想象中的变化规律不同,最好在做之前先关联文本框观察一下变化规律。
   2.如果出现一个或多个导致最终结果实现的行为无法执行的时候,先依次取消执行条件,看看取消后能不能正常产生变化,就可以判断是取值公式的错误还是罗技表达式的错误了。
   3.如果确定了是取值公式或者逻辑表达式出错的话,请一定仔细检查一下书写的格式,不要急着让老师帮你找错,有时候很细微的书写问题是很难被找到的,例如英文括号写成了中文括号,英文i写成了数字1,对逻辑表达式没有了解透彻,把判断是否相等的公式写成了 a = b(正确应该是a == b),等等很多细节问题都是BUG产生的一大原因。
   4.一个游戏效果不符合理想中的效果,这个时候就需要返回到第三步重新开始审查自己翻译的逻辑是不是正确的,毕竟计算机不是人类,需要很严谨的根据你的命令去执行。
 
 
最后,木疙瘩教程页中有一些游戏的案例教程,大家可以去看看老师们是如何按照了上面的流程去做的!
教程地址:http://www.mugeda.com/help.php
 4.案例讲解→小游戏
 5.热门案例
 
觉得这篇文章对你有帮助的话,给我点个赞吧!
 
我的其它文章:
【代码分享】贴边UI功能! http://bbs.mugeda.com/?/article/426
【代码分享】用鼠标进行控制(鼠标响应事件)! http://bbs.mugeda.com/?/article/267
手机上播放木疙瘩的H5动画很卡怎么办?5招教你解决!    http://bbs.mugeda.com/?/question/230​