改变背景图形

文章类别：Flash | 发表日期:2008-9-21 20:11:36

　　 ※闪吧※<a target=_blank href=http://www.flash8.net<img src=../img/flash/20089212073327577801.gif border=0 align=absMiddle height=16 width=16> <a href="www.flash8.net" TARGET=_blank>[ 点击下载 ]</a></a>]

FLASH 4 : 改变背景图形

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="625" height="425"> http://www.flash8.net/file/Tutorials1/1015/21/21.swf";> http://www.flash8.net/file/Tutorials1/1015/21/21.swf"; quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"; type="application/x-shockwave-flash" width="625" height="425">

这次的主题是改变背景的图形，在还没做之前，可别以为这一定需要高难度才做得出来，其实原理并不难，只要稍微计算一下内部的控制值，相信大家都可以很轻易的应用在其他各方面，想要学进阶的FLASH，把这个例子当成起跳板吧! 最後面再另外附上一个同样原理的例子让您做参考，快来学习吧!

http://www.flash8.net/file/Tutorials1/1015/21/line0.gif"; width="260" height="243">

在还没做之前先来告诉大家，此范例要非凡注重的地方是在於控制图型变化的按钮位置要放在何处? 所以我们得先知道场景的大小，在此定宽为:625px 高:425px。多定那尾数25是别有用意的，做完後就知道啦!

此范例共需要用到4个背景，1个我们用黑色图像，另外3个为汇入的图形图像。当然您也可以自己动手画。

(由於图形是汇入的BMP档案，所以原始档变得很大，在此以另外一个同样例子的原始档案附上)

http://www.flash8.net/file/Tutorials1/1015/21/line1.gif"; width="478" height="284">

元件名称-黑背景:(影片片段)

用矩形工具(R)画一个大於场景的黑色矩形，将它存成影片片段元件，并给予它一个实体名称:baclblack

http://www.flash8.net/file/Tutorials1/1015/21/pic1.gif"; width="441" height="348">

元件名称-背景1、背景2、背景3:(影片片段)

将预备好的图形汇入到图库中，同样转存为影片片段元件，实体名称分别为:backpic1、backpic2、backpic3

p.s 每个图形都各为一个图层，而且大小都要调整到可以盖过整个场景的大小哦!

http://www.flash8.net/file/Tutorials1/1015/21/line3.gif"; width="236" height="159">

元件名称-button:(按钮)

新增一个按钮元件，在影格一般的地方做一个图形(如左图)，在影格滑鼠经过及按下的地方插入要害影格。

p.s 此3个影格皆为同样的图形，在此不需要额外做变化。做好的按钮只要放在图库中就好了!

元件名称-scroll、scroll1、scroll2、scroll3:(影片片段)

新增一个scroll影片片段元件，从图库中将button按钮元件拉到影片中。
设定元件实体内容，给予动作指令如下:(参考下图)

於                                                                              (按下)
                                         开始拖曳                                                                              (""，L=400，T=300，R=400，B=400，lockcenter)
                                       结束於
                                      於                                        (放开)
                                         停止拖曳
                                      结束於

在开始拖曳里的"左、上、右、下"4个值，是定义此元件的活动范围位置，其中"左和右"的值是一样的，因为我们的按钮只需要上下移动就好，而"上和下"的值是相差100，非凡要记住"上"的值是300哦!

回到场景中复制图库中的scroll元件，另存scro111、scroll2、scroll3元件。
并将其动作指令中的开始拖曳值，分别稍作修改如下:

                                        开始拖曳                                        (""，L=500，T=300，R=500，B=400，lockcenter)

                                                                              开始拖曳                                        (""，L=550，T=300，R=550，B=400，lockcenter)

                                                                              开始拖曳                                        (""，L=600，T=300，R=600，B=400，lockcenter)

http://www.flash8.net/file/Tutorials1/1015/21/line4.gif"; width="590" height="315">

http://www.flash8.net/file/Tutorials1/1015/21/line2.gif"; width="313" height="213">

图层名称-buttscroll:

新增一个图层，将图库中的scroll、scroll1、scroll2、scroll3分别拉到场景中，并分别给予元件实体名称: buttonscroll、buttonscroll1、buttonscroll2、buttonscroll3。

还记得刚刚在开始拖曳中，左、上的设定值吗?

开启尺标(Ctrl+Alt+Shift+R)
先大致调整好位置即可，如左图所示。最後再回来做细部调整。

图层名称-action:

新增1个图层，在第1影格的地方设定影格内容，设定值如下:

第1行是注解:给自己看的，程式段不执行。

                                       第2行设定变数:
                                       blackY:变数名称(名称可以自己定)。
                                       GetProperty:取得目标物内容(表示法编辑器内的动作指令)。
                                                                              /buttonscroll:指定目标物名称(这里的目标物是指控制黑背景的按钮图形)。
                                                                              _y:Y位置(这里的Y位置是指按钮图形由上至下的位置值，介於300                                       ~400之间)。

整行的意思是说:取得"buttonscroll"的y位置值给变数blackY。

                                       第3行设定变数:
                                       blackAlpha:变数名称(名称可以自己定)。
                                                                              /backblack:指定目标物名称(这里的目标物是指黑背景图形)。
                                                                              _alpha:Alpha百分比(Alpha百分比的值，介於0                                       ~100之间)。

整行的意思是说:取得"backblack"的alpha值给变数blackAlpha。

第4行设定变数:"blackchange" = blackY - 300

第5行设定内容:("/backblack"，Alpha) = blackchange

因为blackY的值介於300 ~400之间，减掉300之後，就刚好介於0~100了，将这个范围值指定给黑背景的Alpha当内容，如此就能控制黑背景的透明度变化了。

部分细部设定步骤如下:

http://www.flash8.net/file/Tutorials1/1015/21/line5.gif"; width="499" height="324">

第2行设定变数:

在设定变数的数值栏，选取表示法编辑器，在函数表中选取GetProperty指令，如左图所示。 http://www.flash8.net/file/Tutorials1/1015/21/line6.gif"; width="313" height="196"> 将target标示起来，点取目标按钮，出现如左图的画面，选取目标buttonscroll，按下确定，与target做置换，置换後要加上双引号" "；将property标示起来，与函数表内的_y做置换，完成动作如下图所示。 http://www.flash8.net/file/Tutorials1/1015/21/line7.gif"; width="175" height="60"> http://www.flash8.net/file/Tutorials1/1015/21/line8.gif"; width="234" height="338"> 第4行设定内容:

在设定栏内选取Alpha，在目标栏内点选目标编辑器，选取blackback，在数值栏内输入blackchange，并将纯文字改为表示法。如左图所示。

以上所有的数值栏设定，都是选在表示法。

第1影格完整的动作指令设定:

以上是设定"黑背景"的动作指令，而"背景1、背景2、背景3"的设定值也都是同样的原理，只有变数名称和目标物更改而已，在此列出第1影格的完整actions动作指令如下:

注解:                                       ---  黑背景                                        ---
                                       设定变数:                                       "blackY" = GetProperty ("/buttonscroll",_y                                       )
                                       设定变数:                                       "blackAlpha" = GetProperty ("/backblack",_alpha                                       )
                                       设定变数:                                       "blackchange" = blackY - 300
                                       设定内容                                        ("/backblack"，Alpha)                                       = blackchange
                                       注解:                                       ---  背景1                                       ---
                                       设定变数:                                       "pic1Y" = GetProperty ( "/buttonscroll1",                                       _y )
                                       设定变数:                                       "pic1Alpha" = GetProperty ("/backpic1",                                       _alpha)
                                       设定变数:                                       "pic1change" = pic1Y - 300
                                       设定内容                                        ("/backpic1"，Alpha)                                       = pic1change
                                       注解:                                       ---  背景2                                       ---
                                       设定变数:                                       "pic2Y" = GetProperty ( "/buttonscroll2",                                       _y )
                                       设定变数:                                       "pic2Alpha" = GetProperty ("/backpic2",                                       _alpha)
                                       设定变数:                                       "pic2change" = pic2Y - 300
                                       设定内容                                        ("/backpic2"，Alpha)                                       = pic2change
                                       注解:                                       ---  背景3                                       ---
                                       设定变数:                                       "pic3Y" = GetProperty ( "/buttonscroll3",                                       _y )
                                       设定变数:                                       "pic3Alpha" = GetProperty ("/backpic3",                                       _alpha)
                                       设定变数:                                       "pic3change" = pic3Y - 300
                                       设定内容                                        ("/backpic3"，Alpha)                                       = pic3change

http://www.flash8.net/file/Tutorials1/1015/21/line9.gif"; width="89" height="23">

第2影格的动作指令设定:

接着在第2影格处，插入空白要害影格，影格内容的动作指令设定为前往并拨放(1)

http://www.flash8.net/file/Tutorials1/1015/21/line10.gif"; width="220" height="140">

插入影格:

选取其馀图层的第2影格，按下(F5)插入影格。

排列图层的顺序，如左图所示。调整按钮精确位置:

现在可以按下(Ctrl+Enter)，测试您的成果了。

首先，先去点一下每个按钮看看，当第一次按下时，您的按钮位置是否会晃动呢? 会的话就是按钮位置不够精确，回到场景中移动按钮位置，直到不会产生晃动，这样就百分之百精确啦!

p.s 要有耐心，一定可以调的很准的。

http://www.flash8.net/file/Tutorials1/1015/21/line11.gif"; width="230" height="200">

图层名称-bottonscrollback:

在如左图的位置上新增一个图层，此图层的内容为按钮的背景图，所以，选择矩形工具，画出如下图的的图样即可。(按钮图形是当参考位置)

http://www.flash8.net/file/Tutorials1/1015/21/pic3.gif"; width="267" height="152">

测试影片:

同样按下 Ctrl+Enter，测试您的成果是否满足?满足的话那就恭喜您，表示已经完成了!

为了不让文章内容太过於冗长，因此在有些地方简略了基本的操作步骤，若有不了解之处，欢迎随时至Flash问题讨论区内提出您的问题....移动下列按钮测试效果!

http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" ID=backtest WIDTH=550 HEIGHT=374> http://www.flash8.net/file/Tutorials1/1015/21/backtest.swf";> http://www.flash8.net/file/Tutorials1/1015/21/backtest.swf"; quality=high bgcolor=#FFFFFF WIDTH=550 HEIGHT=374 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash";> 下一课：http://www.flash8.net/file/Tutorials1/1015/20.htm";>撼动你的网页

Windows操作 [文]	Word教程 [文]	Excel教程 [文]	PowerPoint [文]	Dreamweaver [文]	Fireworks [文]
Flash教程 [文]	PhotoShop [文]	CorelDraw [文]	C语言教程 [文]	Html教程 [文]	Div+Css布局 [文]
Javascript [文]	ACCESS数据库 [文]	ASP教程 [文]	SQLServer [文]	ASP.NET教程 [文]	FlashAS [文]

Word教程网	Excel教程网	Dreamweaver 教程网	Fireworks教程网	PPT教程网	FLASH教程网	PS教程网
HTML教程网	DIV CSS教程网	FLASH AS教程网	ACCESS教程网	SQL SERVER教程网	C语言教程网	JAVASCRIPT教程网
ASP教程网	ASP.NET教程网	CorelDraw教程网