长枪的单机游戏:flash入门

作者：邹润
在几年前，网页一直都是静态的，缺乏变化和生动，就像一本杂志的复印件一样，再怎么好看也象是一幅被定了格的风景----毫无生气。因为网络的带宽问题，使到连接传输速率很慢，要制作具有动画效果的WEB网站很困难。1995年，Sun公司开发了Java程序设计语言，它可以使程序设计人员能创建applet(应用小程序)，这些applet能从服务器下载到浏览器上，并可在用户端计算机上运行。使用Java，程序设计人员可以创建生成能够调用图片和声音的多媒体应用小程序。Java一推出，就受到人们的宠爱，在短短一年内，Java就风行全球。
进而在众多的网页中出现了如水面倒影，瓢雪，彩虹字，滚动字幕等叫人爱不释手的Java应用小程序。但是，如果你是一个细心的浏览者，你会发现当你进如某一个网页，它的动画效果不再是单纯的反复运动，而是可以在画面里进行菜单选择和操作以及播放声音文件的时候，你或者会问：“这是什么东东？”回答很简单，这就是叫我一头扎进去再也不想出来的Flash。
随着网络技术的发展，多媒体技术在带宽问题被解决后有了它不可替代的一席之地。而Macromedia公司，这个多媒体制作的老大也在98年的后半年打出了自己的一计重拳---- Flash3.0。而在这同时，Macromedia公司又推出了Dreamwaver2.0来制作Dhtml动态网页。如果你对flash技术在网页制作方面的运用还不很了解，那么我建议你先去看看如sony，奥迪汽车，三菱公司的主页，不论你是商业网页还是个人网页，Flash技术都会给你一个更大的展现机会。
Flash可以说是一个小的director，它可以帮你实现你在你主页制作中的一些梦想。而且，它的优势在于用flash做出来的动画是矢量的（不论你把它放大多少倍，它依然那么清晰）而不象一般的gif和jpg，当你放大他们的时候，你看到的是一个个方形的色块。因此你可以把Flash的文件做的很小，而在html中用命令把它放大。再有，Flash生成的文件是代保护的。第三：也是我要强调的，flash上手很容易，凡是用过一点点类似photoshop软件的人就可以很轻松的掌握用flash制作动画。至少我觉得比学Java要容易的多。第四：用Flash生成的互动式的动画体积很小，相同功能的菜单用java实现要20多k，而Flash只用10k不到就可以实现，而且你要记住，它是动画，是在不断的运动着。最后，特别是对看到过flash动画的朋友来说，你会发现，Flash的播放是流技术，动画是边下载边演示，如果速度控制的好你几乎感觉不到文件还没完全下载。这比起java的那个标明着loading image的灰色的框框叫人舒服多了。
但Flash也有美中不足，你的浏览器必须要下载一个Shockwaveflash的Plug-in才能正常浏览由flash制作的网页。但即便如此，一个200多k的小程序和浏览更富有动感效果的网页，我想每个上网的人都会做出明智的选择。（下载网址国外为：http://www.macromedia.com/shockwave/download/）（国内为：http://202.96.142.106/leo或者http://wwwmy169.com/)
Internet的技术发展一日千里，层出不穷，多媒体技术的运用会令我们的主页更加多姿多彩。如果你在做主页，那么来学学flash吧，不然半年之后你会发现到处都是flash，你又要重新学起。flash和html没有很大的联系，你做好了flash就可以用flash自带的软件把你的动画嵌入网页，所以，先下手为强。
说了这么多，其实，我不过希望我们把自己的网页建设得更加美丽。而java在其网络编程方面有着它不可替代的位置。但我说的是仅仅从页面的角度来说，java不再是称霸天下的武林盟主，如果你用过Flash，或者你就会了解“那一剑的风情。”况且，由于Dreamwaver和flash同是Macromedia公司出品的，所以它们之间的配合天衣无缝，你可以抛弃Frontpage98了。
从现在开始，就请和我一起一步一步来学习flash。我学习flash的日子也不很久，有不尽人意的地方还请大家多包涵。
第一天：绘制和编辑一个能动的图象图1图2 　　打开flash，选择工具（图1）中的笔，当你选好了工具，你会发现在工具的下面一栏中会有几个被击活的选项（图2）---其中包括形状，颜色，线的粗细和线的性质。然后在下面的可选中选择的图形中选择一个圆，在你的work area上画一个圆。用paint bucket(工具的右边第3个）把这个圆填充为你喜欢的颜色。（图3）然后，用鼠标选中所有（图4），Insert-->Creat Symble(图5），选择Graphic,然后OK。这时，在你工作区的图片该为这个样子。（图6）
图3图4图6图5
图7图8图9
这时候，在你的工作区的第一层里应该只有第一个frame是兰色的。用鼠标点击到layer的第30桢（frame)，如图7中红色箭头所示，然后点击鼠标右键，选择Insert Keyframe（加入关键桢，或者用flash的快捷键F6），这时，第30桢的颜色变为兰色。然后你用鼠标点击layer1的那个铅笔的符号（layer pop-up menu),选择Add motion guide,这时候layer层会出现一个新的层，如图8所示。这时，用鼠标点击这一层，使这一层变为操作层（图9），之后，我们开始画一个你要求图片运动的路径。
图10 　　选择工具中的铅笔，选择smooth弧线，在你的work area上随便画上一段，然后用鼠标选择工具中的那个箭头(arrow A)，双击你画出的线段，在用图10所示的工具把你画的很不规则的路径改变得比较圆滑。也或者你直接用arrow拖动你所画出来的线段，同样可以改变线段的效果。
图10 　　用鼠标点击layer1，回到图10的状态，用鼠标点中layer的第1桢，当你在这一桢操作时，这一桢一定是黑色的。然后把你画出来并定义成symble的图形放在你画出的那段线段的一个起始点，注意，一定要把符号的中心放在起始点上。在用鼠标点击最后一桢，再把你所画的图形拖到线段的尾端。有不少朋友问我为什么他们的symbol不按照指定的路径运动，我想原因就是因为他们没把symbol的中心位置放在路径上的缘故。
(图11) 　　这是最后的一步了，也是最重要的一步。用鼠标点击layer1的第一桢，然后点击鼠标的右键，选择properties选项，会出现(图11)的对话窗口。选择tweening-->motion-->在orient to path direction里一定要打勾，这是要求图形按照你画出的路径运动的命令。（其他的action,sound我们以后再慢慢讲。）然后ok。这个时候layer1的第一桢到第30桢之间该有一条红色的带箭头的线相连。(如图12)
(图12)
好了，现在你敲Enter(回车），就会发现那个球型在沿着你设定的路径在走。好看么？当然不好看，至少显得太单调了。但是，我要说的是，它不好看，但它是矢量动画了，再好看的flash也是由这些单调的symble组合而成的。五星级的王府饭店好看吧？最基本的原料不也是水泥，沙子和砖头么？好了 ，第一天就先写这么多，湛江技术论坛聊天室或者是江门的中国商贸通的聊天室。我的名字么，邹润。
第二天：对flash工具和图标的简单解释 作者：邹润
图1 　　这是一个当前工作区的控制窗口，你点击Modify- ->Movie,或者用Ctrl+M就可以击活这个窗口。Frame rate这是命令你每秒播放的桢数，如果你要的效果很强烈很快，就象MTV的那种闪来闪去的效果，那你就把frame rate加大。 Dimendions是定义你flash尺寸的大小,也就是你工作区的大小。 Grid这是定义work area的网格尺寸的大小。Show grid是决定是否显示网格。（最好还是显示，这样可以在你做图的时候帮助你把图片做得更好，更准确）colorbackground是背景的颜色，你可以在做不同效果的时候随时随地地做改动。
（图2）这个是你当前场景的一个参数表，scene1是你操作的场景，你可以在Insert中增加scene,这样可以编辑出比较复杂的flash动画。第2个数字1表示当前操作frame的位置，12.0fps代表每秒播放的frame的数目。最后的一个数字表示在当前操作frame以前总共持续的时间。比如：scene2,28,14.0fps,2.0s就表示当前操作frame的位置在第2场景的第28桢，每秒播放14桢，共持续2秒的时间。
（图3） 　　如果你在做flash动画的时候用了2个以上的场景，那么在你的frame操作区的的右边会出现如图3所示的标示，白色代表你操作当前的场景。对于一个flash的熟练使用者来说，制造不同的场景会收到更好的效果。它可以把你网页互动功能体现得更充分。一个场景和另一个场景之间一般都用按扭（button）来连接起来，这就有点象html中的连接，但不同的是，它在视觉角度上有很好的互动性，但它是整个flash的一个组成部分，而不用再去读取新的文件。
(图4)(图5)(图6)(图7)(图8)这是对线段操作的工具，使曲线变得圆滑。
这是对线段操作的工具，使曲线变得凸凹带棱角。
对图形（graphic,button,mclip）操作，进行旋转。如：图5
对图形（graphic,button,mclip）操作，进行图片的放大缩小。如：图6。7。8
层（layer）操作的图标 注意 　　这几条标志很重要，千万要记住。用你的鼠标点击frame的那个黑色的方向向下的箭头就可以选择把当前层锁住（lock)隐藏（hidden）转化为当前层（current）或者是一般层。
普通层。这一层会显示，但会被在其他层的操作所影响。
这是把层锁住的标志。这一层会显示，但不会被在其他层的操作所影响。
隐藏当前层。在操作的时候不显示这一层。不会被在其他层的操作所影响。
这是你操作当前层的标志。所以在一般情况，把不用操作的层锁上比较好。
好了，今天就先说这么多吧。其实你可以试试看把不同形状的symble组合起来，把它们分别放在不同的layer里面，再设定不同的路径，那样做出来的效果不就好看多了？
第三天：用按扭控制一个动画 作者：邹润
在今天，我们就要真正成为flash的使用者了，用按扭（button）来击发一个动画是flash迷人的功能，把不同的按扭和不同的symbol组合起来就是极其具有动感的flash动画。先说点别的，例如keyframe（关键桢）的设定。你可以把关键桢放在任何的位置，而在这个位置之前的图形，如果你不希望显示它，很简单，在那一桢里选中那个图形并且把图片删除就可以了。如图1中的layer2，那么在第5桢之前，layer2的图形就不会被显示。
（图1） 　　首先，用第一天学的东西做两个能动的图片，如（图2）所示，它们的分层和设定运动的路径如（图1）所示。一定要把图片定义成symbol才能再做其他的编辑。图2
（图3）　　做好了上两个步骤以后，重新Insert一个layer，把其他的层锁住。用工具中的笔在你的work area上画出如图3所示的图形，然后选择Insert->Creat symbol，这时在（图4）的对话窗口里选择button的选项，之后点击OK，这样你就把兰色的图形定义成了按扭。图4
（图5）（图6） 　　这时，再用鼠标点击你新定义的按扭，按鼠标右键，选择edit,开始编辑这个按扭，使它更有动感。这时，你的面前会出现如（图6）所示的一个新的窗口。窗口的左边会出现标只有up,over,down,hit的4个frame。窗口右边会有（图5）那样的标志，你操作的symbol为白色。
对按扭每桢的定义　　 　　你可以对按扭的每一桢都做编辑，如图7，8，9，10所示，但你所做的改动最好是在按扭中心区域的附近。比如：你可以在over中加入几个字，这样当鼠标放在按扭上的时候，字就会出现。而在其他的状态下，字是被隐藏的。这样做出的效果比较明显
（图7） 　　按扭的第一桢up表示当鼠标不在按扭上按扭的状态。（图9） 　　按扭的第三桢down表示当鼠标点击按扭按扭的状态。
（图8） 　　按扭的第二桢over表示当鼠标放在按扭上时按扭的状态。（图10） 　　按扭的第一桢hit是定义鼠标触发按扭的有效区域。
（图11）
按扭做好了，现在就该给它加些功能了。鼠标点击（图5）中的方向箭头，回到scene1的操作界面。用鼠标右键点击按扭，选择properties，会出现如图11所示的对话窗口，你选择action，然后点击那个小+号选择go to命令，然后在control中打勾。这个窗口里的action中还有get URL命令，那是为按扭做超文本连接用的，也就是说，点击这个按扭所要去的新的网页，这个命令在以后的今天我会详细介绍。选择好了之后，按OK。然后回到scene1，选择cnotrol，选择Enable Buttons，现在你再用鼠标点击按扭，它就有激发动画的功能了。
在下面来学另外的一个图形移动的功能。重新增加一个layer，做个红色的方形，定义成symbol。在起始桢和最后一桢都插入关键桢，之后用鼠标右键点击起始桢，选择propersites，当出现对话窗口的时候，按照右边图中的选择填好。选择ok。这个功能我就不具体说了，你一看就明白了。

第四天：对图象颜色变换和形状变换的编辑
作者：邹润
图1 　　建立一个新文件，在文件的timeline的第一桢画上两个如（图1）所示的图形。画好了以后，不要把它们定义成symbol。然后在第30桢处加入一个关键桢（keyframe）
（图3）
图2 　　在第一桢处点击鼠标右键，选择properties，出现对话窗口以后按照（图2）的选择把选项选择好，然后点击ok。这时候你敲回车，就可以看见红色的圆球慢慢变为兰色的方形，颜色也随变形在变换。这时在layer的第一桢该是由一条绿色的线和最后一桢相连。如（图3）
好了，关闭这个文件，再建立一个新文件，来看看symbol是如何变颜色的。
（图4） 　　如（图4）画出一个图形，并且把它定义成symbol中的graphic。把第一桢和第30桢处插入关键桢。并且在第一桢的properties中定义成tweening--motion--tween scale（这个方法在第三天我最后说过）用鼠标把第一桢点中，开始对symbol进行操作。

（图5）
用鼠标右键点击第一桢的symbol,选择properties，出现对话窗口后按照（图5）的选择或者你自己选择，把symbol给淡化（alpha）。选择完毕后点击ok。在第一桢的symbol该如（图6）所示。
（图6）（图7）
（图8） 　　用鼠标把最后一桢点中，用鼠标右键点击最后一桢的symbol,选择properties，出现对话窗口后按照（图8）中的tint把symbol的颜色做任意的调整。调整完毕后按ok。这时候你敲回车就可以看见symbol的颜色在移动中由（图6）变为（图7）。
-------
今天就基本上把flash的一些简单的图形变换说完了，在今天最后的过程中，你可以用如上面所示的工具对关键桢处的symbol做任何调整，你只要调整第一和最后一桢就可以了，中间的过程flash会为你完成。但是，如果你希望做些例如一会快一会慢的运动，那么你就还要在第一桢和最后一桢的中间再插入更多的关键桢，然后再对它们进行编辑。比如你可以分不同的层（layer），在不同的层上做不同的图片，再为这些symbol做不同的运动，在他们的起始桢和最后一桢改变它们的颜色。呵呵呵呵，比你刚刚拿到flash只会画一个圆形要复杂的多了吧？当然，动画的效果也好看多了。明天我就讲讲如何在场景中用button连接和如何为button加上声音。
第五天：如何为场景做连接和为button加上声音 作者：邹润
（图1）
场景（scene）之间的连接其实很简单，我一说你就知道了。当你做好了第一个场景以后，用Insert中的Insert scene再加入一个新的场景，在每个场景中间都做好一个按扭，在设置按扭的属性时，如（图1）中所示，在sence中选择你要去的另外一个场景。如果你做了多个场景的话，那功能就很完善了，就象是html中的连接一样你可以想去哪里去那里。而且有按扭互相连接，互动性很强而且不用再重新读取文件。
图2 　　做一个按扭（button），编辑这个按扭，然后，用file菜单中的import把声音输入进来，如（图3）所示，然后选好你准备好的声音（wav）文件，点击ok。
（图3）（图4）
（图5） 　　用鼠标右键点击over frame，选择properties，出现窗口后选择sound，在下拉菜单里选择好你输入的声音文件。如（图4）（图6）
这时候会出现一个声波的图象，你用那个白色的小方块来编辑声音，向上拉是加大声音，向下拉是减小声音（图5），编辑完可用（图4）中的播放键来检测一下。也或者用（图6）的窗口来叫flash为你自动设置，其中loop是声音文件重复的次数。也就是说，你可以输入很小的一段声音，然后重复把它播放，这样在最后生成的电影swf文件的体积会很小。不过这个功能在按扭中最好不用，往往都用在背景音乐里，至于背景音乐我会在flash进阶中详细介绍的。
图7 　　当你选择完毕点击ok以后，在over的frame里会有一段声音文件，好了，你的带声音的按扭就做好了。同样可以把声音加入到down frame里面，但在up和hit里一般不加声音，你想啊，up是当鼠标不在按扭上的状态，如果加了声音会响个不停，那也太烦人了。
今天就到这里吧。明天说说如何把你的flash电影输出成可以在html中嵌入的swf文件和如何在html中嵌入swf文件。
第六天：输出flash电影并将其嵌入html 作者：邹润
（图1） 　　当你完成了一个flash电影以后，就可以把它输出了。用鼠标点击file，选择Export movie，这时你先为你的文件起个名字，然后就会出现（图1）的对话窗口，你可以改动一些选项也可以按照系统默认的方式输出。我想如果你有最简单的photoshop的经验，做起来就会得心应手，非常的简单。
（图2）图3 　　不管你用的是正版的flash3还是D版的flash3，都会带有一个叫Aftershock的应用程序，我就用它来编辑我们的html。用（图3）中的标有红色的图标把你做好的swf文件导入，然后在用（图2）中的选项进行编辑，其实即使你不编辑，直接用file中的save就可以生成html文件。如果你还不满意，那么就再用Homesite或者是Netscape edit或者是Frontpage98进行最后的编辑就可以了。用FTP上传文件别忘了把html文件和swf文件放在同一个目录下。
如果你的swf文件是从其他地方下载的，那么你就要加入如下的一些指令在你的html里了。以下是将一个Shockwave Flash电影嵌入到网页中所需要的最起码的编码（首先假定用户已经安装了适当的插件，否则在网页中将显示一个存在嵌入对象的图标）

你可以看到在EMBED标签的外面包了一个OBJECT标签。必须保持这种顺序，因为IE认可OBJECT标签，而Netscape Navigator认可EMBED标签而忽视OBJECT标签。CLASSID是OBJECT标签特定 的使用方法，它将告诉MSIE浏览器自动下载当前的ActiveX 插件（如果浏览器没有安装该插件的话）。PLUGINSPAGE是EMBED标签中特定的使用方法，它链接到Shockwave 的下载网页（如果Netscape浏览器没有安装该插件的话）。LOOP指示是否将电影重复播放（为你刚生成的电影设定"false"）。PLAY指示是否只显示电影的第1帧(false)还是继续播放电影(true)。BGCOLOR用于控制电影的背景色。"quality"设定浏览器是否使用anti-aliasing（边缘平滑处理）显示图象。"autohigh"设置指示浏览器用 anti-aliasing显示电影图象，但是如果显示速度太慢的话则不要使用该选项。通常都不要使用该选项。
以下是HTML文件中可以使用的比较完整的嵌入代码：

这其中的swf的height和width都可以按照你自己的要求做出改动。
星期天的结束语 作者：邹润
写了那么多东西，做了那么多的图片，我也还是不怎么满意。说白了，我这也就是起个抛砖引玉的作用，如果有哪个高手愿意加入，我举双手欢迎。写了这几天，发现我自己不明白的地方太多了，但还是把它写完了，还望各位朋友包涵。日后有时间，我会再对一些我觉得比较好的flash功能做详细的介绍，敬请留意flash进阶。入门的部分到这里就算告于段落了，虽然我是挺认真的写的，但依旧会有许多的不足，请大家多包涵。
flash技术在网页上的发展非常迅速，不过才几个星期，从我写这些教程到我改写教程的时间里，我又看到不少国内非常好的flash站点，我想，随着网络技术在我国的发展，多媒体技术在网页上的运用将成为本年中热门的主题。或者也因为如此，我们的网上家园才会变得更加美丽。