Flex笔记.docx
- 文档编号:7804643
- 上传时间:2023-01-26
- 格式:DOCX
- 页数:29
- 大小:130.36KB
Flex笔记.docx
《Flex笔记.docx》由会员分享,可在线阅读,更多相关《Flex笔记.docx(29页珍藏版)》请在冰豆网上搜索。
Flex笔记
Flex培训
1.铺垫
Flex的出现是为了迎合开发者,使用的IDE是基于eclipse的,界面很友好,没有了flash中动画的概念,只要专注于代码就能实现flash的可以实现的功能。
Flex主要的作用是作为web客户端。
Flex采用的语言是java,项目源文件是mxml,简单易读,将代码和配置融合到一起。
比如一个按钮的位置用标签定位,而行为用代码控制。
Flash最初的定位是面向美术动画设计师的矢量动画创作工具,并不适合传统的开发人员。
于是Flex成为开发者们的首选。
2.基本知识
a.入口:
Applicationxmlns: mx=" width="700"height="468"minWidth="0"minHeight="0"applicationComplete="app()" backgroundAlpha="0.0"backgroundColor="#FFFFFF" fontSize="14"horizontalScrollPolicy="off" layout="absolute"verticalScrollPolicy="off" xmlns: s="library: // > 这个标签会创建一个舞台,我们所有的可视的元素都在这个舞台中,舞台创建好之后执行的是 app()方法, publicfunctionapp(): void {} 通常会先初始化运行参数 varobj: Object=parameters; if(obj["filter"]! =null) { filter=obj["filter"]; } Parameters对象就是我们初始化flash时候用 swfobject.embedSWF("$! jc.url('/js/test.swf? v=6')","myContent","730","520","10.1.0","playerProductInstall.swf",params,{wmode: "transparent"}); varparams={ uploadServerUrl: '$! 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: "getpiccount", maxMemory: 900 }; 这就实现了从初始化环境中获取数据的功能,从而使得程序更加灵活。 就算不配置也有默认值。 publicvarfilter: String="*.gif;*.jpeg;*.png;*.jpg"; publicvarminiSize: int=140;//缩略图大小 所有的代码都被包含在 Script> [CDATA[ 代码书写区 ]]> Script> 在这个块中可以导入其他包或者类 importmx.events.FlexEvent; importmx.graphics.codec.JPEGEncoder; 可以在
Style>块中写样式,
Style> @namespaces"library: // @namespacemx" s|Button#btnSelect{ skinClass: ClassReference("ClButtonSkin"); } s|Button#btnUpload{ skinClass: ClassReference("SendClButtonSkin"); }
Style>
这里#btnSelect表示id=btnSelect的按钮使用了外置皮肤,
按钮的定义是
Buttonid="btnSelect"x="257"y="115"width="144"height="38"label="添加照片" click="btnSelect_onclick(event)"color="#E9E8E1" fontFamily="Verdana" fontSize="16"fontWeight="bold"buttonMode="true" /> 可以看到很像html,绑定单击事件是btnSelect_onclick(event), 这里的 可以在单击项目右键新建外观,需要指定一个原始组件,也就是这个外观的模板。 然后我们看里面主要内容 BitmapImagesource="@Embed('skins/oadd.png')" source.over="@Embed('skins/gadd.png')" source.down="@Embed('skins/gadd.png')"/> 这里就是简单的指定了鼠标未点击和点击之后的按钮图片。 最终结果就是为按钮添加了背景图片。 下面看点击事件 publicfunctionbtnSelect_onclick(event: MouseEvent): void { varfileFilter: FileFilter=newFileFilter(filter,filter); fileUploadList.addEventListener(Event.SELECT,file_select);//对文件选择列表绑定事件 fileUploadList.browse([fileFilter]);//传入过滤文件 } 这里可以看到flex也是事件驱动的,浏览文件时候用户会激发一个选择文件的事件,我们绑定到函数file_select 1过滤掉相同的文件, 2检测文件大小是否超过限制 3.统计文件大小及其他信息 4.启动加载缩略图loadImage(); //第一次加载图片从这里开始, publicfunctionloadImage(): void {//每次重新选择图片imageIndex就从0开始,但是allFileCount却是文件总数,每次执行完loadFileDataimageindex就会自动增加。 if(imageIndex==allFileCount) {//是否完成加载,未完成不可点击添加图片和上传图片上 btnUpload.enabled=true; btnSelect.enabled=true; return; } if(imageIndex {//allimagelist是已经加载完毕的图片列表,这里是为了imageindex能够增长到图片列表的末尾。 imageIndex++; loadImage(); return; } varfileUpload: FileReference=FileReference(allFileList[imageIndex]); fileUpload.addEventListener(Event.COMPLETE,loadFileData);//花费比较长的时间 fileUpload.load(); if(fileUpload.size>bigpicsize){ issleep=true; } else{ issleep=false; } varinitial_memory: Number=Number((System.totalMemory/1048576).toFixed(3)); //my.text=initial_memory.toString();//图片占用内存单位MB if(initial_memory>=maxMemory) { my.text="非常抱歉由于图片过大不再生成缩略图,但可以全部上传。 "; stoploadimage=true; } } 内存回收会有时间延迟,延迟一段时间可以减少崩溃的几率, System.totalMemory可以获取flash所使用的内存。 没有添加延时内存占用情况 可以看到上传时候的峰值要大于最终的占用量 但是还是不能很好的解决内存占用问题。 当文件被加载完成时候执行函数loadFileData 自定义的显示内容都要依附于varuc: UIComponent=newUIComponent();将控件添加到ui中,然后将ui添加到canvas中。 1. BitmapData与Bitmap的关系 位图Bitmap对象是是flex中用于显示位图映象的对象,而BitmapData对象侧重于位图图像的处理。 varbmpData: BitmapData=newBitmapData(100,100,true,0x80FF3300); //大小,是否透明,颜色 varbmp: Bitmap=newBitmap(bmpData); varuic: UIComponent=newUIComponent(); //将Bitmap对象加入到UIComponent对象中 uic.addChild(bmp); showCom.addChild(uic); Canvasid="showCom"x="24"height="101"width="92"y="10"> Canvas> 还有一种加载图片的方式使用loader varloader: Loader=newLoader(); varrequest: URLRequest=newURLRequest(" loader.load(request); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComp); privatefunctiononComp(event: Event): void { varloader: Loader=event.target.loaderasLoader;//转变类型为Loader 类型转换使用as varbmp: Bitmap=Bitmap(loader.content); varuic: UIComponent=newUIComponent(); //将Bitmap对象加入到UIComponent对象中 uic.addChild(bmp); showCom1.addChild(uic); } 添加到ui中显示的一定是bitmap,而对于图形的处理一般是bitmapdata。 位图和矢量图的区别 1、位图与矢量图的概念及区别 矢量图(vector): 矢量图形是以数学方式生成的几何形状,这些图形的元素是一些点、线、矩形、多边形、圆和弧线等等,它们都是通过数学公式计算获得的。 众所周知Flash就是一款矢量动画制作软件。 在AS中使用的填充(beginFill),画线(lineTo)等命令都是基于对矢量图的操作。 位图(Bitmap): 位图图形也称为光栅图形(马赛克组成),由排列为矩形网格形式的小方块(像素)组成。 简单地说,位图就是以无数的色彩点组成的图案。 两者比较: 矢量图可以无限放大,而且不会失真; 而位图会失真。 位图由像素组成而矢量图由矢量线组成。 位图可以表现的色彩比较多;而矢量图则相对较少。 矢量图体积小,但比较消耗计算资源;位图则比较消耗内存资源,但对计算资源消耗小。 位图图像用图像的宽度和高度来定义,以像素为量度单位,每个像素包含的位数表示像素包含的颜色数。 在使用 RGB 颜色模型的位图图像中,像素由三个字节组成: 红、绿和蓝。 每个字节包含一个 0 至 255 之间的值。 将字节与像素合并时,它们可以产生与艺术混合绘画颜色相似的颜色。 例如,一个包含红色字节值 255、绿色字节值 102 和蓝色字节值 0 的像素可以形成明快的橙色。 位图图像的品质由图像分辨率和颜色深度位值共同确定。 分辨率与图像中包含的像素数有关。 像素数越大,分辨率越高,图像也就越精确。 颜色深度又叫色彩位数,与像素可包含的信息量有关。 即位图中要用多少个二进制位来表示每个点的颜色,是分辨率的一个重要指标。 常用有1位(单色),2位(4色,CGA),4位(16色,VGA),8位(256色),16位(增强色),24位和32位(真彩色)等。 色深16位以上的位图还可以根据其中分别表示RGB三原色或CMYK四原色(有的还包括Alpha通道,CMYK四原色指打印颜色)的位数进一步分类 例如,颜色深度值为每像素 16 位的图像无法显示颜色深度为 48 位的图像所具有颜色数。 因此,48 位图像与 16 位图像相比,其阴影具有更高的平滑度。 为了点击flash空白处能够回收相册下拉列表,这里只能想canvas中添加占位标签lable,没有元素覆盖的canvas不能响应点击事件, 图形变换矩阵 “变换矩阵‘使用"Affinetransformations仿射变换"性质: “仿射变换‘是坐标点在保持共线(面)的前提下,空间中的相对距离发生变化。 这就是说,坐标点的所属平面不发生变化,且原本平行的直线仍然平行,但坐标点与坐标点之间的距离可能发生与原来成比例的变化。 “仿射变换‘允许位移,缩放,倾斜和旋转。 他不能做锥形或角度扭曲。 如下图: “变换矩阵‘是一个3X3的矩阵: a -xscale(X轴缩放) b -yskew(Y轴倾斜) c -xskew(X轴倾斜) d -yscale(Y轴缩放) tx -xtranslation(X轴位移) ty -ytranslation(Y轴位移) u,v,w是常数分别为0,0,1,得到如下"变换矩阵": "变换矩阵"的公式为(Matrix类中没有把u,v,w做为属性): x'=x*a+y*c+tx y'=x*b+y*d+ty x'和y'是x和y的最终位置。 默认矩阵: x'=x*1+y*0+0 y'=x*0+y*1+0 结果是 x'=x y'=y 应用变换: x'=2*x+0*y+0=2x y'=0*x+1*y+0=y ---------------------------------------------------------------------------------- x'=1*x+1*y+0=x+y y'=0*x+1*y+0=y ---------------------------------------------------------------------------------- 旋转的实现是用a,b,c,d四个值乘上相应的三角函数而成。 公式如下: x'=cos(angle)*x-sin(angle)*y+0 y'=sin(angle)*x+cos(angle)*y+0 P.S. angle以弧度为单位的旋转角度,其与前面文章提到过的rotation属性不一样,rotation属性是以度为单位的旋转角度。 弧度=弧长/半径。 圆的周长=2π*半径,所以一个圆周角(360度)是2π弧度。 一个平角(180度)是2π/(360/180)=π弧度。 一个直角(90度)是2π/(360/90)=π/2弧度。 Matrix对象的创建: importflash.geom.Matrix; varmy_matrix: Matrix=newMatrix(); varmy_matrix_d: Matrix=newMatrix(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沿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属性来代替完成。 使用实例 varloader: Loader=event.target.loaderasLoader;//转变类型为Loader varbmp: Bitmap=Bitmap(loader.content); varuic: UIComponent=newUIComponent(); //将Bitmap对象加入到UIComponent对象中 varm: Matrix=newMatrix(1,0,0,1,0,0); m.scale(0.5,0.5);//缩放0.5 m.rotate(0.2);//顺时针旋转0.2弧度, varbitdata: BitmapData=newBitmapData(120,120); bitdata.draw(bmp,m);//將bmp依照变换矩阵,转换到bitdata中,bmp不变。 varbitmap: Bitmap=newBitmap(bitdata); uic.addChild(bitmap); mycan2.addChild(uic); 结果图 BitmapData 的draw影响的是bitmapdata本身,不是bitmap, flex上传图片使用loader.Load(url); 1.获取bitmap,2.通过matrix转换为bitmapdata,3.通过JPEGEncoder编码为二进制数据4.构建url,5.加载url privatefunctiononComp(event: Event): void{ varloader1: Loader=event.target.loaderasLoader;//转变类型为Loader varbmp: Bitmap=Bitmap(loader1.content); varm: Matrix=newMatrix(1,0,0,1,0,0); vars: Number=0.5; m.scale(s,s); varbitdata: BitmapData=newBitmapData(bmp.width*s,bmp.height*s); bitdata.draw(bmp,m);//將bmp依照变换矩阵,转换到bitdata中,bmp不变。 varbitmap: Bitmap=newBitmap(bitdata); varjpegEnc: JPEGEncoder=newJPEGEncoder(50); varjpegData: ByteArray=jpegEnc.encode(bitdata); varreq: URLRequest=newURLRequest("http: //localhost: 8880/getpic/uploadtest"); req.contentType='applicatoin/octet-stream'; req.method=URLRequestMethod.POST; req.data=jpegData; vararrHead: Array=newArray(); arrHead.push(newURLRequestHeader("fileName",encodeURIComponent("aaa"))); arrHead.push(newURLRequestHeader("width","200")); arrHead.push(newURLRequestHeader("height","400")); req.requestHeaders=arrHead; varloader: URLLoader=newURLLoader(); loader.add
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex 笔记
![提示](https://static.bdocx.com/images/bang_tan.gif)