第一章 语言初识

简单实现“全景”动画

  大家都见过“全景”动画吧。那是用首尾可以相接的画面,在场景中一直运动下去,我们看着好像在一个地方向周围“旋转”浏览风景一样。有人可能用关键帧的方式作过“全景”动画,制作过程是很复杂的。因为这图片不仅要首尾可以相接,而且还得把开头的一部分截取出和Flash场景大小相同的一段拼在图片尾部,然后导入Flash的场景中,设置很多帧,让图片反复运动。
  如果你会用Flash的脚本语言,那这样的运动就可以轻松实现了。有人认为用脚本语言太复杂,不好懂,没有使用关键帧作动画直观、简单。其实如果你一入门,会感到用语言更方便,而且可以实现你意想不到的效果。那么没有学过编程语言的人能不能学会Flash的脚本语言,本教材就是想让没有一点编程基础的也能进入语言的大门,不信你跟着教材往下看。
  我们就先从移动这个“全景”图片开始。
  全景图片的来源吗,如果你有相机,就到一个好风景区,对准周围各个方向拍照,回来后把照片拼接一起,那是最真的“全景”,你可以想象,图片的首部和尾部是一处的风景,这就是说可以“首尾相接”的。可这个倒不一定人人有条件,你看,下面我一个图片反个过,再与原图拼到一起,也可成为一个能“首尾相接”的图片了,这种假全景倒是很好做的。
  下面是一张太湖风景图:

  打开Flash后,不是直接导入主场景中,而是先建立一个新符号,比如符号名叫“太湖”,将图片导入。如果你的图片很大,有可能Flash对图片处理会出问题,可以选中图片后,按“Ctrl+B”将图片“打散”就行了。把图片放到左边,让右边界的中点放在正中间的“+”字线上。选中图片,按下“Ctrl”键的同时用鼠标向右拉,就可再复制出来一张,一直向右拉动,将复制出来的一张拉到右边,使左边界放在中心“+”字线上。拉开“Modify(修改)”菜单,在“Traneform(变换)”项下级菜单中选择“Flip Horizontal(水平反转)”, 然后两张图片对齐如下图:

  看看这个图,你设想把它首尾粘在一起,装入“走马灯”中让它旋转,不就是“全景”的效果吗。可它在Flash中只会平移不会旋转呀!下面我们将它模仿旋转。
  再建立一个新符号,叫“湖2”。将“太湖”符号从符号库拉入两次,把拉入的两个并排放好,注意两图的交界线一定放在正中间的小“+”字线上。如下图:


  看到这图片有什么“特色”吗,这个组件横向宽度恰是原图片的二倍。如我的原图宽度是1600像素,现在拼好后是3200像素,你如果用个小框在图片上任意框住一片图,然后不动小框,将图片移动1600个像素,你会发现框中内容和原来是相同的。好了,知道了这一点,下面你就知道怎样实现“全景”了。
  回到主场景,把“湖2”从符号库拉入,打开“Instance”(实例)面板,在“Name”框中填入“m”。这一点很重要,因为以后要用语言代码,对场景中的实例进行设置,实例要有一个名字。当然你也可以用其他名字,但你写代码时要记好你输入的名字是什么。
  点击第三帧,按“F5”插入普通帧,使动画共三个帧。
  添加一个新层。在新层中按两次“F7”添加两个空白关键帧。第一帧是系统默认关键帧,现在共三个关键帧。
  鼠标右击第一个关键帧,在弹出的对话框中选择“Actions”,打开“Frame Actions”窗口。点击左上角的“+”号按钮,拉开“Actions”下级菜单,在“Actions”下级菜单中选择“set variable”,于是窗口下边出现两个横条,你在变量“Variable”条中填上变量名“b”;再点击下一行变量值“value”,在横条中输入“5”,你看到 5 字还有一个双引号吧,在右端“Expression”前的小方块中点一下,小方块中有了勾,双引号就消失了,表示这是表达式。这时,右窗口中就有了如下代码:
b = 5;
  学会这种输入方法了吗,右击第二关键帧,试输入下面代码:
x = m._x;
x = x-b;
m._x = x;
  再右击第三帧,打开“Frame Actions”窗口,直接选择“goto”(转到),下面出现三行横条,在最后一行中输入 2 ,就是转到第 2 帧。第三帧代码如下:
gotoAndPlay(2)
  好了,按下“Ctrl+Enter”预览一下,看看图片是不是在向左移动。就这三帧,图片怎么在一直移动呢?在没说代码的意思前,我们先认识一下坐标吧。
  主场景的坐标,左上角为“x:0 、y:0”,如果你设置场景是“500X400”,那么最右边“x=500”,最下边“y=400”。
  每一个符号还有它自己的局部坐标,你在建立新符号时,中间不是有个小“+”号吗,那个就是“x:0 、y:0”的位置,我们叫他坐标原点。从原点向右、向下为正值,向左、向上为负值。建立符号时,如果我们导入一张图片,这张图片的坐标原点就是那个“+”字。我们可以根据需要,把“+”放在图片的几何中心,或者放到图片的某一位置,甚至有时还需要放到图片以外的地方。以后将图片调入主场景中,我们说图片的坐标位置,就是符号的坐标原点在主场景中的位置。
  上面我们作两个符号调入到一个符号中时,一个准确放在“+”左,一个放在“+”字右,这样把两幅图片合并成一幅,就要保证“+”在是整个图的几何中心。
  看第一句中的“m._x”中的 m 是实例名,“m._x”是 m 的坐标原点在场景中 x 轴上的坐标值。“x = m._x”就是让 x 的值等于 m 的 x 轴坐标。
  第二句“x = x-b”,因为我们在第一帧让 b 等于 5 ,那么这个命令执行一次就把 x 的值减 5 ,第三帧的语句是转到第二帧,所以程序就在第三和第二帧之间反复执行,每执行一次 x 的值减少 5。第三句的“m._x = x”,就是让 m 的 x 轴坐标等于新的 x 值。这样 x 的值反复减少,图片就向左逐渐移动了。
  好了,说的不少了,图片跑哪里了?跑到场景以外了,它还在继续向左移动呢。
  看来得想办法,不让图片跑到场景以外呀!你是否想到,图片跑到左边后,让它重新从头再来,但又不让人感觉到不是“从头再来”!上面我们说了,移动1600个像素后和原来的内容相同,所以我们要添加一句:“如果 x 小于 0 ,就给 x 加上 1600 ”,然后再给 m 重新定位置。
  那就还用上面的方法打开第二帧的“Frame Actions”窗口,把光标先放在第二行,再点击左上角的“+”号,在“Actions”下级菜单中选择“if”,于是下面出现一行横条,在横条中你写上
“x < 0”,再点“+”号,
选择“set variable”,还用上面的方法,在第一全横条中输入变量名 x ,在第二个横条中输入 x+1600 。输入完后的窗口如右图:如果你的和右图一样,就成功了,再导出你的全景动画看看吧,可以一直循环下去了,是不是和用很多帧作出来的结果一样。




  你看上面我作的还会倒转方向运动,怎么实现的?再添加一个按钮吧,按钮的制作我就不用再说了吧,前面已经说了很多,只是这次按钮不是动作,而是定义 b 的值。右击按钮,打开“Object Actions”窗口,拉开“Actions”下级菜单,选择“on”,再点“+”号,选择“set variable”,在变量“Variable”条中填上变量名“b”;再下一行变量值“value”,在横条中输入“-b”。完成后窗口中代码如下:
on (release) {
b = -b; }
  这样,就每点击一次按钮, b 的值正负反转一次。
  可是光反向运动还不行,还有“到头”了怎么办的问题,所以代码中还要添加:“如果 x 的值大于 1600 ,要让 x 的值减 1600 ”。意义明确了吧,再在代码中添加语句“if ( x > 1600){ x = x-1600; }”,最后如下:

x = m._x;
x = x-b;
if (x < 0) {
x = x+1600; }
if ( x > 1600){
x = x-1600; }
m._x = x;

  这个方向反转是用鼠标点击实现的,按钮还可以用键盘操作。你的选择按钮代码时看到下面参数栏中有一项“Key Press”吗,如右图:你在“Key Press”左的小方格中点一下,里面打上勾,就可在右边小框中输入你要用的键值。如果你想用“空格键”实现反转,就在点击“Key Press”后,按下键盘上的空格键,框中出现 <Space>,以后你每按一下空格键,图片的运动方向就反转一次。当然你也可以选择其他键,字母键、方向键、数字键都可使用。
  看看这样向左向右运动都可一直循环下去了。这个如果你不用语言恐怕就难以实现了。

  上面的例子我是用图片宽度1600 ,如果你的图片不是这样,语言代码还得修改,那么能不能让Flash自己去根据图片尺寸来设置呢?好的,Flash有一个取得实例属性的函数“getProperty ( )”,我们用这个代码:
“xb = getProperty ( m,_width )/2; ” ,这样就把 m 的宽度取出来,将其1/2 的值给 xb 这个变量了,那我们的代码就成了下面样子:
x = m._x;
xb = getProperty ( m,_width )/2;
x = x-b;
if (x < 0) {
x = x+xb; }
if (x > xb) {
x = x-xb; }
m._x = x;

  这次好了吧,不管你的图片尺寸多大,代码语句都不用改了。
  好好看看代码语句,你还可以自己设计出新的来。比如你输入按钮代码时选择“RollOver”
on (RollOver){
b = -b }
  “RollOver”就是鼠标经过的意思,这样就不用点击按钮,每当鼠标指向按钮时,图片就反向运动。
  你还可以改变 b 的值来改变移动速度,如果你将第一帧代码改为“b = 3”每次移动 3 个像素,不就慢多了。你也可以用两个按钮,给向左移动按钮输入代码“b = -5”,给向右移动按钮输入代码“b = 5”,这样两个按钮就给分别控制左右移动。
  或者安排多个按钮,让有的向左移动,有的向右移动,有的快速移动,有的慢速移动。这样是不是很有乐趣。