人人都可flash-flash+as2基础教程.doc

人人皆可flash-flash as2简易教程准备写点东西了。将它称之为教程，实际上是想做标题党，但教程这名字还是挺吓人的。一旦开始写了，岂不是要从头到尾写完，直到吐血而死为止？所以，先声明一下，这个所谓的教程会不定期的更新。有时间我就写，您就先看着，至于最后到底写到什么地步，我现在心里也没底。本教程面向对象：会一些简单的flash，至少会用关键桢做一些简单的吓不到人的动画。要是曾经用gotoAndPlay做过一点简单的交互，那当然最好了。至少你得知道movieclip（影片剪辑）是啥，鬼都知道，as2就是玩movieclip的。如果连这个概念都搞不清楚的，请先去学学怎么用flash做做动画。至少你得知道桢频是啥，要不然你的动画怎么动起来？要不然onEnterFrame（不知道这个词什么意思的，以后会介绍，现在可以华丽地略过不管）估计是讲不清楚了。如果以上这两点你都已经点头了，OK，面试通过，现在咱们可以挽袖子干了。所需软件：flash 8不用去赶流行，着急下cs3、cs4，别忘了咱们现在探讨的是FLASH AS2.0，有FLASH8足矣。第三个问题：到底要不要学as2，直接学as3不是更好吗？这个问题我觉得不好回答。如果你现在真的一片空白，在这之前压根就没用过flash，那好，一张白纸好画最美的图画，没有思维定势，as2、as3都无所谓，但是as2可能更易上手一些。当然，一开始咬咬牙，直接as3了，也没什么大不了，一步到位了，从此你就跨上了flash未来的康庄大道。如果你已经懂得一些flash，并且多少做过一些动画。但是随着flash程序的大发展，你觉得自己用关键桢做的那两把刷子快要跟不上时代了，那我觉得，学学as2挺合适，毕竟这个很容易上手。我可以负责任的说，如果不是架构大的体系，仅仅是想做些炫一些的效果，那我可以很负责的告诉你，除了有些3D效果实现起来可能不太容易以外，as对付其他到很多东西，已经绰绰有余。等你基本通过as明白了编程到底怎么回事，再去啃as的大部头也不晚。如果你是后台技术的程序员，想学一些flash的话，如果你已经精通C#，JAVA等面向对象的语言，那本系列教程你可以很华丽的略过，直奔as3吧，你会发现，那些东西对你来说，很熟悉，很熟悉。说来说去，as2似乎没什么用了，但我知道，总是有哪一部分人，他们希望在flash as方面有新建树，但是却被as3的架势吓退了路。陪着flash从1.0的时代一直走到现在，却没有了信心继续走下去（曾经在一些flash论坛中看到有人声泪俱下的诉说自己学习flash的辛酸历程，呵呵）本教程就是写给这些人。只是想说，人人皆可flash，as并没有那么困难。等你有一天顺手了，再登堂入室，体会as3的博大精深，也不迟。.net横行的时代，不是还有N多的应用在用asp吗？技术不在高，够用就行。最需要武装的，不是技术本身，而是头脑。好了，废话太多。写到这儿，发现文章已经很长了，就此打住吧。（读者：骗子，骗我们进来，听你说相声呢！讲点干货好不好！西红柿伺候！）脑袋开花下堂去玩的就是影片剪辑-flash as2简易教程第1篇上一篇教程出来以后，很多网友留言，问我为什么不直接讲as3，而是很过时的唠叨as2，这里首先澄清一下，as3是一个好东西，本博客并非要视as3为无物，在一个3.0的时代推崇2.0，而是2.0简易教程这个系列，将主要以2.0为主。关于3.0的应用，我们也会在其它的一些系列或者相关的文章中提到。至于本教程面对的对象，其实我在第0篇的唠叨里已经说得很清楚了，就是针对那些已经使用过flash很多年，对flash产生了深厚的感情，甚至就是吃flash这碗饭的同志们，随着flash越来越向技术平台转型，很多人可能觉得跟不上，觉得掉队了，甚至对自己flash的能力产生了怀疑，所以，这系列其实就是想说，flash as并没有那么难，障碍在自己的心里。只要你愿意去做，你会发现你完全跟得上flash大潮的发展。所以，简单点说，这个教程不是面对程序员的，恰恰就是面对设计师和动画师的。这个回答可能很多人不喜欢，并且要问我，为何在一个程序员云集的博客发给设计师的东西。我要说首先互联网是开放的，其次，像博客园这样执著于专业领域的网站实在不多。好的，废话结束，下面开始讲课。用过flash的人都知道，flash中，有一个很重要的概念：影片剪辑（一般，我们简称为mc），它几乎是flash一切动画的基础。Flash这东西，一言以蔽之，就是如何让很多影片剪辑在界面里按你想象的运动起来。滑动、变大、变小、旋转、显示、消失就是这些最基础的运动，构成了flash，甚至是说任何图形界面的软件的最基本的交互和展现形式。在关键祯时代，我们用关键祯来进行这些最基本的事情，在as时代，我们用as来做，如此而已。在早期的flash版本里边，我们都知道，按钮司交互，影片剪辑管运动，所以，以前大家做一个flash，思路很简单，我需要一个东西有交互行为，说白了就是我点点点，他动动动，就直接做个按钮，放到库里，再拖到场景里用；我需要一个东西动起来，直接建一个影片建立，放到场景里，再拖到场景里用。在as时代，我们用as来做，首先需要明白的也是这一点。（上面这两段看不懂的同学，请先找一些flash软件使用的最基本教程看一下，至少了解一下库是什么东西，影片剪辑应该如何建立）。一、用代码建立空的影片剪辑在flash as里，我们同样可以建立影片剪辑。所以，今天咱们先来说一下如何建立影片剪辑。打开flash软件，鼠标点中时间轴上的第一祯。然后打开动作面板，在里边输入如下的语句： this.createEmptyMovieClip(“myMc”,1);这就在场景里边建立了一个名为myMc的影片剪辑。当然，目前为止，你看不到这个影片剪辑，因为他是空的。关于上面这句话，有几点我们先解释一下。this指的是这个影片剪辑的作用域，简单点说，就是我是在这一祯上建立的影片剪辑。“.”是flash最典型的点语法，说简单点，就是你可以把它理解为“的”或者“下的”或者“属于他的”，高深专业的解释这里暂时就不讲了，只会增加初学者的理解难度。我可以不太负责任的告诉大家，你可以不太规范的认为，flash在表示“的”，“下的”，“属于他的”时候都用“.”来表示。比如刚才这句，你可以理解为在“this”下面建立空的影片剪辑。再比如this.myMc._x，你可以理解为this下面的myMc的_x。这样说对一些谈程序色变的美工更容易接受一些。再后面的部分createEmptyMovieClip，看起来很长，但是如果你E文足够好，应该能看出来，这就是创建空的影片剪辑的英语。所以，这句话还是很好记的。当然，在程序命令里，他把这几个单词都连接起来了，并且中间每个单词的第一个字母大写。这种写法很形象地被称为“骆驼式”命名法。Flash里边的变量名、属性、方法、命令等等，基本都遵循这种规则。你如果希望你写的程序看起来比较专业，同时还容易理解，希望你也一开始养成良好的命名习惯，坚持使用“骆驼式命名法”。还有一点需要强调的是，flash是严格区分大小写的，所以，“myMc”和“mymc”并不是一个东西，如果你写的程序怎么调试都不对，记住检查一下大小写的问题。这是初学者经常会犯的错误。再看后面，（myMc”,1），前面是你为影片剪辑命的名，后面是它的深度，命的名很好理解。深度需要解释一下，用过flash或者photoshop的人都知道，有一个层的概念，上面的层会压住下面的层。深度也是一个类似的概念。深度值越大，越在上面，深度值越小越在下面。但是深度有几点和层不同的概念需要记住。第一， 一个深度上只能有一个东西存在。如果有两个的话，后面建立的会覆盖掉前面的。第二， 所有在场景里通过绘图工具和拖拽而不是程序建立的对象，默认的处于第0层，也就是说，你用程序建立的影片剪辑，都会盖住里处于时间轴上的那些对象。不管这些对象在时间轴上是第几层，都会在程序建立的影片剪辑下面。所以，这两点就告诉我们，第一，如果你已经在一个深度上建立了一个影片剪辑，再建立下一个的时候，换个深度。比如，this.createEmptyMovieClip(“myMc”,1);this.createEmptyMovieClip(“myBtn”,1);这样的写法是错误的，第一个影片剪辑，myMc被覆盖了。正确的写法应该是这样的this.createEmptyMovieClip(“myMc”,1);this.createEmptyMovieClip(“myBtn”,2);或者this.createEmptyMovieClip(“myMc”, this.getNextHighestDepth();this.createEmptyMovieClip(“myBtn”, this.getNextHighestDepth();getNextHighestDepth()是获得上一深度的意思；以确保 Flash 将该影片剪辑呈现在当前影片剪辑中同一级和同一层上所有其它对象的前面。第二点，如果你在场景里，用工具建立了一个影片剪辑，或者从库里拖出来一个影片剪辑，放到场景里了，现在你想把它放到刚才你用createEmptyMovieClip建立的影片剪辑上面，默认的情况下不可能。你会看到，createEmptyMovieClip建立的影片剪辑把它给盖住了。好了，现在我们就学会了如何用程序建立一个影片剪辑。那边有同学说了，你建立了半天，但是我一发布，啥都没有，我建立这个空的影片剪辑有啥用呢？这个问题，我来回答，首先，大家都知道，flash的影片剪辑不仅仅是为了显示一个可见的东西，还有一个重要的作用，就是容器。影片剪辑可以作为放别的影片剪辑或者其他对象的容器。你可以把需要一起运动的很多东西，放到一个影片剪辑里，这样指挥它们运动的时候比较方便。就像你如果把一个苹果、一个梨、一个香蕉，从a处移动到b处，一种方法是把它们分别移动过去，还有一种方法，是放到一个篮子里，一起移过去。容器在这个动画里的作用，就是这个篮子。第二点，你现在之所以看不到你建立的影片剪辑，是因为你还没有对它进行任何操作。如果你真的非要看到它才放心，请把下面这段代码拷到你的程序下面。这段代码的作用是在myMc的影片剪辑里画了一个黑色的长方形，至于具体如何画的，我们以后会讲。愿意研究的人，可以先熟悉一下。with(this.myMc)beginFill(0x000000,100);moveTo(0,0);lineTo(200,0);lineTo(200,100);lineTo(0,100);lineTo(0,0);endFill();好了，现在发布一下，（不知道发布是什么的同学，请按enter+ctrl，就发布了）看到了吧？那边又有一位同学有意见了。你这么费劲，打了半天字，写了这么多行，才花了这样一个正方形，效率太低了，我用绘图工具，一比划，就出来了。比你快多了，不知道你写这么多行程序有什么用？首先，第一绘图工具在作矢量图型方面，的确比用代码生成更快。这也是flash的优势所在。第二、 代码生成并非没有用处，这个以后随着学习的深入，大家就逐渐明白了，这儿不废话了。二、从库中加载影片剪辑当然，既然flash在绘图方面有自己独到的优势，并且我们平时应用中经常将用ps或其他软件做好的图型直接导入flash的库中，供影片剪辑调用，如果flash as 仅仅为了代码化，就把这一优势扔掉，就是昏了头了。所以flash as里边，除了createEmptyMovieClip来建立影片剪辑以外，还有一种方法，可以直接把库中的影片剪辑加载到场景中来。我们先回忆一下，如果不用代码，直接把库里的元件放到场景里，怎么办？对，很简单。直接一拖，就过来了。用代码来实现应该怎么做呢？首先在库中找到你要加载的影片剪辑，用右键点击他，选“链接”，弹出一个小框。选中“为action script导出”，此时你可以看到，“在第一桢导出”同时也被选中了。在标识符框中，填入你为这个影片剪辑起的标识符。在这里建议影片剪辑的名称和标识符统一起来，比较便于管理。比如你的影片剪辑叫“myMc”，标示符最好也叫“myMc”，点击确定。然后返回主场景，选中第一祯，在动作面板里写入this.attachMovie(“myMc”,”myMc”, this.getNextHighestDepth();然后发布，看一下，你的影片剪辑是不是已经在场景里了？这儿解释一下这句命令，this.就不用说了，后面attachMovie就是把场景里标示符为myMc的影片剪辑，加载到库里，并命名为myMc，当然，你也可以不叫它myMc，而叫它aaa，这样，上面的那段话就变成this.attachMovie(“myMc”,”aaa”, this.getNextHighestDepth();你也可以把myMc从库中取出来两次，一次叫myMc，一次叫aaa，this.attachMovie(“myMc”,”myMc”, this.getNextHighestDepth();this.attachMovie(“myMc”,”aaa”, this.getNextHighestDepth();这样你下面写myMc就是指第一个，写aaa就是指第二个。说到这儿，又有同学有意见了，你这样作还是很麻烦，哪有我这边一拖，这么简单啊。的确，当你仅仅对一个影片剪辑执行这样的操作的时候，的确效率不高，但是，如果你需要把myMc这个影片剪辑从库中取出来100次甚至1000次的话，请问，这位同学，你拖来拖去的，是不是有点腰酸背痛腿抽筋呢。但是用代码来实现的话，一切都变得简单了for(i=0;i100;i+) this.attachMovie(“myMc”,”myMc”+i, this.getNextHighestDepth();看看，就这样三行代码，就完成了一百次，如果你想用1000次，直接把i100，改成i1000就OK了，从此腰不酸了，背不疼了，腿也不抽筋了。上面用到的就是程序里边最常用到的一种循环方式，for循环，没见过的同学可以先多看几眼，混个脸熟，以后，咱们还会详细介绍。如果你想把影片剪辑从库中取出来，让他横着排列，每隔50个像素放一个，for(i=0;i100;i+) this.attachMovie(“myMc”,”myMc”+i, this.getNextHighestDepth(),_x:(50*i);如果你想把影片剪辑从库中取出来，让他竖着排列，每隔50个像素放一个，for(i=0;i=200)delete this.onEnterFrame; 再次运行试一下，影片剪辑运动到200的位置停下来了。再次拿其他的属性来试一下吧。今天就说到这里，下次我们来研究一下缓冲效果，以及如何使用as实现更复杂的运动效果。有问题的可以到我的博客（/nethinks）或者加QQ群（46428099）进行交流。让运动更流畅、更优雅、更丰富雅酷互动flash as2简易教程第3篇现在大家应该都会使用AS程序让影片剪辑动起来了。但是你按照我教你的方法做来做去，一定做得很郁闷，为什么呢？别人的FLASH看起来又流畅，又优雅，又漂亮，动起来那个好看啊，可是我的FLASH为什么动起来直不楞登的，活像机器人呢？算了，算了，别郁闷了，我还是告诉你吧，虽然咱们现在已经学会了用程序使FLASH动起来，但这只是FLASH程序动画得罪最基础的皮毛而已，就像刚刚学会走路的小孩，你还指望他能跳芭蕾？要使动画能够流畅、优雅的动起来，你还得埋头苦学才成。优秀的FLASH动画中，影片剪辑的移动为什么看起来更流畅呢？因为它更符合生活中的运动规律，说白了两个字缓冲。想一想汽车是怎么停下来的，速度逐渐减慢，然后停下来。任何事物在改变运动状态的时候，都是逐渐加速或者逐渐减速的，所以，要想你的动画看起来好看，你必须让动画学会缓冲才行。先从减速运动开始。何谓匀速运动？何为减速运动？匀速运动，物理上来讲，就是单位时间内物体位移的值相等。而在flash里来说的话，就是每一帧里，影片剪辑的某一个属性值变化的幅度相等。拿上一次提到的代码来看：myMc._x=0;onEnterFrame=function()myMc._x += 1;可以看到，在每一帧里，影片剪辑的x轴坐标增加了1，如果你觉得他慢吞吞得很不来劲，可以把这个值改大点，比如说改成10，myMc._x=0;onEnterFrame=function()myMc._x += 10;运动速度果然快了很多，但是很抱歉，好像还是匀速的。所以，如果每帧中的数值保持不变，运动一定是匀速的。那么什么是减速运动呢？物理上来讲，就是单位时间内物体位移的值逐渐减小，最后变成零，物体就停下来了。所以，说到这里，冰雪聪明的你一定迫不及待的要举手发言了。对了，所谓减速运动，在flash里，实现的方法就是让这个值逐渐减小，最后变成零就行了。到了这里，我们可以隆重推出我们的减速运动的公式了，看仔细了如果你希望影片剪辑逐渐减速，到x轴坐标为500的时候停下来，那么，这样来写：myMc._x=0;onEnterFrame=function()myMc._x += (500-myMc._x)/10;看明白了吗？没看明白得让你的大脑充分转动起来，想一想(500-myMc._x)/10是如何越变越小的。-好了，到这儿你是不是想明白了？什么？还没有想明白，那就看下面的说明吧，想明白了的人，下面一段可以华丽的掠过了。(500-myMc._x)/10中，10这个数字是可以随便写的，只要是正整数就行，当然写不同的数值，缓动的效果不一样。好奇的同学可以自己试一下。我们来把循环分解，看一下这个值是如何逐步变小的。myMc._x的初始值是1，所以，第一次循环时，括号中的数字是500，500/10，得到50，然后把50赋给myMc._x，也就是说第一帧中，myMc向右侧移动了50个像素，同时在第二次循环开始时，变成了50，这样，括号里(500-myMc._x)的值就变成了450，450/10是45，依次计算下去，你会发现这个值逐渐减小了。所以，mc的运动速度就逐渐减慢了，直到它越来越接近目标点500，这个值就越来越小，最后无限趋近于零，运动就停下来了。这就是缓动的减速运动原理。用上这个东西以后，再去看看你的动画，是不是好看多了。其实加速运动是一样的，这里就不讲了，自己琢磨一下吧。当然，还有一个事情需要提醒一下，就是上次我们提到的，在onEnterFrame停止的时候，一定要记得清除掉循环，避免一直占用CPU资源。myMc._x=0;onEnterFrame=function()myMc._x += (500-myMc._x)/10;if(Math.abs(500-myMc._x)0.5)delete this.onEnterFrame;myMc._x=500;Math.abs是对括号里的数字取绝对值，因为500-myMc._x永远不可能达到零，所以，我们只能取一个极为接近0的数字，比如说0.5，基本上从视觉上已经看不出它的位置上差别。所以，这个时候我们把循环清除掉，并且直接赋值给myMc._x就可以了。这就是所谓的缓冲运动，当然在实际的flash里还有很多更复杂的运动形式，比如说钟摆式的运动，回弹运动等等，里边的有些运动方式，flash里提供一些现成的类可以方便地实现效果。关于这些缓动类的使用，我们下次再谈。懒人自有懒办法雅酷互动flash as2简易教程第4篇据说，这世界是由懒人创造的。因为实在懒得不愿走路，所以，我们发明了汽车，因为实在懒得不愿意提东西，所以我们发明了起重机；因为实在懒得不愿意计算，所以，才有了计算机，实在懒得不愿意写汇编语言，懒人才去发明了高级语言。因为实在懒得去想怎么做缓动，于是才有了对了，是flash as2的缓动类。以前咱们已经学过了如何自己通过onEnterFrame制造缓动效果，想必大家也都练习过。当你正练习得超有成就感，不亦乐乎的时候，一直在旁边崇拜得五体投地的路人甲同学说话了。你这做了些啥啊，费半天劲搞出来的效果也太没水准了吧，给俺做个回弹的效果让洒家欣赏欣赏。虽然你心里直打鼓，但是看见路人甲同学真诚的眼神，还是豪情万丈的上路了。哎，书到用时方恨少啊，谁让俺数学没学好呢，愣是用了九牛二虎之力，也没把这效果做出来。所以，这时候你就需要对了，专门为懒人准备的缓动类。下面我们来看一下如何利用这个好东西吧。说到类，有编程基础的人，首先想到的就是面向对象，没有编程基础的人，肯定一头雾水。因为本教程主要面对后者，所以先打一下气，其实，类这东西，虽然这次咱们是第一次隆重提到，但，你实际是一直在跟类打交道。不过你不知道而已。即使现在，您也不需要先了解什么是类，本节的任务就是告诉你怎么使用就行了。在flash as2.0里边，与缓动相关的有两个类，一个叫tween类，一个叫easing类。有了这两个东西，你就可以作出让路人甲佩服的动画了。使用这两个类之前，我们必须把它加载进来，在程序的第一行写下这两句话：/导入Tween类import mx.transitions.Tween;/导入easing类import mx.transitions.easing.*;这样你的程序运行的时候，这两个类就被加载进来。import 是导入类的意思。而后面这段mx.transitions.则是这个类存放的路径。告诉flash到哪里可以找到这两个类，因为他们是随flash一起安装到你的电脑中的，所以，这个路径是固定的。当然，你也可以不写这两句话，但是我建议你写，因为不写的话，你每次提到他们的时候，就必须把他们前面的那一串路经写上。比如下面这样：someTweenID=new mx.transitions.Tween()但是有了这两句话，你就简单了someTweenID= new Tween()这就像你跟你mm聊天，提到路人甲，你mm肯定很困惑的问，是哪个路人甲啊？所以你必须说，是那个我看着超级不爽的路人甲。但是如果你一开始就告诉MM，我现在想和你聊一下那个让我不爽的路人甲，以后每次提到他的时候，就不用那么麻烦了，直接叫他小甲就行了。好了，废话又多了。现在咱们先来看看第一个类怎么使用。someTweenID = new Tween(object, property,function,begin,end,duration,useSeconds)先解释一下里边一些参数的意义。object：是指tween的对象，也就是目标。property：字符串，也就是说你在用的时候，要把他们用引号引起来，这个是指你要应用效果的属性，比如“_x”、“_y”等。function：easing缓动类型。（看不懂待会解释）begin：数值，对象的初始值，也就是缓动一开始的值。end：数值，缓动结束的值。duration：缓动时间。useSeconds：是一个布尔值，决定是用秒还是用帧数表示缓动时间。true表示使用秒，false用帧数。看到这里你就知道，tween类主要就是控制操作谁、控制什么、多长时间的问题。至于以何种方式缓动，则是另外一个类的工作：easing下面我们把easing类拖出来示众。Back：在一个或两个结束点过渡范围之外的扩展动画，类似于溢出效果Bounce：在一个或两个结束点过渡范围内加入回弹效果，回弹的多少取决于运动过程的时间，长的时间回弹的次数就相对多Elastic：发生在一个或两个结束点过渡范围外的弹性效果，弹性的力度不熟运动过程时间的影响Reguler：在一个或两个结束点上加入减速效果，这个特性可以帮你做出加速后减速的效果Strong：在一个或两个结束点上加入减速效果，这个效果类似于regular，不同的在于比较明显None：在开始点到结束点加入匀速运动，没有效果。如果你看不明白上面的这段说明，也不要着急，继续往下看。以上提到的是六种效果，而这六种效果，又包含三种过渡方式easeIn：在过渡的开始产生效果，就是说运动一开始出现这种效果。easeOut：在过渡的结束产生效果，运动要结束的时候出现这种效果。easeInOut：在开始和结束均产生效果。好了，说半天都没用，咱们还是上场试一下吧。如果前面的你都看不懂，上场试一下你就明白了。在库中建立一个影片剪辑。然后在场景中把它加载进来。this.attachMovie(myMc, myMc, this.getNextHighestDepth(), _x:20, _y:100);看不懂这句话的，回去看本教程第一篇。然后我们使用tween类来做缓动效果myBall = new Tween(myMc, _x, Elastic.easeOut, 0, 300, 3, true);现在我们在解释一下上面这段代码，myMc不用说了，因为你是想让myMc产生缓动效果，所以，这个地方是myMc，_x，通过改变x轴的属性值，来实现缓动的效果，当然，出来_x周以外，咱们以前提到的那些影片剪辑的属性，都可以拿来用，你有时间的话，就分别把它们拎出来试一下吧。Elastic.easeOut，这个地方看到了吧？用的就是我们刚才提到的easing类， Elastic缓动效果，easeOut过渡方式，他们两个和起来的意思，就是让myMc在运动结束时产生回弹效果。20，影片剪辑从20开始运动，300，影片剪辑最后停在300的位置上，2，时间是2，true，表示计