Flex笔记.docx

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　的ｄｒａｗ影响的是ｂｉｔｍａｐｄａｔａ本身，不是ｂｉｔｍａｐ，

ｆｌｅｘ上传图片使用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