手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

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

时间:2024-10-15 23:50:07

本节课介绍 如何加载库内的影片剪辑。牵扯到的知识点如下:载入库内的影片剪辑、将对象显示在舞台上、显示对象(本文的是MovieClip类)的常用属性介绍、删除显示对象的方法、stage舞台的单击操作。请大家打开flashCS6软件,新建AS3的flash文档

工具/原料

flashCS6

一、界面设计:

1、使用矩形工具内的 多角星形工具,在属性面板内,设置为五角星,如下图所示,在舞台上绘制一个五角星,去掉其边框色,只保留填充色

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

2、用选择工具单击这个五角星,在属性面板内,将宽度直接修改为60

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

3、在这里,我们制作了一个比较小的五角星。接下来,将其转换为影片剪辑元件,一切按照默认值设置,直接单击 确定库面板内会生成一个 元件1在库面板内的 AS链接处,双击鼠标,发现可以输入,输入mystar见下图后,敲一下回车。这是本例的关键所在。接下来,要在代码中用到这个AS链接

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

4、选中主场景内的 元件1 ,按Delete键删除。如此一来,舞台上完全空白!只有库内有一个 已经设定好了 AS链接 的影片剪辑元件,且其AS链接的名字是 mystar

二、代码编写:

1、我们想使用代码来将库内的元件加载到舞台上,并显示出来。加载的代码如下:var star:MovieClip=new mystar()在这里,我定义了一个名为star的变量,其数据类型是MovieClip类,而mystar就是我们在步骤一内,在库面板内定义好的AS链接的名字,mystar相当于一个自定义的类,这个类的 基类 是MovieClip类

2、我们可以在库面板内,右键单击元件1,选择属性,在弹出的对话框内,单击“高级”,会出现下图。从而辅助我们判断mystar类和MovieClip类的关系。

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

3、加载的代码,还可以这样写:var star:mystar=new mystar()但我不推荐,因为步骤1内的写法可以让我们清晰的知道,生成的这个对象的类型是MovieClip类

4、测试影片后,没有出现这个影片剪辑,原因是,AS3内,必须使用addChild()方法来显示对象。使用该方法的格式是addChild(对象)故此,显示影片剪辑的代码如下:addChild(star)

5、则,本例的完整代码如下:import flash.display.MovieClip;//该行是flashCS6自动生成的//在时间轴上写代码,该行可以去掉//在外部类内写代码,该行必须有,否则报错!var star:MovieClip=new mystar()addChild(star)

6、测试影片,发现五角星位于舞台的左上角。我们可以用代码修改其位置。也就是其xy坐标。坐标系的讲解在第2课。这里直接给出代码:star.x=200star.y=80

7、将文件保存一下,文件名为31.fla

三、扩展:

1、将31.fla文件复制一个,重命名为31_pro.fla,打开它。我们在其基础上,实现下面的目标:从库内加载多个影片剪辑,并随机显示在舞台上,并随机更改其宽高。这里用到了 修改宽高的命令,这是MovieClip类的一个属性,宽度是width 高度是height

2、完整的代码如下:for(var i:uint;i<20;i++){var star:Movie潮贾篡绐Clip=new mystar()addChild(star)star.x=120+Math.random()*200star.y=80+Math.random()*230star.width=star.height=10+Math.random()*20}通过一个for循环,生成20个五角星通过随机函数,将五角星的位置随机摆放:其x坐标一定大于120 ,且小于320其y坐标一定大于80 ,且小于 310

3、每次 测试影片,看到的画面都不同。这就是AS的魅力,可以在“运行时”看到并不固定的画面。现在,我们可以将代码继续扩展一下:不要每次都要重新测试影片看到不同的效果,而是每次单击舞台的任意位置就能看到不同的效果

4、将31_pro.fla复制一个,重命名为31_2.fla代码修改为:stage.addEventListener(MouseEvent.CLICK,dj)function dj(e:Mous髫潋啜缅eEvent){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()*200star.y=80+Math.random()*230star.width=star.height=10+Math.random()*20}}代码说明:<1>stage代表的是舞台,给舞台添加单击鼠标命令,与按钮和影片剪辑的鼠标单击命令一模一样<2>将添加对象的代码抽离出来,命名为tianjia(),因为这段代码需要重复使用两次【第一次是在一打开小程序的时候调用;第二次是单击舞台时调用】测试影片,实现了我们的目的,但是!每单击一次舞台,都会生成20个新的五角星,如此重重叠叠的,显然不是我们所需要的。故此,代码还需修改

5、<1>我们可以新增一个 容器,用于存放五角星,然后将这个容器显示在仅仗焕卒舞台上。代码如下:var rq:MovieClip=new MovieClip()//定义一个容器,存储所有的五姹州比蹼角星addChild(rq)//将这个容器添加到舞台<2>每次单击舞台的时候,先清除掉容器内的所有的显示对象,然后再调用tianjia()函数生成20个新的五角星。在这里我们使用while循环,其书写格式是:while(条件){运行命令}只要条件的返回值是true,就会执行大括号内的命令,直到条件的返回值是falsewhile循环和for循环的不同点是:for循环可以精确地控制循环的次数,但是while可以在不知道循环次数的前提下进行循环。代码如下:while(rq.numChildren>0){rq.removeChildAt(0)这里用到了 容器的一个numChildren属性,其返回值是容器内显示对象的个数还用到了容器的removeChildAt(参数)方法,用于移除参数位置的显示对象。然后,修改后的完整代码如下

6、var rq:MovieClip=new Mo箪滹埘麽vieClip()//定义一个容器,存储所有的五角星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()*200star.y=80+Math.random()*230star.width=star.height=10+Math.random()*20}}

7、还可以继续补充代码,让五角星能随机的旋转!这需要用到显示对象的rotation属性,其值为度数我们在star.width=star.height=10+Math.random()*20后面添加如下的代码:star.rotation=Math.random()*360

© 手抄报圈