相信大家通过前面的学习，对于HTML5，也开始逐渐了解了吧，最重要大家要从中学得到东西，不要盲目跟从，也要结合自己的理解去看教程，其实那些是基础入门的内容，这次我们课课家教育将继续为大家带来的HTML5的相关教程：HTML5技术教程：使用元件，其实这个也是一个基础入门的内容，但学习都是要由浅入门的，所以我们要慢慢来，由浅入深，希望这个教程能对新手及各位爱好者有所帮助。

 

　　我们首先来介绍一下元件：(其实总体来说，元件是一个非常重要的工具，没有它制作动画就很难了)

 

　　元件是一个可以在舞台上实例化和再利用的预先生成的独立动画。我们知道每一个元件有它自己的时间轴(层，单位等)，而且可以独立显示的动画。元件不但提高了动画的重用性和灵活性，而且是个强大的存在。元件也可用于创建复杂的动画效果。而且所有元件都在元件库里管理。您可以创建、编辑、删除元件，或将他们归类到不同的文件夹(呵呵，这个随大家的喜欢)。元件既可以直接拖拽到舞台上生成实例，更可以再脚本中，通过MugedaAPI代码动态生产实例，其实一个元件可以生成多个实例，并可随时动态删除，然而在复杂的动画中，比如小游戏，非常方便，MugedaAPI的使用后面会有专门的章节介绍。

 

　　步骤①：首先我们需要建立新的元件：在元件库栏的左下角，有新建元件的按钮，还有复制元件的按钮。点击新建元件按钮建立一个新元件。

 

　　步骤②：在我们在元件创建好后，就可以进行编辑，我们知道编辑元件和在主舞台上编辑动画是相同的，每个元件都具有自己的时间轴和舞台。因此，可以在一个独立的舞台进行编辑。况且已经创建好的元件会显示在元件库中，然后双击它的图标或者单击编辑元件可以继续编辑它。

 

　　步骤③：在我们完成元件编辑后，可以点击主舞台，退出元件编辑，并返回主舞台。

 

　　步骤④：我们可以见到下图的例子中创建了一个滚动的轮子的元件。

 

　　步骤⑤：呵呵，就在元件编辑好后，便可以在主舞台中使用元件。这里首先确保已经返回主舞台，在元件栏右下角有添加到舞台的按钮，或者直接从元件库中向主舞台拖拽，就可以在主舞台中生成一个相应元件的实例。

 

　　步骤⑥：其实我们在编辑一个元件实例的参数和编辑其他的元素是一样的(例如图像，文本等)。

 

　　步骤⑦：我们在滚动轮子的元件中，从第一帧到最后一帧，轮子需要将从左边滚到右边(这个需要注意了，不要搞混了。)

 

　　步骤⑧：在元件实例添加好后，可以点击工具栏的预览按钮，会看到轮子在屏幕滚动得效果。

 

　　总结，其实元件的编辑就和在主舞台中编辑一样，这样就可以将主舞台中一些比较独立的动画放到元件中，就可以把一个复杂的动画分解成数个独立的元件，然后再在主舞台中把他们组织起来，这样可以大大降低主舞台动画的复杂度(需要比较方便的新手可以了解一下)，其实这个是比较适用用复杂动画。其实我们可以通过元件更可以配合MugedaAPI来实现一些动画元件实例的动态性，可以重用性，不过这里只需要制作一个元件，就能通过代码随时动态生产多个实例，并能根据需要，我们可以随时控制元件实例的播放段(即Segment,一个元件可以根据帧分成数段，比较一个酒精灯的元件，可以分成点燃酒精灯的段、正常燃烧段、酒精灯熄灭的段，这样通过代码可以动态控制元件播放那一段，根据需要每一段可以循环播放，也可以只播放一次)，这样就可以极大地提高了动画制作的灵活性。