flash课件制作“有趣的七巧板”

flash课件脚本设计：
课件分为“认一认”、“请欣赏”、“七巧板”、“拼图赛”、“夺星榜”五个版块。其中“认一认”为复习环节，让学生辨认已经认识的图形；“请欣赏”是导入环节，通过欣赏用“七巧板”拼成的各种漂亮的图形来引入课题；在“七巧板”版块中向学生介绍“七巧板”的来历及构成，因此需要制作一个可以拖曳和旋转任一块图形的“七巧板”，以便介绍。“拼图赛”环节中设计了一组拼图夺星大赛，通过阶梯式的练习使学生在有趣的活动中感悟平面图形的特点，培养学习兴趣，发展空间观念。“夺星榜”是反馈小组竞赛结果的版面。整个课件流程图如下：

课件制作难点：
实现“七巧板”的七块图形的拖曳和旋转；
实现“夺星榜”的显示隐藏和“夺星榜”的即时记录。

素材的搜集准备：
1.搜集合适的课件背景图片，并作适当修改处理。（在此例中选择直接绘制课件背景图）
2.搜集一些漂亮的七巧板拼图，以作参考。
3．搜集“守株待兔”的动画片。

课件制作过程：
（一）创建flash文档，绘制背景图。
步骤1：新建一个flash文档，设置舞台尺寸为800×600像素，背景色为白色，将文档另存为名为“有趣的七巧板.fla”。
步骤2：在舞台中绘制课件背景图，选中背景图的所有内容，将其转换成名为“课件封面”的影片剪辑元件。
步骤3：双击“课件封面”元件，进入编辑窗口，输入课件首页的文字信息，如图1所示。 图1　课件首页界面
步骤4：为了增强首页界面的动感效果，在网上搜集一个透明的星星闪烁动画，选择【文件】→【导入】→【导入到库】命令，将动画导入到库中。将动画效果拖入“课件封面”元件的舞台中，调整好位置及大小。
步骤5：按【Ctrl+L】组合键，调出库面板，在库中选中“课件封面”元件，右键选择【重制】命令，将复制出来的复件重命名为“课件说明”，修改界面的部分内容，添加课件说明文字。如图2所示。 图2　课件说明界面
步骤6：再次重制一个复件元件，将其重命名为“课件主体背景”，修改界面，如图3所示。图3　课件主体背景界面
（二）制作课件所需元件
1．制作“七巧板”元件。
步骤1：新建一个名为“七巧板”的影片剪辑元件，在舞台中绘制一个200×200像素的正方形，使用线条工具按图4的示例画线，并填充不同的颜色。 图4　七巧板的分割示例图
步骤2：选中图形中的线条，删除。
步骤3：选中图形中的红色三角形，单击右键，在弹出菜单中选择【转换为元件】命令，在对话框中输入元件名称“大红三角形”，【行为】选择“影片剪辑”，在【注册】右方的九个小方框中选中最中间的点，如图5所示。完成后按【确定】按钮。 图5　图形转换为元件对话框
步骤4：同样的方法将其余的六块也转换为影片剪辑元件，特别要注意元件的注册点一定要在中心位置，否则会影响下一步对元件实行拖曳和旋转的完成效果。
步骤5：在“七巧板”影片元件的舞台中，点击“大红三角形”元件，按【F9】打开动作面板，在里面输入如下语句：（语句将实现当鼠标单击此元件时开始实现拖动操作，双击此元件时旋转45度。鼠标松开或移出元件时停止拖动。）
on (press) {
this.startDrag(true);
time = getTimer()-down_time; 
if (time<300) {
this._rotation +=45
} 
down_time = getTimer(); 
}
on (release, rollOut) {
this.stopDrag();
}
步骤6：将相同的代码复制到其他六个影片剪辑元件的动作面板中。
2．制作“认一认”元件。
步骤1：在库中双击打开“课件主体背景”元件，锁定所有层。（这里借用“课件主体背景元件”来创建新元件，以方便确定新元件中内容的位置和大小。）
步骤2：新建一个图层，在舞台的背景图合适位置输入“认一认”环节的题目要求“你能叫出它们的名字吗？”。将文本转换为名为“认一认”的影片剪辑元件。
步骤3：双击舞台中“认一认”元件，进入此元件的编辑窗口，在合适的位置绘制如图6的图形及相关文字。步骤4：分别将图形和文字转换为影片剪辑元件。并依次给这些影片剪辑元件以相应的实例名，如第一个图实例名为“tu1_mc”，第一个图对应的文字元件实例名为“t1_mc”。
步骤5：在时间轴上新建一个名为“Action”的图层，选中第一帧，打开动作面板，输入以下语句：（语句效果：首先将文字元件设为不可见，当鼠标点击图形时，相应的文字元件可见。）
for (i=1; i<8; i++) {
setProperty("t"+i+"_mc", _visible, "0");
}
tu1_mc.onRelease = function() {
t1_mc._visible = true;
};
tu2_mc.onRelease = function() {
t2_mc._visible = true;
};
tu3_mc.onRelease = function() {
t3_mc._visible = true;
};
tu4_mc.onRelease = function() {
t4_mc._visible = true;
};
tu5_mc.onRelease = function() {
t5_mc._visible = true;
};
tu6_mc.onRelease = function() {
t6_mc._visible = true;
};
tu7_mc.onRelease = function() {
t7_mc._visible = true;
};
步骤6：回到“课件主体背景”元件编辑窗口，将刚才的新建的图层删除。
3．制作“请欣赏”元件。
步骤1：根据搜集到的七巧板拼图，选择七种用前面已经制作好的七巧板拼好，待用。
步骤2：同样，在“课件主体背景”元件的编辑窗口中，新建一个图层。从库中拖一个拼好的七巧板拼图至新图层的合适位置。
步骤3：选中拼图，将其转换成名为“请欣赏”的影片剪辑元件，双击进入此元件编辑窗口，将其他六种拼图逐帧插入舞台中，调整好位置。
步骤4：新建一个按钮层和一个“Action”层，在按钮层插入一个播放按钮，在按钮上添加动作语句“on (release) {play();}”。在“Action”层插入7个空白关键帧，在各帧中添加动作语句“stop();”。
步骤5：返回“课件主体背景”元件，将新图层删除。
4．制作“拼图赛”元件。
步骤1：在“课件主体背景”元件中新建一个图层，在合适的位置输入夺星拼图大赛的标题。将文字转换为“拼图赛”影片剪辑元件。
步骤2：双击“拼图赛”元件进入编辑窗口，输入第一关的题目，并在合适位置插入“七巧板”元件。
步骤3：同样的方法，在第二帧、第三帧分别插入空白关键帧，放入第二关、第三关的题目内容。
步骤4：在第四帧插入一个空白关键帧，输入夺星拼图大赛第四关的标题。将文字转换为“第四关”影片剪辑元件。双击进入此元件编辑窗口，新建五个图层，依次将图层分别命名为“视频”、“动画人”、“动画兔”、“动画树”、“题”、“Action”。
步骤5：单击【文件】→【导入】→【导入到库】命令，将预先搜集好的“守株待兔”的视频导入进来。
步骤6：在“视频”层的第一帧拖入视频元件，调整好位置。
步骤7：制作“人”、“兔”、“树”的七巧板拼图。
步骤8：根据动画的情节发展，在“动画人”层、“动画兔”层、“动画树”层的相应帧处制作拼图元件从视频中渐显并移至视频外边的动画效果。
在这三层的第1186帧（即视频层的最后一帧）和1195帧分别插入关键帧，制作拼图元件从边上移动到舞台中间的动画效果，并在“题”层的1186、1196帧处出示第四关的两个题目。
步骤9：在“Action”的第1195、1196帧处添加动作脚本语句“stop();”。在第1195帧入插入一个插入按钮，在按钮上添加“on (release) {play();}”语句。
步骤10：返回“课件主体背景”元件，将新图层删除。
5．制作“夺星榜”元件。
步骤1：在“课件主体背景”元件中新建一个图层，绘制一个白色的无边框矩形，将矩形转换为“夺星榜”影片剪辑元件。（画矩形的目的是使“夺星榜”元件不透明）
步骤2：双击进入“夺星榜”元件，新建“表格”层和“红星”层。
步骤3：在“表格”层的中绘制一张表格，用于登记小组竞赛结果。
步骤4：在“红星”层的合适位置绘制一个小红星，并将其转换为影片剪辑元件，实例名为“xin_mc”。
在此层的第一帧上添加语句“i=0;”
步骤5：新建一个名为“透明”的按钮元件，前三帧为空白帧，第四帧中绘制一个矩形。
步骤6：将“透明”按钮拖至“红星”层中，覆盖在小红星的上面。在按钮上添加如下语句：（语句效果：当鼠标在小红星位置按下时即复制一颗红星并拖动它，当鼠标弹起时停止拖动。）
on (press) {
duplicateMovieClip("xin_mc", "xin"+i, this.getNextHighestDepth());
this["xin"+i].startDrag(false);
this["xin"+i].onMouseUp = function() {
stopDrag();
};
i++;
}
（三）课件的组合
步骤1：在课件的主时间轴上建立八个图层，从下到上分别命名为“背景层”、“认一认”、“请欣赏”、“七巧板”、“拼图赛”、“夺星榜”、“按钮”、“Action”。
步骤2：在“背景层”的第1帧插入“课件封面”元件，第2帧插入“课件说明”元件，第3帧插入“课件主体背景”元件，延长帧至第6帧。锁定该层。
步骤3：在“认一认”层的第3帧插入关键帧，将“认一认”元件插入至舞台合适位置。在第4帧插入空白关键帧。
步骤4：同样，在“请欣赏”层第4帧、“七巧板”层第5帧、“拼图赛”层的第6帧、“夺星榜”层的第6帧处分别插入相应的元件，调整好位置。在各层的后一帧上插入一个空白关键帧。
步骤5：给“夺星榜”层中的“夺星榜”元件一个实例名“dx_mc”。
步骤6：在“按钮”层第1帧处，拖入两个透明按钮，放在“课件说明”、“开始上课”文字的上面，分别给这两个按钮添加动作语句“on (release) {gotoAndStop(2);}”、“on (release) {gotoAndStop(3);}”。
第3帧插入空白关键帧，插入五个透明按钮，分别放在各个菜单的上面。按钮从上到下依次给前四个透明按钮添加动作语句“on (release) {gotoAndStop(3);}”、“on (release) {gotoAndStop(4);}”、 “on (release) {gotoAndStop(5);}” 、“on (release) {gotoAndStop(6);}”，给“夺星榜”文字上的透明按钮添加如下语句：（语句效果：当鼠标点击按钮的次数为单数时，夺星榜元件移至舞台中，可见；当鼠标点击按钮次数为双数时，夺星榜元件移出舞台，不可见。）
on (release) {
if (n%2 == 0) {
dx_mc._alpha = 100;
dx_mc._x = 200;
} else {
dx_mc._alpha = 0;
dx_mc._x = 800;
};
n++;
};
步骤7：在“Action”层的第1帧至第6帧插入关键帧，第1帧上添加如下语句：
stop();
fscommand("fullscreen", true);
在第2帧至第5帧上均添加语句“stop();”
在第6帧上添加语句：
stop();
n=0;
dx_mc._alpha=0;
dx_mc._x=800;
至此，整个课件制作完毕，测试一下效果吧！