蛋白質(zhì)合成的動(dòng)畫設(shè)計(jì)

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

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

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

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

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

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

10、onnect 場景是用來顯示外部相關(guān)過程動(dòng)畫。這些動(dòng)畫是作者從收集的資料中挑選出的比較經(jīng)典的兩個(gè)動(dòng)畫。它們具有各自的優(yōu)點(diǎn)和不足，使學(xué)習(xí)者能夠從多層次多角度理解這一復(fù)雜的過程，加深對該動(dòng)態(tài)過程的認(rèn)識(shí)。（7）Quit 場景用于顯示相關(guān)提示信息，同時(shí)結(jié)束動(dòng)畫。課件分支及場景之間的關(guān)系如下：LoadStart IntroduceTheoryMovieConnectQuitSynthesisaSynthesisb3.3 實(shí)現(xiàn)階段針對各個(gè)分支及場景所遇到的不同問題，提出了不同的解決方法，具體所用到的解決方法和技術(shù)處理如下：3.3.1 界面的設(shè)計(jì) 通過界面不但實(shí)現(xiàn)人機(jī)交互的功能，而且界面設(shè)計(jì)的好壞對學(xué)習(xí)者的

11、情緒和學(xué)習(xí)效率將會(huì)產(chǎn)生重要的影響。對于本課件的界面設(shè)計(jì)主要從以下幾方面考慮：圖2 按鈕一致性Fig 2 Coordination of Button圖1 按鈕一致性Fig1 Coordination of Button圖3 按鈕一致性Fig3 Coordination of Button(1) 一致性：在動(dòng)畫的各個(gè)界面中，保持了風(fēng)格的一致性，包括色彩、按鈕和聲音的使用等。如圖1、圖2和圖3中都使用了一致的按鈕；不僅大小一致，而且單擊后圖象變化的效果和聲音都是一致的。(2) 交互性：為了更好地實(shí)現(xiàn)人機(jī)交互的功能，設(shè)置了功能各異的按鈕，大大方便了操作者的使用。每一個(gè)場景都設(shè)有返回到主界面的按鈕;有

12、的地方還提供了特殊按鈕,如Replay按鈕,可以在不返回主界面的情況下重播動(dòng)畫。(3) 富有吸引力:本課件從總體上講,操作方便、高效、界面友好、富有吸引力，大大提高了學(xué)習(xí)者的興趣。3.3.2 色彩搭配 在顏色的運(yùn)用上,作者舍棄了一般課件常用的白色、黑色、淡綠等冷色，大膽采用了紅色、黃色等暖色,使整個(gè)頁面顯得非常活潑、生動(dòng)，有跳躍感，有較強(qiáng)的視覺沖擊效果，大大激發(fā)學(xué)習(xí)者的積極性。3.3.3 常見技巧的應(yīng)用 作者在課件開發(fā)的過程中使用了大量的制作小技巧，如：（1）編輯中心點(diǎn)：RNA通過核孔復(fù)合體時(shí)，需要進(jìn)行旋轉(zhuǎn)。為了能使這一過程更加形象生動(dòng)，在展示旋轉(zhuǎn)動(dòng)作時(shí)借助了編輯中心點(diǎn)的操作。將圖形的中心點(diǎn)調(diào)

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

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

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

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

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

18、動(dòng)條刷新。具體方法是在文本和滾動(dòng)條所在電影剪輯的第一幀加上theorys.setScrollTarget(theotxt)語句;其中theorys為滾動(dòng)條的實(shí)例名,而theotxt為動(dòng)態(tài)文本的實(shí)例名,加上了這樣的語句后,滾動(dòng)條將會(huì)及時(shí)進(jìn)行自動(dòng)刷新。圖8 改變自做鼠標(biāo)深度Fig 8 Change Depth of Self-making Mouse(2) 自制鼠標(biāo)深度的改變：在課件中作者使用了自制的鼠標(biāo)，但是在Quit場景當(dāng)中，使用了duplicateMovieClip()語句，該語句使用后，所有人工放置7的層都比復(fù)制出來的電影剪輯要低，所以即使自制鼠標(biāo)放入最上層，仍比復(fù)制的電影剪輯層要低，導(dǎo)致

19、在某些地方鼠標(biāo)被覆蓋而不可見。對此，作者將鼠標(biāo)電影剪輯放入場景后，給其命名為zmouse，同時(shí)對zmouse電影剪輯也使用duplicateMovieClip()語句，并將該深度參數(shù)調(diào)到合適的值。最終使鼠標(biāo)在所有對象之上，真正實(shí)現(xiàn)鼠標(biāo)的功能。其相應(yīng)的場景和語法如圖8所示。(3) 嵌套電影剪輯10動(dòng)畫的控制：對于一般的動(dòng)畫控制來說,只需要在關(guān)鍵幀、按鈕或電影剪輯等處加入一些簡單的命令就可以了，如On releasePlay();,On releaseStop();,On releasegotoAndPlay(“Theory”, 1);。在該課件的Synthesisa場景中,大多數(shù)的過程是通過電影

20、剪輯來實(shí)現(xiàn)的,而以上的命令對于嵌套的電影剪輯是不適用的。必須搞清目標(biāo)電影剪輯與主時(shí)間軸之間的路徑關(guān)系,在命令中加入電影剪輯的路徑才行。例如控制重播的Replaylfirst該場景中電影剪輯的名稱, _root代表主時(shí)間軸,_root.first表示first電影剪輯的絕對路徑。 除此之外，課件中還使用了其它的一些代碼來提高了課件的直觀性。如startDrag(); loadMovie();unloadMovie() loadVariables(); onClipEvent();setRGB();_visable;_text;_alpha等。3.4 測試、維護(hù)階段3.4.1測試階段其目的是盡可能

21、地發(fā)現(xiàn)課件內(nèi)部存在的錯(cuò)誤。主要包括動(dòng)畫運(yùn)行的快慢、顏色協(xié)調(diào)性、場景內(nèi)部的連接和場景之間的連接邊界等。在上面提到的Synthesisa場景中的Replay按鈕就是在該階段發(fā)現(xiàn)問題并解決的。該動(dòng)畫主要采用了自頂向下的測試方法，從主界面開始，向各個(gè)子分支（場景）進(jìn)行測試，每裝配一個(gè)場景就測試這個(gè)場景與主場景之間的通路，看能否正確到達(dá)該分支（場景）和這一場景內(nèi)的按鈕能否正確回到主界面。依此方法，直到全部動(dòng)畫裝配完畢并達(dá)到動(dòng)畫所需的功能為止。最后是檢查該動(dòng)畫是否達(dá)到分析階段所提出的設(shè)計(jì)目的及要求，檢查所需文檔是否齊全。3.4.2維護(hù)階段圖9 使用層文件夾和庫文件夾管理動(dòng)畫Fig 9 Apply Fold

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