蛋白质合成的动画设计

1、蛋白质合成的动画设计周宏专 杨玉梅(徐州师范大学生命科学学院，江苏 徐州 221116)摘 要：多媒体课件表现方式丰富，交互性强，利用它可以把抽象的内容具体化、形象化。本课题主要通过蛋白质合成过程设计制作了相应的动画，运用连续动画、调用外部动画、多层次形象地模拟出蛋白质合成的过程，因此增强了教学直观性和生动性；专业理论知识的加入更能帮助学生理解和巩固知识，大大地调动了学生的学习兴趣，提高了学习效率。关键词：蛋白质合成;课件;动画;Flash MX;ActionScriptThe Design with Cartoon of Protein SynthesisZHOU Hongzhuan Sup

2、ervisor: YANG Yumei(School of Life Science, Xuzhou Normal University, Xuzhou, Jiangsu, 221116,China)Abstract: Multimedia courseware has abundant display methods, strong alternation. We can change the abstract content into embodiment and image with it. The title designed and made corresponding cartoo

3、n through the process of Protein Synthesis. Applying continual cartoon, import outer cartoon. Imitating appearances and course of variation multi-gradation. It strongs the embodiment and vivid in teaching .The specialized theory adding in cartoon can also help students understand and strengthen know

4、ledge, mobilize students, learning interest ,improve students' learning effective. Keywords: protein synthesis; courseware; cartoon; Flash MX; ActionScript生物学教学过程中常常遇到一些复杂抽象的过程，如蛋白质合成的过程，该过程复杂难懂，究其原因可以归纳为三点： 蛋白质合成过程内容十分抽象； 各种教材关于此过程的理论说法不一； 专业术语与实物不能对应。然而这一过程恰恰是教学中的重点和难点，也是重要的考点之一。学生普遍失分较多，教学效果很

5、不理想。采用常规的教学方式很难满足教学需要，这也就使得多媒体课件的制作变得迫切起来。随着计算机技术的普及发展和教学改革的不断深入，课堂教学需要更多遵循教学规律和学生认知规律的多媒体课件。Flash以它强大的动画制作和较好的兼容性，越来越受到广大电脑爱好者特别时动画制作者的重视，同时它也在课堂教学中取得了不容忽视的地位。目前可获得的蛋白质合成过程动画，制作的普遍问题是功能欠缺，交互性不强，操作不方便；部分内容还存在着科学性的错误；并且大多数的课件制作只有动画展现而没有专业理论知识的介绍。作者的主要工作就是将蛋白质合成过程制作成形象直观的动画，并且播放的同时附上解释文字让学生一目了然，易于理解和掌

6、握，提高教学的效果，激发学生的学习兴趣，突破教学上的重点和难点。不仅如此，作者还参阅了很多专业理论书籍，将这一过程整理成系统的文字，作为课件的一部分配合多媒体动态展示。作者选择了Flash MX作为操作平台，Photoshop7.0作为界面设计的辅助工具，制作了蛋白质合成过程的辅助教学动画。1 教学动画设计的注意点制作课件是为教学服务的，Flash制作技术的应用要服从于专业理论知识，要符合科学性客观性，同时还要注意充分利用Flash软件的动画特性突破教学的重点和难点。必须做到依据教学理论来设计和制作动画；达到理论指导动画，动画解析深化理论的目的。合理的分支结构是开发任何课件时必须注意的问题，过

7、多的分支不仅浪费人力物力，而且不利于学习者操作；较少的分支又会使得动画的设计过于烦琐，也使得学习者不能够从多层次，多侧面了解所要表现的内容。所以要采用合理的分支，使学习者更为高效的使用课件，提高学习效率。2 课件开发中结构化方法的运用结构化程序设计规范了程序设计过程，是一种成功的程序设计的方法。对于蛋白质合成课件来说，该课件主要是让学习者了解蛋白质合成这一动态过程，同时使学习者的专业知识理论化和系统化。所以这两个过程即为该动画的两个大的模块，其中动画部分又可分为自制动画和外部资源动画，对此该动画过程也分成两大模块；另外再加上辅助性的模块，从而构成一个完整的动画。由此可见结构化方法在课件制作中的

8、运用在一定程度上缓解了高成本与低质量之间的矛盾。3 课件开发的阶段性及相关技术处理3.1 分析阶段该阶段通过调查学习者的需求，分析系统的功能要求，数据要求，运行要求确定具体的设计方案思路。比如在Flash Mx中SWF播放器只能支持大约1600多帧，因此在设计时分为多个场景制作。3.2 设计阶段结合分析阶段的结果以及蛋白质合成过程的特殊性（具体指过程所需时间较长，需要多帧、多层、多场景制作），作者将蛋白质合成过程分为Load、Start、Introduce、Theory、Movie、Connect、Quit共七个分支:（1）Load场景为短暂的片头动画，其功能是声明作者、指导人以及其他动画相关

9、信息。（2）Start场景为程序调用的主界面，由此可以进入以下分支。（3）Introduce场景主要用来介绍课件的特色及操作课件的注意事项，以便学习者能够更高效率的使用该课件。（4）Theory场景主要用来介绍蛋白质合成过程的理论知识。该场景又可分为四个部分：起始、延伸、终止及其它。这一场景的加入是该课件相对于其他蛋白质合成动画的一个显著优点，它不但可以显著提高学习者的理论水平，更能够帮助其将蛋白质合成这一知识点系统化，提高学习效率。（5）Movie分支是本课件的重点和亮点，主要包括作者自行开发的蛋白质合成过程动画，分为两个场景（分别为场景Synthesisa和Synthesisb）。（6）C

10、onnect 场景是用来显示外部相关过程动画。这些动画是作者从收集的资料中挑选出的比较经典的两个动画。它们具有各自的优点和不足，使学习者能够从多层次多角度理解这一复杂的过程，加深对该动态过程的认识。（7）Quit 场景用于显示相关提示信息，同时结束动画。课件分支及场景之间的关系如下：LoadStart IntroduceTheoryMovieConnectQuitSynthesisaSynthesisb3.3 实现阶段针对各个分支及场景所遇到的不同问题，提出了不同的解决方法，具体所用到的解决方法和技术处理如下：3.3.1 界面的设计 通过界面不但实现人机交互的功能，而且界面设计的好坏对学习者的

11、情绪和学习效率将会产生重要的影响。对于本课件的界面设计主要从以下几方面考虑：图2 按钮一致性Fig 2 Coordination of Button图1 按钮一致性Fig1 Coordination of Button图3 按钮一致性Fig3 Coordination of Button(1) 一致性：在动画的各个界面中，保持了风格的一致性，包括色彩、按钮和声音的使用等。如图1、图2和图3中都使用了一致的按钮；不仅大小一致，而且单击后图象变化的效果和声音都是一致的。(2) 交互性：为了更好地实现人机交互的功能，设置了功能各异的按钮，大大方便了操作者的使用。每一个场景都设有返回到主界面的按钮;有

12、的地方还提供了特殊按钮,如Replay按钮,可以在不返回主界面的情况下重播动画。(3) 富有吸引力:本课件从总体上讲,操作方便、高效、界面友好、富有吸引力，大大提高了学习者的兴趣。3.3.2 色彩搭配 在颜色的运用上,作者舍弃了一般课件常用的白色、黑色、淡绿等冷色，大胆采用了红色、黄色等暖色,使整个页面显得非常活泼、生动，有跳跃感，有较强的视觉冲击效果，大大激发学习者的积极性。3.3.3 常见技巧的应用 作者在课件开发的过程中使用了大量的制作小技巧，如：（1）编辑中心点：RNA通过核孔复合体时，需要进行旋转。为了能使这一过程更加形象生动，在展示旋转动作时借助了编辑中心点的操作。将图形的中心点调

13、整至RNA链的端部，使得RNA旋转时达到一端固定，另一端旋转的目的，这样该过程模拟得更加形象、生动（效果见图4）。图5 运用形变提示点Fig 5 Use Hint Shape Montion图4 中心点编辑Fig 4 Center Point Edit（2）遮罩、形变提示点的应用：蛋白质合成的起始阶段是一个非常复杂的过程，学习者往往不能够理解化学分子式与模拟物体之间的关系，因此很有必要用一个圆角矩形突出展示起始的Met与后续的氨基酸之间的关系（课件中用了Pro）。为了达到圆角矩形延伸出现的效果，需要使用形变动画遮罩，但是仅用形变动画遮罩还不能使圆角矩形按次序规则的延伸出现，为了解决这个问题作者

14、给遮罩中的形变动画使用了形变提示点。操作是：选择初态需变形的物体，“修改外形”, 选择添加形状提示点，连续添加四个：（红色），按顺时针方向排列；在终态自动出现，将它们按需要排列，直到颜色变成（绿色），此时初态变为黄色的提示点，这样不规则的变形动画就作好了。从而实现了圆角矩形按次序规则的延伸出现的效果。相关的层和图象如图5所示。（3）引导层的使用：引导层一般是用来标记引导线的，但该课件却用到了它的另一个特性。在Connect场景制作中，为了能够调用外部的资源动画，需要制作一个空的电影剪辑8，但是要控制空电影剪辑的大小就必须画出一个矩形，这个矩形的大小就是外部电影剪辑的大小。一般情况下，这个矩形是

15、不需要在最终的电影动画中显示出来的（显示出来就会影响课件的美观），这时可以将矩形所在的层转化为引导层，因为引导层是不会在最终的动画中显示出来。这就充分利用了引导层的不可见性。图6 编辑声音Fig 6 Edit Voice（4）声音的编辑：在课件的制作中，不可避免的要使用一些声音素材，但大多声音素材由于音质等方面的原因不适合直接放到课件中，需要对声音进行加工。首先将声音文件从库中放到场景当中，然后在属性面板上的效果下拉列表中选择自定，或直接选择右边的编辑按钮，将弹出如图6所示的编辑界面，此时就可以按照需要来进行编辑了。（5）未用元件的删除8：课件开发过程中，对于大量的同一元素，需要将其转化成元件

16、，这样可以大大节约文件空间。有时弃之不用的元件还会保存在库中，占用空间，因此课件开发结束后，需要将它们删除。具体操作是打开库面板，在库面板的右上角有一个弹出菜单按钮，单击该按钮，然后在弹出的菜单中选中“选择未用元件”选项即可。3.3.4 组件的运用9图7 运用组件Fig 7 Use UI Components配合蛋白质合成过程的动态展示，作者加入了相应的系统文字说明，这样使学习者在观看动态过程的同时，还能够详尽地复习相应理论知识，深入地理解知识，达到牢固、灵活掌握的目的。要加入篇幅较多的文字，同时又不影响课件整体的布局，需要通过Flash Mx自带的组件来规定文字显示区域。具体操作是首先建立一

17、个动态文本框，调整好字体颜色等属性后，从组件面板中拖动ScrollBar组件到文本框的附近，该组件会自动吸附到文本框上，然后再根据背景颜色对ScrollBar组件的滚动条进行颜色的设计，使其与背景颜色协调。作者在Theory场景中所使用的ScrollBar组件完成后如图7所示。3.3.5 ActionScript的运用(1) 滚动条失效7问题的解决：仅仅通过加入ScrollBar组件并不能很好的实现滚动条的功能。因为在该课件中所使用的动态文本初始时没有任何文字,因此初始时是没有滚动条的,但是在装载完文本后,滚动条还是没有出现,原因是滚动条没有及时的刷新。为了解决这个问题就需要在装载完文本后让滚

18、动条刷新。具体方法是在文本和滚动条所在电影剪辑的第一帧加上theorys.setScrollTarget(theotxt)语句;其中theorys为滚动条的实例名,而theotxt为动态文本的实例名,加上了这样的语句后,滚动条将会及时进行自动刷新。图8 改变自做鼠标深度Fig 8 Change Depth of Self-making Mouse(2) 自制鼠标深度的改变：在课件中作者使用了自制的鼠标，但是在Quit场景当中，使用了duplicateMovieClip()语句，该语句使用后，所有人工放置7的层都比复制出来的电影剪辑要低，所以即使自制鼠标放入最上层，仍比复制的电影剪辑层要低，导致

19、在某些地方鼠标被覆盖而不可见。对此，作者将鼠标电影剪辑放入场景后，给其命名为zmouse，同时对zmouse电影剪辑也使用duplicateMovieClip()语句，并将该深度参数调到合适的值。最终使鼠标在所有对象之上，真正实现鼠标的功能。其相应的场景和语法如图8所示。(3) 嵌套电影剪辑10动画的控制：对于一般的动画控制来说,只需要在关键帧、按钮或电影剪辑等处加入一些简单的命令就可以了，如On releasePlay();,On releaseStop();,On releasegotoAndPlay(“Theory”, 1);。在该课件的Synthesisa场景中,大多数的过程是通过电影

20、剪辑来实现的,而以上的命令对于嵌套的电影剪辑是不适用的。必须搞清目标电影剪辑与主时间轴之间的路径关系,在命令中加入电影剪辑的路径才行。例如控制重播的Replaylfirst该场景中电影剪辑的名称, _root代表主时间轴,_root.first表示first电影剪辑的绝对路径。 除此之外，课件中还使用了其它的一些代码来提高了课件的直观性。如startDrag(); loadMovie();unloadMovie() loadVariables(); onClipEvent();setRGB();_visable;_text;_alpha等。3.4 测试、维护阶段3.4.1测试阶段其目的是尽可能

21、地发现课件内部存在的错误。主要包括动画运行的快慢、颜色协调性、场景内部的连接和场景之间的连接边界等。在上面提到的Synthesisa场景中的Replay按钮就是在该阶段发现问题并解决的。该动画主要采用了自顶向下的测试方法，从主界面开始，向各个子分支（场景）进行测试，每装配一个场景就测试这个场景与主场景之间的通路，看能否正确到达该分支（场景）和这一场景内的按钮能否正确回到主界面。依此方法，直到全部动画装配完毕并达到动画所需的功能为止。最后是检查该动画是否达到分析阶段所提出的设计目的及要求，检查所需文档是否齐全。3.4.2维护阶段图9 使用层文件夹和库文件夹管理动画Fig 9 Apply Fold

22、er of Layer And Library to Manage Cartoon对于Flash动画来说，修改和维护是相当困难的。鉴于此更应该遵循模块化原则，提高模块的独立性。作者在动画设计过程中一直注意这一问题，因此对图层和库使用文件夹7进行了合理的管理，在整个动画制作完毕后，动画中的Synthesisb场景和整个动画的库管理后的状态如图9所示。作者为每一个场景提供了一个大的库文件夹，每一个场景的文件夹内又包含四个小的文件夹分别用来存放按钮、图片、电影剪辑、声音和视频，这样的管理为动画的测试和未来的改进提供了更好的基础，提高了课件的可维护性。4 结束语作者深深的体会到仅通过文字和静态平面图形来表现专业内容是十分抽象的，学生难于理解和掌握。只有将生动丰富的动画和专业理论知识相结合才能使蛋白质合成过程这一教学难点更加形象和具体，才更符合人们的认知规律。另外