Photoshop制作網(wǎng)站首頁(5):添加Flash視頻
來源:不詳
作者:佚名
學(xué)習(xí):883人次
Photoshop制作網(wǎng)站首頁(5):添加Flash視頻來源:xuexin.com 薛欣
接下來我們要為網(wǎng)頁添加Flash 視頻內(nèi)容,如今的Photoshop 和Flash 已成為一家,因此兼容性大大提高。Flash 已經(jīng)可以直接導(dǎo)入Photoshop PSD 的分層文件了,這對長期受不同廠商兼容性困擾的設(shè)計師來說無疑是個好消息。
1. 將我們制作的Photoshop 網(wǎng)頁的PSD 源文件另存一個版本,然后將原來Flash 的占位圖片的區(qū)域裁切出來,并把多余的圖層刪除,如圖1-5-1 所示。
圖1-5-1
2. 直接導(dǎo)入這個另存后的新PSD 文件,我們可以在導(dǎo)入對話框中看到,不但可以確定需要導(dǎo)入哪些圖層,還可以使文字可編輯,并將Flash 舞臺設(shè)為該PSD 在Photoshop 中的畫布大小等等,有非常多的選項值得我們?nèi)ヌ剿,如圖1-5-2 所示。
圖1-5-2
3. 這是在Flash 中打開后的Photoshop 分層文件,你可以看到,原來的圖層直接變成了相應(yīng)的Flash 層,我們可以直接基于這些圖層來制作動畫,是不是非常方便?如圖1-5-3 所示。
圖1-5-3
4. 在接下來就是視頻的導(dǎo)入,F(xiàn)lash 提供了專門的視頻導(dǎo)入命令,并優(yōu)化了整個的視頻導(dǎo)入流程,如圖1-5-4 所示為視頻導(dǎo)入的基本流程。通常情況下都是“傻瓜式操作”,選擇文件后一直單擊下一步即可,分別是選擇視頻、部署、編碼和選擇皮膚,因為在本教程中這不是重點,因此不再贅述。
圖1-5-4
5. 選擇后的播放器皮膚,也就是視頻播放器的外觀是可以在組件檢查器中重新更換的,包括顏色和外形等,如圖1-5-5 所示。
圖1-5-5
6. 視頻文件和Flash 的播放互不影響,可以自然、無縫的整合到一起。為了說明這一點,這里為“石橋剪影”這四個字制作了一個非常簡單的動畫,如圖1-5-6 所示。
圖1-5-6
7. 打開Dreamweaver 并添加一個表格,設(shè)置表格行數(shù)為“2”,列數(shù)為“2”,表格寬度為百分比形式,也就是說可以自行伸縮。邊框粗細(xì)、單元格邊距和單元格間距均為“0”,如圖1-5-7 所示。
圖1-5-7
8. 把文字和Flash 分別插入到剛才表格的兩行中,可以看到,當(dāng)前的網(wǎng)頁還有點兒亂,圖片被撐開,文字沒有樣式化,視頻的位置也不對,如圖1-5-8 所示,因此我們還需要在下一講中設(shè)置。
接下來我們要為網(wǎng)頁添加Flash 視頻內(nèi)容,如今的Photoshop 和Flash 已成為一家,因此兼容性大大提高。Flash 已經(jīng)可以直接導(dǎo)入Photoshop PSD 的分層文件了,這對長期受不同廠商兼容性困擾的設(shè)計師來說無疑是個好消息。
1. 將我們制作的Photoshop 網(wǎng)頁的PSD 源文件另存一個版本,然后將原來Flash 的占位圖片的區(qū)域裁切出來,并把多余的圖層刪除,如圖1-5-1 所示。
圖1-5-1
2. 直接導(dǎo)入這個另存后的新PSD 文件,我們可以在導(dǎo)入對話框中看到,不但可以確定需要導(dǎo)入哪些圖層,還可以使文字可編輯,并將Flash 舞臺設(shè)為該PSD 在Photoshop 中的畫布大小等等,有非常多的選項值得我們?nèi)ヌ剿,如圖1-5-2 所示。
圖1-5-2
3. 這是在Flash 中打開后的Photoshop 分層文件,你可以看到,原來的圖層直接變成了相應(yīng)的Flash 層,我們可以直接基于這些圖層來制作動畫,是不是非常方便?如圖1-5-3 所示。
圖1-5-3
4. 在接下來就是視頻的導(dǎo)入,F(xiàn)lash 提供了專門的視頻導(dǎo)入命令,并優(yōu)化了整個的視頻導(dǎo)入流程,如圖1-5-4 所示為視頻導(dǎo)入的基本流程。通常情況下都是“傻瓜式操作”,選擇文件后一直單擊下一步即可,分別是選擇視頻、部署、編碼和選擇皮膚,因為在本教程中這不是重點,因此不再贅述。
圖1-5-4
5. 選擇后的播放器皮膚,也就是視頻播放器的外觀是可以在組件檢查器中重新更換的,包括顏色和外形等,如圖1-5-5 所示。
圖1-5-5
6. 視頻文件和Flash 的播放互不影響,可以自然、無縫的整合到一起。為了說明這一點,這里為“石橋剪影”這四個字制作了一個非常簡單的動畫,如圖1-5-6 所示。
圖1-5-6
7. 打開Dreamweaver 并添加一個表格,設(shè)置表格行數(shù)為“2”,列數(shù)為“2”,表格寬度為百分比形式,也就是說可以自行伸縮。邊框粗細(xì)、單元格邊距和單元格間距均為“0”,如圖1-5-7 所示。
圖1-5-7
8. 把文字和Flash 分別插入到剛才表格的兩行中,可以看到,當(dāng)前的網(wǎng)頁還有點兒亂,圖片被撐開,文字沒有樣式化,視頻的位置也不對,如圖1-5-8 所示,因此我們還需要在下一講中設(shè)置。
學(xué)習(xí) · 提示
相關(guān)教程
- ps設(shè)計電影網(wǎng)站實例
- ps設(shè)計網(wǎng)頁視頻游戲界面
- PS創(chuàng)建一款簡潔大方的歐美商務(wù)網(wǎng)站首頁
- 使用ps打造一個企業(yè)網(wǎng)站首頁設(shè)計制作全
- Photoshop制作筆記本電子商務(wù)網(wǎng)站首頁模板
- Photoshop設(shè)計藍(lán)色風(fēng)格網(wǎng)站首頁模板
- Photoshop美工教程:游戲網(wǎng)站首頁布局
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- Photoshop繪制高雅清新的網(wǎng)站首頁模板
- Photoshop設(shè)計視頻網(wǎng)站導(dǎo)航模板
推薦教程
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁模板
- Photoshop CS5制作放射狀光線網(wǎng)頁廣告板
- PhotoShop設(shè)計制作懷舊風(fēng)格網(wǎng)頁的詳細(xì)教程
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁設(shè)計:雜志風(fēng)格網(wǎng)站界面
- PS教程:繪制清新的色彩生動的網(wǎng)頁布局
- Photoshop繪制好看的老式wordpress主題
- photoshop網(wǎng)頁應(yīng)用實例:制作蘋果導(dǎo)航欄
- ps設(shè)計制作居家風(fēng)格美食Blog網(wǎng)頁特效
- PS教程:制作非常不錯的wordpress博客網(wǎng)站模板
關(guān)注大神微博加入>>
網(wǎng)友求助,請回答!