1.手机屏幕适配方法
文件—文档信息 在对话框“自适应”选择合适的选项
选择“宽度适配,垂直居中”适配方式,保存后用手机观看手机适配效果,你会发现,不管手机屏幕大小如何,此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、发布和预览链接的区别
点击“通过二维码共享”按钮,弹出“通过二维码共享”对话框。在“通过二维码共享”对话框中显示的链接都是预览链接。
假如我们的作品已完成并且已发给客户或目标人员看过,不再想给其他人观看,如下图,可勾选“不共享”选项,如界面所示会隐藏预览二维码和链接。勾选“效果预览”选项,界面重新显示预览地址链接以及预览二维码。
勾选“共享源文件”选项,出现“编辑地址”,可将作品源文件共享给其他人。
若你的账号为企业账号,如下图,可点击“企业协同共享”使用该权限,将链接共享给企业账号中的其他人员,保证企业作品的安全性。
如下图,勾选“密码保护”,即会出现密码。其他人若想打开链接,只有输入密码才可,保证了作品的安全性。
关于发布:
若要修改作品的文字或动画等内容,如下图,可回到作品列表,点击作品右下角的“编辑”按钮,进入编辑页面修改。若在编辑页面修改了内容,需点击“保存”按钮保存作品,再点击“发布”按钮重新发布一次。
已发布的作品再次发布,会出现以前发布的链接,若想覆盖以前的链接,可点击勾选需覆盖的链接进行发布。
删除发布链接:在发布页面上选择要删除的链接,点击“删除”按钮,点击弹出的“确定”按钮,即可删除已发布的作品链接。
在作品列表里找到相关作品,点击作品右下角的“统计”按钮,进入数据统计页面。如下图,“浏览量”表示作品一共被刷新观看的次数,“用户数”则表示打开观看作品的用户数量。该数据只有作品被发布后才可统计观看,可任意选择要查看的时间段(查询范围在3个月内)的数据情况。
在“表单数据”栏,可观察、编辑作品统计的表单数据。例如删除数据、导出数据、分享数据链接等
在编辑页面,可点击标题前面的“管理文件夹”按钮,在弹出的“文件夹管理”对话框中管理作品,例如选中某个文件夹,点击“移动”,即可将该作品移动至选中的文件夹内,同时可“新建文件夹”“删除文件夹”、为文件夹重命名等
注:以上素材均来自于木疙瘩