蛋白質合成的動畫設計

1、蛋白質合成的動畫設計周宏專 楊玉梅(徐州師范大學生命科學學院，江蘇 徐州 221116)摘 要：多媒體課件表現方式豐富，交互性強，利用它可以把抽象的內容具體化、形象化。本課題主要通過蛋白質合成過程設計制作了相應的動畫，運用連續(xù)動畫、調用外部動畫、多層次形象地模擬出蛋白質合成的過程，因此增強了教學直觀性和生動性；專業(yè)理論知識的加入更能幫助學生理解和鞏固知識，大大地調動了學生的學習興趣，提高了學習效率。關鍵詞：蛋白質合成;課件;動畫;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生物學教學過程中常常遇到一些復雜抽象的過程，如蛋白質合成的過程，該過程復雜難懂，究其原因可以歸納為三點： 蛋白質合成過程內容十分抽象； 各種教材關于此過程的理論說法不一； 專業(yè)術語與實物不能對應。然而這一過程恰恰是教學中的重點和難點，也是重要的考點之一。學生普遍失分較多，教學效果很

5、不理想。采用常規(guī)的教學方式很難滿足教學需要，這也就使得多媒體課件的制作變得迫切起來。隨著計算機技術的普及發(fā)展和教學改革的不斷深入，課堂教學需要更多遵循教學規(guī)律和學生認知規(guī)律的多媒體課件。Flash以它強大的動畫制作和較好的兼容性，越來越受到廣大電腦愛好者特別時動畫制作者的重視，同時它也在課堂教學中取得了不容忽視的地位。目前可獲得的蛋白質合成過程動畫，制作的普遍問題是功能欠缺，交互性不強，操作不方便；部分內容還存在著科學性的錯誤；并且大多數的課件制作只有動畫展現而沒有專業(yè)理論知識的介紹。作者的主要工作就是將蛋白質合成過程制作成形象直觀的動畫，并且播放的同時附上解釋文字讓學生一目了然，易于理解和掌

6、握，提高教學的效果，激發(fā)學生的學習興趣，突破教學上的重點和難點。不僅如此，作者還參閱了很多專業(yè)理論書籍，將這一過程整理成系統(tǒng)的文字，作為課件的一部分配合多媒體動態(tài)展示。作者選擇了Flash MX作為操作平臺，Photoshop7.0作為界面設計的輔助工具，制作了蛋白質合成過程的輔助教學動畫。1 教學動畫設計的注意點制作課件是為教學服務的，Flash制作技術的應用要服從于專業(yè)理論知識，要符合科學性客觀性，同時還要注意充分利用Flash軟件的動畫特性突破教學的重點和難點。必須做到依據教學理論來設計和制作動畫；達到理論指導動畫，動畫解析深化理論的目的。合理的分支結構是開發(fā)任何課件時必須注意的問題，過

7、多的分支不僅浪費人力物力，而且不利于學習者操作；較少的分支又會使得動畫的設計過于煩瑣，也使得學習者不能夠從多層次，多側面了解所要表現的內容。所以要采用合理的分支，使學習者更為高效的使用課件，提高學習效率。2 課件開發(fā)中結構化方法的運用結構化程序設計規(guī)范了程序設計過程，是一種成功的程序設計的方法。對于蛋白質合成課件來說，該課件主要是讓學習者了解蛋白質合成這一動態(tài)過程，同時使學習者的專業(yè)知識理論化和系統(tǒng)化。所以這兩個過程即為該動畫的兩個大的模塊，其中動畫部分又可分為自制動畫和外部資源動畫，對此該動畫過程也分成兩大模塊；另外再加上輔助性的模塊，從而構成一個完整的動畫。由此可見結構化方法在課件制作中的

8、運用在一定程度上緩解了高成本與低質量之間的矛盾。3 課件開發(fā)的階段性及相關技術處理3.1 分析階段該階段通過調查學習者的需求，分析系統(tǒng)的功能要求，數據要求，運行要求確定具體的設計方案思路。比如在Flash Mx中SWF播放器只能支持大約1600多幀，因此在設計時分為多個場景制作。3.2 設計階段結合分析階段的結果以及蛋白質合成過程的特殊性（具體指過程所需時間較長，需要多幀、多層、多場景制作），作者將蛋白質合成過程分為Load、Start、Introduce、Theory、Movie、Connect、Quit共七個分支:（1）Load場景為短暫的片頭動畫，其功能是聲明作者、指導人以及其他動畫相關

9、信息。（2）Start場景為程序調用的主界面，由此可以進入以下分支。（3）Introduce場景主要用來介紹課件的特色及操作課件的注意事項，以便學習者能夠更高效率的使用該課件。（4）Theory場景主要用來介紹蛋白質合成過程的理論知識。該場景又可分為四個部分：起始、延伸、終止及其它。這一場景的加入是該課件相對于其他蛋白質合成動畫的一個顯著優(yōu)點，它不但可以顯著提高學習者的理論水平，更能夠幫助其將蛋白質合成這一知識點系統(tǒng)化，提高學習效率。（5）Movie分支是本課件的重點和亮點，主要包括作者自行開發(fā)的蛋白質合成過程動畫，分為兩個場景（分別為場景Synthesisa和Synthesisb）。（6）C

10、onnect 場景是用來顯示外部相關過程動畫。這些動畫是作者從收集的資料中挑選出的比較經典的兩個動畫。它們具有各自的優(yōu)點和不足，使學習者能夠從多層次多角度理解這一復雜的過程，加深對該動態(tài)過程的認識。（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 色彩搭配 在顏色的運用上,作者舍棄了一般課件常用的白色、黑色、淡綠等冷色，大膽采用了紅色、黃色等暖色,使整個頁面顯得非常活潑、生動，有跳躍感，有較強的視覺沖擊效果，大大激發(fā)學習者的積極性。3.3.3 常見技巧的應用 作者在課件開發(fā)的過程中使用了大量的制作小技巧，如：（1）編輯中心點：RNA通過核孔復合體時，需要進行旋轉。為了能使這一過程更加形象生動，在展示旋轉動作時借助了編輯中心點的操作。將圖形的中心點調

13、整至RNA鏈的端部，使得RNA旋轉時達到一端固定，另一端旋轉的目的，這樣該過程模擬得更加形象、生動（效果見圖4）。圖5 運用形變提示點Fig 5 Use Hint Shape Montion圖4 中心點編輯Fig 4 Center Point Edit（2）遮罩、形變提示點的應用：蛋白質合成的起始階段是一個非常復雜的過程，學習者往往不能夠理解化學分子式與模擬物體之間的關系，因此很有必要用一個圓角矩形突出展示起始的Met與后續(xù)的氨基酸之間的關系（課件中用了Pro）。為了達到圓角矩形延伸出現的效果，需要使用形變動畫遮罩，但是僅用形變動畫遮罩還不能使圓角矩形按次序規(guī)則的延伸出現，為了解決這個問題作者

14、給遮罩中的形變動畫使用了形變提示點。操作是：選擇初態(tài)需變形的物體，“修改外形”, 選擇添加形狀提示點，連續(xù)添加四個：（紅色），按順時針方向排列；在終態(tài)自動出現，將它們按需要排列，直到顏色變成（綠色），此時初態(tài)變?yōu)辄S色的提示點，這樣不規(guī)則的變形動畫就作好了。從而實現了圓角矩形按次序規(guī)則的延伸出現的效果。相關的層和圖象如圖5所示。（3）引導層的使用：引導層一般是用來標記引導線的，但該課件卻用到了它的另一個特性。在Connect場景制作中，為了能夠調用外部的資源動畫，需要制作一個空的電影剪輯8，但是要控制空電影剪輯的大小就必須畫出一個矩形，這個矩形的大小就是外部電影剪輯的大小。一般情況下，這個矩形是

15、不需要在最終的電影動畫中顯示出來的（顯示出來就會影響課件的美觀），這時可以將矩形所在的層轉化為引導層，因為引導層是不會在最終的動畫中顯示出來。這就充分利用了引導層的不可見性。圖6 編輯聲音Fig 6 Edit Voice（4）聲音的編輯：在課件的制作中，不可避免的要使用一些聲音素材，但大多聲音素材由于音質等方面的原因不適合直接放到課件中，需要對聲音進行加工。首先將聲音文件從庫中放到場景當中，然后在屬性面板上的效果下拉列表中選擇自定，或直接選擇右邊的編輯按鈕，將彈出如圖6所示的編輯界面，此時就可以按照需要來進行編輯了。（5）未用元件的刪除8：課件開發(fā)過程中，對于大量的同一元素，需要將其轉化成元件

16、，這樣可以大大節(jié)約文件空間。有時棄之不用的元件還會保存在庫中，占用空間，因此課件開發(fā)結束后，需要將它們刪除。具體操作是打開庫面板，在庫面板的右上角有一個彈出菜單按鈕，單擊該按鈕，然后在彈出的菜單中選中“選擇未用元件”選項即可。3.3.4 組件的運用9圖7 運用組件Fig 7 Use UI Components配合蛋白質合成過程的動態(tài)展示，作者加入了相應的系統(tǒng)文字說明，這樣使學習者在觀看動態(tài)過程的同時，還能夠詳盡地復習相應理論知識，深入地理解知識，達到牢固、靈活掌握的目的。要加入篇幅較多的文字，同時又不影響課件整體的布局，需要通過Flash Mx自帶的組件來規(guī)定文字顯示區(qū)域。具體操作是首先建立一

17、個動態(tài)文本框，調整好字體顏色等屬性后，從組件面板中拖動ScrollBar組件到文本框的附近，該組件會自動吸附到文本框上，然后再根據背景顏色對ScrollBar組件的滾動條進行顏色的設計，使其與背景顏色協(xié)調。作者在Theory場景中所使用的ScrollBar組件完成后如圖7所示。3.3.5 ActionScript的運用(1) 滾動條失效7問題的解決：僅僅通過加入ScrollBar組件并不能很好的實現滾動條的功能。因為在該課件中所使用的動態(tài)文本初始時沒有任何文字,因此初始時是沒有滾動條的,但是在裝載完文本后,滾動條還是沒有出現,原因是滾動條沒有及時的刷新。為了解決這個問題就需要在裝載完文本后讓滾

18、動條刷新。具體方法是在文本和滾動條所在電影剪輯的第一幀加上theorys.setScrollTarget(theotxt)語句;其中theorys為滾動條的實例名,而theotxt為動態(tài)文本的實例名,加上了這樣的語句后,滾動條將會及時進行自動刷新。圖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、地發(fā)現課件內部存在的錯誤。主要包括動畫運行的快慢、顏色協(xié)調性、場景內部的連接和場景之間的連接邊界等。在上面提到的Synthesisa場景中的Replay按鈕就是在該階段發(fā)現問題并解決的。該動畫主要采用了自頂向下的測試方法，從主界面開始，向各個子分支（場景）進行測試，每裝配一個場景就測試這個場景與主場景之間的通路，看能否正確到達該分支（場景）和這一場景內的按鈕能否正確回到主界面。依此方法，直到全部動畫裝配完畢并達到動畫所需的功能為止。最后是檢查該動畫是否達到分析階段所提出的設計目的及要求，檢查所需文檔是否齊全。3.4.2維護階段圖9 使用層文件夾和庫文件夾管理動畫Fig 9 Apply Fold

22、er of Layer And Library to Manage Cartoon對于Flash動畫來說，修改和維護是相當困難的。鑒于此更應該遵循模塊化原則，提高模塊的獨立性。作者在動畫設計過程中一直注意這一問題，因此對圖層和庫使用文件夾7進行了合理的管理，在整個動畫制作完畢后，動畫中的Synthesisb場景和整個動畫的庫管理后的狀態(tài)如圖9所示。作者為每一個場景提供了一個大的庫文件夾，每一個場景的文件夾內又包含四個小的文件夾分別用來存放按鈕、圖片、電影剪輯、聲音和視頻，這樣的管理為動畫的測試和未來的改進提供了更好的基礎，提高了課件的可維護性。4 結束語作者深深的體會到僅通過文字和靜態(tài)平面圖形來表現專業(yè)內容是十分抽象的，學生難于理解和掌握。只有將生動豐富的動畫和專業(yè)理論知識相結合才能使蛋白質合成過程這一教學難點更加形象和具體，才更符合人們的認知規(guī)律。另外