制作第一个H5作品(1)

准备工作:

1、下载chrome浏览器(百度搜索下载即可)
2、使用chrome浏览器打开Mugeda网站注册账号。(考虑到有些浏览器对html5的支持不够,强烈建议使用chrome浏览器)
1.png

点击图片查看大图

简单来讲,制作一个Mugeda动画内容,包含有如下几个步骤:

1. 添加元素(图片、文字等)到舞台;(制作动画前需要先准备好图片或文字等素材)

2. 为添加的元素定义动画;

3. 定义和用户的交互行为(例如点击跳转等);

4. 导出或发布内容;

现在我们制作一个简单的动画,让一段”Hello, world!”的文字旋转着出现在屏幕中央,点击文字后,调转到一个指定的页面。
点击查看动画演示
 
1、登录网站后,点击右上角用户名旁边的小箭头——点击下拉列表“动画作品”,进入管理后台,创建作品。

2.png


2、Mugeda的编辑工作台(IDE)在浏览器窗口中打开。默认的舞台尺寸为320*520,(我们通常建议使用这个默认尺寸,这是一个典型的适配移动设备动画的尺寸),素材(图片)建议是640*1040,几乎可以保证清晰度,适配大多数主流机型。

3.png


3、开始做动画,我们为舞台添加一个背景图片。从IDE左侧的工具栏上选择“素材”按钮,可以打开选择“素材”的对话框,选择背景图片。

5.png


如果Mugeda提供的素材无法满足您的需求,您可以选择上传自己制作的素材,点击查看上传方式

4,我们为舞台添加一段文字。首先在IDE上方的时间线上,点击时间线左下角的“新图层”添加一个新的图层。

6.png


5、新添加的图层会自动命名为”图层1”, 并添加在图层0的上面。

图7.png


6、添加文字。从IDE左侧的工具栏选择”文字“, 并在舞台上点击鼠标添加文字,双击鼠标可以改变“文字的内容”,并且通过右侧属性栏修改文字的颜色,大小等。

图8.png


7、这个例子我们把颜色调为红色。下面是一个调整好的样子。

9.png


ok,我们已经完成了第一个步骤:添加元素到舞台。
接下来,我们为添加的文字定义一个简单的动画。
在继续之前,我们先保存一下作品,点击IDE上部工具条上的”保存”按钮,或者从文件菜单中选择“文件/保存”。
第一次保存作品时,需要提供一个文件名称。
(注意:保存时的当前舞台截图,将作为作品的缩略图存在。之后再次保存时,不需要提供文件名,而作品缩略图会根据最新的舞台截图进行更新。)

10.png


8、为了制作动画,我们需要先将内容的帧数扩展至一个适合的数据。默认情况下,动画内容只有一帧,这个可以时间线面板上看到:

11.png


9、我们现在把动画的帧数调整到20帧。在时间线上点击图层0,选中第20帧,然后单击鼠标右键,从出现的菜单中选择“插入帧(F5)”,可以将图层0的帧数扩展至第20帧。也可以选中第20帧后,直接按下键盘的F5键,达到同样的效果。

12.png


这时候时间线显示如下。注意:图层0已经包含20帧,而图层1仍然只有一帧。

13.png


注意:定义在图层中的元素(图像、文字等),只有在图层的范围内才可见。为了理解这一点,可以点击工具栏上的播放按钮,在舞台上预览作品。

14.png


10、开始添加动画,在时间线上,单击图层1中1到20帧的任何一帧,单击右键,在出现的菜单中选择“插入关键帧动画”。

15.png


这时候,图层1变成了浅绿色,并且在图层范围的最后一帧(第20帧)出现了一个红色的点。这表明,动画已经添加成功了。图层1中的第1帧和第20帧,定义了动画的开始、结束帧。中间的帧就可以由系统自动通过插值产生了。我们可以为图层1中包含的(文字)元素在动画的开始和结束帧分别定义不同的(位置、大小等)属性,从而产生动画效果。

16.png


11、在时间线上选中图层1的第1帧,选中IDE左侧的“变形”工具,然后在舞台上选中文字,可以对文字进行缩放、旋转等操作。也可以直接在属性面板调整其属性。在这个例子中,我们把文字的初始透明度设置为10,旋转设为180度,大小缩小一点,并放置在舞台中央。调整好的属性如下图所示。

17.png


保存作品。然后从工具栏点击“播放”在舞台上预览动画效果。也可以在工具栏上点击“预览”在一个单独的窗口预览动画效果。还可以在工具栏点击”二维码“获取一个二维码,然后在手机上预览产生的动画。

图19.png


默认的动画是不循环,可以通过菜单项”动画/循环“来切换循环状态。

20.png


12、我们已经完成了添加元素、定义动画两个步骤。下面我们进一步为动画添加一个最简单的跳转行为。就是当点击文字时,跳转到一个目标网页。选中背景图片,然后在其属性面板上,为其添加一个”链接“行为,地址指向百度,打开方式选择“外部打开”。

21.png


点击预览查看动画。点击背景图片,将会导航至http://www.baidu.com。(注意:添加链接前面一定要加http://)Mugeda支持大量的行为方式,从简单的链接,到表单提交、动画控制、调用手机功能(例如打电话),甚至调用JavaScript回调函数等。我们会在今后的教程中陆续介绍给大家。

13、点击保存,恭喜你!第一个动画已经顺利完成了!

为了在你的网站使用这个动画内容,最简单的方式,就是导出完整的动画包,并内嵌到自己的网站中。记住在导出前保存你的作品。在菜单中选择”文件/导出/HTMl源文件”。该操作会将动画内容打包下载到你的硬盘上。

22.png


导出的动画包中包含有动画播放所需要的脚本、样式、页面、图像等。双击其中的index.html文件可以直接在浏览器中观看动画内容或者通过iframe的方式嵌入动画。

23.png


本教程用到的动画的预览地址是:

点击查看

你也可以在登录后用下面的链接在IDE中查看其源代码:

点击查看

1 个评论

不错哦!

要回复文章请先登录注册