Mugeda做前必读

1.手机屏幕适配方法

文件—文档信息 在对话框“自适应”选择合适的选项

注:由于设备尺寸千差万别,因此Mugeda设置了不同的适配方式,默认以及目前最流行的适配方式是“宽度适配,垂直居中”,出于某种考虑也可选择“包含”“覆盖”等其他适配方式

选择“宽度适配,垂直居中”适配方式,保存后用手机观看手机适配效果,你会发现,不管手机屏幕大小如何,此H5作品在手机上都是全屏的,上下左右不存在留白或留黑的情况。

若将“自适应”适配方式改为“高度适配,水平居中” 。点击保存,用手机观看适配效果。发现此时若手机屏幕高度较低,在手机左右两边就会出现黑色的条,这是适配不当的原因。


2.图片处理

如果你的舞台是320×520(像素)大小,那么素材应处理成640×1040双倍精度。设计时考虑到某些素材被截掉,需要我们在设计平面时预留一些安全空间(注:如果你的舞台是320×520大小,那么安全框应局限在320×416像素,即宽高分别为320像素、416像素),在安全空间内不要放重要的设计元素。

压缩方法一:PS压缩

在PS中打开PSD素材,除去透明度,按住Ctrl+Shift+Alt+S,打开“储存为Web和设备所用格式”对话框,选择“优化的文件格式”为“PNG8”,点击“存储”将素材存储至所选位置。

压缩方法二:TinyPNG压缩

输入网址https://tinypng.com/ 进入TinyPNG官网,将需压缩的文件拖进相应位置

压缩完成后点击download下载

压缩方法三:Mugeda压缩

如下图,在Mugeda页面导入PSD格式,“文件”→“导入”→“Photoshop(PSD)文件”,打开“导入Photoshop(PSD)素材”对话框

将PSD文件拖至对话框后,如图点击全选中PSD文件的各个素材,点击“分层导入” 即可将PSD文件中的每图层上的素材依次分层导入Mugeda。


3.声音及视频处理

Mugeda中上传的音频一般为mp3格式,如果是背景音乐的话建议时间控制在20s内,不要超过20M

添加声音:点击“媒体”栏下的“声音”按钮,在弹出的“导入声音”对话框中点击“选择文件”按钮,添加所选音频素材

选中舞台上的音频素材,在其“属性”面板内设置播放属性:“自动播放”:是;“循环播放”:是

替换图标:选中舞台上的音频素材图标,在“属性”面板内点击“声音图标”右边的图标标志,在弹出的“媒体库”中选择自己想要的图标素材

由于是背景音乐,无需将图标显示在画面中,因此可将舞台上图标鼠标拖动至舞台之外。

2.视频处理方式

添加的视频格式为mp4,视频大小控制在20M以内

点击添加第2页面,点击“视频”按钮,在弹出的“导入视频”对话框中点击“选择文件”按钮,选择自己想要添加的视频文件。

换视频控制图标:首先点击“素材库”按钮,在“媒体库”对话框中添加自己想要的控制图标素材,使用“变形”工具调整素材大小位置。

鼠标选中“选择”工具,点击图标右边的“添加/编辑行为”按钮

在“编辑行为”对话框中选择“媒体播放控制”→“播放视频”,点击“编辑”按钮

在“参数”对话框中选择“视频元件”为“视频1”,点击“确认”,点击保存,点击预览效果。

隐藏播放按钮:在舞台上选中视频素材,在其“属性”面板内将“隐藏播放按钮”设置为“是”,其他视频属性可自由调控。

注:音频、视频添加至舞台后,可作为元件自动列属在“元件”面板下,这些元件在舞台上被删除后,仍可在“元件”面板中找到。选中需添加的元件,点击“元件”面板下“添加到画布”按钮即可将选中元件添加至舞台,同时也可用鼠标直接将元件拖至舞台放开的方式添加元件至舞台。


3.屏幕适配设置

一般我们把舞台的尺寸设置为320*520:

我们可以对适配方式进行设置,让我们的作品可以满足不同屏幕的播放。适配方式从【文件】—【文档信息】里设置:

【文档信息】里的导出名称指的是发布后微信标题栏的名称

而舞台上【属性】中的【内容标题】指的是在编辑页面里的名称:

渲染模式,默认为标准,其他几个说明如下

标准:单个网页的引用    嵌入:可以嵌入iframe元素中    

内联:通过js方式加载动画    弹出:弹出对话框显示动画

自适应,一般我们用【宽度适配,垂直居中】

宽度适配,垂直居中:以宽度来等比例放大缩小您的作品,以320宽度做的,那么在屏幕上显示就是320,通过改变作品的高,来适配您的屏幕;如果您的手机比较窄,那就会把作品的上下两端截掉。

高度适配,水平居中:以高度适配宽度,如果你手机特别的窄,也会把两端截掉。

全屏:无论你在什么屏幕播放,都会显示您作品的完整内容。

宽度适配,垂直居中,让所有画面显示在屏幕上的小技巧

在舞台上画安全框,320*416基于iPhone4s大小,目前这个是最小的,所以用这个作为我们的安全框:

把安全框移动到舞台中间,可以对照绿色的参考线,此时的状态下,安全框位于舞台的中央:

如图,完成安全框的绘制:

我们预览时,无论屏幕有多大,背景图片都是把屏幕撑满的,就算手机截掉上下两端,在安全框里设计,有效内容都能被看到:

当您要发布作品时,记得把安全框图层删掉,这样别人预览你的作品时,就不会看到安全框了:

(类似于AI中的出血线)


4、适配方式

动适配:默认是竖屏,动画会撑满竖屏屏幕;默认是横屏,动画会撑满横屏屏幕,但是会发生变形,更多的情况我们选用的是强制竖屏:

如果您要做强制横屏的H5,设置舞台大小520*256。这是基于iPhone6s plus在微信播放时的全屏尺寸。当然你也可以根据需要自行设置,但前提是保证在大屏幕手机能看到全屏:

然后选择【文件】—【文档信息】,设置旋转模式和自适应:


5、发布和预览链接的区别

点击“通过二维码共享”按钮,弹出“通过二维码共享”对话框。在“通过二维码共享”对话框中显示的链接都是预览链接。

注:该测试链接的观看次数为1024次,超过次数系统会自动提示“你的作品已被关闭”等信息

假如我们的作品已完成并且已发给客户或目标人员看过,不再想给其他人观看,如下图,可勾选“不共享”选项,如界面所示会隐藏预览二维码和链接。勾选“效果预览”选项,界面重新显示预览地址链接以及预览二维码。

勾选“共享源文件”选项,出现“编辑地址”,可将作品源文件共享给其他人。

注:在通过共享源文件链接地址打开的源文件里,若修改了源文件的内容,则应以“另存为”的方式保存修改后的内容,否则无法直接保存。“共享源文件”权限只有付费用户可使用

若你的账号为企业账号,如下图,可点击“企业协同共享”使用该权限,将链接共享给企业账号中的其他人员,保证企业作品的安全性。

如下图,勾选“密码保护”,即会出现密码。其他人若想打开链接,只有输入密码才可,保证了作品的安全性。

关于发布:

若要修改作品的文字或动画等内容,如下图,可回到作品列表,点击作品右下角的“编辑”按钮,进入编辑页面修改。若在编辑页面修改了内容,需点击“保存”按钮保存作品,再点击“发布”按钮重新发布一次。

已发布的作品再次发布,会出现以前发布的链接,若想覆盖以前的链接,可点击勾选需覆盖的链接进行发布。

删除发布链接:在发布页面上选择要删除的链接,点击“删除”按钮,点击弹出的“确定”按钮,即可删除已发布的作品链接。

在作品列表里找到相关作品,点击作品右下角的“统计”按钮,进入数据统计页面。如下图,“浏览量”表示作品一共被刷新观看的次数,“用户数”则表示打开观看作品的用户数量。该数据只有作品被发布后才可统计观看,可任意选择要查看的时间段(查询范围在3个月内)的数据情况。

在“表单数据”栏,可观察、编辑作品统计的表单数据。例如删除数据、导出数据、分享数据链接等

在编辑页面,可点击标题前面的“管理文件夹”按钮,在弹出的“文件夹管理”对话框中管理作品,例如选中某个文件夹,点击“移动”,即可将该作品移动至选中的文件夹内,同时可“新建文件夹”“删除文件夹”、为文件夹重命名等


注:以上素材均来自于木疙瘩

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容