Flash AS3.0 第四讲

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,二维动画设计,*,第四讲,Flash ActionScript 3.0,显示对象,DisplayObject,类,是所有显示类的抽象类，具有所有显示类共同的属性、方法和事件,DisplayObject,类,属性、事件、方法名,属性,x,、,y,、,width,、,scaleX,方法,GlobalToLocal,等,事件,enterFrame removed,二维动画设计,二维动画设计,6,种非交互类,非交互类,说明,AVM1Movie,早版本影片,Bitmap,创建位图对象,MorphShape,用于创建补间动画,Shape,创建背景图像,StaticText,创建静态文本,Video,创建视频,二维动画设计,6,种交互类,交互类,说明,SimpleButton,早版本影片,TextField,创建动态文本,Loader,加载外部影片、图像等,Sprite,编写交互代码,Stage,创建舞台,MovieClip,创建影片剪辑实例,二维动画设计,DisplayObjectContainer,类,是所有显示类的抽象类，具有所有显示类共同的属性、方法和事件,DisplayObjectContainer,类,属性、事件、方法名,属性,numChildren,方法,addChild(),事件,enterFrame removed,等继承事件,二维动画设计,绘图与,Graphics,类,Flash,中的绘图是通过,Graphics,类来实现的，具有很多绘图方法，大致可以把这些方法分为两类：一是定义绘图样式的方法，二是用于绘制和清除图形的方法。,二维动画设计,Graphics,类的绘图样式方法,方法名,说明,lineStyle,定义线条样式,lineGradientStyle,定义渐变线条样式,beginFill,定义固体填充样式,beginGradientFill,定义渐变填充样式,beginBitmapFill,定义位图填充,endFill,结束填充方法,二维动画设计,Graphics,类的绘制图形方法,方法名,说明,moveTo,定义绘制线条的起点,lineTo,定义绘制线条的终点,curveTo,绘制曲线,drawCircle,绘制圆形,drawElipse,绘制椭圆,drawRect,绘制矩形,drawRoundRect,绘制圆角矩形,clear,清除绘制,二维动画设计,Graphics,类,在,Shape,类或,Sprite,类中，具有,graphics,属性，这个属性其实就是,Graphics,类的实例。换句话说，要使用,Graphics,类的方法，不是直接创建,Graphics,类的实例，二是创建,Shape,类或,Sprite,类的实例，此时的显示实例就具有,graphics,属性，通过,graphics,属性就可以调用绘图的方法。,二维动画设计,绘制直线,var sp:Shape=new Shape();,sp.graphics. lineStyle(2);,sp.graphics. moveTo(100,100);,sp.graphics. lineTo(200,200);,addChild(sp);,二维动画设计,绘制圆形,var round:Shape = new Shape();,round.graphics.beginFill(0xff0000);,round.graphics.drawCircle(100, 100,50);,round.graphics.endFill();,addChild(round);,二维动画设计,绘制椭圆,var ellipse:Shape = new Shape();,ellipse.graphics.beginFill(0x0000ff);,ellipse.graphics.drawEllipse(160, 65,100,70);,ellipse.graphics.endFill();,addChild(ellipse);,二维动画设计,绘制矩形,var rect:Shape = new Shape();,rect.graphics.beginFill(0xffcc00);,rect.graphics.drawRect(50, 160,100,80);,rect.graphics.endFill();,addChild(rect);,二维动画设计,绘制圆角矩形,var square:Shape = new Shape();,square.graphics.beginFill(0x00ff00);,square.graphics.drawRoundRect(160,160,100,100,20,20);,square.graphics.endFill();,addChild(square),二维动画设计,容器类与非容器类,交互类可分为容器类和非容器类，可以在容器类的实例中添加其他实例。例如，可以在影片剪辑实例中添加动态文本等显示实例。,二维动画设计,var sprite:Sprite=new Sprite();,var shape1:Shape=new Shape();,var shape2:Shape=new Shape();,shape1.graphics.beginFill(0xccff00);,shape1.graphics.drawCircle(50,50,50);,shape1.graphics.endFill();,shape2.graphics.beginFill(0xff0000);,shape2.graphics.drawRect(100,100,100,80);,sprite.addChild(shape1);,sprite.addChild(shape2);,addChild(sprite);,sprite.addEventListener(MouseEvent.MOUSE_DOWN,drag);,sprite.addEventListener(MouseEvent.MOUSE_UP,stoDrag);,function drag(e:MouseEvent) ,sprite.startDrag();,function stoDrag(e:MouseEvent) ,sprite.stopDrag();,二维动画设计,MovieClip,、,Spite,、,Shape,的区别：,Shape,占用资源最少，但不支持交互。简单地说，,Sprite,可视为去掉时间轴的,MovieClip,。,Shape,为显示对象，,Sprite,、,MovieClip,为显示对象容器,二维动画设计,显示列表,可以理解为一棵由可视对象构成的树。舞台就是树根，默认为可见的，在舞台上，我们可以有很多影片剪辑或可视对象,(,文本框，图形等,),，把它们加入舞台后，也就成为可见的了。这些影片中也许还嵌套着很多层的可视对象，这就是我们所谓的显示列表，把它们加入舞台后，也就成为可见的了。舞台是最根本的容器，包含着当前,SWF,的所有显示对象，舞台下面的容器被称为当前,SWF,主类的实例，（在,AS3,中，每个,SWF,文件都和一个,ActionScript,类相连，如有文档类，文档类则为主类，否则,MainTimeLine,为主类）,二维动画设计,显示列表与应用程序架构,stage,root,显示实例,显示实例,二维动画设计,显示实例常用方法,方法名,说明,addChild(child:DisplayObject,),把显示实例添加到显示列表,addChildAt(child:DisplayObject,index:int,),通过索引把显示实例添加到显示列表,removeChild(,child:DisplayObject,),从显示列表中移除显示实例,removeChildAt(,index:int,),通过索引从显示列表中移除显示实例,getChildAt(index:int,),返回位于指定索引处的子显示对象实例,swapChildren(child1:DisplayObject,child2:DisplayObject,):,交换两个指定子对象的,Z,轴顺序（从前到后顺序）。,swapChildrenAt(index1:int,index2:int,):,在子级列表中两个指定的索引位置，交换子对象的,Z,轴顺序（前后顺序）。,二维动画设计,加载外部对象,使用,Loarder,类加载外部影片。常用步骤：用文件的位置（,URL,）创建一个新的,URLRequest,对象，将这个对象作为,Loarder.load(),方法的参数,如：,var loader:Loader=new Loader();,loader.load(new URLRequest(“*.swf);,addChild(loader);,二维动画设计,位图处理（,Bitmap,类和,BitmapData,类）,Bitmap,类用于在屏幕上显示位图图像，,BitmapData,类代表位图图像中的像素，用于操作和访问位图的图像数据。,（,1,）创建,BitmapData,对象,var bmpData:BitmapData=new BitmapData(width,height,transparent,fillColor),（,2,）添加,Bitmap,到显示清单,var bmp:Bitmap=new Bitmap(bmpData);,addChild(bmp);,二维动画设计,绘制显示对象到,Bitmap,（将显示对象转换为位图）,draw(),方法,var tf:TextField = new TextField();,tf.text = bitmap text;,addChild(tf);,tf.x=200;,tf.y=100;,var myBitmapData:BitmapData = new BitmapData(80,50);,myBitmapData.draw(tf);,var bmp:Bitmap = new Bitmap(myBitmapData);,this.addChild(bmp);,bmp.x=100;,bmp.y=100;,stage.scaleMode=StageScaleMode.NO_BORDER;/,最大化窗口可以看到文本周边的锯齿,二维动画设计,创建矩形填充,fillRect(rect,color),方法,var bmpData:BitmapData=new BitmapData(100,100,false,0xffffff00);,var img:Bitmap=new Bitmap(bmpData);,addChild(img);,var rec:Rectangle=new Rectangle(25,25,50,50);,bmpData.fillRect(rec,0xff0000);,二维动画设计,