免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享

第一课:初识ActionScript2

本文来自:★flash之路-flash技术交流★ 转帖请注明出处! 作者:网雨霏霏 您是第288个浏览者

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本教程章节较多,乃是本人糅合了网络作品和自己的使用心得所创作

【友情提示】
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


附件: 您需要登录才可以下载或查看附件。没有帐号?注册

获得 小穷神卡 一张

卡片说明:网雨霏霏不小心破坏了公物,被警察叔叔扣掉3金币

卡片效果:-3

TOP

【Ⅲ、教程开始喽】
一、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,我们可以随心所欲的在任意地方【帧、按钮、影片剪辑】写代码,但是,为了后期维护的便利,请大家一定不要掉以轻心,务必将按钮、影片剪辑等元件分层放置,务必将写在帧上的代码的帧单独放入一个图层内

附件: 您需要登录才可以下载或查看附件。没有帐号?注册

TOP

三、最简单的AS:
我们在第一帧上加AS代码:
trace("编程很简单啊");
trace()这个语句的作用是:flash在运行时,将括号中的内容显示出来【只在测试时显示,如果发布成swf动画就看不见】
注意大小写;每一行语句的最后面跟着分号(也可以不跟)。
按Ctrl+Enter键测试影片,你会看到一个输出窗口,里面有"编程很简单啊"几个字。


附件: 您需要登录才可以下载或查看附件。没有帐号?注册

TOP

四、动作面板详谈:

现在我们回到动作面板,对它进行更进一步的认识:

1、我们看到trace是蓝色的。

是的,ActionScript内部的词汇【称之为关键字】在编程环境中都会以蓝色表示。

当你在输入代码时,如果输入ActionScript关键字时不是蓝色的,那么说明你输错了,你应该马上检查,是否有哪个字母输错了(注意大小写问题)。

2、现在问题出现了:那么多的代码,记不住啊,编程好难哦。

确实如此,不过flash拥有超级强悍的代码提示功能。你无需记住关键字的完整拼写,你只要记得关键字的摸样就可以方便的调出来使用。不过我建议大家安装金山词霸软件。每碰到一个关键字,就将该关键字的发音查阅一下,学会了发音,有助于更快、更持久的记住该关键字。

3、关于动作面板上那些按钮的功能,这里暂且不提。我们会在后续文章中一一讲述。

TOP

五、最常见的一种操作:

通常在ActionScript编程时,我们可能会习惯将代码写在影片剪辑、按钮元件上。这就必须要事件驱动,它的格式是:

on(事件名称){

要执行的语句

}

现在我们来试一试,在动作面板中输入      

on(

这时你会发现弹出了一个窗口,将所有事件列了出来。




比如说,我要使用release命令,只需要输入r,就会自动跳转到这一条命令上,此时只需敲一下回车键,事件就会自动补写完整。是不是很方便?

附件: 您需要登录才可以下载或查看附件。没有帐号?注册

TOP

六、编程的准备工作--命名
多数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轴就是竖着的。我们看一下下面的图示:

说明:上图是在主场景舞台上的情况。如果是在影片剪辑中,那么,坐标原点不再是左上角了(影片剪辑是可以无限延伸的,不可能找出个“左上角”),而是在舞台的中央(有个小小的十字)。【影片剪辑的坐标关系跟数学课中的平面直角坐标系是一样一样的。】
附件: 您需要登录才可以下载或查看附件。没有帐号?注册

获得 花仙子卡 一张

卡片说明:网雨霏霏帮助迷路的小朋友找到家长,家长为表达谢意,付出了6威望

卡片效果:+6

TOP

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值越大
附件: 您需要登录才可以下载或查看附件。没有帐号?注册

获得 小穷神卡 一张

卡片说明:网雨霏霏不小心划破了手指,看大夫,花费了3金币

卡片效果:-3

TOP

【三、补充说明】
上面我用的是“形状”【属性面板内最上面标注着】对象来说明的。如果“形状”被转换成了元件(包括影片剪辑元件、按钮元件和图形元件),那么进入元件内部后,我们会发现属性面板内的坐标值发生了改变,这就是元件内部的坐标。
1、现在我们将舞台上的矩形用选择工具单击选中,按F8键,会弹出下图的对话框:

2、在“类型”里选择“影片剪辑”(其他两种的情况完全一样,不再赘述)
3、“对齐:”这里很重要
共有九个点,默认选择的是第三行第二列的点。这个被选中的点就是元件内部的坐标系原点!
看到这里,有的盆友可能会想到,元件内部会有9个坐标系原点么?那么元件内部对象的xy值是相对于哪一个原点来说的呢?
答案是:元件内部的原点仅有一个。之所以出现9个点的原因是这个矩形形状对象的对齐方式。呵呵

,看不懂吧,别急,接着往下看你就懂了
4、我们一切按照默认的设置,直接点“确定”,画面变成下图:

大家可以回到主场景下再分别绘制8个矩形,然后重复上述步骤,将“对齐”的点选择另外8个,依次看一下,就会发现规律。这里不再赘述
5、使用选择工具在4的基础上直接双击舞台上的矩形(现在不再是“形状”,而是“影片剪辑”了)

,就又会看到十字架。这个十字架就是元件内部的原点

由图示可知,元件内部的坐标系和主场景内的坐标系,在本质上都是一样的。唯一的区别就是坐标系的原点位置不同。主场景的舞台位置是固定的,于是选择了舞台左上角为原点;但是元件内部其实是一个无限大的二维空间(上图感受不出来),我们使用下面的手段即可验证该结论:
6、打开库面板,双击“元件 1”前面的图标【不能双击“元件 1”这三个字,囧】


此时,你再看舞台,就再也找不到刚才的舞台了,整个舞台是无限大的
因此,flash就在元件内部加入了十字架来代表原点。由于舞台无限大,这个十字架的位置说白了,放在哪里都是一样的。所以,十字架的本质是一个相对的概念,其位置是受放入内部的第一个对象的位置所影响的【在转换成元件的时候“对齐”那里】。(⊙o⊙)…真尼玛的难表述,这里只能意会了,本人表述能力有限,囧。
一旦对象被加入了元件内部,原点的位置就固定不变了。所以,原点仅此一个。
7、如此一来,在转换成元件的时候“对齐”那里选择的九个点,其实就是这个对象与原点的位置。

我们可以用选择工具移动元件内部的对象的位置,来改变这个“对齐”
附件: 您需要登录才可以下载或查看附件。没有帐号?注册

TOP

他[她]看完这篇文章说:

(来自快速回帖模式)

TOP

 

B Color Image Link Quote Code Smilies
高级模式 | 发新话题

您需要登录后才可以回帖 登录|立即注册

本站已经运行:
快速
返回顶部
返回首页