在FlashBuilder中引入该swc，这时就能在代码中直接new这个fl组件了

How to Use Flash CS’s Components in Flex Builder

To generate the .swc file in Flash CS3, we follow these steps:

1) Make a new Flash CS3 ActionScript 3.0 .fla file.
2) Drag the desired component(s) to the Library. In this example, we’ll drag the TextArea component to the Library.
3) Choose File > Export > Export Movie.
4) For File name, enter v3components.swf. (We don’t even want the generated .swf, but there’s no other way to get the .swc to compile.)
5) Select a folder in which to save the .swf file.
6) Click Save.
7) In the Export Flash Player dialog, check Export SWC.
Click OK.

The preceding steps generate two files, cs3 components.swf and v3components.swc, both of which are placed in the folder selected in Step 5.

Now let’s use cs3 components.swc in a Flex Builder project. Follow these steps:

1) In Flex Builder, select File > New > ActionScript Project.
2) For Project name, enter “V3Test.as”.
3) Click Next.
4) For Main source folder, enter “src”.
5) For Main application file, enter “V3Test.as”.
6) On the Library path tab, click Add SWC.
7) Browse to the v3components.swc file from the preceding procedure.
Click Finish.
9) Update the code in cs Test.as so it looks like this:

package {
  import flash.display.Sprite;
  import fl.controls.TextArea;
  public class V3Test extends Sprite {
    public function V3Test() {
      var t:TextArea = new TextArea();
      t.text = "You're not cookin'";
      addChild(t);
    }
  }

}
10) Run the project.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			    creationComplete="application1_creationCompleteHandler(event)">

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			private var file:FileReference;
			private var loader:Loader;
			protected function button1_clickHandler(event:MouseEvent):void
			{
				file = new FileReference();
				file.addEventListener(Event.SELECT,file_selectHandler);
				file.browse ([new FileFilter("Images(*.jpg;*.jpeg;*.png;*.gif)","*.jpg;*.jpeg;*.png;*.gif")]);
			}

			protected function file_selectHandler(event:Event):void{
				file.removeEventListener(Event.SELECT,file_selectHandler);
				file.addEventListener(Event.COMPLETE,file_completeHandler);
				file.load();
			}

			protected function file_completeHandler(event:Event):void{
				file.removeEventListener(Event.COMPLETE,file_completeHandler);
				loader.loadBytes(file.data);
			}
			protected function loaderCompleteHandler(event:Event):void{
				var $bmd:BitmapData = new BitmapData(loader.width,loader.height,true,0x00FFFFFF);
				$bmd.draw(loader.content);
				this.preview.source = $bmd;
				this.preview.width = 40;
				this.preview.height = 40;
			}

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				loader = new Loader();
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaderCompleteHandler);
				this.swf.addChild(loader);
			}

		]]>
	</fx:Script>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<s:Button click="button1_clickHandler(event)" label="Select Image"/>
	<s:HGroup>
		<s:BitmapImage id="preview"/>
		<mx:SWFLoader id="swf"/>
	</s:HGroup>
</s:Application>

IE浏览器下，Flash全屏时 一旦使用deeplinking修改网址参数，就会导致Flash退出全屏

解决方案：

在全屏时不再修改deeplinking， 而当退出全屏时，使用最后的deeplinking

可以侦听stage类的事件FullScreenEvent. FULL_SCREEN

在任何被添加到了舞台的DisplayObject对象内部,都可以这样写：

this.stage.addEventListener(FullScreenEvent.FULL_SCREEN, stage_fullScreenHandler);

//侦听全屏变化的事件

private function stage_fullScreenHandler(event:FullScreenEvent):void{

//event.fullScreen为false的时候，是退出全屏，true是进入全屏

if(!event.fullScreen){

//修改deeplinking

}

即使子内容宽高超过了容器本身的宽高，子内容也会被正常显示出来，

SkinnableContainer是无法裁剪子内容的，而且也没有默认属性可以设置

但如果想实现容器裁剪子内容，可以用以下方法实现

<s: SkinnableContainer id=”myBC” creationComplete=”myBC.contentGroup.clipAndEnableScrolling = true”>

即：在容器创建完成后设置它的属性contentGroup的clipAndEnableScrolling为true

原理：

BorderContainer继承自SkinnableContainer，这两个组件都不是自身添加显示对象的，而是使用contentGroup作为子内容的容器，

而contentGroup实际上是一个Group对象 Group本身有一个属性：clipAndEnableScrolling，当它为true时，就会裁剪内容，默认是false

Flex4中动态加载CSS文件的方式已经和Flex3有了一定的区别

主要步骤如下：

1.编写不同的CSS文件

见后文

2.将CSS文件编译成SWF文件

在FlashBuilder中右键CSS文件，选择Compile CSS to SWF，

这时bin-debug目录下的对应位置就会生成一个与CSS同名的SWF文件。

选中后该选项前会有勾，之后只要修改了CSS文件，就会自动编译成SWF

2.用styleManager加载SWF

代码中这样写：

this.styleManager.loadStyleDeclarations2(“MyCss1.swf”);   //代码中填写上一步由CSS生成的SWF文件路径

CSS写法：

MyCss1.css

/* CSS file */

/*命名空间*/

@namespace s “library://ns.adobe.com/flex/spark”;

@namespace mx “library://ns.adobe.com/flex/mx”;

/*使用skin类来定义皮肤，所以要用ClassReference函数*/

s|List{

skin-class:ClassReference(“skins.ListSkin1″);

}

/*符号#代表指定的ID*/

s|Label#labelExamples{

font-size:14;

color:#990099;

}

s|CheckBox{

font-size:9;

color:#FF3300;

}

s|RadioButton{

font-size:92;

color:#990099;

}

s|Button{

font-size:32;

color:#FF3300;

}

注：CSS中无法设置ItemRenderer，所以如果要实现不同CSS用不同的ItemRenderer，为各个CSS指定不同的skin类，并且在skin类中分别设置的ItemRenderer

例如，我的例子中要为List设置不同的ItemRenderer，就不要写成<s:List itemRenderer=”itemRenderers.ListItemRenderer1″…/>

而要在CSS中为List指定skinClass为skins.ListSkin1，代码：skin-class:ClassReference(“skins.ListSkin1″);

然后，在skin.ListSkin1中设置ItemRenderer，代码：

<s:DataGroup id=”dataGroup” itemRenderer=”itemRenderers.ListItemRenderer1″>

<s:layout>…

主程序：FriendList.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
			   xmlns:views="views.*"
			    creationComplete="application1_creationCompleteHandler(event)">

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

			import org.puremvc.as3.multicore.interfaces.IFacade;
			import org.puremvc.as3.multicore.patterns.facade.Facade;

			import views.MyListMediator;

			protected var facade:IFacade = Facade.getInstance('');//获取Facade的单例

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				cbTypeId.textInput.editable = false
				//
				facade.registerMediator(new MyListMediator('all',this.list0));
				facade.registerMediator(new MyListMediator('group1',this.list1));
				facade.registerMediator(new MyListMediator('group2',this.list2));
				//添加几个个测试数据
				this.addNewFriend('Sven',1);
				this.addNewFriend('Lina',2);
				this.addNewFriend('Viper',1);
				this.addNewFriend('Chen',2);
				this.addNewFriend('Zeus ',4);//添加一个特殊typeId的组，测试例外数据的处理
			}

			protected function btnAdd_clickHandler($event:MouseEvent):void{
				this.addNewFriend(this.textName.text,this.cbTypeId.selectedItem.typeId);
				this.textName.text='';//清空名称输入栏，以免连续点击
			}

			protected function addNewFriend($name:String,$typeId:int):void{
				var $friend:Object = new Object();//创建一个新朋友的数据对象
				$friend.name = $name;//设置名称
				$friend.typeId = $typeId;//设置typeId
				facade.sendNotification('add',$friend);//发送通知
			}
		]]>
	</fx:Script>

	<s:HGroup>
		<s:Label text="Name:"/>
		<s:TextInput id="textName"/>
		<s:ComboBox id="cbTypeId" labelField="label" selectedIndex="0">
			<s:dataProvider>
				<s:ArrayCollection>
					<fx:Array>
						<fx:Object label='组A' typeId='1'/>
						<fx:Object label='组B' typeId='2'/>
						<fx:Object label='不分配组' typeId='0'/>
					</fx:Array>
				</s:ArrayCollection>
			</s:dataProvider>
		</s:ComboBox>
		<s:Button enabled="{this.textName.text!=''}" id="btnAdd" label="添加新Friend" click="btnAdd_clickHandler(event)"/>
	</s:HGroup>
	<views:MyList id="list0" x="10" title="全部好友" typeId="0" width="180" top="39" height="486">
	</views:MyList>
	<views:MyList id="list1" x="198" title="组A" typeId="1" width="180" top="39" height="213">
	</views:MyList>
	<views:MyList id="list2" x="198" title="组B" typeId="2" width="180" top="305" height="220">
	</views:MyList>
</s:Application>

朋友列表组件：views/MyList.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
		  >

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;

			import org.puremvc.as3.multicore.patterns.facade.Facade;

			[Bindable]
			public var title:String = '';

			public var typeId:int = 0;

			[Bindable]
			public var dataAC:ArrayCollection = new ArrayCollection();

			protected function btnDel_clickHandler(event:MouseEvent):void
			{
				if(this.list.selectedItem){
					Facade.getInstance('').sendNotification('delete',this.list.selectedItem);
				}
			}
		]]>
	</fx:Script>
	<s:Label text="{title}"/>
	<s:List id="list" dataProvider="{dataAC}" top="24" bottom="24" width="100%" labelField="name"/>
	<s:Button id="btnDel" enabled="{this.list.selectedItem}" label="删除所选" click="btnDel_clickHandler(event)" bottom="0" />
</s:Group>

中介器：MyListMediator.as

package views
{
	import org.puremvc.as3.multicore.interfaces.INotification;
	import org.puremvc.as3.multicore.patterns.mediator.Mediator;

	public class MyListMediator extends Mediator
	{
		public function MyListMediator(mediatorName:String=null, viewComponent:Object=null)
		{
			super(mediatorName, viewComponent);
		}
		private function get view():MyList{
			return this.viewComponent as MyList;
		}
		//可以接受的通知name
		override public function listNotificationInterests():Array{
			return ['delete','add'];
		}
		//响应通知
		override public function handleNotification(notification:INotification):void{
			var $friend:Object = notification.getBody();//获取通知的内容
			if(this.view.typeId==0 || this.view.typeId==$friend.typeId){
				//所持有的MyList如果是全部朋友的列表或指定typeId的列表，则执行以下操作，否则不执行
				switch(notification.getName()){//区分名称
					case 'delete':
						var $index:int = this.view.dataAC.getItemIndex($friend);
						this.view.dataAC.removeItemAt($index);//告知data删除指定friend object
						break;
					case 'add':
						this.view.dataAC.addItem($friend);//添加frined object
						break;
				}
			}
		}
	}
}

源文件下载 PureMvcDemoFriendList20100511.zip ]]> http://blog.ityao.com/archives/685/feed 0 http://blog.ityao.com/archives/677 http://blog.ityao.com/archives/677#comments Mon, 10 May 2010 10:40:54 +0000 Jack http://blog.ityao.com/?p=677 Flex sdk3就内置了Base64的加/解密工具类
分别是
mx.utils.Base64Encoder
mx.utils.Base64Decoder

Base64Encoder用法如下：

var $orgin:String = this.textOrigi.text;//获取原始字符串
var $base64:Base64Encoder = new Base64Encoder();
$base64.insertNewLines = false;//该值等于true时，输出的结果会自动换行，默认为true，
$base64.encodeUTFBytes($orgin);//这里注意，如果想加密中文就不要使用$base64.encode();
var $result:String = $base64.toString();//输出结果

Base64Decoder用法如下：

				var $origi:String = this.textEncodeResult.text;//获取原始字符串
				var $base64:Base64Decoder = new Base64Decoder();
				$base64.decode($origi);
				var $result:String = $base64.toByteArray().toString();//输出结果，decode类只能输出ByteArray类型的数据，因此要转换成string

完成代码：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

	<fx:Script>
		<![CDATA[
			import mx.utils.Base64Decoder;
			import mx.utils.Base64Encoder;
			protected function btnEncode_clickHandler(event:MouseEvent):void
			{
				var $orgin:String = this.textOrigi.text;//获取原始字符串
				var $base64:Base64Encoder = new Base64Encoder();
				$base64.insertNewLines = false;//该值等于true时，输出的结果会自动换行，默认为true，
				$base64.encodeUTFBytes($orgin);//这里注意，如果想加密中文就不要使用$base64.encode();
				var $result:String = $base64.toString();//输出结果
				this.textEncodeResult.text = $result
			}

			protected function btnDecode_clickHandler(event:MouseEvent):void
			{
				var $origi:String = this.textEncodeResult.text;//获取原始字符串
				var $base64:Base64Decoder = new Base64Decoder();
				$base64.decode($origi);
				var $result:String = $base64.toByteArray().toString();//输出结果，decode类只能输出ByteArray类型的数据，因此要转换成string
				this.textDecodeResult.text = $result
			}

		]]>
	</fx:Script>

	<mx:Form width="100%">
		<mx:FormItem label="原始字符串：" width="100%">
			<s:TextArea editable="true" id="textOrigi" width="100%" text="在这里输入原始字符串"/>
		</mx:FormItem>
		<mx:FormItem>
			<s:Button id="btnEncode" label="Encode Base64" enabled="{this.textOrigi.text!=''}" click="btnEncode_clickHandler(event)"/>
		</mx:FormItem>
		<mx:FormItem label="Encode 结果：" width="100%">
			<s:TextArea editable="false" id="textEncodeResult" width="100%"/>
		</mx:FormItem>
		<mx:FormItem>
			<s:Button id="btnDecode" enabled="{this.textEncodeResult.text!=''}" label="Decode Base64" click="btnDecode_clickHandler(event)"/>
		</mx:FormItem>
		<mx:FormItem label="Decode 结果：" width="100%">
			<s:TextArea editable="false" id="textDecodeResult" width="100%" text="点击Decode Base64按钮后，这里的结果应该和原始字符串相同"/>
		</mx:FormItem>
	</mx:Form>
</s:Application>

而这次遇到的问题是这样的：

发布时只发布一个主程序（Web或者Air方式），而不发布所需要的module及其依赖的swc，只在运行时根据需要加载module及其依赖的swc

1.       建立一个实验用的module工程：

先准备一个module工程，普通的Flex Project（web）即可，主程序名无所谓，因为这个工程只是为了编译module对象用的

在Properties->Flex Build Path中引入所要依赖的swc，这个例子中使用了TweenLite.swc

注意AIR project的默认Link Type是Merge into code，改成RSL。如图：

新建一个包modules并新建一个module程序：MyModule1.mxml

到Properties->Flex Modules中修改该module的optimize属性为none，如下图

点击Edit按钮，弹出下图

选择Do not optimize(…)

在MyModule1.xml中使用TweenLite做一个简单的动画:

TweenLite.to(<strong>this</strong>.goed,4,{x:500});

编译工程，

此时MyModule1.mxml被编译生成为MyModule1.swf

TweenLite.swc会被编译成TweenLite.swf

复制到要被加载的目录下，我的是

http://127.0.0.1/testflex/TweenLite.swf

http://127.0.0.1/testflex/modules/MyModule1.swf

2.       建立主工程（Flex Web）：

新建一个Flex Project(web),不要使用引入TweenLite.swc

新建一个用来控制加载TweenLite的类：

tasks/TaskLoadRSL.as

在这个类中，使用URLLoader将TweenLite.swc从http://127.0.0.1/testflex/TweenLite.swf上加载下来，主要代码如下：

var loader:Loader = new Loader();
var context:LoaderContext = new LoaderContext();
context.applicationDomain = ApplicationDomain.currentDomain;//必须有这一句，RSL必须和主程序在同一个域中
loader.load(new URLRequest(this.web),context);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,localLoadCompleteHandler);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,localLoadIoErrorHandler);

加载完TweenLite后不需要任何操作，直接开始加载module即可

使用IModuleInfo或ModuleLoader加载module都可以，详见源代码

3.       建立主工程 （AIR）：

Air中比Flex要麻烦，因为发布时只发布主程序，所以运行时需要先检测本地是否有swc和

module

如果有就直接加载运行（同Web）

如果没有就从网站上下载到本地，然后再加载

主要代码如下：

从网络地址上加载：

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, loadFromWebCompleteHandler);
loader.addEventListener(IOErrorEvent.IO_ERROR, loadFromWebErrorHandler);
loader.load(new URLRequest(web))

var loader:URLLoader = URLLoader($e.target);
var data:ByteArray = ByteArray(loader.data);
var file:File = new File(File.applicationDirectory.resolvePath(this.local).nativePath);
trace('save file to' + file.nativePath);
var fileStream:FileStream = new FileStream();
fileStream.open(file, FileMode.WRITE);
fileStream.writeBytes(data);
fileStream.close();
this.loadFromLocalFile();

当用spark添加一个mx组件时不会有问题，但当这个mx组件中还有其他组件

例如<mx:HBox><mx:Canvas/></mx:HBox>

stage.frameRate会瞬间达到1000！

之后会自动恢复到默认的帧频(如果不手动设定，会是24)

这时不用担心什么问题，

但如果frameRate达到1000的这段时间中，添加了一个EnterFrame事件，

并且在EnterFrame的响应函数中，调整某个组件的位置，

frameRate就不会恢复回24，而是一直持续1000，知道取消了EnterFrame为止

源文件：
src
源码如下：
Application.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" frameRate="12"
			 backgroundColor="0xFF00FF">
	<fx:Script>
		<![CDATA[

			import components.MyComponent;

			import mx.containers.HBox;
			import mx.core.UIComponent;
			import mx.events.FlexEvent;

			protected function button2_clickHandler(event:MouseEvent):void
			{
				trace(this.stage.frameRate);
				this.txt.text = "Current FrameRate:"+this.stage.frameRate.toString();
			}

			protected var _box:UIComponent;
			protected function button3_clickHandler(event:MouseEvent):void
			{
				_box = new MyComponent();
				this.container2.removeAllElements();
				this.container2.addElement(_box);
				button2_clickHandler(null);
				button4_clickHandler(null);
			}

			protected function enterFrameHandler(event:Event):void
			{
				if(_box){
					container1.x+=0.2;
				}
			}
			protected function button4_clickHandler(event:MouseEvent):void
			{
//				this.moveEffect.play([this.container2]);
				this.addEventListener(Event.ENTER_FRAME,this.enterFrameHandler);
			}
			protected function button5_clickHandler(event:MouseEvent):void
			{
				this.removeEventListener(Event.ENTER_FRAME,this.enterFrameHandler);
			}

		]]>
	</fx:Script>

	<fx:Declarations>
		<s:Move id="moveEffect" duration="10000" xFrom="10" xTo="300" yFrom="10" yTo="300"/>
	</fx:Declarations>
	<mx:Canvas id="container1" y="60" width="100%" height="100%"/>
	<s:SkinnableContainer id="container2" x="20" y="80" width="900" height="600"/>

	<s:Group>
		<s:layout>
			<s:HorizontalLayout>
			</s:HorizontalLayout>
		</s:layout>
		<s:Button click="button2_clickHandler(event)" label="Trace frameRate"/>
		<s:Label text="" id="txt" width="100"/>
		<s:Button click="button3_clickHandler(event)" label="load MyComponent"/>
		<s:Button click="button4_clickHandler(event)" label="Start Move"/>
		<s:Button click="button5_clickHandler(event)" label="Stop Move"/>
	</s:Group>
</s:Application>

components/MyComponent.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
		 xmlns:s="library://ns.adobe.com/flex/spark"
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 >
	<mx:Canvas backgroundAlpha="1" width="30" height="30" backgroundColor="0x0000F0"/>
</mx:HBox>