AS3基础教程-第31课-影片剪辑(下)
的有关信息介绍如下:本节课介绍 如何加载库内的影片剪辑。牵扯到的知识点如下:
载入库内的影片剪辑、将对象显示在舞台上、显示对象(本文的是MovieClip类)的常用属性介绍、删除显示对象的方法、stage舞台的单击操作。
请大家打开flashCS6软件,新建AS3的flash文档
使用矩形工具内的 多角星形工具,在属性面板内,设置为五角星,如下图所示,在舞台上绘制一个五角星,去掉其边框色,只保留填充色
用选择工具单击这个五角星,在属性面板内,将宽度直接修改为60
在这里,我们制作了一个比较小的五角星。
接下来,将其转换为影片剪辑元件,一切按照默认值设置,直接单击 确定
库面板内会生成一个 元件1
在库面板内的 AS链接处,双击鼠标,发现可以输入,输入mystar见下图
后,敲一下回车。
这是本例的关键所在。接下来,要在代码中用到这个AS链接
选中主场景内的 元件1 ,按Delete键删除。
如此一来,舞台上完全空白!只有库内有一个 已经设定好了 AS链接 的影片剪辑元件,且其AS链接的名字是 mystar
我们想使用代码来将库内的元件加载到舞台上,并显示出来。
加载的代码如下:
var star:MovieClip=new mystar()
在这里,我定义了一个名为star的变量,其数据类型是MovieClip类,
而mystar就是我们在步骤一内,在库面板内定义好的AS链接的名字,mystar相当于一个自定义的类,这个类的 基类 是MovieClip类
我们可以在库面板内,右键单击元件1,选择属性,在弹出的对话框内,单击“高级”,会出现下图。从而辅助我们判断mystar类和MovieClip类的关系。
加载的代码,还可以这样写:
var star:mystar=new mystar()
但我不推荐,因为步骤1内的写法可以让我们清晰的知道,生成的这个对象的类型是MovieClip类
测试影片后,没有出现这个影片剪辑,原因是,AS3内,必须使用addChild()方法来显示对象。使用该方法的格式是
addChild(对象)
故此,显示影片剪辑的代码如下:
addChild(star)
则,本例的完整代码如下:
import flash.display.MovieClip;//该行是flashCS6自动生成的
//在时间轴上写代码,该行可以去掉
//在外部类内写代码,该行必须有,否则报错!
var star:MovieClip=new mystar()
addChild(star)
测试影片,发现五角星位于舞台的左上角。
我们可以用代码修改其位置。
也就是其xy坐标。
坐标系的讲解在第2课。
这里直接给出代码:
star.x=200
star.y=80
将文件保存一下,文件名为31.fla
将31.fla文件复制一个,重命名为31_pro.fla,打开它。
我们在其基础上,实现下面的目标:
从库内加载多个影片剪辑,并随机显示在舞台上,并随机更改其宽高。
这里用到了 修改宽高的命令,这是MovieClip类的一个属性,
宽度是width 高度是height
完整的代码如下:
for(var i:uint;i<20;i++){
var star:MovieClip=new mystar()
addChild(star)
star.x=120+Math.random()*200
star.y=80+Math.random()*230
star.width=star.height=10+Math.random()*20
}
通过一个for循环,生成20个五角星
通过随机函数,将五角星的位置随机摆放:
其x坐标一定大于120 ,且小于320
其y坐标一定大于80 ,且小于 310
每次 测试影片,看到的画面都不同。这就是AS的魅力,可以在“运行时”看到并不固定的画面。
现在,我们可以将代码继续扩展一下:不要每次都要重新测试影片看到不同的效果,而是每次单击舞台的任意位置就能看到不同的效果
将31_pro.fla复制一个,重命名为31_2.fla
代码修改为:
stage.addEventListener(MouseEvent.CLICK,dj)
function dj(e:MouseEvent){
tianjia()//调用一次添加对象的函数
}
tianjia()//一打开flash就添加20个对象
function tianjia(){
for(var i:uint;i<20;i++){
var star:MovieClip=new mystar()
addChild(star)
star.x=120+Math.random()*200
star.y=80+Math.random()*230
star.width=star.height=10+Math.random()*20
}
}
代码说明:
<1>stage代表的是舞台,给舞台添加单击鼠标命令,与按钮和影片剪辑的鼠标单击命令一模一样
<2>将添加对象的代码抽离出来,命名为tianjia(),因为这段代码需要重复使用两次【第一次是在一打开小程序的时候调用;第二次是单击舞台时调用】
测试影片,实现了我们的目的,但是!每单击一次舞台,都会生成20个新的五角星,如此重重叠叠的,显然不是我们所需要的。故此,代码还需修改
<1>我们可以新增一个 容器,用于存放五角星,然后将这个容器显示在舞台上。代码如下:
var rq:MovieClip=new MovieClip()//定义一个容器,存储所有的五角星
addChild(rq)//将这个容器添加到舞台
<2>每次单击舞台的时候,先清除掉容器内的所有的显示对象,然后再调用tianjia()函数生成20个新的五角星。在这里我们使用while循环,其书写格式是:
while(条件){
运行命令
}
只要条件的返回值是true,就会执行大括号内的命令,直到条件的返回值是false
while循环和for循环的不同点是:
for循环可以精确地控制循环的次数,但是while可以在不知道循环次数的前提下进行循环。
代码如下:
while(rq.numChildren>0){
rq.removeChildAt(0)
这里用到了 容器的一个numChildren属性,其返回值是容器内显示对象的个数
还用到了容器的removeChildAt(参数)方法,用于移除参数位置的显示对象。
然后,修改后的完整代码如下
var rq:MovieClip=new MovieClip()//定义一个容器,存储所有的五角星
addChild(rq)//将这个容器添加到舞台
stage.addEventListener(MouseEvent.CLICK,dj)
function dj(e:MouseEvent){
//下面三行代码用于删除容器内的所有显示对象
while(rq.numChildren>0){
rq.removeChildAt(0)
}
tianjia()//调用一次添加对象的函数
}
tianjia()//一打开flash就添加20个对象
function tianjia(){
for(var i:uint;i<20;i++){
var star:MovieClip=new mystar()
rq.addChild(star)
star.x=120+Math.random()*200
star.y=80+Math.random()*230
star.width=star.height=10+Math.random()*20
}
}
还可以继续补充代码,让五角星能随机的旋转!
这需要用到显示对象的rotation属性,其值为度数
我们在star.width=star.height=10+Math.random()*20
后面添加如下的代码:
star.rotation=Math.random()*360