mfc 制作圆形按钮_关于教学课件的制作心得

过程报告

Flash的编辑操作界面中，主要使用的功能区块，包括顶部的主菜单栏； 左侧的绘图工具栏；中间的时间轴(由帧和层构成)； 白色的区域为舞台，也就是编辑各种元素的地方，也是导出动画之后，动画的放播区域(但是，默认输出的动画文件是没有尺寸大小的限定的，除非手动的在边界补上色块，或者是嵌入于网页之中)，所以常常在放到最大的时候，看到了边界之外的东西；

3 系统方案设计

3.1 系统设计流程

项目按进度大体分为前期、中期、后期三大阶段，前期的阶段重点在于收搜集和定型，中期在于原材料的处理及项目的完工，后期主要做一些锦上添花之类的工作；

其中前期阶段的任务包括：

1.定义本项目的任务：开发设计一个适应于个人电脑平台的“交互式动画多媒体教学课件”；课件的主题是“超短波电台内部电路仿真教学系统”；

2.熟悉TKR-850超短波电台内部结构(硬件构成和运行原理)主要电路的工作流程以及主要元器件的功能，划定出本套毕设项目所要呈现的主题范围，包括的内容和不包括的内容区分清晰，画出项目框架图；再结合项目要求，从各种途径收集类似的项目案例(SWF格式有交互式功能的动画课件)，分析分解其功能和结构，选一个作为标准参考模板；

3.从各种途径收集相关资料，网络上以及同学老师和朋友处；包括拆解TKR-850超短波电台来拍摄内部主要电路的实物图，在网上查找TKR-850相关使用手册及维修手册来收集主要内部电路的框图；

在网络上搜集关于flash应用于创作相关领域作品的教程视频，并作分解学习，将学到的可用的技能知识应用于项目的制作；

4.确定项目所需的硬件设备，包括个人电脑，个人手机/或电子录音设备；在电脑中下载并安装相关的软件，例如Adobe Flash 、Adobe Photoshop，这两个创作型软件对计算机配置的要求很低(前提是控制好原文件体积以避免出现死机)，所以普通个人电脑就可以完成任务;

其中中期阶段的任务包括：

1.对前期收集到的原始素材进行编辑处理加工，包括剔除相关性不强的，用PS对某些图片进行适当裁切合并等；

2.以项目框架图为基准进行系统开发和构建，对初期无法实现的设想寻找代替方案或取消；

其中后期的任务包括：

1.对录制的音效进行编辑并在软件中合成(因为完成动画后，根据动画的进展来配音比较容易操作)；

2.对项目可以完善美化的页面或元素进行最终的修饰；

3.对己完成的项目进行操作检验，发现并纠正项目中存在的BUG；

3.2 设计原则

1.确保设计所体现内容的准确性

因为是标准课件的开发，所以所呈现的内容必须以学校统一教材为依据。涉及到前后面板文字说明部分，电路演示的语音部分，以及素材处理时添加的部分符号信息，都要与教员提前沟通，提前校对。

2.确保设计的便利性与针对性

作为教学课件，用户群体是广大学员和教师，所以须考虑到系统的可操作性强，用户界面和各种元素清晰易懂；对文字难以表达的电路电流等，用动画的形式让初学者更易于接受；

3.确保设计的交互性

此设计制作了大量的按钮，增强了设计的交互性，增强了使用者的操作反馈感。特别是电路演示部分加入控制声音讲解的暂停键，从而更好地达到服务教学的目的，

3.3 功能实现

3.31整体框架

1.打开课件后进入并停留于“片头封面”；

2.点击进入按钮后，来到“主目录页面”；

3.点击“主目录页面”左侧的目录，进入各个对应的模块内部；在各模块内部，通过相应的按钮再进入相应的次级内容；

4.点击退出按钮，退出关闭课件；

3.32模块介绍

本项目分为四大模块，作为一个课件而不是一个普通动画，所以时间轴上有代码控制“播放头”停留在第一帧(时间轴上的帧上有a，说明上面有代码控制)；如果相应的没有鼠标操作，它将停留在第一帧画面；鼠标右键点击时间轴上的帧，将其设置为关键帧；再次右键点击该帧，在“动作面板”中 ，输入代码 Stop();

一、片头进入模块，包括片头封面和导读欢迎页面，在主场景的时间轴中，此模块由2个关键帧组成；将在PS中处理过的元素(校徽和实物照)导入到“舞台”中，并通过左侧工具栏的“任意变形工具”来缩放其大小；进入序言部分，序言由一个“影片元件”构成，影片元件中输入文字，用调整元件透明度的方法，实现从隐到现的动画过程；

二、设备介绍模块，包括前后面板中实体按键所对应的文字注释，在主场景的时间轴中，此模块由1个关键帧组成；

三、电路介始模块，包括立体电路图和所对应的电路图和实物图，在主场景的时间轴中，此模块的关键帧为数最多，可达一百多个(虽然有几百个帧，但有些帧为了后期的可编辑性，是让它先空着的)；

四、电路演示模块，包括所对应电路模块的动画模拟和人声解说，在主场景的时间轴中，此模块的帧数也有几十个；

五、退出模块/按钮，此模块不设置页面，只在按钮中写入AS2.0代码，

on (release) {fscommand("quit");}

4.1主背景的制作

在电脑中打开flash 软件；新建空白文档，在属性面板中，将“舞台”(也就是文件档属性)大小设置为1200X800；背景默认为白色；并在主场景的时间轴中先插入100帧备用；

4.2片头界面的制作和文字的加入

在左侧工具栏中打开“文字输入功能”选项；用鼠标再在舞台上随意点击一个位置，打开电脑的输入法，打字输入为：“内部电路仿真系统”。以及相应的英文名称：“Simulation Teaching System of Internal Circuit of Ultrashort Wave Radio”。将汉字的字体选择为微软雅黑，将字体大小调整为40；

制作旋转的装饰；点击顶部命令菜单， 新建一个“影片元件”，点击左侧工具栏中的“栯圆形工具”画出一个圆形，再另外画出一个小一点的圆来减掉大圆的面积，以得到一个圆环形状，再用鼠标选择不需要的部分将其删除，得到一个类似旋转按钮的图形，并将其转化为“图形元件”，在第90帧处再次插入关键帧，并把该处的关键帧的元件旋转360度，点击两个关键帧之间的时间轴，鼠标右键创建补间动画；在“属性面板”中将图形元件选择顺时针旋转(这个操作是元件的嵌套使用，即影片元件中包含图形元件，因为“影片元件”才可以单帧播放或在静止帧时播放)；

4.3进入按钮的制作

进入主场景，在主菜单中点选“插入”命令，点击“新建元件”，将在选择面板中，将元件类型选择为“按钮”并确定，软件操作界面将自动进入“元件内部场景”；

在元件内部场景，选择文字输入工具，输入中文字“进入”，选择字体样式，将字体字号设置为40；点击左上角的“指针经过”(这也是一个帧)，选中此帧的字体“进入”，在属性面板中，将此关键帧的字体色选择为黄色(这样当鼠标经过该按钮，则产生变色效果)；点击左上角的场景1，回到主场景； 再在库面板中，把进入“按钮”元件拖入舞台；在主场景中，鼠标右键点击该元件，再点选动作，进入“动作面板”，在输入框中写入

on (press) {

gotoAndPlay(2)

}//当该元件被(鼠标)点击，“播放头”跳转并停留在第2帧；完成进入按钮的制作；

(动作面板的作用，就是代码/编程语言输入的输入框，在本课件中，所用的编程语言为Flash ActionScript2.0代码，这是flash系列软件配套的面向对像编程工具，和其它语言相比，易于初学者学习)

5设备介绍部分制作

5.1前/后面板制作

在主场景中，鼠标右键点击第48帧并“转化为关键帧”； 将前后面板的图片导入“舞台”，用左侧工具栏中的“任意缩放工具”调整其大小，并调整对齐在合适的位置；

5.2文字说明的制作(隐形按钮)

用上面制作按钮的方法，制作鼠标经过时显现注释文字的效果，然后，再将“弹起帧”的内容调整为透明度为0(实际操作中5%的透明度有时候就不可见了)，只留下“指针经过”帧的内容可见；(也可以在“点击帧”中画出一个矩形，来定义触发的范围；实际上按钮也是一个逐帧动画组合，通过某些触发条件跳转到相应的帧画面 )

6电路介绍部分制作

6.1主电路图制作

电路介绍部分由三类图像组成，主电路图(立体示意图)，电路图，实物图； 点击“电路介绍”后，会出现主电路图(立体示意图)，几个主要电路都出现在主电路图上，通过点击相应按钮来进入到具体电路图，尔后可以通过按钮选择继续显示所选电路图相应的实物图(拆解实物后所拍)，也可以通过按钮选择回到主电路图，重新选择想要了解的电路图。

电路图和实物图之间的切换，使用的是图形元件的运动补间技术，将两个图转化为元件，再用“两个关键帧加补间动画”的方法制作元件向左右移动的动画效果；

主电路(立体示意图)电路图和实物图，都是一张一张“位图JPG格式”，在PS中将其编辑后(有的图片去除白边，有的图片抠图抠出物体形状，有的图片因为素材是两个半图，在PS中将其合成为一个图)，导入到flash软件中，再在舞台中调整其大小和位置(调整位置方面，flash中有“对齐面板工具”，可以用以便捷的对齐各种元素，功能包括左对齐，右对齐，底对齐等等)；

6.2跳转按钮的制作

“跳转按钮”的制作手法类似于前面的“隐形按钮”制作，新建元件后，在选择面板中将元件类型选择为“按钮元件”(如果不小心选错后又确认了，后期还可以重新改选)，使用矩形工具画出相应的矩形，然后调整其“锚点”(类似于句号的空心点)使其变形(点选工具栏中的“部分选取工具”(白色箭头)以激活其功能，用“部分选取工具”“框选”矩形中的角，这时发现两线条的交点从空心变成实心，说明己被选中，这里可按键盘中的方向键，上下左右的微调位置，当矩形的四个锚点位置改变了，矩形的形状也就变成倾斜的)；只是这次是将不透明度调整为30而不是0(为0完全的不可见，但是保留30%让它稍为可见，以作为半透明状的点击区域)； 跳转按钮是此课件的重要组成元素，虽然其核心代码是一样的，但是大部分跳转的最终帧数(目的帧)是不同的，所以每个按钮的内部代码都需要打开“动作面板”人工编辑其最终的跳转帧数(目的帧)，比如某个按钮的代码是on (press) {gotoAndPlay(48)}，而另一个可能是on (press) {gotoAndPlay(50)}；代码写法一样，只是目的帧不一样，所以可以用复制代码再粘贴，再修改目的帧来完成操作(软件中的代码和各种元件乃至于各种帧，都支持鼠标右键功能的“复制和粘贴”，这个功能同样很能提高创作效率)

7电路演示部分制作

7.1前面板电源键与MIC键的制作

当使用者点击电路演示按钮，出现电台实物的渐现动画；这也是一个遮罩层和运动补间构成的动画效果；将实物图导入舞台中，用矩形工具画出一个矩形来作为遮罩层，再将此遮罩层转化为图形元件，制作此“图形元件”从右向左移动，并且遮罩实物图的动画(被遮罩的部分才会呈现)；其中青色闪烁的指示灯，由一个“影片剪辑元件”做成，前3帧是一个青色的点，后3帧是空白帧(是空白帧，所以关键帧和普通帧都可以)，这6个帧也就构成了一个简单的“逐帧动画”效果；播放起来变成一闪一闪的动画效果；

7.2 TX/RX框图的制作

这个部分的电路模拟运行，采用“遮罩层动画”的特效来实现，将各个相应的电路图作为Jpg位图导入到舞台中，新建图层，用左侧工具栏的“线条工具”(将线条颜色选择为红色，将宽度调为4以上比较粗的实线，flash中同样可以画出虚线形态，本课件中不作应用)，操作鼠标相应的画出所有的红色线作为电流走向；再新建图层，这也是一个遮罩层和运动补间构成的动画效果；将实物图导入舞台中，用矩形工具画出一个矩形来作为遮罩层，再将此遮罩层转化为图形元件，制作此“图形元件”从右向左移动，并且遮罩红色线路的动画(被遮罩的部分才会呈现)；

7.4子电路的制作17

主电路图中由几个子电路图组成，

TX框图有5个(输入电路；第一混频器电路和中频放大电路；中频解调电路；静噪电路；接收基带电路；)，

RX框图有也是5个(MIC电路；基带信号处理电路；调制电路1、2；激励和末端放大电路)。其制作手法框图的制作过程类似，都是遮罩技术和运动补间技术的叠加应用；

7.5声音的插入

Flash软件本身并没有编辑声音文件的功能(不能裁切声音文件，只有少量特效，比如淡入淡出)，我们将录制后在其它软件中编辑处理过的声音文件MP3，导入到flash软件的库中，新建图层，插入延长普通帧，点选帧后，在“属性面板”中选择相应的声音文件；

7.6动画演示的制作

影视行业中常见的动画制作手法是逐帧技术和补间技术； 逐帧技术类似于电影将画面逐格摄制，然后连惯的播放形成动画或电影电视； 补间技术是在特定的软件中定义两个关键帧，然后交给计算机软件自动生成中间所有帧而形成动画(比如从左向右一辆行驶的汽车，只需要一个元件，然后定义好起点和终点两个关键帧，中间汽车跑动的画面不必再逐帧绘出，软件可以自动生成“补间动画”，这就极大的提高了创作效率，所以flash动画又常常被称为“关键帧动画或元件动画”)；本项目的动画演示部分制作也主要应用flash软件的“补间动画”技术(也有用到“逐帧动画”这类技术)，比如实物图和电路图之间的切换，图片移动的效果就是运动补间动画。参考真实电路走线。模拟绘制而成。在本项目中，电路走向的示意动效主要是应用“补间动画”技术操作，其中又加入了“遮罩”的特效生成(是一种运动补间和遮罩层特效的叠加效果)；

技术总结：

此项目中应用最多的技术，是跳转按钮应用，看似简单的效果，其实既要考虑跳转的启始帧又要考虑终点帧，启始帧一般是目录页面，终点帧一般是进入的次级页面，难点在于需要写入所有跳转按钮的代码；

再则是隐形按钮的应用，这是对按钮功能的高级应用，非常考验操作者对按钮功能的深刻理解；

然后是遮罩层技术，是表达电流流向以及物体渐现的最终方案，难点在于，在操作过程中，头脑要保持专注，随时区分遮罩层和被遮罩层进行操作，要不然失误了再来找原因而修正也很麻烦；

影片元件是一种神奇的元素，可以单帧播放，但是当一个文件的影片元件数量太多的时候，软件操作就容易死机和卡顿，所以影片元件虽好，也不能滥用，要兼用图形元件，能用图形元件的地方就不要用影片元件；否则会过多的消耗计算机CPU内存运算，导致文件崩溃(这是这个项目在崩溃了前面的几个版本之后，我在网上才搜索总结各种失败原因才找到的技巧)；

最后，本身课件表达的内容十分专业，逻辑上多有包含和嵌套(非专业的学生很难第一时间读懂和表达得清楚)，而课件制作的flash技术也同样的多有叠加和嵌套(比如遮罩层和运动补间的叠加，影片元件中嵌套图形元件)；这两者相互作用，使得这个课件的制作过程十分复杂繁顼；

此项目做得不够好的地方，

课件中的电路图由于并非是在flash软件中绘制生成的矢量图(一般flash动画中的元素都需要在软件中绘制而成，或者至少是“矢量图”，理论上无限放大也不模糊)，所以播放器中画面呈现比较模糊的质量，但如果每一张电路图都要用作图工具来手工绘制，工程量将是极其大，无法完成，为了优化这个问题，我们将用户界面设置为1200X800，这是在电路图原图的大小和电脑的屏幕尺寸之间找到最大的公约数；

整个跳转结构没有完美的计划好，比如第一帧作为片头封面，第二帧作为序言页面； 第10帧到作为设备介绍模块； 第20帧到第800帧作为电路介绍模块；如果项目要求高的话，几乎需要仔细的计划到每一帧的用途；由于没有计划好，所以文档的内部结构比较混乱(虽然在操作用户一方看不出来)，非常不利于以后的编辑扩展和维护(比如以后想在里面增加一些章节或修改一些章节就很费事)；

后记：

这个课件完成之后，我才明白为什么大部分软件会用一个词“开发”来形容； 因为，当你最初面对一个课题的时候，头脑是一片空白的；甚至于你所寻找的资料也有许多的空白；比如，一开始不知道电流的流向如何表达，毕竟所找到的参考作品没有这一项；比如这课件大量的跳转，把控制按钮放在哪个位置，这些空白怎么办？只能自己从无到有的搭建，也正如开垦一无所有的荒地还要使之长出丰硕的果实；这些开拓的过程在任务完成之后，别人是不会理解的，因为一切己经摆在那里了，好像它就应该是那样的，但是最初，其实没有人知道它应该是怎么样；