您現在的位置是:電腦技術吧?>? 編程技術 ??>??怎樣制作幻燈片的效果,幻燈片制作??>??正文詳情

怎樣制作幻燈片的效果,幻燈片制作

閆嵐翠2019-11-18 04:30:34 人圍觀
簡介ppt制作動畫效果作為一個不懂代碼的業余網頁制作人,他經常羨慕一些由專業程序員在瀏覽器中編譯的酷多媒體作品。唉,學習這個程序可不是一天的工作。它需要良好的邏輯思維能力

作為一位不懂代碼的業余網頁制作愛好者,常常羨慕專業程序人員在瀏覽器中編制出的效果超酷的一些多媒體作品。

唉,無奈程序那東東,酶澀南學,非一日之功,需要良好的邏輯思維能力和足夠的磨練方可成就。

是不是不會程序,就永遠就不能實現自己的創意和想法了呢?非也!現在我們要制作的就是在網頁中的一個幻燈片播放器。

當用戶按下控制盤上的PLAY鍵時圖片將作幻燈片似的連續循環播放。

按下PAUSE時,播放中的圖片就停留在當前位置。

按下RESTART鍵時,幻燈片又從頭播放。

而這一切,僅僅采用Dreamweaver3的內嵌的層(Layer)、時間鏈(Timeline)和行為(Behavior)技術,就可實現,所有的JavaScript代碼都會在Dreamweaver中自動生成。

這里不是鼓勵大家不要接觸程序代碼,相反,若讀者掌握了一些編程技術的基礎,會在網頁制作中起到相當重要的作用。

實際上,這已是當今專業WEB頁面制作人員的一項基本素質要求。

  下面分步驟對這個播放器的制作加以說明。

  步驟一:圖形元素的制作和準備。

  制作幻燈片所用的圖片并將之放入Dreamweaver的層中。

我們準備在每個幻燈片中實現7幅圖片的交替變換,因此我們需要制作7幅內容不同的圖片。

注意圖片要在Photoshop中進行優化壓縮,并調整成相同的尺寸。

建立一個層,插入初始圖片,該圖片就是幻燈片默認得頭一張圖片。

將層命名為Layer_main,并把該層的Index值設為1。

  步驟二:制作播放器的外觀和四個控制按鈕。

  利用Photoshop制作一個金屬效果的播放器外觀。

(具體效果就看你的喜好啦,也許你可從Winamp的skin中受點啟發)。

作最佳優化后,輸出一個透明的GIF圖片。

為了讓鼠標移上后按鈕有些變化,你不得不每個按鈕制作2張圖片(共6個),兩個按鈕只需有顏色上的差異即可。

先建三個層,調整好位置,并插入三個播放鍵的各自的二張翻滾圖片(Rollover Image)(Insert-Rollover Image)。

通過調節層的Index-Z的值,確保播放器所在的層在Layer_main層的上面,在按鈕所在層的下面。

排版好的各層如圖1所示。

  步驟三:創建幻燈片播放時間鏈。

  按Ctrl F9鍵打開時間鏈浮動工具面板。

選取其中幻燈片所在層(Layer_main)中的初始圖片(確保選取的是圖像,而不是層),用鼠標拖至時間鏈浮動工具面板,在時間鏈起始處釋放鼠標。

設定幀速率為Fps為5,并勾選Loop框。

選擇時間鏈中的其中一幀,右擊鼠標,選擇Add Keyframe(添加關鍵幀),選擇另一幅幻燈片圖片,以更換層(Layer_main)中的初始圖片。

重復這個操作,將剩下的5幅圖片全部加到該時間鏈的不同關鍵幀上。

最后適當調節各關鍵幀之間的距離。

并將該時間鏈命名為TimeLine_main。

建立好的時間鏈如圖2所示。

  步驟四:為按鈕和其它添加行為(Behavior)。

  點擊選擇PLAY按鈕所在的圖片,在行為浮動工具面板中,從 (添加)動作下拉列表中選擇Timeline-Play Timeline(播放時間鏈),并在彈出的對話框中選擇時間鏈Timeline_main。

單擊OK。

默認方式下,就會為切換動作設置一個onClick事件。

點擊選擇PAUSE所在的圖片。

在行為浮動工具面板中,從 (添加)動作下拉列表中選擇Timeline---Stop Timeline(停止播放時間鏈),并在彈出的對話框中選擇時間鏈Timeline_main。

單擊OK。

默認方式下,就會為切換動作設置一個onClick事件。

  點擊選擇REPLAY所在的圖片。

在行為浮動工具面板中,從 (添加)動作下拉列表中選擇Timeline---Go to Timeline Frame(轉向放時間鏈幀),并在彈出的對話框中選擇時間鏈Timeline_main,在Frame文本框中輸入1。

單擊OK。

默認方式下,就會為切換動作設置一個onClick事件。

再添加下一個動作。

從 (添加)動作下拉列表中選擇Timeline---Play Timeline(播放時間鏈),并在彈出的對話框中選擇時間鏈Timeline_main。

單擊OK。

默認方式下,就會為切換動作設置一個onClick事件。

REPLAY的圖片添加好的行為如圖3所示。

  本例中做好的播放器,可在下列地址瀏覽:http://webart.myrice.com/sample/index.htm。

進一步,為了讓播放器更加生動,你可以同時給幻燈片的播放加上聲音。

  若要把這個播放器放到網上,同時圖片總容量超過150K,可以給頁面作一個Loading(加載)層,待全部內容下載完畢后,才顯示出來。

以免由于圖片未下載完而產生播放不暢的感覺。

關于Loading層的制作方法,在很多地方有介紹,這里就不再詳述了。

  把這個例子變通一下,我們可以作一個相冊。

你可以把你的家庭或女朋友的相片加在幻燈片所在的時間鏈上,并且加上Last(上一張)、 Next(下一張)等按鈕,便于瀏覽者逐張欣賞。

若覺得相片太小不能看清楚細節,你還可以加一個Zoom In(放大)按鈕,鏈接到一個有單張放大相片的新窗口頁面。

最后把它放到網上,相信一定會給你的家人或女朋友帶去一份驚喜。

版權聲明:本文由 閆嵐翠 整理編輯。

原標題:如果制作幻燈片特效,怎樣制作幻燈片的動畫效果

轉載注明出處:http://www.dn9ww09s.icu/program/13389.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • hkcmd是什么進程,wuauclt是什么進程

    hkcmd是什么進程,wuauclt是什么進程 相關圖片電腦結束進程快捷鍵是什么最近,許多小型合作伙伴報告說,他們在打開任務管理器后發現了一個名為hkcmd.exe的進程,但他們不知道hkcmd.exe是什么進程。可以關閉hkcmd.exe電腦強制結束進...

  • 怎么從事動畫,高級動畫

    怎么從事動畫,高級動畫 相關圖片C4D 復雜模型動畫目前,CSS3已經得到了廣泛的應用,其中一個重要的成員就是CSS3動畫。而且,隨著CSS動畫的逐步深入和普及,越來越復雜和細膩的動畫場景也層出不窮。比如,上個月J...

  • win10如何深度清理c盤,win10刪除c盤無用文件

    win10如何深度清理c盤,win10刪除c盤無用文件 相關圖片c盤local可以刪嗎我相信許多使用win7的小伙伴在打開C磁盤后發現了一個名為perflags的額外文件夾。那么perflags是什么樣的文件夾呢?性能可以刪除嗎?接下來,跟隨超人win10搜不到wifi列表...

  • 下劃線怎么用鍵盤打出來,如何用鍵盤輸入下劃線

    下劃線怎么用鍵盤打出來,如何用鍵盤輸入下劃線 相關圖片下橫線用鍵盤怎么打一定有很多朋友在使用WPS的過程中,遇到過需要下劃線的地方。那么我們如何使用鍵盤來輸入WPS下劃線呢?如果不顯示下劃線,我們該怎么辦?讓我們跟隨超人軟件...

  • 圖形元件,怎樣創建圖形元件

    圖形元件,怎樣創建圖形元件 相關圖片圖形元件的作用同步或不同步嵌套在圖形組件中的動畫與主時間線。在面板中選擇“同步”選項。應用修補動畫時,同步可見。選擇關鍵幀以在屬性面板中找到同步選項,這意味著嵌套...

  • 完美解碼播放器手機版,播放器播放器

    完美解碼播放器手機版,播放器播放器 相關圖片完美解碼播放設置完美解碼播放器的一個特點是其強大的解碼能力和自己定制的解碼模式。那么,如何設置完美解碼播放器的解碼模式呢?一。解碼方案設置步驟:1。退出完美解碼播放...

  • 設計師的基本要求,平面設計的基本原則

    設計師的基本要求,平面設計的基本原則 相關圖片可持續發展原則對設計師的要求基于Joshua Porter總結的優秀UI設計原則,tiah重新編排并添加了圖形解釋,以便于理解kuyou清晰的界面是UI設計的第一步。要讓用戶喜歡你的用戶界室內設計的...

  • win7update需要更新嗎,window7配置update失敗

    win7update需要更新嗎,window7配置update失敗 相關圖片win7還原更改怎么跳過當我們使用win7時,電腦右下角經常會有關于windows更新的提示,強迫癥很煩人。windows更新意味著什么?我能把它關掉嗎?在Windows 7中win7配置更新100%不動...

  • word進去安全模式,word進入安全模式怎么辦

    word進去安全模式,word進入安全模式怎么辦 相關圖片word2003安全模式近日,不少word用戶和朋友反映,打開word后,系統出現word問題,需要關閉。對于給您帶來的不便,我們深表歉意。暗示。那么,文字安全模式有什么影響呢?文字安word文...

  • c證有什么用,怎么用c

    c證有什么用,怎么用c 相關圖片2cUse. Netversion 1 | 2 | 3 | 3.5 to create console applications in any version ofc ...

熱評文章

  • 怎么切換輸入法,怎么設置輸入法

    怎么切換輸入法,怎么設置輸入法 相關圖片切換輸入法相信不會切換輸入法的用戶不在少數。如果輸入法不能關閉怎么辦?怎么解決?在這種情況下,可以轉到控制面板-區域和語言選項-語言-清除信息-以設置默認輸入語言搜狗輸...

  • displayflex,display flex什么意思

    displayflex,display flex什么意思 相關圖片display在過去的兩天里,我一直在做手機項目,并使用CSS3的新特性。還不是所有瀏覽器都支持它,所以請使用前綴。請參見以下:HTML代碼:div clas s=s-indcssdisplayflex...

  • 2003word字數統計在哪,doc文檔字數統計在哪里

    2003word字數統計在哪,doc文檔字數統計在哪里 相關圖片word技術在哪里當我們用word寫文章時,單詞計數的功能特別實用。當我們遇到需要字數的字操作時,這個小小的字功能可以省去我們很多的心血。但很多人不知道count這個詞在哪里,電腦...

  • j,,j怎么

    j,,j怎么 相關圖片k?j病毒名稱(中文):病毒別名:威脅等級:★★☆病毒類型:網頁病毒長度:影響系統:win9xwinnt病毒行為:網頁木馬假冒國外某知名網銀網頁,竊取用戶atmcar新j...

  • eclipse字體大小設置 主題設置,eclipse字體大小設置 快捷鍵

    eclipse字體大小設置 主題設置,eclipse字體大小設置 快捷鍵 相關圖片pr字體大小怎么改不了Eclipse是一個開源的、基于Java的可擴展開發平臺,具有一組標準的插件,包括Java開發工具。許多用戶在使用eclipse的過程中需要設置字體大小,但是他微博的蘋果版...

  • word繪制斜線表頭,繪制斜線表頭

    word繪制斜線表頭,繪制斜線表頭 相關圖片word繪制表格如何繪制斜線標題是許多word用戶頭疼的問題。今天,超人軟件將介紹如何在word2003和word2007中繪制word中的斜線標題。感興趣的合作伙伴不應該word斜線表頭怎么打字...

  • 開發者證書,開發者證書怎么獲取

    開發者證書,開發者證書怎么獲取 相關圖片免費ios開發者證書付款成功后,您將收到一封來自Apple Developer suport的確認電子郵件,如下圖所示。電子郵件中有一個登錄按鈕,單擊后可以進入Apple Deve蘋果開發者證書類型...

  • 懷舊服多玩魔盒怎么徹底刪除,wow大腳插件設置教程

    懷舊服多玩魔盒怎么徹底刪除,wow大腳插件設置教程 相關圖片魔獸世界多玩魔盒教程現在市場上有很多游戲盒,一個玩家使用多個游戲盒后發現不適合自己。那么如何徹底刪除多場魔盒呢?現在,超人軟件編輯就來介紹一下如何徹底刪除多場魔盒...

  • 網頁設計,外國優秀網頁設計

    網頁設計,外國優秀網頁設計 相關圖片優秀網頁設計官網“火星救援”仍處于起步階段。《星球大戰7》即將上映。事實上,即使沒有這些電影,人們對宇宙的熱情也從未降低。自古以來,人類喜歡抬頭仰望天空,這也解釋了...

  • 玫瑰小鎮魅力圖標有什么用,qq魔法卡片手機版

    玫瑰小鎮魅力圖標有什么用,qq魔法卡片手機版 相關圖片qq輸入法怎么導入對于很多QQ用戶來說,點亮所有的圖標是一件非常有趣的事情。玫瑰城是一個圖標,許多人沒有點燃。那么,玫瑰城的標志性建筑如何才能被點亮呢?如果玫瑰城進不來...

關注微信

变脸官网查询