实训十七创建元件.doc

实训十七 创建元件实训目的和要求一、实训目的1 了解元件的作用和分类。2 了解实例的概念。3 学会使用元件设计动画。4二、实训要求1 掌握元件的分类和特点。2 掌握元件和实例的窗口切换。3 掌握使用元件创作实例的技巧。三、时间分配2 课时四、环境要求Dreamweaver MX 2004五、内容提要1 图形、按钮、影片剪辑元件特点。2 元件与实例窗口切换。3 实例的属性设置。六、教学重点与难点1 创建元件。2 创建实例。3 实例的属性。实训内容与步骤一、准备工作在 C 盘或其他盘新建一个文件夹，输入名称为myweb17 。将给定的素材复制到文件夹中，实训中制作好的文件也存入该文件夹中。二、制作按钮元件及实例1新建一文件，选择【窗口】 |【库】命令，打开【库】面板，以便后面 创建实例时用。2选择【插入】 |【新建元件】命令，在弹出的对话框中选择“按钮”元 件。这时窗口自动进入“元件 1”的编辑状态。在前三帧分别绘制按钮三个状 态的图形为：垂直正放的椭圆，红色径向填充；倾斜放置的椭圆，填充同前 一状态；变小的正圆，填充同前一状态。（注意：三帧中的图形均要放置在 窗口中心点处）。如图 17.1、 17.2、17.3 所示。图 17.1 【弹起】帧中的图形效果图 17.2 【指针经过】帧中的图形效果图 17.3 【按下】帧中的图形效果3回到“场景 1”窗口，从【库】面板中拖“元件1”到舞台中，再拖一次，这样在舞台上就有两个元件实例，排好它们的位置，按 Ctrl+Enter 键， 观察测试影片的效果。4将文件保存为 sx17-1.fla 。二、制作图形元件及实例1打开给定的 “风车 .fla”文件，选中“图层 1”中的风车， 然后选择 【修 改】 |【转换为元件】命令，在弹出的对话框中选择“图形”元件。在打开的 【库】面板中出现了“元件 1”。2插入两个新的图层“图层 4”和“图层 5”。选中“图层 4”的第 1 帧， 然后从【库】面板中将元件 1 拖到场景中的合适位置。用同样的方法在“图 层 5 ”的第 1 帧也拖入元件 1 。将场景中三个元件实例调成大小不相同的样子。3将原文件中“图层 2”的风车杆也按上述方法转换成图形元件，然后 选中“图层 2”的第一帧，从【库】面板中拖出两个杆来，并调整好与风车的 位置。（由于风车杆不制作动画，所示三个杆都放在同一帧是可以的）。4适当调整三个风车的“ Alpha ”透明度。效果如图 17.4 所示。图 17.4 多个风车实例效果5 按前面实训中讲过的方法，分别对三个风车设计动画。 6测试影片观察动画效果，满意后保存文件为sx17-2.fla 。三、制作影片剪辑元件及实例1新建一文件，选择【插入】|【新建元件】命令，在弹出的对话框中选择“影片剪辑”元件。这时窗口自动进入“元件1”的编辑状态。2 选中“图层 1”的第一帧，绘制一圆球，灰白径向填充，不要边框。 如图 17.5 所示。图 17.5 圆球 3创建该圆球的补间动画，效果为向下运动，然后再向上运动。为了增 加弹动感，在第 1 帧对象的“简易”属性为 -60，在第 15 帧处对象的“简易” 属性为 +60 。如图 17.6 所示。图 17.6 涟漪初始状态4返回场景 1，画一矩形放在舞台的下半部， 不要边框， 颜色为“#009900”。5从【库】面板中拖出一个元件置于舞台的上方，再拖出一个元件置于 舞台的下方，两个元件最好垂直对齐。6选中下方的元件实例，选择【修改】|【变形】 |【垂直翻转】命令，使之与上方的元件实例正好反方向运动。然后在【属性】面板的“颜色”中选 择“色调”，颜色值为“ #00FF00 ”，“ 50%”，下方元件实例颜色变为浅绿 色。如图 17.7 所示。图 17.7 两个实例的位置、颜色7按 Enter 键观察播放效果。调整两个实例碰撞处正好在绿色矩形的上 边线上。效果满意后将文件保存为 sx17-3.fla 。