当前位置: 首页 > 图文教程 > Flash动画 > ActionScript > Flash AS2教程:影片剪辑

ActionScript
FLASH AS3与网页JS参数值传递的问题
Flash AS3的parameters对象处理网页参数
Flash教程 认识Flash ActionScript的环境
Flash ActionScript编程基础
Flash AS3代码实现鼠标跟随喷枪涂鸦效果
falsh 跨域调用配置
Flash AS3.0 实例教程 喷泉动画特效
AS3 Loader与URLLoader的比较
ColorTransform类调整显示对象的颜色值
Flash AS3 快速制作烟雾动画
Flash AS3 制作文字飞出动画
ActionScript 学习小心得
ActionScript3.0读取网页FlashVars中的参数的问题
通过实例学习AS3.0:案例三
通过实例学习Flash AS3.0:案例四
通过实例学习Flash AS3.0:案例五
通过实例学习Flash AS3.0:案例六
Flash教程:认识Flash ActionScript的环境
Flash as入门(1):认识AS面板
Flash as入门(3):AS基本语法

ActionScript 中的 Flash AS2教程:影片剪辑


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-30   浏览: 68 ::
收藏到网摘: n/a

 上一篇教程出来以后,很多网友留言,问我为什么不直接讲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;i<100;i++)
{ this.attachMovie(“myMc”,”myMc”+i, this.getNextHighestDepth());
}

看看,就这样三行代码,就完成了一百次,如果你想用1000次,直接把i<100,改成i<1000就OK了,从此腰不酸了,背不疼了,腿也不抽筋了。

上面用到的就是程序里边最常用到的一种循环方式,for循环,没见过的同学可以先多看几眼,混个脸熟,以后,咱们还会详细介绍。

如果你想把影片剪辑从库中取出来,让他横着排列,每隔50个像素放一个,

for(i=0;i<100;i++)
{ this.attachMovie(“myMc”,”myMc”+i, this.getNextHighestDepth(),{_x:50*i)});
}

如果你想把影片剪辑从库中取出来,让他竖着排列,每隔50个像素放一个,


for(i=0;i<100;i++)
{ this.attachMovie(“myMc”,”myMc”+i, this.getNextHighestDepth(),{_y:50*i)});
}

看一看,程序实现起来是不是很简单呢?这节课就先讲到这里吧,下节课我们将介绍影片剪辑的常用属性,以及如何利用这些属性,使影片剪辑真正的动起来。

这节课最后这些内容,没有看懂的同学,下节课继续看,到时候一定会豁然开朗。

因为刚刚开始讲,很多都是基本规则,回头一看,废话又很多。不过以后,随着深入,相信真正的干货会越来越多的。