Flex笔记.docx

1、Flex笔记Flex 培训1.铺垫Flex的出现是为了迎合开发者，使用的IDE是基于eclipse的，界面很友好，没有了flash中动画的概念，只要专注于代码就能实现flash的可以实现的功能。Flex主要的作用是作为web客户端。Flex 采用的语言是java，项目源文件是mxml，简单易读，将代码和配置融合到一起。比如一个按钮的位置用标签定位，而行为用代码控制。Flash最初的定位是面向美术动画设计师的矢量动画创作工具，并不适合传统的开发人员。于是Flex成为开发者们的首选。2. 基本知识a.入口：这个标签会创建一个舞台，我们所有的可视的元素都在这个舞台中，舞台创建好之后执行的是app()

2、 方法， public function app():void 通常会先初始化运行参数 var obj:Object = parameters; if (objfilter != null) filter = objfilter; Parameters对象 就是我们初始化flash时候用 swfobject.embedSWF($!jc.url(/js/test.swf?v=6), myContent, 730, 520, 10.1.0, playerProductInstall.swf, params, wmode: transparent ); var params = uploadServ

3、erUrl: $!jc.url(picture/savepictures?auth_fix=$!auth), /上?传?响应|页3面?(必?须?设置?) jsFunction: upload, /上?传?成功|后回?调JS jsSendPictureId: setPictureId, filter: *.gif;*.jpeg;*.png;*.jpg, /上?传?文?件t类型限T制? getalbumname: getalbumname, / 获?取?相册名?称?的?方?法，?直接返回?相册id和相册内相片?数y目?。给?第一?次?设置?封a面?使1用?。 getpiccount: getpic

4、count, maxMemory:900 ;这就实现了从初始化环境中获取数据的功能，从而使得程序更加灵活。就算不配置也有默认值。 public var filter:String = *.gif;*.jpeg;*.png;*.jpg; public var miniSize:int = 140;/缩略图大小所有的代码都被包含在 在这个块中可以导入其他包或者类 import mx.events.FlexEvent;import mx.graphics.codec.JPEGEncoder;可以在块中写样式， namespace s library:/ namespace mx s|Button#b

5、tnSelect skinClass: ClassReference(ClButtonSkin); s|Button#btnUpload skinClass: ClassReference(SendClButtonSkin); 这里#btnSelect 表示id= btnSelect 的按钮使用了外置皮肤，按钮的定义是 可以看到很像html，绑定单击事件是btnSelect_onclick(event)，这里的可以在单击项目右键 新建外观，需要指定一个原始组件，也就是这个外观的模板。然后我们看里面主要内容 这里就是简单的指定了 鼠标未点击和点击之后的按钮图片。最终结果就是为按钮添加了背景图片。

6、 下面看点击事件 public function btnSelect_onclick(event:MouseEvent):void var fileFilter:FileFilter = new FileFilter(filter,filter); fileUploadList.addEventListener(Event.SELECT, file_select);/对文件选择列表绑定事件 fileUploadList.browse(fileFilter);/传入过滤文件 这里可以看到flex也是事件驱动的，浏览文件时候用户会激发一个选择文件的事件，我们绑定到函数file_select1过滤掉

7、相同的文件，2检测文件大小是否超过限制3.统计文件大小及其他信息4.启动加载缩略图loadImage(); /第一次加载图片从这里开始， public function loadImage():void /每次重新选择图片imageIndex就从0开始，但是allFileCount却是文件总数，每次执行完loadFileData imageindex就会自动增加。 if(imageIndex = allFileCount) /是否完成加载，未完成不可点击添加图片和上传图片上 btnUpload.enabled = true; btnSelect.enabled = true; return;

8、if(imageIndex bigpicsize) issleep=true; else issleep=false; var initial_memory:Number =Number(System.totalMemory/1048576).toFixed(3); /my.text=initial_memory.toString();/图片占用内存单位MB if(initial_memory=maxMemory) my.text=非常抱歉由于图片过大不再生成缩略图，但可以全部上传。; stoploadimage=true; 内存回收会有时间延迟，延迟一段时间可以减少崩溃的几率，System.

9、totalMemory 可以获取flash所使用的内存。没有添加延时内存占用情况可以看到上传时候的峰值要大于最终的占用量但是还是不能很好的解决内存占用问题。当文件被加载完成时候执行函数loadFileData自定义的显示内容都要依附于var uc:UIComponent = new UIComponent();将控件添加到ui中，然后将ui添加到canvas中。1.BitmapData 与Bitmap 的关系位图Bitmap对象是是flex中用于显示位图映象的对象，而BitmapData对象侧重于位图图像的处理。 var bmpData:BitmapData=new BitmapData(10

10、0,100,true,0x80FF3300);/大小，是否透明，颜色 var bmp:Bitmap=new Bitmap(bmpData); var uic:UIComponent = new UIComponent(); /将Bitmap对象加入到UIComponent对象中 uic.addChild(bmp); showCom.addChild(uic); 还有一种加载图片的方式使用loader var loader:Loader=new Loader(); var request:URLRequest=new URLRequest(loader.load(request); loader

11、.contentLoaderInfo.addEventListener(Event.COMPLETE,onComp); private function onComp(event:Event):void var loader:Loader=event.target.loader as Loader;/转变类型为Loader类型转换使用as var bmp:Bitmap=Bitmap(loader.content); var uic:UIComponent = new UIComponent(); /将Bitmap对象加入到UIComponent对象中 uic.addChild(bmp); sh

12、owCom1.addChild(uic);添加到ui中显示的一定是bitmap，而对于图形的处理一般是bitmapdata。位图和矢量图的区别1、位图与矢量图的概念及区别矢量图(vector)：矢量图形是以数学方式生成的几何形状，这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。众所周知Flash就是一款矢量动画制作软件。在AS中使用的填充(beginFill)，画线(lineTo)等命令都是基于对矢量图的操作。位图(Bitmap)：位图图形也称为光栅图形（马赛克组成），由排列为矩形网格形式的小方块（像素）组成。简单地说，位图就是以无数的色彩点组成的图案。

13、两者比较：矢量图可以无限放大，而且不会失真；而位图会失真。位图由像素组成而矢量图由矢量线组成。位图可以表现的色彩比较多；而矢量图则相对较少。矢量图体积小，但比较消耗计算资源；位图则比较消耗内存资源，但对计算资源消耗小。位图图像用图像的宽度和高度来定义，以像素为量度单位，每个像素包含的位数表示像素包含的颜色数。在使用RGB颜色模型的位图图像中，像素由三个字节组成：红、绿和蓝。每个字节包含一个0至255之间的值。将字节与像素合并时，它们可以产生与艺术混合绘画颜色相似的颜色。例如，一个包含红色字节值255、绿色字节值102和蓝色字节值0的像素可以形成明快的橙色。位图图像的品质由图像分辨率和颜色深度位

14、值共同确定。分辨率与图像中包含的像素数有关。像素数越大，分辨率越高，图像也就越精确。颜色深度又叫色彩位数，与像素可包含的信息量有关。即位图中要用多少个二进制位来表示每个点的颜色，是分辨率的一个重要指标。常用有1位（单色），2位（4色，CGA），4位（16色，VGA），8位（256色），16位（增强色），24位和32位（真彩色）等。色深16位以上的位图还可以根据其中分别表示RGB三原色或CMYK四原色（有的还包括Alpha通道，CMYK四原色指打印颜色）的位数进一步分类例如，颜色深度值为每像素16位的图像无法显示颜色深度为48位的图像所具有颜色数。因此，48位图像与16位图像相比，其阴影具有更高

15、的平滑度。为了点击flash空白处能够回收相册下拉列表，这里只能想canvas中添加占位标签lable，没有元素覆盖的canvas不能响应点击事件，图形变换矩阵 “变换矩阵使用Affine transformations仿射变换性质：“仿射变换是坐标点在保持共线（面）的前提下，空间中的相对距离发生变化。这就是说，坐标点的所属平面不发生变化，且原本平行的直线仍然平行，但坐标点与坐标点之间的距离可能发生与原来成比例的变化。“仿射变换允许位移，缩放，倾斜和旋转。他不能做锥形或角度扭曲。如下图：“变换矩阵是一个3X3的矩阵：a- x scale（X轴缩放）b- y skew（Y轴倾斜）c- x ske

16、w（X轴倾斜）d- y scale（Y轴缩放）tx- x translation（X轴位移）ty- y translation（Y轴位移）u, v, w是常数分别为0, 0, 1，得到如下变换矩阵：变换矩阵的公式为（Matrix类中没有把u, v, w做为属性）：x = x*a + y*c + txy = x*b + y*d + tyx和y是x和y的最终位置。默认矩阵：x = x*1 + y*0 + 0 y = x*0 + y*1 + 0结果是x = xy = y应用变换：x = 2*x + 0*y + 0 = 2xy = 0*x + 1*y + 0 = y-x = 1*x + 1*y + 0

17、 = x + yy = 0*x + 1*y + 0 = y-旋转的实现是用a, b, c, d四个值乘上相应的三角函数而成。公式如下：x = cos(angle)*x - sin(angle)*y + 0y = sin(angle)*x + cos(angle)*y + 0P.S.angle以弧度为单位的旋转角度，其与前面文章提到过的rotation属性不一样，rotation属性是以度为单位的旋转角度。弧度弧长/半径。圆的周长2*半径，所以一个圆周角（360度）是2弧度。一个平角（180度）是2/（360/180）弧度。一个直角（90度）是2/（360/90）/2弧度。Matrix对象的创建

18、：import flash.geom.Matrix;var my_matrix:Matrix = new Matrix();var my_matrix_d:Matrix = new Matrix(1,0,0,1,0,0);/默认矩阵的创建参数是a:Number=1, b:Number=0, c:Number=0, d:Number=1, tx:Number=0, ty:Number=0)a 缩放或旋转图像时影响像素沿 x 轴定位的值。 b 旋转或倾斜图像时影响像素沿 y 轴定位的值。 c 旋转或倾斜图像时影响像素沿 x 轴定位的值。 d 缩放或旋转图像时影响像素沿 y 轴定位的值。 tx 沿

19、x 轴平移每个点的距离。 ty 沿 y 轴平移每个点的距离。Matrix类的常用方法：translate(tx:Number, ty:Number):void/位移设置scale(sx:Number, sy:Number):void/缩放设置rotate(angle:Number):void/旋转设置P.S.angle以弧度为单位的旋转角度，其与前面文章提到过的rotation属性不一样，rotation属性是以度为单位的旋转角度。identity():void/重置由于倾斜是非典型转换，没有办法提供方法。它可以通过手动调整对象的b和c属性来代替完成。使用实例 var loader:Loade

20、r=event.target.loader as Loader;/转变类型为Loader var bmp:Bitmap=Bitmap(loader.content); var uic:UIComponent = new UIComponent(); /将Bitmap对象加入到UIComponent对象中 var m:Matrix=new Matrix(1,0,0,1,0,0); m.scale(0.5,0.5);/缩放0.5 m.rotate(0.2);/顺时针旋转0.2弧度， var bitdata : BitmapData = new BitmapData(120, 120 ); bitd

21、ata.draw(bmp,m);/將bmp依照变换矩阵，转换到bitdata中，bmp不变。 var bitmap:Bitmap=new Bitmap(bitdata); uic.addChild(bitmap); mycan2.addChild(uic);结果图BitmapData的影响的是本身，不是，上传图片 使用loader.Load(url);1.获取bitmap，2.通过matrix转换为bitmapdata，3.通过JPEGEncoder编码为二进制数据4.构建url，5.加载url private function onComp(event:Event):void var loa

22、der1:Loader=event.target.loader as Loader;/转变类型为Loader var bmp:Bitmap=Bitmap(loader1.content); var m:Matrix=new Matrix(1,0,0,1,0,0); var s:Number=0.5; m.scale(s,s); var bitdata : BitmapData = new BitmapData(bmp.width*s,bmp.height*s); bitdata.draw(bmp,m);/將bmp依照变换矩阵，转换到bitdata中，bmp不变。 var bitmap:Bitm

23、ap=new Bitmap(bitdata); var jpegEnc:JPEGEncoder = new JPEGEncoder(50); var jpegData:ByteArray = jpegEnc.encode(bitdata); var req:URLRequest = new URLRequest(http:/localhost:8880/getpic/uploadtest); req.contentType = applicatoin/octet-stream; req.method = URLRequestMethod.POST; req.data = jpegData; var arrHead:Array = new Array(); arrHead.push(new URLRequestHeader(fileName, encodeURIComponent(aaa); arrHead.push(new URLRequestHeader(width, 200); arrHead.push(new URLRequestHeader(height, 400); req.requestHeaders = arrHead; var loader:URLLoader = new URLLoader(); loader.add