找回密码
 注册

QQ登录

只需一步,快速开始

Flash鼠绘教程:绘制金属立体相框效果

[复制链接]
发表于 2009-3-24 11:55:41 | 显示全部楼层 |阅读模式
<STRONG><FONT size=5>Flash鼠绘教程:绘制金属立体相框效果</FONT></STRONG>
0 e! E7 L1 C: z7 u/ k$ L6 {; T$ F<TABLE height=101 width="98%" align=center border=0>
% w' y5 n8 }9 m/ u( `  C( c<TBODY>
5 U. r( t/ r7 z4 E0 r<TR>9 I6 G7 Q+ F* k; d4 n
<TD height=34>
4 ~. U, g) r. \# ?<P align=center>浏览字号:【<A href="javascript:doZoom(16)"><FONT color=#0000ff>大</FONT></A> <A href="javascript:doZoom(14)"><FONT color=#0000ff>中</FONT></A> <A href="javascript:doZoom(12)"><FONT color=#0000ff>小</FONT></A>】 【<A href="javascript:window.print()"><FONT color=#0000ff>打印</FONT></A>】 【<A href="javascript:window.close()"><FONT color=#0000ff>关闭窗口</FONT></A>】</P>" j( I  q3 d, n' ~7 n5 i
<TR bgColor=#ffffff>6 k" e4 N1 j0 D6 C
<TD style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px">9 c: p1 o, B6 u6 S2 B9 b
<DIV id=zoom style="FONT-SIZE: 14px; LINE-HEIGHT: 150%"><!--信息内容-->9 _1 p( U; r9 [, [& C
<CENTER>
1 l2 `* A6 T/ _) W<SCRIPT type=text/javascript><!--
6 [  D" c* p4 X, s* y; g1 ^1 Lgoogle_ad_client = "pub-3089989272988309";
# y5 m1 t8 s% `/* 336x280, 创建于 08-10-9 */: K0 \: a  A$ Q7 N2 ~* X  f, g
google_ad_slot = "7545507005";
' _0 j5 [+ h; Pgoogle_ad_width = 336;
. H) L  {+ N7 h$ }1 agoogle_ad_height = 280;
& e6 T1 \, V8 {" ]" }: l//-->
% E- r% m+ S! V5 Y& t</SCRIPT>4 X& v* x- K; M  a

- `4 `8 \/ i* P- P. C<SCRIPT src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type=text/javascript>7 g- z# I# l/ x! e' S  x8 a
</SCRIPT>
: ^' S2 e" A- m$ i  k% _% ~+ v! m9 f3 q6 @( c
<SCRIPT>window.google_render_ad();</SCRIPT>
9 s  h- z" m- Y  t$ g* F<INS style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; VISIBILITY: visible; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; WIDTH: 336px; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; POSITION: relative; HEIGHT: 280px"><INS style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; DISPLAY: block; PADDING-LEFT: 0px; VISIBILITY: visible; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; WIDTH: 336px; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; POSITION: relative; HEIGHT: 280px"><IFRAME id=google_ads_frame2 style="LEFT: 0px; POSITION: absolute; TOP: 0px" name=google_ads_frame marginWidth=0 marginHeight=0 src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3089989272988309&amp;dt=1237866821802&amp;lmt=1237866821&amp;prev_slotnames=8992349138&amp;output=html&amp;slotname=7545507005&amp;correlator=1237866820470&amp;url=http%3A%2F%2Fwww.zgxiazai.cn%2Finfo.php%3Fxid%3D9%26id%3Dsheji%2F2009%2F316%2F093161504018JC02E115J43EKF1C2A049E7G2FAF8GJ5I35GH733EHE.html&amp;ref=http%3A%2F%2Fwww.zgxiazai.cn%2Findex.html&amp;frm=0&amp;ga_vid=422317935.1237866821&amp;ga_sid=1237866821&amp;ga_hid=1404567133&amp;flash=10.0.22.87&amp;u_h=768&amp;u_w=1024&amp;u_ah=738&amp;u_aw=1024&amp;u_cd=32&amp;u_tz=480&amp;u_java=true&amp;dtd=40&amp;w=336&amp;h=280&amp;xpc=spbmGqz0xt&amp;p=http%3A//www.zgxiazai.cn" frameBorder=0 width=336 scrolling=no height=280 allowTransparency></IFRAME></INS></INS>
- @# g6 U2 F& B1 z- h% P<CENTER>&nbsp;</CENTER>
6 q, V' ?7 F7 L<DIV id=context_main>% ]6 m1 g/ a) g
<DIV>&nbsp;</DIV>
! u" G% G5 }& x' C* P1 ]<DIV><FONT size=2>  先看下效果:</FONT></DIV>
7 u% u9 u/ z. ], _+ _3 |6 Y8 ?<P style="TEXT-ALIGN: center"><FONT size=2><EMBED style="WIDTH: 487px; HEIGHT: 394px" src=http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_xiaoguo129.swf width=487 height=394 type=application/x-shockwave-flash></FONT></P>( h6 u& ~' q. v: i
<P><FONT size=2>  现在开始画吧:</FONT></P>
( e! |. t* V/ T8 h0 C7 w( j* w<P><FONT size=2>  一、准备工作:</FONT></P>
4 e0 B$ o4 L/ ~$ {% t<P><FONT size=2>  1、新建一图形元件,插入6个图层(共有7层),从上而下分别命名为:花、闪光 、外边花纹、框架、照片、框架底、背景</FONT></P>
4 ^- w' F' A  o9 x& A# R6 z<P><FONT size=2>  2、点菜单中的"视图"--标尺,分别在舞台上刻度为0的位置拉出经、纬辅助线,两线的交叉点就是相框的中心点。如下图:</FONT></P>
. A6 T' q- q( _2 C& F: j. g<P style="TEXT-ALIGN: center"><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 style="WIDTH: 521px; HEIGHT: 293px" alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image001.jpg" border=0><BR><STRONG>图1  </STRONG></FONT></P>
* j. Z6 f* R8 X/ X8 o/ G, o, s<P><FONT size=2>  3、再拉出两条相框的左边和上边的边框线(这是为了好控制框的大小),如下图:</FONT></P>; O0 o- ]$ Z3 t* r! N7 Q/ |% e
<DIV style="TEXT-ALIGN: center"><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image002.jpg" border=0><BR><STRONG>图2</STRONG> </FONT></DIV>
- R& E# C, C7 f5 `<DIV style="TEXT-ALIGN: center"><FONT size=2>  </FONT></DIV>( C& e5 h8 Q- q" ?2 {
<DIV style="TEXT-ALIGN: center" align=left><FONT size=2>  </FONT></DIV>" x8 c, N9 y( y6 @+ g" ~7 [
<DIV><FONT size=2>  二、画相框的框架:  </FONT></DIV>+ ?" A# \' {% k+ ]) a8 R
<DIV><FONT size=2>  </FONT></DIV>" ?) h0 o; v8 N0 L1 L
<DIV><FONT size=2>  1、选择椭圆工具,笔触颜色黑,无填充色,点一下"框架"层的第一帧,将光标对准舞台上的"中心点"(要对得很准哦),同时按住Alt键,向右下方向拖动鼠标,画出椭圆,注意椭圆的上边和左边靠近那两条辅助线。用同样的方法在其内侧再画两个小一点的椭圆(这是为了填充不同的颜色体现框架的立体感),再在椭圆的上下各画一条斜线,以隔开颜色的填充。如下图:</FONT></DIV>/ _4 \  v! i- }7 e( A# [' G9 b' s
<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image003.jpg" border=0><BR><STRONG>图3</STRONG></FONT></P><FONT size=2>  2、给框架填充颜色:我想相框的颜色不宜太鲜艳夺目吧,所以用了较浅的土黄色填充向光的一面,如下图:</FONT> * F; m9 Z' G& {% m. K7 h2 Z
<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image004.jpg" border=0><BR><STRONG>图4</STRONG></FONT></P>
9 u$ L+ X. T3 l$ F# U<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image005.jpg" border=0><BR><STRONG>图5</STRONG></FONT></P><FONT size=2>  3、然后把混色器上的色标往下拖一些(加深颜色),填充背光的部分,如下图: 删除所有的线条,这样相框的框架部分就做好了。上锁。如下图:</FONT>
+ d6 z* x% X$ w% {5 t<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image006.jpg" border=0><BR><STRONG>图6</STRONG>  </FONT></P>, J9 T5 S0 A1 f% y
<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image007.jpg" border=0><BR><STRONG>图7</STRONG>  </FONT></P>
) s4 b3 q+ U4 I1 O<DIV style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image008.jpg" border=0><BR><STRONG>图8</STRONG>  </FONT></DIV>8 C; E$ R/ L* L: q- K
<DIV style="TEXT-ALIGN: center" align=left><FONT size=2>  </FONT></DIV>* c% w  N1 M0 B0 C) J: Y
<DIV style="TEXT-ALIGN: center" align=left><FONT size=2>  </FONT></DIV>& Z4 _- A4 c9 p' t9 W' ^
<DIV><FONT size=2>  三、画相框外面的花纹:  </FONT></DIV>
- o2 r0 b4 }' r( Z<DIV><FONT size=2>  </FONT></DIV>
7 }+ W/ A- r8 n2 S<DIV><FONT size=2>  1、点"外边花纹"层的第一帧,将图像放大到200%(大些好画),选择"线条工具",笔触颜色"红"(先用红色的画,好分辨)笔触大小为5(也可以先用小些的画好后再调整为5)</FONT></DIV>( i+ F0 z0 _5 {1 ^% |
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image009.jpg" border=0>  <BR><STRONG>图9</STRONG></FONT></P><FONT size=2>  2、在框架的左上部分画花纹,(可以自由发挥,爱怎么画就怎么画哈)注意花纹的底部必须有一点是压在框架的上面!这样才能全为一体。如下图:</FONT> ' r) p" \1 ^, D7 U6 [
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image010.jpg" border=0><BR><STRONG>图10</STRONG>  </FONT></P>* n: A5 `0 _* N  N# ~+ e1 J
<DIV><FONT size=2>  为了照顾初学者,罗嗦一点,关于用线条工具画图的方法:因为所有的线条都是弧线形的,而用"线条工具"(快捷键N)只能画出直线段,所以画的时候先画出直线段,再用选择工具(快捷键V)对准线段,在光标右下方成半月状时,推动该线段,合其成弧形。这也是画Flash画图的最最基本方法。  </FONT></DIV>1 ^! X, J  @. Q2 V. O+ [2 _
<DIV><FONT size=2>  </FONT></DIV>
3 b6 M) y5 j# |7 v* F: k<DIV><FONT size=2>  3、按住Alt键,将"花纹"拖出一点点,这样就复制出了一份花纹。点"修改"--变形--水平翻转,将它拖放到相框右上方和原先的那个花纹相对称的位置(可以用键盘上的上下左右键微调)。如下图:</FONT></DIV>9 k% m" v" N4 Z) ^
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image011.jpg" border=0>  <BR><STRONG>图11</STRONG></FONT></P><FONT size=2>  4、用选择工具同时框选舞台上这两个花纹图形,可以看到红色的两个花纹都成分离状态,这时再按住Alt键,将"花纹"拖出一点点,点修改--变形--垂直翻转,将它拖放到相框框架下部的对称位置。这样花纹就画好了。如下图:</FONT>
8 Q6 }2 A) \5 p9 X7 p, P<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 style="WIDTH: 407px; HEIGHT: 421px" height=433 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image012.jpg" width=425 border=0><BR><STRONG>图12</STRONG>  </FONT></P><FONT size=2>  再改变颜色,使它和框架的颜色一致。做法是,点一下"外边花纹"层的第一帧,使其成分离的点状,再点一下工具箱中"颜色"中的笔触色,用弹出的吸管点一下框架上较浅色的部分,这样颜色就改好了。如下图:</FONT> # {* n* `" ~/ Z7 b( J$ p
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image013.jpg" border=0>  <BR><STRONG>图13</STRONG></FONT></P>
$ M! t" d' _  X% |8 H8 |9 o# Q<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image014.jpg" border=0>  <BR><STRONG>图14</STRONG></FONT></P>6 [: Y, V; j% \$ N2 ^. {
<DIV><FONT size=2>  5、这一步很关键,就是把平面的花纹变成立体的。点一下"外边花纹"层的第一帧,点"修改"--转换为元件--勾选"影片剪辑"--确定!打开"滤镜"--点加号,添加滤镜。 <BR>  </FONT></DIV>5 S& R" ^( ]6 x5 M- M
<DIV><FONT size=2>  选择"斜角"和"投影",参数默认就好。</FONT></DIV>0 b1 r3 D8 e/ M# ?3 T& m* a
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 style="WIDTH: 508px; HEIGHT: 118px" height=138 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image015.jpg" width=680 border=0>  <BR><STRONG>图15</STRONG></FONT></P>" C, d2 }/ r9 `
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 style="WIDTH: 511px; HEIGHT: 133px" height=133 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image016.jpg" width=544 border=0>  <BR><STRONG>图16</STRONG></FONT></P><FONT size=2>  6、给框架也加点投影吧,点框架层的第一帧--修改--转换为元件--影片剪辑--确定--滤镜--添加滤镜--投影--默认OK!(因为框架已经是尖形有立体感的了,所以就不要再加"斜角"了。效果如下图:</FONT> ( x2 z7 L6 }* f  q: |  n
<P class="art_area mt10" style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image017.jpg" border=0>  <BR><STRONG>图17</STRONG></FONT></P>
" x3 A* j% T- i9 f2 p& k<DIV><FONT size=2>  现在这个金属相框就画好了哈,不难吧?  </FONT></DIV>
0 r9 T  ^0 O1 |" `1 \9 E6 X<DIV><FONT size=2>  </FONT></DIV>* S, X: o9 z+ _1 }4 G3 [% K5 T
<DIV><FONT size=2>  四、为了使相框更好看些,在适当的地方加些"闪光",我想大家都会制作"十字星",从原来保存的文件中调出"十字星",放在适当的位置。要是还没有就从这里复制去就好了。既然是闪光,就要会闪哈,在"闪光"层第4帧插入关键帧,点"属性"--颜色--亮度--把亮度调到38%延长到第6帧。把所有各层都延长到第6帧。如下图:</FONT></DIV></DIV></CENTER></DIV></TD></TR></TBODY></TABLE>
 楼主| 发表于 2009-3-24 11:58:30 | 显示全部楼层
<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image018.jpg" border=0> <BR><STRONG>图18</STRONG> </FONT></P>
9 k: i; Y- r3 [<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image019.jpg" border=0>  <BR><STRONG>图19</STRONG></FONT></P>  i) K) [' I" e# e; K
<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image020.jpg" border=0>  <BR><STRONG>图20</STRONG></FONT></P>2 t6 @  L' y7 L' s# k' n
<DIV><FONT size=2>  五、那点缀的四朵花最好不要用鲜花图,因为看上去不匹配,还是画个假花吧,画花有很多教程的,这里就不多说了哈。  </FONT></DIV>) C+ g9 Y7 P/ @$ _9 n
<DIV><FONT size=2>  </FONT></DIV>
( x, `) J) h4 N4 A<DIV><FONT size=2>  六、现在准备放入照片了:  </FONT></DIV>
; u9 N: Q% O" e/ r( r3 k( _0 T<DIV><FONT size=2>  </FONT></DIV>" W! @+ ^" `$ s" t0 U2 V
<DIV><FONT size=2>  1、点"框内底"层第1帧,用上面画椭圆的方法,以"中心点"为圆心,画个比框架的内径稍大些(不要超出外径)的椭圆,填上自己喜欢的颜色。如下图:</FONT></DIV>( Y/ G' S3 y: k
<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image021.jpg" border=0><BR><STRONG>图21</STRONG>  </FONT></P><FONT size=2>  2、在最底下"背景"层,用矩形工具,无笔触颜色,填充色凭自己喜欢,画个550*400的方框,相对于舞台全居中。如下图:</FONT>
1 C9 {& |) F+ `  k1 ]/ L# `+ ^<P style="TEXT-ALIGN: center" align=left><FONT size=2><IMG title=Flash鼠绘教程:绘制金属立体相框效果 style="WIDTH: 489px; HEIGHT: 377px" height=425 alt=Flash鼠绘教程:绘制金属立体相框效果 src="http://news.newhua.com/Files/Remoteupfile/2009-3/16/1586347_image022.jpg" width=582 border=0> <BR><STRONG>图22</STRONG> </FONT></P>
2 `( V/ c  S, ^/ y5 Y2 _* E/ B. ]<DIV><FONT size=2>  3、现在万事俱备,就等着您把照片放入"照片"层了哈!因为相框的大小,如果照片太大张,可以加个遮罩层只现出相框内的照片。<BR>  </FONT></DIV>
, u5 g8 r$ ?% W5 J7 j4 i3 [0 v<DIV><FONT size=2>  4、点"场景1"把这个元件拖入图层的第1帧,测试影片。保存,OK!<BR>  </FONT></DIV>
/ p1 l! v4 X4 Q# N& n& B<DIV><FONT size=2>  不知道是不是说的很清楚了,有不明白的地方可以提出来哈。大家发挥想象一定会画出比这个更好的相框的!</FONT></DIV>
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|本地广告联系: QQ:905790666 TEL:13176190456|Archiver|手机版|小黑屋|汶上信息港 ( 鲁ICP备19052200号-1 )

GMT+8, 2026-6-16 15:58

Powered by Discuz! X5.0

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表