您的位置首页百科问答

AS3基础教程-第31课-影片剪辑(下)

AS3基础教程-第31课-影片剪辑(下)

的有关信息介绍如下:

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