来源：xuexin.com 薛欣
m' T; o# C2 h" j接下来我们要为网页添加Flash 视频内容，如今的photoshop 和Flash 已成为一家，因此兼容性大大提高。Flash 已经可以直接导入photoshop PSD 的分层文件了，这对长期受不同厂商兼容性困扰的设计师来说无疑是个好消息。
& }; D4 |# K' J: C) z" O4 ~4 W# t0 `0 W+ f+ [
1. 将我们制作的photoshop 网页的PSD 源文件另存一个版本，然后将原来Flash 的占位图片的区域裁切出来，并把多余的图层删除，如图1-5-1 所示。
7 d5 j6 T7 t& m3 M7 D6 d: X1 o: B
" n/ y* R( D" `, \
9 x1 S$ N( ~8 I, U
图1-5-1
a7 }2 b3 v u) e) L& D2. 直接导入这个另存后的新PSD 文件，我们可以在导入对话框中看到，不但可以确定需要导入哪些图层，还可以使文字可编辑，并将Flash 舞台设为该PSD 在photoshop 中的画布大小等等，有非常多的选项值得我们去探索，如图1-5-2 所示。
( s! L( ?. e& v9 o4 v
/ P4 ~: F! N: _+ H' Z
- o$ ^/ e2 K" r" ~6 h& W! z$ B2 U V/ x* m" d9 V6 D
图1-5-2
4 N K! i$ O9 l' ?+ ?
& h! |: u- N1 j6 O# S- `
: b" a* H" L4 ~$ d( f. n3. 这是在Flash 中打开后的photoshop 分层文件，你可以看到，原来的图层直接变成了相应的Flash 层，我们可以直接基于这些图层来制作动画，是不是非常方便？如图1-5-3 所示。
( n; l2 E3 t1 g$ S2 Y+ \+ _0 U2 ]0 S
' Z3 v1 _2 z' q
+ t9 W( }2 v, l6 p8 [' ~5 @
& B) P3 x+ {$ a( T
图1-5-3
/ d5 x& Q1 G2 n0 f, i. G$ L0 f% D: \5 ]: m8 `+ |0 ~: s7 F( R3 V3 e
4. 在接下来就是视频的导入，Flash 提供了专门的视频导入命令，并优化了整个的视频导入流程，如图1-5-4 所示为视频导入的基本流程。通常情况下都是“傻瓜式操作”，选择文件后一直单击下一步即可，分别是选择视频、部署、编码和选择皮肤，因为在本教程中这不是重点，因此不再赘述。
( u9 x; X. r! M: r% w8 L# C# C; g2 Q, u( }! w9 R
7 }0 F: h, V9 A4 @
9 Q/ M9 Q2 e/ E7 W" w0 U- p
图1-5-4
$ o: d+ n8 o# y2 m
0 K9 M+ T$ {, w- S, V T2 t+ r5. 选择后的播放器皮肤，也就是视频播放器的外观是可以在组件检查器中重新更换的，包括颜色和外形等，如图1-5-5 所示。
* }" y y. S R3 y( V( k1 O
0 a# f9 A" C% J5 Z9 a2 m" x
, R) q+ f# W2 f8 s4 |2 q3 j, _/ J/ x! Z/ L4 g8 w
图1-5-5
, f- `' g* g- ?) D
" x+ k, g* ~4 [0 F0 N4 s6. 视频文件和Flash 的播放互不影响，可以自然、无缝的整合到一起。为了说明这一点，这里为“石桥剪影”这四个字制作了一个非常简单的动画，如图1-5-6 所示。
- B7 H! w9 i( q6 Q" C: Y0 t( I N, b3 H
|% C3 i& k4 d# ^' D
7 K" D& b' M8 A* H& @
* t6 w) y6 I" u5 M( @5 [图1-5-6
( u$ v& ^" c; c9 Z$ P
" i, c" V: O/ V- h( J1 m7. 打开Dreamweaver 并添加一个表格，设置表格行数为“2”，列数为“2”，表格宽度为百分比形式，也就是说可以自行伸缩。边框粗细、单元格边距和单元格间距均为“0”，如图1-5-7 所示。
3 \ D8 G6 F* ? M" J) ~9 V
/ q8 W% W1 i2 }0 B3 x
* h% J; k3 `3 D( `
4 @- A. t: v' ~# S2 ^, Y% g! e! a, R: D
图1-5-7
4 L* e" m- q6 \9 r! `8 t
3 R6 Y% G# S3 X/ u$ `. O: b9 d3 f8. 把文字和Flash 分别插入到刚才表格的两行中，可以看到，当前的网页还有点儿乱，图片被撑开，文字没有样式化，视频的位置也不对，如图1-5-8 所示，因此我们还需要在下一讲中设置。
$ Y* w0 O- u+ w; _; D4 R
, L7 e1 q# n/ Z W; N2 g \8 P
O( h5 u2 f/ F5 T" R5 f
Y0 s6 h1 G7 P6 [1 q, x9 C
photoshop制作网站首页(1):首页主体制作
7 L# J( Q1 I; x( }, @1 ?% C4 A
/ H- X* i6 @& Y1 Yphotoshop制作网站首页(2):首页内容的制作* l. S1 i9 c8 d' r1 y. e, e$ v) L
4 B6 q4 A2 D" r
# F* Z' V9 C; b% Q/ ~6 c3 G0 Pphotoshop制作网站首页(3):切割网页图片" ~' n$ p! }- C. g' H
0 S) e; W7 h0 d( P4 O2 e
photoshop制作网站首页(4):制作导航菜单
/ a/ A$ \$ P& U; G( F
0 {2 w% e& b4 b" A) Ophotoshop制作网站首页(5):添加Flash视频
! ?/ L7 g1 ^! K4 y# ^5 E- f9 k0 Y \* j$ q3 z5 X l
photoshop制作网站首页(6):控制版面与插入Spry对象
收藏到QQ书签