H5快速入门手册可编辑范本

《H5快速入门手册可编辑范本》由会员分享，可在线阅读，更多相关《H5快速入门手册可编辑范本（22页珍藏版）》请在装配图网上搜索。

1、一、H5快速入门平台介绍ueda是什么?Mugea是一个专业级H5交互动画制作云平台，基于云平台计算框架，uged无需任何下载和安装。如何进入ged界面?1）下载Gole浏览器:（考虑有些浏览器对html的支持不够,建议使用rme浏览器），打开ool浏览器,输入www.ugedac进入Mgeda首页。2)注册uge账号:进入首页后,可点击右上角“注册”，通过几步简单的步骤注册一个新账号。也可以点击“立即体验”进入操作界面Muged功能介绍?)简单制作交互动画：Mgda操作界面和Fla高度相似,因此有Flash基础的朋友基本不用通过学习就可快速制作出一个H作品。此外，设计师也无需添加任何代码即可

2、完成复杂的交互.除了设计师,工程师在Mugeda中也大有所为,在“脚本”按钮中，工程师可以写入“JS”代码来制作自己想要的交互效果。）手机观看:在Mgeda中制作出的H5作品支持随时手机观看,点击“通过二维码共享”按钮,可用手机扫描出现的二维码观看作品效果。3)发布作品：点击橙色“发布”按钮,可发布H5作品，用Mgeda平台发布的任何5作品都没有Mugeda的oo，大家可以放心使用。4)共享、导出作品:Mugea同时还支持动画作品的共享、导出。除此之外,Mugd还支持GIF、视频、PG等格式的导出,基本覆盖现在流行的主流多媒体格式，功能十分强大导出步骤：“文件”“导出”选择导出格式。5）针对企

3、业账号,geda提供专业企业服务。点击操作界面右上角账号管理的三角形,在下拉菜单中选择“团队管理，可进入团队管理页面。在管理页面中，可添加企业成员，方便进行人员及作品管理。企业账号与子账号,子账号与子账号之间可共享作品，十分方便。)数据服务:uge还提供专业的数据服务。针对每一个作品，我们可以在后台统计页面中浏览到数据。在数据页面，可以选择统计时间段、每个时段的浏览量与用户数,方便运营人员进行详细的分析。基于微信传播,Mugeda还提供朋友圈、单聊、群聊以及其他四种传播来源数据。快速入门添加预置动画预置动画是ugeda根据大众需求在自己的框架里设置好的动画效果鼠标选中“选择工具，点击舞台上的素

4、材,右边“添加预置动画”按钮(红色圆圈按钮),弹出“添加预置动画”对话框。制作翻页动画类似PPT的翻页效果学会使用Mugda模板Mud提供免费模板和付费模板,其中动画和交互都已经添加好了,用户可根据自己需求重新编辑。二、界面与舞台界面与舞台简介Mugeda的舞台包括常用菜单栏、工具箱(快捷工具栏)、时间线(时间轴)、工具条、页面栏、舞台和属性栏。舞台缩放和物体缩放功能缩放功能分为两部分:1、舞台缩放:对舞台显示内容的缩放,这个不改变物体的实际大小，只是改变显示的大小;2、物体缩放：对物体的缩放，这个会改变物体的实际大小；翻页的相关设置【翻页】中的设置有以下几种方式:1、翻页效果：平移、覆盖、出

5、现、淡入、三维翻转、门轴翻转2、退出效果：无、缩小、淡出、缩小淡出3、翻页方向：上下翻页、左右翻页4、循环：是、否、翻页时间：默认60毫秒,可以自己设置6、翻页图标：默认是箭头,支持直接从素材库上传；如果不想要翻页图标,可以在【翻页图标】处上传一个透明底的NG关键帧和页面的命名给关键帧和页面命名的好处：要修改动画，比如删帧或者增帧,删页或者增页,这时如果采用的是跳转帧/跳转页的话，就要一个个去修改,很麻烦,给关键帧/页面命名就方便多了.加载的相关设置个性化加载界面的制作.说明：浏览器100才能看到加载页面的设置物体属性设置包括设置坐标，改变物体大小坐标、透明度、线条类型、填充、X/轴旋转、端点

6、、接合、背景图片、预置动画、组类型、结束时复位、运动等功能的用法。元件界面介绍主要讲解新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件的用法。三、素材处理及媒体使用上传图片：Muda支持的图片格式包括GIF、PNG、VG、J文件,还可以以序列帧形式添加图片。文本/文本段落：鼠标在“媒体”工具内选择“文字”按钮，在“舞台空白处点击出现文字工具选框。鼠标通过双击选框进入编辑文字工具,点击“舞台”空白处退出，编辑。鼠标在“媒体工具内选择“文本段落”按钮,在“舞台开白处点击出现文本段落选框。双击进行编辑内容。插入网页：在“媒体”工具栏下,鼠标点击“网页按钮,在“舞台上以拖的方式插入一个网

7、页；在“舞台”右边的“属性面板”内可设置调节“网页”元素的属性，例如:宽、高、外围线条（如图可点击颜色版右上角框内的红色“”去除外;围线框颜色)、透明度、透视度、旋转角度等;在“属性面板内的“网页地址”栏内输入需跳转的网址.幻灯片:幻灯片即是在指定的区域内添加多张图片,通过滑动的方式进行切换.在“媒体工具栏下,鼠标点击“幻灯片”按钮,在“舞台上以拖拉的方式插入一个幻灯片。上传视频和声音:为防止出现设备不兼容等问题,视频格式建议为m4，大小在20M以内。如图在“媒体”工具栏下,鼠标点击“视频按钮，在弹出的“导入视频”对话框内点击“选择文件”选择所要上传的视频文件.由于多数设备支持mp3,因此在u

8、geda内编辑的音频格式建议为m3.在“媒体”工具栏内选择“声音按钮，在弹出的“导入声音对话框中点击“选择文件，选择所要上传的音频文件。绘制素材：点击“绘制”工具栏内的各个工具，可在“舞台上绘制各种图形,在“属性面板”下调节各个图形的填充色、线条色以及线条粗度等。云字体：可以将自己电脑里的字体上传到云字体库中并使用。曲线图表：在舞台中直接绘制可视化表格。建组:全选多张图片，鼠标右键“组“组合; 将“移动/旋转”重设为“不允许”，“组类型”为“裁剪内容”,“允许滚动设为“垂直滚动”;选择“变形”工具将“组大小调整为小于“舞台”;点击“预览”，发现图片组合在裁剪的范围内可上下垂直移动全景功能:全景

9、功能场景组件,可以用来显示360度全景图片,并添加热点进行交互。粘贴第三方文字和图片：1、现在可以直接将剪切板的文字添加到物体;、现在可以直接将剪切板的图片添加到物体。常用编辑操作:常用编辑操作包括锁定物体、节点工具、路径工具、排列、对齐、变形、组合、合并及转换为元件功能。四、动画类型时间轴和图层:时间轴是制作动画的关键功能,时间轴把图层和图像帧按时间进行组合、播放来形成动画。在时间轴上，我们可以以拖拉的方式进行预览动画效果.图层类似于Photoshop中的概念.选择工具：选择工具栏下包括“选择”“节点”“变形”“设置舞台缩放以及“快捷工具四种工具。Mgea动画类型：关键帧动画、路径动画、进度

10、动画、曲线变形动画、预置动画、元件动画、遮罩动画、动画运动分页/加载页:在舞台右侧“加载的页面，在其下拉菜单内可自行设置加载属性.例如填写“提示文字、设置文字大小、颜色,添加背景图片、前景图片等。标尺和辅助线的使用：在菜单栏,选择【视图】-【标尺】,就可调出标尺工具。复制帧图层:选择某一个图层的全部帧，右键选择【复制帧】,在没有帧的地方右键【粘贴帧】。选中要复制图层的所有帧，右键【复制帧】，在要粘贴的页面中新建图层(和复制的图层数相同），选择没有帧的地方,【右键】粘贴帧。五、交互行为行为添加以及触发事件:交互行为都在物体右边的“添加/编辑行为”按钮里添加。其中包括“动画播放控制”“媒体播放控制

11、“属性控制”“微信定制”“手机功能”五大部分.“动画播放控制”包括“暂停”“播放”“下一帧”“上一帧”等行为功能;“媒体播放控制”包括“播放声音”“停止所有声音”“控制声音“播放视频”等行为功能.;“属性控制”包括“改变元素属性”“设置定时器”“跳转链接”“提交表单”等行为功能。“微信定制”包括“定制图片”“录制声音“显示微信头像”“显示微信昵称”“定义分享信息”等行为功能。帧的行为:帧的行为有“播放“暂停“下一帧”“上一帧”“跳转并播放”“跳转并停止”。页的行为:页的行为包括“上一页”“下一页”“跳转到页”“禁止翻页”以及“恢复翻页”等行为.播放元件片段：控制元件的播放，让其只播放部分片段，

12、在H5交互游戏中用的比较多。改变元素属性:在元素对应的“属性”面板下,无论是宽、高、左、上、透明度等可提取到的数值都可作为改变元素属性的属性.改变图片：改变图片即当点击或触发改变图片行为时，图片即会被改变。设置定时器：设置定时器行为有暂停定时器、继续定时器、重置定时器。手机功能:手机功能包括打电话、发短信、发送邮件、地图等功能。跳转链接：添加跳转链接有两种方法：其一，在弹出的“编辑行为对话框中选择“属性控制”“跳转链接”触发条件:点击点击“编辑按钮进入“参数”对话框；其二，在元素右侧的“属性”面板下的“动作”下拉菜单中选择“链接”,在弹出的链接选框中输入相应链接，选择相应“打开位置”。六、控件

13、使用陀螺仪:手机的重力感应运用的就是陀螺仪的功能,可以控制绕X轴旋转角、绕轴旋转角、绕Z轴旋转角。定时器：定时器是一个带有定时功能的文本，随定时器时间的变化,文本显示变化的时间，方向分为倒计时和顺计时两种。使用场景可能是游戏计时，或者动画中某物体的某一属性随时间做相应关联变化等等.随机数：在被选中的元素“属性”面板下可设置随机数的各种属性：最小值、最大值、更新间隔等,运用随机数可以做抽奖和交互小游戏。擦玻璃:“控件”工具栏中的“擦玻璃”控件,可以实现擦除前景图片,露出背景图片的功能,还可以设置橡皮擦大小和剩余比例(即：擦除图片的大小和擦出剩余多少显示背景图片)。点赞:点赞功能为系统默认累加,每

14、个用户只能允许点赞一次。绘画板：如果想在作品中使用手绘图的功能,可以使用【绘画板】控件。七、微信功能微信头像微信昵称:微信头像/微信昵称功能可以在5上显示用户的头像及昵称。定制图片：可以实现用户上传自定义图片的功能。录制声音:可以实现录制声音及播放声音的功能。分享信息:定义分享信息包括在微信里转发给朋友或朋友圈时的一个转发标题、转发描述和朋友圈的转发标题。八、表单自定义表单:自定义表单工具包括“输入框“单选框”“多选框”“列表框”。默认表单:Mugda提供默认的默认表单，可设置的选项包括表单名称，提交方式,提交目标,确认信息，选择背景颜色和字体颜色等.没有在内的选项,还可以点击“添加表单项”按

15、钮添加定制文字：选中“定制文字按钮素材,在其“属性”面板下选择“动作”为“表单，点击“定制文字”按钮素材的绿色“添加编辑行为”按钮。九、关联绑定及逻辑判断舞台动画关联：“舞台”上的动画关联即用一个物体控制整个“舞台”动画的播放。元件动画关联：“元件的动画关联与“舞台”的动画关联相似,区别是将对象由“舞台”转变为“元件”。属性关联:在“属性面板下,所有属性右边都会有“关联”按钮，可关联的属性有:关联对象、关联属性、关联方式、被控量等。自动关联：在“舞台”上添加一个矩形作为被控对象,添加一个圆形作为控制物,在圆形的“属性”面板下调节“拖动/旋转”属性为“水平拖动”,可以实现一个物体控制另一个物体的

16、类似功能.公式关联:用公式关联控制物体的属性及行为。条件判断：条件判断即通过一个物体的属性条件，判断物体行为是否执行。逻辑表达式判断：逻辑表达式判断即当物体条件符合所设定的表达式。十、Muged PA的应用:在动画中添加代码Mugeda API提供了一组接口,可以通过代码的方式操作动画。常用于制作游戏和带有交互性的动画。使用Mugeda API需要了解jvscipt。在动画中添加代码在DE中有三种方式,可以使得您的代码和动画进行互动.通过脚本对话框、脚本加入方式在ID中,点击工具栏上的脚本按钮，在脚本窗口中添加脚本。脚本分为“全局脚本和“页脚本。全局脚本是整个动画的脚本，页脚本跟随页面，当页面

17、被复制时,页脚本同样会被复制。全局脚本和页脚本的运行顺序是:全局脚本页1脚本页2脚本全局和页脚本间的变量是隔离的，如果需要通讯,可以将变量挂在uged对象上或者windw对象上。例如:/ 在全局脚本中wndw.ac = ;/ 在页中alert（inw.abc）； / 弹出1在全局脚本中,可以直接使用mea对象.在页脚本中,除了可以直接使用mged对象外，还可以直接使用pagInde对象,paeInde是一个整数，指示脚本的页号.例如,在页1的脚本中，可以查询到脚本页号:aert（agene);/ 弹出数字0如果以后调整了页与页之间的顺序,pgIndx会自动变化。、调试这种方式加入的脚本，如果需

18、要调试,需要区分以下两种方式：(1）在I中，通过点击工具栏上的“预览”按钮预览动画,或扫描IDE中二维码的方式预览动画。此时脚本是通过avascrit的e untn的方式在内存中运行。调试一般采用javasct中的conoe.log、deuggr方法进行调试。(）动画被导出之后，所有脚本会写入导出包中,acio开头的一个j文件中。动画运行时，在浏览器调试台中可以看到这个脚本文件，在其中加断点、调试.通过导入脚本的方式导入在ID菜单中，点击“文件”“导入”“脚本”,在对话框中,输入脚本文件的r。ur可以指向服务器上的j文件,或者指向本机的地址。在动画加载时，rl指向的脚本文件会在开始阶段被加载。

19、可以通过浏览器调试这个文件。外部调用另一种方式，是将动画嵌入自己的网页,在网页中直接调用mugedaAPI来控制动画。API的应用:ugeda AP的整体结构Mugeda API整体上分为三个层次:mgda对象、scene对象、aObject。每个muga对象与单个动画对应，是访问单个动画的入口.通过访问mueda对象,可以得到mugeda的总体信息。如:大小、标题.动画中,每个时间轴对应于en对象,主舞台和元件实例都有对应的sce对象.通过操作sene,可以获取事件轴的信息，对播放位置做跳转。每个动画物体和Object对象相对应，控制aObct,就可以控制物体的位置、透明度、可见性.PI的应

20、用：Mugeda对象muga对象是整个AI的最顶层命名空间。ugeda对象的获取在脚本编辑器中,mg对象已经注入,可以直接在代码中写mugeda使用。如果将动画嵌入网页，按照动画加载前和动画加载后,获取mugea对象的方式不一样。、动画加载前如果需要在动画加载前获取mueda对象，可以通过在动画所在的ocument上设置侦听的方式获取。document。aventListeer（ugedaRead， functn()varmueda = windougeaurentAni；)；如果网页中嵌入了多个动画,每个动画都会引发上面的回调函数。2、动画加载后如果需要在动画加载后获取mud对象,如果网页中

21、只有一个动画,只需要用下面的代码就可以了（注:widow为动画所在的widow)。varmgea = windoMugcurrenAi;如果页面中包含多个动画，需要用下面的方式遍历找到需要动画的ugeda对象。widMugedaanimts.forEach(funti(mued) /此时可以通过mugeda的其他属性，例如mugea.tit找到想要的mugd对象);其他话题：如何将Mgda动画嵌入自己的网页中？geda动画除了可以在手机浏览器中全屏播放外,还可以将其作为网页中的一部分,放在自己的网页中。目前,在PC端的hroe、irefo、IE11等现代浏览器中都能正常播放。可以通过两种方式将

22、动画嵌入网页。一、ifrme方式如果您使用的是Mugeda提供的发布功能，得到了发布地址，可以在网页中,直接加入ifame的方式嵌入动画。iframefrmeborder=”0” wdth=320” hight=”52 s=”发布后的地址 /iframe；如果您是通过导出动画包的方式(zi文件）,将文件解压托管到自己的网络空间中,也可以通过上面的方式,将frae的src属性指向导出包中的indx。html文件的地址。二、直接嵌入方式有些时候,可能不希望通过irame加载动画,例如,在早期ios版本中,ime可能有一些性能或兼容性问题，或者希望拥有更好的可控性，可以将Mugeda直接嵌入网页中。

23、1、静态载入在每个动画导出包中，都包含lader。js文件。在tm代码中加入以下的片段，指向这个文件. ino。mm creativ_pah： ”a5/,/指向动画文件夹的位置 ”scri_id”: ox”,/ 包含动画scipt元素的d der_moe”: embede” /scrip rit src=pa5/loaer。s dox/scitdiv2、动态插入在不允许直接修改hml的情况下,可以通过代码的方式，动态的将动画加到网页中假设网页中存在为otaine1和contanr的空div:dvid”ontainr”style=wdh：320x;eigh:1px；sitin:relie;”/d

24、ivdiv id=onaier stylewidth:32p;heig:512px;osition：reltive;”/div/下面的代码,动态的将2个动画插入这两个空di中。scrptv ript docuent.creaeElee(scrt）；scrpt.rc = ”pa/loader。js；sc。id = ”scrit1。”;idw._mcp = crativepat”: 5/, ”rip_id”: scrpt1， renem”： ”emeded”crpt。oloa =functon()vascript= document。creatEleet(”scrpt”）；script。sc =

25、p/lader。s”； script.id scrit2。js; wdow._mrmcp= creative_path”：”p/， ”script_: ”script2”, rendermode：”bede” docun.getElemetyI(”conaine2）ppendChild（crpt）;dmet。gtElemetByd(”contanr1”)。appeCild（srp);muea对象的事件muged对象包含动画加载过程中的事件,如下代码所示:varmua= wndMged”curetAn；mugeaadEventListener（cptready”, functin() / 当动画

26、脚本加载完成后引发回调，s指向mged对象（下同）。);gea。addEvenListner(iaeready”, funcion（) /当动画预加载图片完成后引发回调。);mgeda。addEvenisener（”rendead”, uction（） / 当动画准备完成,开始播放前的那一刻引发回调。)；gda。addEventListener(”cli”, function（) / 在舞台上侦听点击事件);其他话题:动画在显示加载界面时，到底在加载什么？动画需要加载必要的文件后才可以正常播放：js文件：在脚本窗口中输入的脚本、通过“导入,“脚本”对话框加入的脚本，播放器的依赖文件的脚本。图片

27、：需要预先加载一部分图片(目前是预先加载第一页的图片)，以免渲染开始动画时，图片没有加载而出现空白画面加载时,图片和脚本并行加载。当所有脚本加载完成，在mugda对象上引发scptredy事件，此时,可以访问到所有的脚本;当所有图片加载完成后，引发imagready事件。当两个时间都引发后，引发renerredy事件.PI的应用：scene对象对于主舞台、元件实例这样拥有时间轴的动画元素，都拥有对应的se对象。通过操作scene对象,可以使用编程的方式,获取当前的播放位置、跳转播放位置、获取主舞台上的物体等操作。获取cen对象对主舞台，直接通过下面的方式获取:对元件实例，首先需要在舞台上对元件

28、实例命名(例如“）,然后通过下面的方式获取:sce对象的属性scene对象包含了主舞台和元件实例时间轴和播放进度的信息。1、获取当前播放位置和状态其中curentd为crrenDecmId的取整值。2、获取时间轴的信息可以通过下面的代码，获取时间轴的长度和页的信息:3、获取命名帧的实际帧号在IE中,可以为关键帧命名，从而在行为中方便的跳转到命名帧。下面函数提供了命名帧到实际帧号的转换。cene的事件当主舞台或者元件实例重绘前，引发nrframe事件。在事件的回调中,可以操作动画,改变物体的位置,或调整将动画重定向到其他帧。*ce的方法*scene包含系列控制播放进程的方法,此外,se代表舞台或

29、者元件实例，管理着舞台或元件实例容器中的所有子物体.1、控制播放进程在主舞台scene或元件实例cne上使用下面的方法,可以控制他们的播放进程:2、播放片段可以通过代码，将一小段时间轴标记为片段，将动画的播放范围限定在片段中。如下：3、物体遍历舞台和元件作为容器,包含一系列的动画元素。在IDE中,可以为物体命名，下面的代码通过名字查找到舞台上的元件实例A中的物体B上述例子允许反遍历（由子元素寻找父元素),例如：4、增删物体AP的应用:工具API微信转发在微信中,经常需要定义微信转发的标题、描述、转发地址。除了在DE的文档信息中填写这些信息以外,还可以通过代码动态的更改这些值,代码如下:上述函数可以多次调用,每调用一次,用新值覆盖旧值。上述4个参数可以省略3个。信息提示g渲染器提供通用的信息提示函数，代码如下:A的应用：在动画中添加代码、Mgea API的整体结构、Mgea对象、ee对象、aObec对象、工具AP、获取Mugeda后台数据、使用自定义回调函数、将Muged部署在第三方服务器.