Photoshop制作網(wǎng)站首頁(5):添加Flash視頻

Photoshop制作網(wǎng)站首頁(5):添加Flash視頻來源：xuexin.com 薛欣
接下來我們要為網(wǎng)頁添加Flash 視頻內(nèi)容，如今的Photoshop 和Flash 已成為一家，因此兼容性大大提高。Flash 已經(jīng)可以直接導(dǎo)入Photoshop PSD 的分層文件了，這對(duì)長(zhǎng)期受不同廠商兼容性困擾的設(shè)計(jì)師來說無疑是個(gè)好消息。

1. 將我們制作的Photoshop 網(wǎng)頁的PSD 源文件另存一個(gè)版本，然后將原來Flash 的占位圖片的區(qū)域裁切出來，并把多余的圖層刪除，如圖1-5-1 所示。


圖1-5-1
2. 直接導(dǎo)入這個(gè)另存后的新PSD 文件，我們可以在導(dǎo)入對(duì)話框中看到，不但可以確定需要導(dǎo)入哪些圖層，還可以使文字可編輯，并將Flash 舞臺(tái)設(shè)為該P(yáng)SD 在Photoshop 中的畫布大小等等，有非常多的選項(xiàng)值得我們?nèi)ヌ剿?，如圖1-5-2 所示。



圖1-5-2


3. 這是在Flash 中打開后的Photoshop 分層文件，你可以看到，原來的圖層直接變成了相應(yīng)的Flash 層，我們可以直接基于這些圖層來制作動(dòng)畫，是不是非常方便？如圖1-5-3 所示。



圖1-5-3

4. 在接下來就是視頻的導(dǎo)入，F(xiàn)lash 提供了專門的視頻導(dǎo)入命令，并優(yōu)化了整個(gè)的視頻導(dǎo)入流程，如圖1-5-4 所示為視頻導(dǎo)入的基本流程。通常情況下都是“傻瓜式操作”，選擇文件后一直單擊下一步即可，分別是選擇視頻、部署、編碼和選擇皮膚，因?yàn)樵诒窘坛讨羞@不是重點(diǎn)，因此不再贅述。



圖1-5-4

5. 選擇后的播放器皮膚，也就是視頻播放器的外觀是可以在組件檢查器中重新更換的，包括顏色和外形等，如圖1-5-5 所示。



圖1-5-5

6. 視頻文件和Flash 的播放互不影響，可以自然、無縫的整合到一起。為了說明這一點(diǎn)，這里為“石橋剪影”這四個(gè)字制作了一個(gè)非常簡(jiǎn)單的動(dòng)畫，如圖1-5-6 所示。



圖1-5-6

7. 打開Dreamweaver 并添加一個(gè)表格，設(shè)置表格行數(shù)為“2”，列數(shù)為“2”，表格寬度為百分比形式，也就是說可以自行伸縮。邊框粗細(xì)、單元格邊距和單元格間距均為“0”，如圖1-5-7 所示。



圖1-5-7

8. 把文字和Flash 分別插入到剛才表格的兩行中，可以看到，當(dāng)前的網(wǎng)頁還有點(diǎn)兒亂，圖片被撐開，文字沒有樣式化，視頻的位置也不對(duì)，如圖1-5-8 所示，因此我們還需要在下一講中設(shè)置。

搜索更多相關(guān)主題的帖子:Flash Photoshop 視頻 首頁 網(wǎng)頁