第一篇:Flash在網頁設計中的應用論文
隨著網絡技術、電腦技術的快速發展與廣泛普及,網頁設計開啟了人類新的生活、新的實踐,網頁已經成為網絡信息的表現和思想傳播的主要形式。而在網頁設計與網站建設的過程中,Flash的應用尤為重要。在網頁設計中適當地使用Flash技術,能使網頁呈現出多媒體效果,從而更加具有吸引力,增加網頁與瀏覽者的互動性。同時,Flash也逐漸依靠其諸多優勢迅速占領了網頁設計領域,成為了網頁設計的重心。本文重在探討Flash動畫在網頁設計中的應用,以供同行參考。
1Flash動畫技術概述
Flash是一類矢量式圖形編輯及動畫制作應用軟件。它通過利用符號、按鈕、場景等一系列元素組合,能夠使設計者集成圖形、動畫,影像文件,音頻等各種多媒體制作素材,利用最基礎的元素制作出內容豐富、形式簡潔、交互性強、極富渲染力的動畫效果。
2Flash在網頁設計中的應用
近幾年,Flash作為一種新型的設計方式和娛樂方式,已被廣泛應用于網頁設計中,從簡單的文字、圖片效果到復雜的Flash網站建設,可以說Flash所起的作用不再僅僅是增添一些漂亮的動畫,而是已經融入到了整個網站的建設之中。目前Flash技術已與電視、廣告、動畫、MTV制作等緊密結合,并作為一種產業,逐步向音樂、電視、廣告、游戲、遠程教育等各個領域滲透。
2.1將Flash引入網頁設計的必要性
由于受技術方面的限制,早期的網頁大多都為靜態頁面,即網頁上的所有內容都是通過文字和圖片表示出來。在這種文字加圖片的靜態網頁中,網頁版面單調,內容枯燥,要想吸引瀏覽者的注意力難度非常之大,同時也使得網站淪落成一個純粹的信息網站。而如果在網頁設計過程中,通過加入Flash,特別是其在色彩、聲音和動態效果等方面的有效組合,可以使網頁風格多姿多彩,很大程度地吸引瀏覽者的注意力,使瀏覽者對網站的印象更加深刻。
2.2Flash在網頁設計中的部分應用
在網頁設計中,適當使用Flash來展示那些需要突出展示的內容,往往能起到畫龍點睛、突出主題、充分調動瀏覽者興趣的效果,這是圖片等二維技術所不能比擬的優勢。比如,一些網站為了提高美觀性,吸引瀏覽者的注意力,同時也為了獲取利益,往往會植入一些廣告,例如網絡廣告、企業宣傳動畫、網站形象展示動畫等內容。此時如果將Flash技術廣告有機結合,就需要設計者必須考慮Flash的生動性和活潑性,潛心研究網頁內容的特點以及其與宣傳內容的契合點,從而提出好的創意,以確保Flash能從不同角度和層次對廣告和頁面主題進行展現,增加網頁與瀏覽者之間的互動性。
2.3Flash在整站網頁設計中的應用
除了上面所提到的采用Flash進行網頁設計外,也有一些網站,為了體現自己的獨特之處,將Flash技術引入整個網站的設計中。此種純Flash網站設計方式一般適用于設計類的公司,比如廣告、傳媒、設計、網絡游戲等行業公司。一般來說,一個網站如果整個網站全部都要使用Flash來設計,就必須事先對網站進行科學合理的設計。包括視聽元素、頁面布局、版面結構以及網站結構關系設計等內容。設計完后就是要收集準備素材,包括文字、音樂、圖片、視頻等,并確定動畫的展現形式。在設計的時候,要保證網站趣味性,在給人以視覺和聽覺上的雙重享受之外,要能調動瀏覽者的積極性,要能讓瀏覽者繼續停留在當前網頁并且愿意仔細瀏覽網站上的信息和內容。
2.4網頁設計中應用Flash應注意的問題
從目前的發展趨勢來看,Flash由于其自身的眾多優勢成為了網頁制作的主要方式之一,給設計者提供了更便捷、完善的動畫創作平臺,同時也受到了廣大用戶的認可和歡迎。盡管如此,在應用Flash進行網頁設計時還應注意一些問題。如,網頁中設計中不能過多使用Flash,如果過多使用,會不利于搜索引擎的識別,這勢必會影響到網站在搜索引擎中的排名,進而對網站瀏覽量產生負面影響。Flash的使用也不應過于花哨,否則,容易使瀏覽者眼花繚亂,找不到自己想要的信息,進而產生感到煩躁感;在應用Flash時,還應注意Flash操作人機關系的影響。
3結語
作為網頁設計的一個重要的視覺元素,Flash有著體積小、成本低、效果好等優點,在運用Flash進行網頁設計時,設計者要在遵循傳統網頁制作思路和制作要點的基礎上,靈活、合理地應用Flash,這樣才能使整個網站具有更加強大的交互感和親和力。另外,還需注意的是,要想讓制作出來網頁更加具有吸引力,除了對技術的硬性需求之外,設計者也需要具備一定的美學知識。因此,在不斷提高網頁制作技術的基礎上,設計者還要不斷提高自身的藝術水平。如今,隨著網絡信息技術的不斷發展,且Flash自身擁有的眾多優點,Flash在人們生活中的應用越來越普及,因此,設計者在應用Flash進行網頁設計時,一定要有精益求精的信念,這樣才能為網頁設計創作開拓一個更為廣闊的未來,才能為更多商家和大眾所青睞。
第二篇:flash網頁設計畢業(論文)
遼寧警察學院畢業設計(論文)
Flash網頁設計
系: 高職計算機系 專業: 計算機應用技術 學生: 陶帥帥 指導教師:楊 虹
完成日期:2017年4月3日
遼寧警察學院畢業設計(論文)
Flash網頁設計
總計 畢業設計(論文)表格 0表 插圖 24幅
頁
摘 要
本論文主要論述了本人所做畢業設計課題《Flash網頁設計》的技術背景、設計理念、概要設計、詳細設計以及最后效果展示等方面內容,詳細的介紹了本人對于設計簡單Flash網頁的一整套設計過程和相關技術難點的解決方法。
Flash設計網頁成為越來越多動漫愛好者和非動漫愛好者獲得信息和交流的平臺,它滿足了廣大用戶隨時隨地進行交流和溝通的需要,為網上用戶提供交流場所,實現高效動態信息交換,而網頁恰恰是由一個個小小的網頁集結而成,沒有網頁就沒有強大的網頁?,F在雖然有很多動漫網頁,但版面千篇一律,缺乏個性化、前瞻性,頁面設計混亂,不利于用戶查看,網頁的交互性比較差,因此我針對以上問題為動漫網頁設計一個個性化的動漫網頁。關鍵詞:動漫網頁,Flash
I
Abstract This paper mainly discusses the graduation design which I do the Anime Web Design Theme of technical background, design concept design, detailed design, summary and display effect etc, detailed introduces himself to design a simple Flash web design process and related technical difficulties in solving methods.Animation design website become more and more anime fans and the anime fans access to information and communication platform, it can meet the the needs of the masses of users communicate and communication anytime and anywhere, provide communication place for online users, efficient dynamic information exchange, and site is composed of little web pages gathering, no web, no powerful web site.Although there are a lot of DongManWang stand now, but the layout of the same, the lack of personalized, prospective, page design, unfavorable to the user to see, website interactivity is poorer, so I have to solve above problems as DongManWang station design a personalized anime web pages.Key words: Web Design;Flash;Flash web design
II
目錄
前 言..............................................................................................................................1 第1章 概述..................................................................................................................2
1.1 Flash軟件的介紹.........................................................................................2 1.1.1Flash的歷史.......................................................................................4 1.2 Flash軟件的特點.........................................................................................4 1.2.1普通網頁設計的特點.........................................................................4 1.2.2Flash網頁...........................................................................................5 第2章 網頁設計的開發工具與開發語言..................................................................7
2.1 網頁使用的開發工具.....................................................................................7 2.1.1Macromedia Flash 8.0 Pro..............................................................7 2.1.2Adobe Photoshop CS2........................................................................7 2.2 網頁開發語言.................................................................................................7 第3章 Flash網頁設計中的各種技術解析................................................................9
3.1 主頁界面設計解析.........................................................................................9 3.1.1Flash網頁加載時的進度條設計..........................................................9 3.1.2網頁LOGO與站點設計...................................................................10 3.1.3網頁導航條的設計.............................................................................10 3.1.4進入主頁界面前動態效果設計.........................................................12 3.1.5進入主頁時的音效設置.....................................................................13 3.2 “賞漫軟件”Flash子頁面設計......................................................................14 3.2.1“賞漫軟件”目錄的制作..................................................................14 3.2.2賞漫軟件的圖片文字介紹部分制作.................................................15 3.3 “精品動漫”Flash子頁面設計......................................................................15 3.4 “酷站導航”Flash子頁面設計......................................................................17 3.5 “酷炫漫畫”Flash子頁面設計......................................................................18 3.6 “關于作品”Flash子頁面設計......................................................................19 結論..............................................................................................................................20 致謝..............................................................................................................................21 參考文獻......................................................................................................................22 III
遼寧警察學院高職計算機畢業設計(論文)
前 言
世界因Internet的出現而在逐步改變,網絡經濟雛形因此而形成,由于Internet具有信息容量大、方便迅速、形態多樣、覆蓋全球等特點,直至今日已發展成為信息傳播的主要載體,所以幾乎全球的各個企業、機構紛紛建立自己的web站點。Internet信息資源龐大、圖文互動、高速高效的特點給傳統設計媒體帶來了巨大的沖擊,再加上網絡經濟對設計行業的影響,由此而產生了一個新的設計領域--網頁設計。
Flash產業作為我國發展中的產業,網頁設計技術的發展推動了該產業的傳播,使得各類Flash網頁紛紛崛起,為廣大Flash愛好者帶來了諸多便利。
本課題設計的是一個以Flash設計為主題的網頁設計,以信息發布、分享為主要的。通過發布一些關于Flash的信息、圖片和Flash等為有同樣喜好的人們提供一個分享的空間。同時訪客用戶可以在網頁中的劇情交流上發表自己的看法以及可供共享的信息,使人們在獲取信息的同時,還可以發表自己的感受。在如今網絡高速發展的時代,發布信息與分享興趣已成為大多網頁設計的主要目的。
Flash網頁設計
第1章 概述
Flash網頁設計是指用用Flash軟件制作的網頁,網頁內容多數甚至全部是Flash。全Flash網頁基本以圖形和Flash為主,所以比較適合做那些文字內容不太多,以平面、Flash效果為主的應用。如:企業品牌推廣、特定網上廣告、網絡游戲、個性網頁等。
在因特網飛速發展的今天,多姿多彩的網絡頁面總是讓我們目不暇接,創建富有個性的個人主頁更是每一個網絡愛好者的夢想。作為一個優秀的多媒體網頁設計平臺,Flash從眾多的網頁設計軟件中脫穎而出,成為大多數網絡愛好者設計網頁的首選工具。能夠為大多數人所認同的東西總有它的獨特之處,Flash正是以其獨特的魅力征服了網絡發燒友。
首先,Flash的一個很重要的特點是創建的文件體積很小,Flash是完全基于矢量的Flash處理技術,而矢量圖形就是用少量的向量數據來描述一個復雜的對象,存儲時只占很小的空間,而且圖像的質量也很高。想必許多網友們也曾對自己掛在網上的一些Flash作品的體積擔心,那么,用Flash來創建網絡Flash作品也正是我們的首選。
其次,Flash使用的是插件的工作方式,用戶只要安裝一次插件,以后就可以快速啟動并觀看Flash,而不必像Java那樣,每次都要花費大量的時間啟動虛擬機。
再次,Flash動漫采用的是“流式”的Flash播放技術,用戶不必等到Flash下載完全再去欣賞,而是一邊下載一邊欣賞。
最后,Flash簡單易學,盡管它不能像一門高級語言一樣進行編程,但功能還是很廣泛的。使用內置的ActionScript語句結合JavaScript,也可以制作出互動性很強的主頁來
1.1 Flash軟件的介紹
Flash是美國Macromedia公司所設計的一種二維矢量動畫軟件(現Adobe公司產品),用于設計和編輯Flash文檔,最新版本為:Animate CC 2015.5。Flash通常也指Macromedia Flash Player(現Adobe Flash Player),用于播放Flash文檔。
遼寧警察學院高職計算機畢業設計(論文)
檔案格式:
圖1-1影片檔
“swf ”這是一個完整的影片檔,無法被編輯。有時會被念做“swiff”。Swf在發布時可以選擇保護功能,如果沒有選擇,很容易被別人輸入到他的原始檔中使用。然而保護功能依然阻擋不了為數眾多的破解軟件,有不少閃客專門以此來學習別人的程序代碼和設計方式。
圖1-2原始檔
“fla ”是Flash的原始檔,只能用Macromedia Flash打開編輯或Adobe Flash CS3及更高版本打開編輯
Actionscript是一種程序語言的簡單文本文件.FLA檔案能夠直接包含Actionscript, 但是也可以把它存成AS檔做為外部連結檔案(如定義ActionScript類則必須在寫在as文件里,再通過import加入類),以方便共同工作和更進階的程序修改。
Flash 是一種創作工具,設計人員和開發人員可使用它來創建演示文稿、應用程序和其它允許用戶交互的內容。Flash 可以包含簡單的Flash、視頻內容、復雜演示文稿和應用程序以及介于它們之間的任何內容。通常,使用 Flash 創作的各個內容單元稱為應用程序,即使它們可能只是很簡單的Flash。您也可以通過添加圖片、聲音、視頻和特殊效果,構建包含豐富媒體的 Flash 應用程序。
Flash 特別適用于創建通過 Internet 提供的內容,因為它的文件非常小。Flash 是通過廣泛使用矢量圖形做到這一點的。與位圖圖形相比,矢量圖形需要的內存和存儲空間小很多,因為它們是以數學公式而不是大型數據集來表示的。位圖圖形之所以更大,是因為圖像中的每個像素都需要一組單獨的數據來表示。
Flash網頁設計
1.1.1Flash的歷史
Flash是由macromedia公司推出的交互式矢量圖和 Web 動畫的標準,由Adobe公司收購。做Flash動畫的人被稱之為閃客。網頁設計者使用 Flash 創作出既漂亮又可改變尺寸的導航界面以及其他奇特的效果。Flash的前身是Future Wave公司的Future Splash,是世界上第一個商用的二維矢量動畫軟件,用于設計和編輯Flash文檔。1996年11月,美國Macromedia公司收購了Future Wave,并將其改名為Flash。后又于2005年12月3日被Adobe公司收購。Flash通常也指Macromedia Flash Player(現Adobe Flash Player)。2012年8月15日,Flash退出Android平臺,正式告別移動端。2015年12月1日,Adobe將動畫制作軟件Flash professional CC2015升級并改名為Animate CC 2015.5。
Flash的過去無疑是異常輝煌的,然而它的現在和將來卻飽受非議。在移動互聯網和Html5的強烈沖擊之下,Flash在網頁方面的應用逐漸衰退,如今已經很難再看到純正的Flash整站了。有人因此斷言Flash已經成為一種“過時”的、“應被拋棄”的技術,更有人提出“Flash將死”的預言。然而,換一種客觀的眼光來看現實情形,就會發現Flash并未完全衰退,在網頁游戲、互動設計、媒體應用、教育課件等領域,仍然能夠看到Flash異?;钴S的身影。在動畫效果的流暢性、互動設計的便捷性、代碼開發的簡易性、程序應用的廣泛性等方面,目前還沒有任何一款軟件能夠與Flash相比擬。因此,也有許多開發者認為Flash還“大有可為”。無論Flash的未來何去何從,在當下,它仍然是一門值得所有人認真學習的技術。特別是對于有志成為網頁設計師的學習者而言,Flash更是一門必修課。
1.2 Flash軟件的特點
1.2.1普通網頁設計的特點
網頁設計要注意的兩個要點:整體風格和色彩搭配。
1、確定網頁的整體風格
網頁的整體風格及其創意設計是最難以學習的。難就難在沒有一個固定的模式可以參照和模仿。給你一個主題,任何兩人都不可能設計出完全一樣的網頁。
風格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI(標志、色彩、字體、標語)、版面布局、瀏覽方式、4
遼寧警察學院高職計算機畢業設計(論文)
交互性、文字、語氣、內容價值、存在意義、站點榮譽等等諸多因素。舉個例子:我們覺得網易是平易近人的,迪斯尼是生動活潑的,IBM是專業嚴肅的。這些都是網頁給人們留下的不同感受。
在這里,我提供給大家一些參考經驗:
(1)將你的標志logo,盡可能的放在每個頁面上最突出的位置。(2)突出你的標準色彩。
(3)總結一句能反映貴站精髓的宣傳標語!
(4)相同類型的圖像采用相同效果,比如說標題字都采用陰影效果,那么在網頁中出現的所有標題字的陰影效果的設置應該是完全一致的!
2、網頁色彩的搭配
無論是平面設計,還是網頁設計,色彩永遠是最重要的一環。當我們距離顯示屏較遠的時候,我們看到的不是優美的版式或美麗的圖片,而是網頁的色彩。
關于色彩的原理有許多,在此我們不可能一一闡述,大家可以看看相關設計書籍,有利于系統地理解。在此我們僅僅想告訴大家一些網頁配色時的小技巧。
(1)用一種色彩。這里是指先選定一種色彩,然后調整透明度或者飽和度,這樣的頁面看起來色彩統一,有層次感。
(2)用兩種色彩。先選定一種色彩,然后選擇它的對比色。
(3)用一個色系。簡單的說就是用一個感覺的色彩,例如淡藍,淡黃,淡綠;或者土黃,土灰,土藍。
3、在網頁配色中,還要切記一些誤區:
(1)不要將所有顏色都用到,盡量控制在三至五種色彩以內。
(2)背景和前文的對比盡量要大(絕對不要用花紋繁復的圖案作背景),以便突出主要文字內容。
1.2.2Flash網頁
Flash網頁具有設計精美,擁有更多聲效、Flash、流媒體剪輯、美術效果及兼顧互動性等特征,非常適合公司作在線產品展示。Flash網頁基本以圖形和Flash為主,所以比較適合做那些文字內容不太多,以平面、Flash效果為主的應用。如:企業品牌推廣、特定網上廣告、網絡游戲、個性網頁等。
制作全Flash網頁和制作Html網頁類似,事先應先在紙上畫出結構關系圖,包括:網頁的主題、要用什么樣的元素、哪些元素需要重復使用、元素之間的聯系、元素如何運動、用什么風格的音樂、整個網頁可以分成幾個邏輯塊、各個邏輯塊間的聯系如何、以及你是否打算用Flash建構全站或是只用其做網頁的前期
Flash網頁設計
部分等等,都應在考慮范圍之內。
實現全Flash網頁效果多種多樣,但基本原理是相同的:將主場景作為一個“舞臺”,這個舞臺提供標準的長寬比例和整個的版面結構,“演員”就是網頁子欄目的具體內容,根據子欄目的內容結構可能會再派生出更多的子欄目。主場景作為“舞臺”基礎,基本保持自身的內容不變,其它“演員”身份的子類、次子類內容根據需要被導入到主場景內。
遼寧警察學院高職計算機畢業設計(論文)
第2章 網頁設計的開發工具與開發語言
2.1 網頁使用的開發工具
2.1.1Macromedia Flash 8.0 Pro Macromedia Flash 8.0 Pro相對于Macromedia Flash MX 2004增強了為移動設備開發的功能,方便創建Flash Web增強的網絡視頻。雖然有更高的版本,但是Macromedia Flash 8.0 Pro仍是現在最主流的Flash制作軟件,配合其內置的ActionScript 2.0能夠完美實現網站設計中所需要的各種動態效果和交互效果,而我此次所做的Flash網站就是在Macromedia Flash 8.0 Pro的環境下制作。
新版本的Flash 8中引入了幾種高級技術:實時渲染濾鏡、運行時位圖緩沖、FlashType字體渲染引擎、自定義淡入淡出功能、改進的視頻播放組件、增強的文本工具、增強的描邊屬性、高級漸變控制。其中一種非常棒的技術是,Macromedia減輕了Flash Player 8的渲染工作,在Flash文件中使用標簽,Flash Player 8現在可以在用戶與Flash文件交互時實時渲染濾鏡。這意味著Macromedia已經能夠合并內建的濾鏡效果,象陰影、模糊、內外發光、倒角、漸變倒角、顏色調整,以獲得更豐富的用戶體驗。這些濾鏡或可視效果能夠被應用到影片剪輯(MovieClips)和文本域,當在網頁中運行時,通過播放器渲染并顯現出來。2.1.2Adobe Photoshop CS2 作為Adobe公司出品的最出色的圖形圖像處理軟件,Photoshop以其強大的功能向我們證明著它的名至實歸。在falsh網頁設計時一些圖片素材如背景圖片、按鈕、LOGO等在載入Flash庫前有必要用Photoshop做適當的處理.2.2 網頁開發語言
Html(Hyper Text Markup Language)即超文本標記語言或超文本鏈接標示語言,它是一種計算機程序語言,是目前網絡上應用最為廣泛的語言,也是構成網頁文檔的主要內容。
Html文件是用ASCLL代碼編寫成的,可以保存為最簡單的TXT文本文件,Flash網頁設計
這樣用任何一個文字處理軟件都可以進行編寫,這也是他能夠迅速迅速普及,并十分受歡迎的一個原因。
遼寧警察學院高職計算機畢業設計(論文)
第3章 Flash網頁設計中的各種技術解析
3.1 主頁界面設計解析
3.1.1Flash網頁加載時的進度條設計
(1)新建Flash文檔index.fla,設置舞臺的大小為550*550像素,設置背景的顏色為#786e28。
(2)建立進度條設計主要是幫助觀察Flash網頁載入的進度,建立進度條設計樣式如圖3-1,時間軸上各層設計如圖3-2。
圖3-1進度條
圖3-2進度條在時間軸上各層
Actions:幀1代碼: total = _root.getBytesTotal();loaded = _root.getBytesLoaded();baifenshu = int((loaded/total)*100);baifenbi = baifenshu+“%”;setProperty(“jindutiao”, _xscale, baifenshu);Actions:幀2代碼:
Flash網頁設計
if(baifenshu == 100){
gotoAndPlay(4);} else { gotoAndPlay(1);} 3.1.2網頁LOGO與站點設計
網頁LOGO設計:
(1)新建圖形元件“元件42”。
(2)利用矩形工具建立一個白色矩形,在矩形正中建立一稍小些的背景色矩形形成白色矩形框。
(3)利用任意變形工具將白色矩形框變形成為白色平行四邊形框。用線條工具進行分割裁剪,旋轉變換得到要設計的網頁LOGO。(如圖3-3)
圖3-3 logo展示圖
3.1.3網頁導航條的設計
(1)新建圖形元件“元件22”(如圖3-4),作為導航條背景。
圖3-4導航條背景
遼寧警察學院高職計算機畢業設計(論文)
(2)建立6個圖形元件分別在各元件中設計各導航按鈕文字,字體樣式雅黑,字號12,顏色黑色,分別載入各影片剪輯做出動態效果,對應每個影片剪輯做一個與影片剪輯等大的按鈕,按鈕與影片剪輯放于不同層疊加在一起均勻排列與導航條上(如圖3-5)。
圖3-5導航按鈕
(3)給每個按鈕附加動作。(如圖3-6)
圖3-6按鈕b1動作目錄
代碼如下: 圖層4:幀1: stop();元件11: on(rollOver){ } on(press){
} 元件11: on(rollOut){
gotoAndPlay(1);
tellTarget(“/”){
}
loadMovieNum(“index101.swf”, 100);
gotoAndPlay(2);11
Flash網頁設計
} on(press){
} 圖層4:幀9: Stop(); 元件11: on(rollOut){ } on(press){
} 3.1.4進入主頁界面前動態效果設計
(1)新建圖形元件“元件29”,創建長條圖行,作為三個小窗口推薦酷站、本站作品、站內更新的上框(如圖3-7)。建立三個圖形元件分別制作各個小窗口的名稱(如圖3-8)。
圖3-7小窗口的上框 圖3-8小窗口的名稱
tellTarget(“/”){
}
loadMovieNum(“index101.swf”, 100);
gotoAndPlay(1);
tellTarget(“/”){
}
loadMovieNum(“index101.swf”, 100);
(2)新建圖像元件,在其上創建與小窗口等大的白色和背景色的矩形色塊,在不同圖層中各小窗口的上框和窗體依次在時間軸上載入并做形狀補間Flash(如圖3-9)。
遼寧警察學院高職計算機畢業設計(論文)
圖3-9小窗口動態載入效果時間軸設置
(3)導航條、網頁頭尾的圖片條以相同方式在時間軸上依次載入并做形狀補間效果(如圖3-10),就可以完全載入主頁界面獲得完整的主頁框架界面。
圖3-10導航條、網頁頭尾的圖片動態載入效果時間軸設置
3.1.5進入主頁時的音效設置
(1)挑選合適的音效載入庫中。
(2)選擇適當的音效添加到時間軸上的適當位置(如圖3-11),使動態效果更具表現力。
圖3-11在時間軸上添加聲音效果
主頁框架界面到現在已經基本上設計完成了,主頁框架界面為一個獨立的Flash文檔,發布之后形成index.swf文件。此外,我們還要針對各個導航卡設計其對應的swf文件,各swf文件之間通過as代碼連接形成一個整體,則構成了本Flash網頁的主體結構,再通過as代碼連接一些必要的網頁就構成了一個完整
Flash網頁設計
Flash網頁。以下幾章我將對各個導航卡所對應的.swf文件及它們所鏈接的網頁頁面的制作做進一步的詳細說明。
3.2 “賞漫軟件”Flash子頁面設計
3.2.1“賞漫軟件”目錄的制作
“賞漫軟件”子頁面載入效果和“迷你游戲”子頁面相仿不再贅述。賞漫軟件目錄的制作大體上與游戲目錄相仿,所不同的是不需要轉換和滑動,也就比游戲目錄要好做多,同時目錄中軟件按鈕的制作也和游戲目錄中按鈕一樣,再此不在贅述目錄和按鈕的制作方法。我們來看一下做好的目錄的大概形狀樣式(如圖3-12),用以上做目錄的經驗可以輕松做好。
按鈕附加動作代碼: on(press){
} unloadMovieNum(3);loadMovieNum(“此處最好填所連接swf文件的相對位置”, 2);
圖3-12軟件目錄樣式
遼寧警察學院高職計算機畢業設計(論文)
3.2.2賞漫軟件的圖片文字介紹部分制作
該部分是以一個小的swf文件單獨存在的,在點擊軟件按鈕時會載入相應的swf文件在界面的適當位置。
接下來我們來做一下這個小swf文件,就那ACDSee圖片瀏覽軟件所對應的swf文件來說明吧。
(1)新建空白fla文件,命名.fla。將通過Photoshop設計好ACDSee軟件的圖片素材,載入到s2庫中。并生成影片剪輯。以影片剪輯動態效果實現是通過逐幀Flash方式完成的(如圖3-13至3-14)
圖3-13本影片剪輯動態效果的時間軸設置
圖3-14本影片剪輯動態效果
3.3 “精品動漫”Flash子頁面設計
“精品動漫”Flash子頁面是一個與前幾個子頁面略有不同的子頁面,頁面的設計風格與前幾個頁面有些許差異,不規則的背景使得頁面整體顯得翹起生動。(如圖3-15)子頁面載入動態效果及顯示出動漫按鈕前的動態效果在前面都有涉及不在贅述。
Flash網頁設計
圖3-15“精品動漫”Flash子頁面
(1)新建空白fla文件,命名為index003。將通過Photoshop設計好Flash按鈕圖片素材,大小50*50像素,載入到index003庫中。
(2)新建圖形元件,將圖片載入圖形元件中并在圖片上面覆蓋一層多半透明的與圖片等大的色塊。(如圖3-16)
圖3-16圖像上覆蓋了透明色塊的圖形元件
(3)將圖像元件做成按鈕,按鈕元件第一幀是將該圖形元件透明度略調高一些(如圖3-17),在第二三幀恢復正常(如圖3-18)。
遼寧警察學院高職計算機畢業設計(論文)
圖3-17按鈕第一幀
圖3-18按鈕第二三幀
(4)給每個按鈕附加動作代碼以連接到要播放的swf文件。代碼如下: on(press){
} tellTarget(“/”){ } loadMovieNum(“xinFlash9.swf”, 2);3.4 “酷站導航”Flash子頁面設計
目錄的制作、按鈕的制作、子頁面載入動態效果及顯示目錄時的動態效果等在前面都有涉及不在贅述。這里僅提供該子網頁設計好后的最后效果。(如圖3-19)
Flash網頁設計
圖3-19“酷站導航”子網頁設計好后的效果
其中各個網頁按鈕附加動作的代碼為: on(press){ } 其中對網頁的圖片展示和介紹部分同“賞漫軟件”子頁面中的小swf文件制作方法一致,可仿照其制作不再贅述。loadMovieNum(“需要讀取的swf文件的相對url地址”, 2);3.5 “酷炫漫畫”Flash子頁面設計
絕大部分和“賞漫軟件”子頁面中的設計保持一致,只是按鈕需要重新制作,右側的圖片展示部分也沒太多的改變,完全可以仿照其設計制作不再贅述。再次提供該子網頁設計好后的最后效果。(如圖3-20)
遼寧警察學院高職計算機畢業設計(論文)
圖3-20“酷炫漫畫”子網頁設計好后的效果
3.6 “關于作品”Flash子頁面設計
本網頁就只有一個文字面板,文字面板的設計和其他頁面中目錄的設計比較相似,都是先在圖形元件中設計好其輪廓和背景,再在時間軸上通過形狀、亮度、透明度改變進行形狀補間最終獲得文字面板(如圖3-21)。再次提供該子網頁設計好后的最后效果。(如圖3-22)
圖3-21文字面板設計在時間軸上的設置
圖3-22“關于作品”子網頁設計好后的效果
Flash網頁設計
結論
Flash網頁具有設計精美,擁有更多聲效、Flash、流媒體剪輯、美術效果及兼顧互動性等特征,非常適合公司作在線產品展示。Flash網頁基本以圖形和Flash為主,所以比較適合做那些文字內容不太多,以平面、Flash效果為主的應用。如:企業品牌推廣、特定網上廣告、網絡游戲、個性網頁等。
制作全Flash網頁和制作Html網頁類似,事先應先在紙上畫出結構關系圖,包括:網頁的主題、要用什么樣的元素、哪些元素需要重復使用、元素之間的聯系、元素如何運動、用什么風格的音樂、整個網頁可以分成幾個邏輯塊、各個邏輯塊間的聯系如何、以及你是否打算用Flash建構全站或是只用其做網頁的前期部分等等,都應在考慮范圍之內。
因為本人水平有限,雖然已從很多方面進行闡述和講解,但終究是不能十全十美的,理論與實際永遠是有距離的。希望能在今后的學習和工作中能不斷完善、進步!
遼寧警察學院高職計算機畢業設計(論文)
致謝
畢業設計完成之際,我由衷地感謝楊虹老師的大力幫助和支持,感謝我的同學和朋友,在我遇到各種各樣復雜問題的時候,給予我鼓勵和幫助,使我分析問題和解決問題能力有了很大提高
本論文是在楊虹老師的悉心指導下完成的。楊虹老師淵博的專業知識,誨人不倦的高尚師德,嚴以律己、寬以待人的崇高風范,樸實無華、平易近人的人格魅力對我影響深遠。不僅使我樹立了遠大的學術目標,還使我明白了許多待人接物與為人處世的道理。所有這一切都將成為我受益終生的寶貴財富!本論文從選題到完成,每一步都是在導師的指導下完成的,傾注了導師大量的心血。在此,我向導師表示崇高的敬意和由衷的感謝!我在研究思想方法上得到了啟發,并且在工作中采用他們的部分研究成果與資料。盡管與他們為我付出的一切相比,所有的語言都顯得蒼白無力,但我仍要真誠地說聲:謝謝!感謝三年來各位老師和同學對我學習、生活的關心和幫助。在論文即將完成之際,我的心情久久無法平靜,從開始進入課題到論文的順利完成,有多少可敬的師長、同學、朋友給予了我無言的幫助,在這里請接受我誠摯的謝意!
最后感謝我的母?!|寧警察學院三年來對我的栽培。畢業設計完成之際,我由衷地感謝論文指導老師的大力幫助和支持,感謝熱心的同學與朋友,在我遇到種各樣復雜問題的時候,給予我鼓勵和幫助。
Flash網頁設計
參考文獻
[1]向玫玫,林強,馬杰,薛雅娟,王亞冰,范文南.Flash設計(21世紀全國普通高等院校美術藝術設計專業十二五精品課程規劃教材),遼寧美術出版社,2014.04.[2]李錫澤,王喆.《Flash動畫網頁設計》,武漢大學出版社,2015年.[3]劉歡.《Flash ActionScript 3.0交互設計200例》,人民郵電出版社,2015.05.[4]劉斌.基于Flash的課件制作與應用[J],科技廣場,2012(7).P102-P103.[5]莫仲心.淺談Flash動畫在網頁設計中的應用[J].信息通信.2012(1).P135-P136.22
第三篇:分層教學在《網頁設計》中的應用
分層教學在《網頁設計》中的應用
乳源中等職業技術學校 李新華
摘要: 《網頁設計》在中等職業技術學校課程中是一個操作性較強的模塊,學生通過對《網頁設計》這一模塊的學習,能夠熟悉網站、網頁的基礎知識,掌握建立網站和制作網頁的基本知識和技巧;能夠設計出精美的網頁,還可以培養一種能夠陶冶情操的特長愛好。
關鍵詞:分層 差異 分層教學
在實際教學中,我發現學生對《網頁設計》課程的學習興趣和學習能力反映不一樣。其中某些學生的學習能力較強,表現出對網頁設計有很強的學習興趣,同時學習效果也不錯,經常向老師表示希望能學到更多的關于網頁設計方面的知識;還有部分學生對網頁設計課程也表現出一定的興趣,但學習能力不是很好,學習效果一般;還有一部分學生對網頁設計課程的學習幾乎沒有什么熱情,也不用心學習或者學習能力差,基本喪失了學習興趣和信心。如何讓所有的學生都能學會并且學好《網頁設計》這個操作性那么強的模塊呢?本人在教學中發現“根據不同學生的具體情況和知識結構進行教學設計”的分層教學理論正符合目前學生的情況,因此決定在教學中采用“學生分層——教學目標分層——教學評價分層”的教學模式。
由于網頁設計是一門實踐性較強的課程,學生的網頁設計水平會隨著學習態度的變化和實踐操作的熟練程度的變化而發生相應的變化。所以在進行實際教學中根據具體情況適時采用分層教學。
在講授到超級鏈接時, 我采用了分層教學模式進行教學。
一、學生分層
分層教學理論的一個基本的要求和目的就是根據不同學生的具體情況和知識結構進行教學設計。根據學生對網頁設計的掌握程度,我將學生分為A、B、C三個層次。具體分層如下:
A層:學生對網頁設計課程的學習表現出較強的興趣,同時也熟練應用網頁設計相關軟件(如Dreamweaver、Flash、PhotoShop)的同學,并能較快地接受老師在多媒體課堂上講授的教學內容和在計算機機房中能較好完成老師所布置的實驗內容。
B層:學生對網頁設計課程的學習興趣表現一般,同時對網頁設計相關軟件有一定了解的同學,能理解老師在多媒體課堂上講授的教學內容,但在計算機機房實踐時需要老師或其他同學的幫助才能順利地完成實驗內容。C層:學生對網頁設計基本沒有學習興趣,同時學習能力較差或學習不夠認真的同學,在課堂上表現很差(經常違反課堂紀律,或者做些與課堂無關的事情)。
二、教學目標分層
教學目標的分層就在于給不同的學生設置不同的階段學習目標,以使不同的學生能根據各自不同的情況進行有針對性的學習。既能保持各層次學生學習網頁設計的積極性,又能在各自的基礎上發揮特長,使基礎的鞏固與個性的發展達到和諧統一。
根據以上原則,關于超級鏈接的學習目標也分三個層次。
C層:能理解超級鏈接的概念和掌握創建超級鏈接的基本方法;在上機實踐操作時能夠模仿范例創建幾種常用的超級鏈接:不同對象的鏈接(文字鏈接和圖像鏈接)、不同路徑的鏈接(絕對路徑鏈接和相對路徑鏈接)、不同形式的鏈接(電子郵件鏈接和虛擬鏈接)。
B層:除了能夠理解超級鏈接的概念和掌握創建超級鏈接的基本方法外,還要熟練創建超級鏈接的技巧;除了在上機實踐操作時能夠模仿范例創建幾種常用的超級鏈接外,還要在C層目標的基礎上增加難度較大的超級鏈接,如圖像熱點鏈接和錨記鏈接;同時還要懂得在制作網頁時在不同的情況下使用不同類型的鏈接。
A層:在掌握B層目標的基礎上還要求學生掌握超級鏈接的HTML語法,還要求利用CSS樣式來修飾鏈接文字以實現更佳鏈接效果,并且還能夠制作出實現超級鏈接的Flash動畫效果;同時還鼓勵學生自己設計和制作更有創意的超級鏈接效果,使網頁更生動和精美。
三、教學評價分層
在教學中,根據學生分層傳授知識,對學生進行不同的評價。對學生進行分層評價,以其在原有知識水平上的進步和提高作為評價學生是否完成教學目標的一個基準,這是進行分層教學的一個重要的方面,也是衡量分層教學法是否有效的一個重要手段。
在進行超級鏈接的學習后,根據學生的多媒體課堂聽課情況和上機實踐操作情況,以及布置作業的完成情況和課后學生自行練習情況進行總考核,得出綜合評價。
A層:大部分學生都能夠自覺地完成老師布置的任務,能夠創建出效果較好的超級鏈接; B層:部分學生也基本掌握了很多的創建超級鏈接的方法和技巧,但還有個別學生因努力程度不夠而沒有達到預期的教學目標;
C層:某些學生基本掌握了超級鏈接的概念和創建常用超級鏈接的方法,甚至有部分學生在老師的指導和同學的幫助下能夠創建出難度更大的超級鏈接。
在進行超級鏈接教學中采用分層教學實踐取得初步效果后,接著講授表格、層、行為和CSS樣式等內容時繼續采用分層教學法。實踐證明,教學效果當不錯?!毒W頁設計》這一模塊課程結束時,大部分A層學生在這一模塊的綜合成績達到80分以上,B層學生的綜合成績達到70分以上,而C層學生的綜合成績也基本上在及格以上。甚至個別B層和C層學生的成績達到80分以上。
綜上所述,在《網頁設計》模塊教學中采用分層教學方法,將有效的克服教學內容與學生興趣愛好之間的矛盾,克服學生掌握知識水平兩極分化的矛盾。真正做到了以學生為出發點,充分發揮學生的積極性和主動性,適應學生對不同內容的學習需要,有效地解決了班級授課制的固有缺陷和因材施教之間的矛盾,《網頁設計》模塊教學注入了新的活力。但是,分層教學的設計、分組、教學內容的分層、教學方法的分層等方面仍存在著不少的問題還有不少值得深入探索的地方。我將在以后的教學中不斷努力,使分層教學活動的方法得以不斷的改進和完善。
參考文獻:
1、鐘和軍 《基于信息技術環境下分層導學模式的構建與實踐》
2、付裕東 《落實因材施教原則的最佳途徑——分層次教學》
3、王濤斌 《分層教學理論在信息技術教學中的運用》
4、張春興 《教育心理學》
5、羅耀軍,戴小波,張培軍 《計算機網頁制作教程》
第四篇:在網頁中插入flash的標準代碼
使用可實現Flash動畫的插入,但也可以用標記插入Flash動畫,但后者有些復雜,若要和前者一樣實現動畫的插入,必須要加:才能實現flash動畫的插入。我想問下,前者和后者的功能應該差不多是吧,為什么后者那么麻煩,要加這么多的參數。還有就是object標簽里面去掉data=“1.swf”,運行后好像正常的。加不加都沒區別嗎?謝謝啦!!
兩個標簽都可以實現在網頁中插入視頻或flash,object是微軟的ie瀏覽器支持的的,當然微軟也認嵌入標簽embed.N的瀏覽器支持embed但忽略object。
據說object是發展方向.將來embed要淘汰。現在一般object內套embed,是為了在各種瀏覽器里都取得最佳瀏覽效果.如此而已,單用其一一般都可以。
我舉一段html插入flash動畫的比較標準的代碼: