FlashCS6動畫制作電子工業出版社Flash網站的設計與制作項目3項目3Flash網站的設計與制作│

項目分析本項目先介紹Flash網站的架構與應用領域，然后介紹Flash網站美工設計，最后介紹Logo動畫和Flash網站的制作，由此引領讀者完成Flash網站的設計與制作。任務1熟識Flash網站的架構與應用領域Flash網站，顧名思義，就是通過Flash技術制作的網站，網頁內容基本上以圖形和動畫為主，比較適合制作以文字內容為輔，以平面、動畫視覺效果呈現為主的網站，如企業品牌推廣、特定網絡廣告、網絡游戲、個性網站等。本任務主要介紹Flash網站的架構與應用領域等。任務目標（1）掌握Flash網站的架構。（2）了解Flash網站的應用領域。項目3Flash網站的設計與制作掌握Flash網站的架構與網站的主體框架類似，網站的架構具有支撐網站的作用，就像人是由骨骼和血肉組成的，網站的架構正如人的骨架一樣，由此可見，網站的架構對于網站來說非常重要。1．網站的開發流程為了加快建設網站的速度和降低項目失敗的風險，應該采用一定的流程來策劃、設計、制作和發布網站。網站的開發流程如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構2．客戶需求分析客戶需求分析的主要任務就是把客戶的需求信息有機地表現出來，把網站的目標信息有效地傳達給瀏覽者或潛在用戶，從而達到最佳的網站營銷效果。3．網站策劃設計（1）確定網站的目標。建立網站的第一步就是確定目標。由于網站的分類不同，目標受眾也不同，因此在建立網站之前需要考慮網站所面對的對象。不同的網站有不同的目標，所以獲得的收益不同。（2）確定網站的主題。網站的主題就是網站所要表達的主要內容，是對網站的一個準確定位。在選擇主題和內容時，主題定位要小，內容要精。不要試圖做一個包羅萬象的網站，這樣往往會使網站失去特色。（3）確定網站的界面。界面是網站給瀏覽者的第一印象，建立網站就像寫論文，要先列大綱，才能主題明確、層次清晰。不僅要仔細考慮每個欄目和板塊的組織編排，把架構規劃好，還要考慮到以后的可擴充性，避免制作過程中多次修改整個網站的架構。項目3Flash網站的設計與制作掌握Flash網站的架構（4）確定網站的內容。網站的內容和網站的建設目標及類型有很大的關系。個人網站的內容依賴個人的興趣、愛好及其愿意為瀏覽者提供的特殊信息。企業網站一般用于展示其組織結構、業務范圍、產品類型等。商業網站要根據網站提供的服務、實現的功能、達到的目標來確定內容。（5）確定網站的風格。風格是指網站帶給瀏覽者的綜合感受，包括網站的形象設計、版面布局、瀏覽方式、交互性等因素，不管是哪個因素，都要能夠突出網站的獨特性。（6）確定網站的功能。個人、企業做網站首先要知道自己想要的功能。網站的功能可以從系統、布局或交互的角度等多個方面進行描述。項目3Flash網站的設計與制作掌握Flash網站的架構4．網站整體設計1）欄目結構的劃分網站結構是網站設計的基礎，網站結構劃分就是將網站的架構通過圖表的形式表現出來。合理的結構設計對于網站的規劃是非常重要的，下面介紹3種常用的結構類型。（1）層狀結構：類似于目錄系統的樹形結構。層狀結構是按照網頁之間的包含關系組織而成的，結構簡單且直觀，條理清晰，能將所有的內容劃分得非常清晰且便于理解。層狀結構如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構（2）線性結構：類似于數據結構中的線性表，如網絡服務器的鏈接，各頁面之間都建立了鏈接，可以引導瀏覽者按部就班地瀏覽整個網站的文件。線性結構常用于制作需要按步驟進行的欄目，如用戶注冊、建立訂單等。線性結構如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構（3）Web結構：類似于Internet的組成結構，各網頁之間形成網狀連接，允許用戶隨意瀏覽。Web結構如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構2）網站版式布局的設計和傳統的報刊類似，網站頁面也需要進行排版布局。在設計時要把文字、圖片、空白當作一個整體來看待，采用劃分平面的方式，在傳達信息的同時使瀏覽者產生感觀與精神上美的享受。網站版式布局是一種不同于傳統媒體的具有獨特風格和藝術特色的視聽表現方式，下面探討網站版式布局的設計。（1）對齊式布局。這種版式布局可分為上下對齊和左右對齊兩種，使文字、圖像等元素按比例合理布局。如圖所示，頁面采用的是左右對齊式布局，滿載文字信息，一點兒都不浪費空間，是特別適合傳遞商業性信息的版式。項目3Flash網站的設計與制作掌握Flash網站的架構（2）全景式布局。這種版式布局可以分散排列多張圖片，看起來就像在瀏覽電子畫冊一樣，可以自由、輕松地細細品味，如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構（3）包圍式布局。這種版式布局的基本構思是在頁面四周用純色或圖案包圍起來，以便產生一個被界定的區域，如圖所示。項目3Flash網站的設計與制作掌握Flash網站的架構（4）對稱式布局。這種版式布局以中心線為基準，且左右對稱。這種版式是最常見的，是一種格調高雅的穩定型版式，給人以嚴謹、理性的感覺。如圖所示，黑白兩色將頁面分為左右對稱的形式，不但背景對稱，圖像也對稱，充分體現了頁面主題。項目3Flash網站的設計與制作掌握Flash網站的架構（5）滿版式布局。這種版式布局以圖像充滿屏幕，主要以圖像為訴求點，可以將部分文字置于圖像之上。其視覺傳達效果直觀而突出，給人以生動大方的感覺。如圖所示，整個畫面充滿了音樂氣息，樂符、音響、吉他等元素的出現，使畫面更具有律動感和空間感。項目3Flash網站的設計與制作掌握Flash網站的架構（6）三角形布局。這種版式布局是指網頁中的各視覺元素呈三角形或多角形排列。正三角形最具穩定性；倒三角形可產生動感；側三角形則構成一種均衡版式，既安定又有動感。如圖所示，將兩個三角形分別放置在相應的對角上，并配以標志及導航，可以突顯主題內容，使畫面更具動感、現代感。項目3Flash網站的設計與制作掌握Flash網站的架構（7）自由式布局。采用這種版式布局的頁面具有活潑、輕快的氣氛。如圖所示，素描風格的背景搭配貼畫風格的人物，有趣的導航奇妙地融入其中，這樣搭配組合的構圖自由、形式獨特，且極具趣味性。項目3Flash網站的設計與制作了解Flash網站的應用領域Flash網站以強大的交互性、無縫的跳轉鏈接、跨平臺和客戶端的支持、極具視覺沖擊的表現力而深受大眾的喜愛，其應用領域也越來越廣泛。1．網絡游戲利用Flash技術開發的網絡游戲是一種新興的游戲形式，以畫面精美、操作簡單、無須安裝等優點深受廣大網友青睞。隨著Flash技術的迅速發展，Flash網絡游戲發展空間巨大。網絡游戲的代表：仙劍類《飄渺仙緣》、角色扮演《十年一劍》、策略類《三十六計》等。2．電子雜志企業文化的建設直接影響企業的凝聚力和競爭力，越來越多的企業開始注重并花費大量的人力和財力進行這方面的團隊建設。傳統的板報和告示欄顯然已無法滿足需求，網絡傳播成了最有效且最經濟的手段。電子雜志是網絡時代的一種重要工具，可以用于各種群體之間的信息交流和信息發布。通過電子雜志可以輕松解決印制成本及運輸費用的問題。項目3Flash網站的設計與制作了解Flash網站的應用領域3．特定網上廣告與傳統的廣告相比，使用Flash制作的廣告具有明顯的優勢，因為其制作成本低、周期短、產品多樣化、自由度高且具有交互性。Flash廣告可以通過網絡有目的地將產品信息隨著動畫悄無聲息地傳遞給用戶，使用戶在不知不覺中了解產品，并且不容易產生逆反心理，也突顯了Flash在商業推廣上的巨大價值。4．企業品牌推廣Flash網站以新穎獨特的視覺體驗，被越來越多的有實力的企業所引用。Flash網站對企業品牌推廣來說效果非常好，特別是一些高端的汽車品牌和房地產項目。除了上述應用，Flash網站還可以用于企業宣傳、產品展示、形象推廣、動態視頻展示等。項目3Flash網站的設計與制作模擬實訓一、實訓目的（1）掌握Flash網站的架構。（2）了解Flash網站的應用領域。二、實訓內容分組制作網站的策劃書（自選題目），應包括建設網站的目標、主題、功能和欄目內容，在Word或Photoshop中制作網站結構圖和版式布局設計草圖。項目3Flash網站的設計與制作任務2掌握Flash網站美工設計人們對美的追求是不斷加深的，網頁設計也是如此。網頁設計的審美需求是對平面視覺傳遞美學設計的一種繼承和拓展。需要考慮如何提高用戶接收網頁信息的效率，增加網頁設計的美感，從而迎合大眾的視覺審美。本任務主要介紹Flash網站美工設計的相關知識，包括Flash網頁的平面構成、色彩搭配及設計風格等。任務目標（1）了解Flash網頁的平面構成。（2）熟悉Flash網頁的色彩搭配。（3）掌握Flash網頁的設計風格。項目3Flash網站的設計與制作了解Flash網頁的平面構成網頁具有獨特的信息表達方式和強大的交互性，因此網頁設計在平面構成的創意上受到諸多限制和挑戰。在設計網頁時，運用平面構成的原理和藝術表現形式能夠使網頁效果更加豐富。1．平面構成的形式表現平面構成的原理已經廣泛應用于不同的設計領域，在網頁設計中也不例外。1）分割構成在平面構成中，把整體分成各個部分稱為分割，下面介紹幾種常用的分割方法。（1）等形分割。這種分割方法要求分割的形狀完全相同，分割后再加上分割線用于界定會有更好的效果。等形分割頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成（2）自由分割。這種分割方法將畫面進行自由分割，呈現的是不規則的形狀。不同于等形分割的整齊效果，自由分割根據圖像效果隨意分割，以呈現活潑靈動的感覺。自由分割頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成2）對稱構成對稱通常分為上下、左右或反射等基本形式，但僅限于此不免單調乏味，所以在設計網頁時要在基本形式的基礎上添加靈活的運用，這樣才能達到意想不到的效果。網頁中常用的幾種對稱形式如下。（1）左右對稱。這種對稱形式在平面構成中最常見，可以將對立的元素在一個頁面中平衡放置。左右對稱頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成（2）中軸對稱。這種對稱形式的布局比較簡單，所以在修飾方面也盡量以簡單樸素的方式呈現。中軸對稱頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成（3）回旋對稱。這種對稱形式給人一種相對平衡的感覺，使用該形式布局網頁時，打破了常規的設計習慣，可以給人耳目一新的感覺?；匦龑ΨQ頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成3）平衡構成在設計的時候，平衡是非常重要的因素。平衡可以讓人們在瀏覽網頁時產生視覺上的滿足感。平衡構成一般分為對稱平衡和非對稱平衡兩種。（1）對稱平衡。這種平衡方法是最自然、最常用到的。在網頁中，整體或局部采用對稱平衡布局，可以在視覺上達到平衡，讓畫面呈現穩定感。對稱平衡頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成（2）非對稱平衡。這種平衡方法并非真正的“不對稱”，而是更高層次的“對稱”，如果沒有設計好，頁面就會顯得凌亂，故采取這種方法進行布局時要謹慎。非對稱平衡頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成2．平面構成的紋理表現紋理是網頁中重要的視覺特征，其實際上來源于色彩。在網頁設計中，采用不同的紋理，搭配對應的內容，能夠給瀏覽者留下深刻的印象，尤其是紙質、木紋等圖案更具有真實感，而發散和密集的構成也可以增加網頁的空間感。1）肌理構成肌理也可以理解為質感，由于不同物體的材料不同，表現出的組織、構造也不同，因此產生的光滑感、粗糙感和軟硬感不同。在網頁設計中，為了達到預期的效果，強化心理表現和獨特的視覺呈現，可以通過多種方法創建不同的肌理構成。如圖所示，網頁的背景以木紋圖案構成，可以更好地襯托網站主題。項目3Flash網站的設計與制作了解Flash網頁的平面構成2）發散構成發散現象在日常生活中隨處可見，如太陽的光芒、怒放的花朵、蜘蛛網等都可以構成發散的圖形。發散其實是一種特殊的重復和漸變，基本的線條、形狀圍繞一個中心，形成強烈的視覺效果，可以產生炫目、富有節奏變化的頁面，如圖所示。這種構圖由中心向外或由外向中心集中，以螺旋線的方式排列發散。項目3Flash網站的設計與制作了解Flash網頁的平面構成3）密集構成密集構成在網頁設計中也是常見的構圖方式。這種構圖使用基本形狀在整個頁面中自由發散，最集中或最稀疏的地方常常成為設計的視覺焦點，在構圖上呈現了視覺的張力。如圖所示，使用密集的方塊構成網頁畫面，呈現有韻律的節奏感。項目3Flash網站的設計與制作了解Flash網頁的平面構成3．平面構成的藝術表現重復、漸變和空間構成屬于色彩構成的方式，適用于網頁設計。運用這些方式可以使網頁具有豐滿、穩重、整體的視覺感觀。1）重復構成重復構成方式是指相同的形狀在同一頁面中多次出現，利用重復的圖案加深人們的印象，突出主題，在網頁設計中可以以背景和圖像兩種形式出現。重復構成頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成2）漸變構成漸變構成方式以基本的形狀形成漸次的構圖變化。漸變構成頁面示例如圖所示。項目3Flash網站的設計與制作了解Flash網頁的平面構成3）空間構成一般的空間是指二維空間。在日常生活中，人們會覺得遠處的物體小，而近處的物體大，對這些特性加以分析，可以形成立體空間元素的構成法則。如圖所示，可以利用文字的扭曲、線條的延伸和圖像的虛實營造出平面圖像上下、前后的感覺，制造空間感。項目3Flash網站的設計與制作熟悉Flash網頁的色彩搭配在構思設計Flash網頁的過程中，可以模仿但不能千篇一律，在設計中要能夠看到新的創意與不同意境的表達，同樣的事物，不同的人看到的和感受到的，以及想要表達的思路是不盡相同的，因此，激發創意思維，特別是空間想象思維是非常關鍵的。這就需要有較好的審美品位，了解基本的配色原則。認識色彩時，除了存在客觀方面的因素，還存在主觀方面的因素，色彩信息作用于人的視覺器官，通過視覺神經傳入大腦后，根據以往的記憶及經驗產生聯想，從而形成一系列的色彩心理反應。下面是幾種Flash網頁的配色方案。1．冷、暖感覺的配色色彩本身并無冷、暖的溫度差別，而是視覺色彩引起的人們對冷、暖感覺的心理聯想。看到藍色、藍紫色、藍綠色等配色后，人們很容易聯想到太空、冰雪、海洋等物象，產生寒冷、理智、平靜等感覺。其所激起的情感和表示暖的色彩所激發的情感完全不同。項目3Flash網站的設計與制作熟悉Flash網頁的色彩搭配2．輕、重感覺的配色色彩的明度與純度會引起人們對色彩物理印象的錯覺。一般來說，顏色的重量感主要取決于色彩的明度，明色給人以輕的感覺。明度高的色彩會使人聯想到藍天、白云、花卉、棉花、羊毛等，可以產生輕柔、漂浮、上升、敏捷、靈活等感覺，如圖所示。項目3Flash網站的設計與制作熟悉Flash網頁的色彩搭配3．興奮、舒適的配色色彩的色相和明度會給人以興奮或舒適等感受。例如，紅色、橙色、黃色等鮮艷而明亮的色彩會給人以興奮感，高明度、高純度的色彩也會使人產生興奮感。如圖1所示，頁面中大面積橙色和白色營造的氛圍比較容易讓人興奮，橙色的搭配使頁面在冬日里看起來更加溫暖，畫面更具渲染力；如圖2所示，頁面顏色非常柔和，給人一種舒適的感覺。項目3Flash網站的設計與制作掌握Flash網頁的設計風格隨著人們對審美要求的不斷提高，網頁視覺效果的呈現也越來越受到重視。根據不同的客戶需求，設計出不同風格的網頁至關重要。下面介紹幾種不同風格的網頁設計。1．平面風格平面風格的網頁通過色塊或位圖等元素展現形成二維的畫面效果，如圖所示。項目3Flash網站的設計與制作掌握Flash網頁的設計風格2．矢量風格矢量風格的網頁是由矢量圖像組合而成的，網頁的圖像效果可以任意縮放，不會影響展示效果。矢量風格是動畫網站中常見的一種設計風格。矢量風格網頁示例如圖所示。項目3Flash網站的設計與制作掌握Flash網頁的設計風格3．像素風格像素風格的網頁使用圖標風格的圖像制作，以強調鮮明的輪廓、亮麗的色彩，同時，其造型比較卡通，受到很多用戶的喜愛。如圖所示，網頁采用真人和像素畫相結合的方式制作而成。項目3Flash網站的設計與制作掌握Flash網頁的設計風格4．三維風格三維是在二維坐標系中增加了一個方向向量，構成了空間。三維風格中的立體空間效果，能夠在突出主題的同時無限延伸視線，如圖所示。項目3Flash網站的設計與制作模擬實訓一、實訓目的（1）了解Flash網頁的平面構成。（2）熟悉Flash網頁的色彩搭配。（3）欣賞不同的Flash網頁的設計風格。二、實訓內容分析如圖所示的美容網站的美工設計。項目3Flash網站的設計與制作任務3制作Logo動畫在全球競爭加劇、人們注意力持續時間持續縮短的當今社會，如何為人們提供新鮮的視覺感受，讓品牌脫穎而出變得更加重要。動態的物體可以迅速抓住人們的眼球，引起他們的興趣。利用Flash軟件將Logo設計與動畫相結合，可以創造出具有動態效果的、引人注意的品牌形象。這種視覺上的吸引力在充滿噪聲和干擾的數字世界里，既可以使網站生動有趣又可以留住用戶，提升品牌競爭力。這就是Logo動畫的魅力。任務目標（1）了解Logo動畫。（2）掌握Logo動畫的制作方法。項目3Flash網站的設計與制作了解Logo動畫Logo是商標、徽標的英文logotype的縮寫，品牌Logo對企業而言具有識別和推廣的作用。個性形象的Logo可以讓用戶記住公司主體和品牌文化。在網站中，Logo主要是各個網站用來區分與其他網站鏈接的圖形標志，代表一個網站或網站的一個板塊。Logo動畫一般在網站首頁橫幅中呈現，也可以在網站加載時呈現。Logo動畫其實是把一個靜態的Logo分解成多個元素，再把Logo的內涵與這些元素通過動畫的方式融合在一起，這樣也就把新的生命力注入Logo中，使整個網站更生動、更具有活力。Logo設計的趨勢離不開當下媒體技術的發展，隨著動態設計的熱度持續增長，Logo動畫也已經常見于網站品牌設計和營銷方案中。下圖所示為某公司Logo動畫設計。項目3Flash網站的設計與制作了解Logo動畫Logo動畫的優勢主要包括以下幾點。（1）更好地呈現品牌故事。動態Logo和傳統的靜態Logo可以同時存在，如果Logo動起來，設計師就多了一種傳達品牌故事的方式，可以跳出局限于平面的呈現方式，讓用戶以一種全新的方式來感知品牌。（2）具有更高的識別度。動態Logo比靜態Logo更容易被用戶理解和記住，能夠更好地吸引潛在用戶的注意力。（3）喚醒用戶的情緒。動態圖像不僅能夠讓用戶喜悅、興奮，還可以觸發用戶不同的情緒。一個有趣的動態Logo不僅能夠給用戶帶來積極的情緒，還可以使用戶將Logo和快樂的東西聯系起來。（4）應用范圍更廣，效果更好。社交網絡是產品推廣的主要平臺之一。不管是網頁、App，還是動態圖片和視頻，都是具有強大傳播力的營銷工具，它們易于共享，承載能力強。因此，Logo動畫更易于在互聯網上廣泛傳播，同時可以融入產品視頻宣傳等不同的形式，進行廣泛的傳播與分享。項目3Flash網站的設計與制作模擬實訓一、實訓目的（1）了解Logo動畫的制作及運用。（2）掌握Logo動畫的制作方法。二、實訓內容設計并制作一個學校的Logo動畫，其Logo如圖所示。項目3Flash網站的設計與制作任務4設計與制作Flash網站Flash網站以其特有的美觀性越來越受到人們的歡迎，使用Flash技術制作的網站可以彰顯企業的地位，通過與眾不同的視覺表達帶給用戶高端的感官體驗。本任務將通過案例介紹Flash網站的設計與制作。任務目標（1）掌握Flash網站的設計。（2）掌握Flash網站的制作。項目3Flash網站的設計與制作掌握Flash網站的設計1．色彩風格的設計網站的色彩風格是一個網站的基調，不同的色彩搭配，給人的第一感覺也是不一樣的。網頁風格的4個基本要素是顏色、線