計算機圖形學實驗指導書

計算機圖形學實驗指導書第1頁，共35頁，2023年，2月20日，星期四提綱基本概念與基本操作變形動畫移動動畫圖層技術(shù)引導線技術(shù)遮蔽圖層技術(shù)按鈕制作與應用影片剪輯交互界面設計多場景技術(shù)綜合應用動畫發(fā)布第2頁，共35頁，2023年，2月20日，星期四預備知識MacromediaflashMX影片是用于Web站點的圖形、文本、動畫和應用程序。它們主要是由矢量圖形（壓縮的矢量圖形）組成。（矢圖與位圖特點舉例）flash文檔具有.fla文件擴展名的文件，它包含開發(fā)、設計和測試交互式內(nèi)容所需的所有信息。Flash文檔并不是在flashplayer顯示的影片，需將FLA文檔發(fā)布為flash影片，其擴展名為swf，其中只包含顯示影片所需的信息。1、動畫原理視覺暫留：人眼特性，一般時間為1/12到期/16秒。電影放映速度1/24秒,flash動畫效果較電影和電視的要求低，放映速度系統(tǒng)缺省只有1/12秒。2、flashMX中動畫文件的結(jié)構(gòu)

flash結(jié)構(gòu)也分多層：flashMX文件（影片）一個或多個場景一幀或多幀一個或多個圖層一個或多個實例。（舉例說明）3、舞臺和工作區(qū)創(chuàng)作影片中各個幀的內(nèi)容的區(qū)域，可以在其中直接勾畫插圖或?qū)氩鍒D。第3頁，共35頁，2023年，2月20日，星期四基本概念（1）時間線和關鍵幀（Keyframe）在Flash中，一般的動畫都是依靠時間線和關鍵幀來實現(xiàn)的，用戶只需要給出一個對象的幾個關鍵動作，在時間線中生成關鍵幀，系統(tǒng)即會根據(jù)需要在各個關鍵幀之間自動插入平滑的動畫。(一幅靜止的圖片就是一幘，關鍵幀中是灰色的代表一般幀，由電腦自己形成的，一般幀上有一行箭頭代表此圖層中有漸變，幀中是白色的代表空白幀，和動畫無關。）（2）層（Layer）Flash中使用了層的概念，不同角色的對象可以出現(xiàn)在不同的層面上，而互相之間并不干擾，這樣便于用戶對不同的對象作不同的修改。（3）場景（Scene）在Flash中，可以分成多個場景，在制作復雜動畫時，可以借助多個場景，而且場景之間可以自由切換。第4頁，共35頁，2023年，2月20日，星期四時間線和關鍵幀時間線是用于組織和控制影片內(nèi)容在一定時間內(nèi)播放的層數(shù)和幀數(shù)。其主要組件是圖層、幀和播放頭。關鍵幀：關鍵的畫面，即此幀在整個動畫中非常關鍵，如動畫中的起始或終止幀。圖層就像是相互重疊的透明紙一樣，可以使各對象保持相對分離。注：幀是管理時間的，圖層是管理空間的，一幀中可以有多個圖層。第5頁，共35頁，2023年，2月20日，星期四基本概念（4）組件（Symbol）與圖庫（Libery）在Flash中所有的動畫都可以被抽象為組件，所有組件都被存放在圖庫中。圖庫中的組件可以是圖像、聲音或動畫片段，可以被任何Flash動畫文件無限制地重復調(diào)用。每個Flash文件都有自己的組件庫，也可以使用其他Flash文件的組件庫。（5）按鈕（Button）組件在Flash中，我們可以通過指定按鈕的各種屬性，包括正常按鈕，鼠標掠過時畫面，按下時畫面，而非常容易的制作各種動態(tài)按鈕。第6頁，共35頁，2023年，2月20日，星期四基本概念矢量圖是使用直線和曲線描述的圖像，同時包括圖形顏色和位置的屬性。如矢量橢圓是通過描述橢圓的輪廓線來給出它的形狀，而整體的顏色則是由輪廓邊緣的顏色和輪廓內(nèi)區(qū)域的顏色確定的。所以編輯矢量圖時，盡管改變橢圓大小、位置和形狀，而只要確定了橢圓的輪廓線及線內(nèi)的對象，就不會影響最后瀏覽的效果。這意味著矢量圖能夠在任何分辨率的輸出設備上清晰地顯示。

位圖是由像素組成的。使用像素來描述圖像，計算機必須精確地計算組成位圖的每一個像素位置和顏色等信息。所以當編輯一個位圖時，修改的是每一個像素，而不是直線和曲線，這樣就會影響最后輸出的質(zhì)量。尤其當像素較低的圖像被放大輸出時，圖像的邊界會很粗糙。返回第7頁，共35頁，2023年，2月20日，星期四Flash的基本操作矢量畫圖的基本要領：（1）工具欄和工具箱的使用（基本技能）（2）動畫的編輯：掌握放大、縮小、拉伸、旋轉(zhuǎn)等編輯方式（3）顏色填充：Flash中提供了透明色、梯度色的填充（4）變化功能的應用第8頁，共35頁，2023年，2月20日，星期四變形動畫變形動畫是指圖形或字體形狀上變化過程的實現(xiàn)。注意事項：實現(xiàn)形變過程的多個圖形，必須是導入的矢量圖格式文件或由FLASH工具箱中的工具繪制成的圖形Enter或Ctrl+Enter可查看動畫效果第9頁，共35頁，2023年，2月20日，星期四基本變形動畫逐禎動畫：影片制作技術(shù)（exp1,exp2)基本幾何變形動畫：exp3exp4exp5exp7文本變形動畫：exp9exp8exp12圖形組件的變形動畫：exp10exp11第10頁，共35頁，2023年，2月20日，星期四移動動畫幾何圖形移動：exp13文本動畫：exp14圖形組件的移動動畫：exp15exp16第11頁，共35頁，2023年，2月20日，星期四圖層技術(shù)圖層與幾何變形：延伸線1.FLA圖層與圖形組件：4球體移動.FLA圖層實現(xiàn)文字動畫文字飛入特效.fla第12頁，共35頁，2023年，2月20日，星期四引導線技術(shù)基本：5引導球體移動.FLA高級：注意：在拖動中一定要使小球的中心位置在曲線上，才能使小球按指定的軌跡運動，運動的軌跡并不顯示出來。第13頁，共35頁，2023年，2月20日，星期四遮蔽圖層技術(shù)基本：6遮蔽.FLA高級：放大鏡.FLA遮蔽就是在FLASH制作過程中相鄰的兩層或多層之間的屏蔽。第14頁，共35頁，2023年，2月20日，星期四按鈕制作與應用基本按鈕制作：按鈕1.FLA特殊按鈕：1彈出框.FLA按鈕應用：按鈕2.FLA聲音控制：聲音控制.FLA第15頁，共35頁，2023年，2月20日，星期四影片剪輯基本按鈕制作：拖拽.fla綜合：EGGPLANT.FLA第16頁，共35頁，2023年，2月20日，星期四交互界面設計技術(shù)基本：INPUT.FLA第17頁，共35頁，2023年，2月20日，星期四多場景技術(shù)技術(shù)基本：5多場景.FLA第18頁，共35頁，2023年，2月20日，星期四綜合技術(shù)一個對象一個圖層只有一個時間軸聲音與時間同步禎的切換場景的切換第19頁，共35頁，2023年，2月20日，星期四動畫發(fā)布發(fā)布導出(GIFAviMov)RETURN第20頁，共35頁，2023年，2月20日，星期四Dreamweavermx概述Dreamweaver簡介站點建立與網(wǎng)頁發(fā)布文本的編輯與基本操作初識HTML代碼圖像的使用表格層的使用交互式表單行為第21頁，共35頁，2023年，2月20日，星期四Dreamweaver簡介Dreamweaver是一個所見即所得的網(wǎng)頁編輯器，并帶有站點管理功能，用戶可方便地設計和管理多個站點。1.FTP工具:用它,可將網(wǎng)頁上傳至服務器或?qū)⑸蟼魑募螺d,以便更改2.檢查網(wǎng)頁工具:先在本地站點對網(wǎng)頁檢查,如頁面是否合適再上傳3.解鎖/鎖定功能:鎖定是文件被獨占4.查找和替換工具5.友好工作界面(上機介紹)第22頁，共35頁，2023年，2月20日，星期四站點建立與網(wǎng)頁發(fā)布站點建立與管理1.建立本地站點:(1)建立一個新文件夾作為本地根文件夾(2)站點--新建站點第23頁，共35頁，2023年，2月20日，星期四站點建立與網(wǎng)頁發(fā)布站點資源管理:“資源”面板可讓用戶統(tǒng)一管理整個站點中的各種資源,如所有應用的圖片、顏色、鏈接、Flash電影、視頻、腳本語言、模板和庫等都出現(xiàn)在這個面板中。第24頁，共35頁，2023年，2月20日，星期四站點的上傳用DreamweaverMX自帶的FTP方法上傳用軟件上傳，如CuteFTP4.0

第25頁，共35頁，2023年，2月20日，星期四站點的維修編輯站點復制站點刪除站點RETURN第26頁，共35頁，2023年，2月20日，星期四網(wǎng)頁的組成元素組成元素:文字、聲音、圖像、動畫等多媒體元素，或Java、ActiveX控件等特殊效果及交互功能，另外與平面刊物不同的特點：超級鏈接第27頁，共35頁，2023年，2月20日，星期四文字：文字是網(wǎng)頁的主體，主要用來傳達信息。其占用空間非常小。用在標題、可適當調(diào)整大小、層次和段落中樣式：粗體、斜體和下劃線（最好不用，會誤認為是超級鏈接）顏色第28頁，共35頁，2023年，2月20日，星期四圖形圖形格式：大部分使用JPG和GIF兩種格式，它們除了具有壓縮比例高的優(yōu)點外，還具有跨平臺的特性。

JPG格式可支持全彩色和灰度格式的文件，而GIF最多只能支持256色的圖片圖形幾種應用：背景、主圖第29頁，共35頁，2023年，2月20日，星期四超級鏈接不論文字或圖形，都可加上超級鏈接，一個完整網(wǎng)站，至少包括以下兩種鏈接。

1、站內(nèi)鏈接：若網(wǎng)站規(guī)劃多個主題板塊，必須在首頁加入超級鏈接。

2、站外鏈接：外部鏈接到internet。第30頁，共35頁，2023年，2月20日，星期四頁面的創(chuàng)建和保存創(chuàng)建新空白頁面打開一個已存在的HTML文件注意：不能直接將WORD文檔（.doc）導入Dreamweaver中，必須先在word中將文件保存為HTML文件格式，再在Dreamweaver中導入?；谀０鍎?chuàng)建新頁面（1）文件—新建，切換到“模板”選項卡（2）在對話框中選擇一個模板，單擊“創(chuàng)建”當基于模板創(chuàng)建文檔時，文檔某些部分可能被鎖定，不許修改，以保證在站點中不同文檔的一致性，文檔可編輯區(qū)，輸入所需要的內(nèi)容。保存文件默認文件類型為.htm或.html第31頁，共35頁，2023年，2月20日，星期四文本的插入和編輯在頁面文檔中插入文本在頁面文檔中粘貼文本插入特殊字符（文本中其它字符）插入日期插入項目符號（文本中ol）查找和替換功能（編輯）第32頁，共35頁，2023年，2月20日，星期四插入文本列表和分隔線插入項目列表(ul)插入編號列表(ol)插入分隔線插入—HTML—水平線第33頁，共35頁，2023年，2月20日，星期四網(wǎng)頁屬性設置網(wǎng)頁標題網(wǎng)頁的背景圖片及背景顏色

為了照顧網(wǎng)頁的下載速度，一般很少使用背景圖片，而是給網(wǎng)頁加上背景顏色。網(wǎng)頁的文字色彩網(wǎng)頁的邊距網(wǎng)頁語種網(wǎng)頁藍圖圖片的透明度默認為0，不透明度是100。RETURN第34頁，共35頁，2023年，2月20日，星期四初識HTML代碼HTML簡介

HTML(HyperTextMarkupLanguage,超文本標識語言)是一種描述性語言，它主要通過標簽來描述不同的內(nèi)容

如：