本教程章节较多,乃是本人糅合了网络作品和自己的使用心得所创作
【友情提示】 AS2已经严重过时,不推荐新手学习。不过,网络上有很大一部分flash作品都是AS2的,所以,AS2还是有一定的读者群的。 【前方预警】 本教程综合性太强,并不很适合新手观看。建议有一定的经验的读者品读。 当然,新手也可以观看,只不过,阅读过程会超级郁闷!要耐住性子逐句阅读,同时打开flashIDE认真对照着步骤手动操作 学习编程最忌讳一点:代码直接复制、粘贴! 请一定要手动敲出来,否则你永远也学不会!
| |||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||
第一课:初识ActionScript
【Ⅰ、ActionScript简介】 flash动画除了体积小巧之外,最大的特色是可以跟观众进行交互,而交互是基于代码的支持的。 flash软件的代码,又称脚本(ActionScript,简称AS),经过几年的更新发展,已经有三个版本的AS:AS1;AS2;AS3 前两个版本的AS可以用flash8软件完美实现;后一个版本的AS只能通过flashCS3或者高于flashCS3的软件才能实现。 【Ⅱ、本教程使用的flash软件版本】 因为可以创建AS2文件的flash软件有N种(flashMX2004、flash8 、flashCS3 、flashCS4 、flashCS5 、flashCS5.5 、flashCS6),理论上使用其中任意一款都可以学习本教程。但是,本人特别推荐大家选择(flashCS5、flashCS5.5 、flashCS6)三者中的任意一款【本人教程用的是CS5.5版本】,原因是,从CS5开始,flash软件增强了代码提示功能,你只要记住单词的模样(无须记住整个单词的完整拼写)即可流畅的编程。而CS5以前的版本虽然也有代码提示的功能,但是并不强大,好多地方都要自己手打(你必须记住整个完整的单词,用键盘敲出来)! 因此,请大家务必用flashCS5.5软件来学习本教程 【友情提示】 flashCS5.5可以创建AS2和AS3的文档,学习本教程的时候,请务必建立AS2的,方法是: 单击菜单栏的文件---新建 ,在弹出的对话框内选择 ActionScript2.0 | |
【Ⅲ、教程开始喽】
一、AS代码应当写在何处 在flash创作环境中,我们的AS代码写在"动作"面板中: 下载 (93.03 KB) 2016-4-22 12:03 二、AS的作用对象: 动作面板,是与舞台上可以添加动作的对象相关联的。在ActionScript2.0中可以添加动作的对象有三种:关键帧、影片剪辑元件、按钮元件。 也就是说,我们可以在这三个对象的动作面板中编写AS代码: 1、关键帧(包括空白关键帧): 新建一个文档后,第一帧默认被选择 是一种空白关键帧(可以加AS代码)。如果在15帧上插入帧,这个15帧就是一种空白帧(无法加AS代码)。 单击第一帧,在画布中任意绘制一个图形,就会发现第一帧的图标变成实心圆,说明此时第一帧已经变成了关键帧(可以加AS代码): 无论是空白关键帧还是关键帧,只要选中该帧,按F9键就能直接打开动作面板往里面添加AS代码啦。 2、影片剪辑元件、按钮元件: 这两类元件加代码的方式如出一辙,都是单击后按F9键加。 小知识:因为AS2可以写在任意的按钮或者影片剪辑上,而这两种对象可以放在舞台的任意位置。这就出现了一个问题:后期的维护变得超级艰难---你要来回往返于数十个甚至上百个影片剪辑之间,还要认真的在舞台上找这两种对象。对于大型的flash项目,这简直是一场噩梦。 因此,AS3就规定了,代码只能写在帧上,不得写在按钮或影片剪辑上 但是本教程讨论的是AS2,我们可以随心所欲的在任意地方【帧、按钮、影片剪辑】写代码,但是,为了后期维护的便利,请大家一定不要掉以轻心,务必将按钮、影片剪辑等元件分层放置,务必将写在帧上的代码的帧单独放入一个图层内 | |
四、动作面板详谈: 现在我们回到动作面板,对它进行更进一步的认识: 1、我们看到trace是蓝色的。 是的,ActionScript内部的词汇【称之为关键字】在编程环境中都会以蓝色表示。 当你在输入代码时,如果输入ActionScript关键字时不是蓝色的,那么说明你输错了,你应该马上检查,是否有哪个字母输错了(注意大小写问题)。 2、现在问题出现了:那么多的代码,记不住啊,编程好难哦。 确实如此,不过flash拥有超级强悍的代码提示功能。你无需记住关键字的完整拼写,你只要记得关键字的摸样就可以方便的调出来使用。不过我建议大家安装金山词霸软件。每碰到一个关键字,就将该关键字的发音查阅一下,学会了发音,有助于更快、更持久的记住该关键字。 3、关于动作面板上那些按钮的功能,这里暂且不提。我们会在后续文章中一一讲述。 | |
六、编程的准备工作--命名
多数ActionScript代码都是对影片剪辑、按钮元件、文本框等对象进行操作。这需要事先在属性面板中为它们命名。现在介绍Flash推荐的命名方式: 影片剪辑元件的命名以_mc结尾,如my_mc ;按钮元件则是以_btn结尾;文本框则是以_txt结尾 当然你完全可以不理采这些约定,随心所欲地为他们命名。我们遵守这些约定,会对编程有极大的帮助。现在来试试看: 1、在舞台上画一个简单的长方形,并使用“选择工具"选中它,按F8键转换为影片剪辑元件,打开属性面板,为它取名为a_mc 2、在时间轴的第一帧按F9键打开动作面板,输入a_mc后面紧跟着一个. 这时会弹出一个列表窗口,需要的指令都在里面,并且按英文字母顺序排列,如果你能记住所需指令的前几个字母,你不妨直接输入,这时你会发现,很快就定位到了你所需要的指令,此时只要在指令上双击或者敲回车键就可以瞬间将指令打在代码区。 现在,我们把元件的名称改为a,不以_mc结尾。再到动作面板中输入a.结果什么也没有发生。后面的指令只有自己输了(或者到左边窗口中去选)。按钮元件和文本框也是相同的,大家可以试一下。 上面我们接触了点,现在给解释一下: 点是一种符号,一种运算的符号(运算符)。点的两边连接着两个对象。其左边的对象就是影片剪辑;其右边的对象就是该影片剪辑的某一个属性。举例说明: 如果你要将名为a_mc的影片剪辑元件通过AS代码更改它在舞台上的位置,就可以输入下面的代码: a_mc._x=355 _x指的就是影片剪辑的一个属性。一个横坐标值。学过初中数学的你当然知道,互相垂直的两个数轴在一个平面上就组成一个平面直角坐标系。坐标系有原点。Flash中的原点在舞台的左上角。x轴就是横着的,y轴就是竖着的。我们看一下下面的图示: 说明:上图是在主场景舞台上的情况。如果是在影片剪辑中,那么,坐标原点不再是左上角了(影片剪辑是可以无限延伸的,不可能找出个“左上角”),而是在舞台的中央(有个小小的十字)。【影片剪辑的坐标关系跟数学课中的平面直角坐标系是一样一样的。】 | |
flash的坐标系详解
【一、前期设置】 我们在舞台上做如下设计: 1、用矩形工具,在舞台上绘制一个无边框的矩形 2、用选择工具单击该矩形,看其属性面板 【二、具体讲解】 在属性面板内给出了这个矩形的很多参数。本节课我们只研究“位置和大小”内的X:和Y: 在冒号后面跟着的数字 就是该矩形的x坐标和y坐标。这两个坐标是用来定位的。 1、数学课内的坐标回顾: 就和我们在数学课上学习的坐标系一个道理。在平面直角坐标系(以下简称坐标系)内,任何一个点 都具备x坐标(横坐标)和y坐标(纵坐标)。求取某一个点的横纵坐标的方法是: 过该点引x轴(或y轴)的垂线,垂足在x轴(或y轴)上。垂足和原点之间的距离就是x坐标(或y坐标) 2、flash内的坐标 跟数学课上的道理完全一样,flash软件舞台上也存在着坐标系。因为flash是一种二维动画制作软件,所以,flash的坐标系就是平面直角坐标系 【题外话】:从flashCS4之后,如果你建立AS3的文档,flash还可以模拟三维效果,此时的坐标系就会多出一个轴--z轴。 不过,flash的三维是假三维,与3DsMax创作的真三维有着本质的区别。而且,只有{影片剪辑元件和TLF文本}才拥有三维坐标系(图示的是影片剪辑的)。而且,一旦转成三维坐标系,在属性面板内是通过调节“3D定位和查看”来更改xyz数据的(用鼠标在 舞台上直接拖动也可以调节三维坐标,囧),“位置和大小”处于只读状态。 看到了这里,想必你很鸡冻吧,是滴,AS3不仅在编程功能上更强劲,在flash创作上也有着天翻地覆的新特性,是AS2的文件不具备的。 言归正传,我们来看图一: ①坐标系的原点 在flash主场景内,坐标系的原点位于整个舞台的左上角【在元件内部却又不同,文章后面会详解】 ②横轴和纵轴 xy轴的位置与数学课上的也一样,但是,y轴的方向与数学课内的完全相反: 数学课上,y轴是越向上,数字越大;但是flash的y轴是越向下,数字越大! 之所以这样设置,是为了让位于舞台内的元件的坐标都是正值 ③对象的x、y坐标 众所周知,只有点才具有x、y坐标(以下简称为xy值),但是flash内研究点的情况比较少,多数情况下要研究面。比如本例的矩形。那么,这个矩形的属性面板内的xy值(x坐标和y坐标分别是 60和49)是哪一个点的坐标值呢? 答案是矩形对象左上角的那个点。 因此,属性面板的X:60是如下计算出来滴: 矩形左上角的这个点,向x轴引垂线,垂足与坐标系原点之间的距离等于60个像素 同理,属性面板的Y:49是如下计算出来滴: 矩形左上角的这个点,向y轴引垂线,垂足与坐标系原点之间的距离等于49个像素 这是标准的换算方式,其实我们可以想的更简单一些,看我在图上做的辅助线: x值可以如下求出: 矩形左上角的这个点,向y轴引垂线,垂线的长度就是60个像素 同理,y值可以如下求出: 矩形左上角的这个点,向x轴引垂线,垂线的长度就是49个像素 由求解过程可知,矩形对象越向右,x值越大;越向下,y值越大 | |
【三、补充说明】
上面我用的是“形状”【属性面板内最上面标注着】对象来说明的。如果“形状”被转换成了元件(包括影片剪辑元件、按钮元件和图形元件),那么进入元件内部后,我们会发现属性面板内的坐标值发生了改变,这就是元件内部的坐标。 1、现在我们将舞台上的矩形用选择工具单击选中,按F8键,会弹出下图的对话框: 2、在“类型”里选择“影片剪辑”(其他两种的情况完全一样,不再赘述) 3、“对齐:”这里很重要 共有九个点,默认选择的是第三行第二列的点。这个被选中的点就是元件内部的坐标系原点! 看到这里,有的盆友可能会想到,元件内部会有9个坐标系原点么?那么元件内部对象的xy值是相对于哪一个原点来说的呢? 答案是:元件内部的原点仅有一个。之所以出现9个点的原因是这个矩形形状对象的对齐方式。呵呵 ,看不懂吧,别急,接着往下看你就懂了 4、我们一切按照默认的设置,直接点“确定”,画面变成下图: 大家可以回到主场景下再分别绘制8个矩形,然后重复上述步骤,将“对齐”的点选择另外8个,依次看一下,就会发现规律。这里不再赘述 5、使用选择工具在4的基础上直接双击舞台上的矩形(现在不再是“形状”,而是“影片剪辑”了) ,就又会看到十字架。这个十字架就是元件内部的原点 由图示可知,元件内部的坐标系和主场景内的坐标系,在本质上都是一样的。唯一的区别就是坐标系的原点位置不同。主场景的舞台位置是固定的,于是选择了舞台左上角为原点;但是元件内部其实是一个无限大的二维空间(上图感受不出来),我们使用下面的手段即可验证该结论: 6、打开库面板,双击“元件 1”前面的图标【不能双击“元件 1”这三个字,囧】 此时,你再看舞台,就再也找不到刚才的舞台了,整个舞台是无限大的 因此,flash就在元件内部加入了十字架来代表原点。由于舞台无限大,这个十字架的位置说白了,放在哪里都是一样的。所以,十字架的本质是一个相对的概念,其位置是受放入内部的第一个对象的位置所影响的【在转换成元件的时候“对齐”那里】。(⊙o⊙)…真尼玛的难表述,这里只能意会了,本人表述能力有限,囧。 一旦对象被加入了元件内部,原点的位置就固定不变了。所以,原点仅此一个。 7、如此一来,在转换成元件的时候“对齐”那里选择的九个点,其实就是这个对象与原点的位置。 我们可以用选择工具移动元件内部的对象的位置,来改变这个“对齐” | |