Archive for the ‘FLEX’ Category

Flash Player 11 Incubator Program (Flash Player 11 孵化器计划)

Did you see the news yesterday? Flash Player 11 which includes the Molehill 3D apis, is now available to the general public as part of Adobe’s new incubator program. Get Flash Player 11 here now!.

你是否看了昨天的新闻(抱歉,我才看到,所以昨天应该就是2011.2.27)?包含Molehill 3D  api的Flash Player 11现在可以作为Adobe 新的孵化器计划的公开部分下载。Get Flash Player 11 here now!.

Then experience it within the links below:下面是一些它的表现例子

3D Racer

3D MAX Racer Game

Zombie Tycoon

Zombie Tycoon Game.

Shallow Water Demo

Away3D Shallow Water Demo

Quake 3 demo

Quake 3 demo

What is the incubator program? Here are some FAQ’s from Adobe.  //什么是孵化计划?这里是来自 Adobe的关于此孵化器计划的答疑。

FAQ: Adobe® AIR® and Flash® Player Incubator // 常见问题:关于Adobe® AIR® 和 Flash® Player 孵化器

1. What is the Adobe AIR and Flash Player Incubator? //什么是关于Adobe® AIR® 和 Flash® Player 孵化器?
The Adobe AIR and Flash Player Incubator is a place for our runtimes product teams to share new features that are either under development or under consideration for inclusion in future versions of the runtimes. Unlike our beta releases, capabilities that you see in the Incubator builds may or may not be supported in future releases of the runtimes.

关于Adobe® AIR® 和 Flash® Player 孵化器 是一个我们运行环境团队用于展示未来有可能会考虑添加的功能的地方,这不同于测试版本,因为现在我们添加的功能,在未来的运行环境中未必会加入

2. Who is this Incubator program for?  //孵化器计划针对谁?
This program is especially suitable for more adventurous developers who are willing to experiment with software features in early development stages and may or may not be included in future product releases.



3. Why does Adobe have an Incubator program? //为什么Adobe要有这样一个计划
Adobe’s product development philosophy is to engage in an open exchange and involve our community of passionate developers in early stages of the development cycle. Your feedback is critical to our on-going innovation efforts for the Flash Platform.


4. What’s the difference between the Incubator program and the beta program? //孵化计划与测试计划有什么不同
While the goals of both programs are similar — get early feedback from the developer community, the key differences include:


– The Incubator program allows us to get a community of developers involved in a much earlier development stage than what we do in the beta program.

– The Incubator program will be focused on a collection of new features that may or may not make into any future releases, where as the beta program allows developers to experience and evaluate an upcoming release that has reached the feature-complete stage.


5. What should I expect from the Incubator program? //我应该对孵化计划有什么期待
We plan to release new Flash Player or AIR Incubator builds on a regular basis. To get updates on new builds and features, please subscribe to the RSS feed on Adobe runtimes release blog. These are early builds of AIR or Flash Player and may not be as stable as a final release. However, the current released features should still work as expected. Please file bugs for new features highlighted in the Incubator and new bugs for current released features. The availability of AIR and Flash Player and supported OS and platforms may vary on the downloads page between updates to this program.

我们计划定期推出新的Flash Player或AIR孵化器。要获取新版本和功能,请订阅及更新在Adobe的运行时版本博客的RSS。这是早期版本的AIR或Flash Player,不会想最终版本那么稳定。然而,目前发布的功能仍然正常工作。请在提交的时候标明孵化器的BUG,以及当前发布的功能的新功能的bug。AIR和Flash Player的可用性和支持的操作系统都会在下载页面做更新。

6. Why should I participate in the Incubator program?//为什么我要参与孵化计划
The Incubator program provides you the opportunity to get an early look at what our engineers are developing for two of the most ubiquitous runtime technologies in the world. By being an active participant in the program, you’ll be able to influence the future of the leading runtime technologies with the Adobe engineering team.


7. Who will read my comments and answer my questions?//有人读我的意见和回答我的问题吗?
Your feedback is very important to us. Your comments and questions will be read and answered by Adobe engineers who are responsible for these features.


8. What will happen to these features?//未来将会发生什么?
These features are under development or under consideration for future releases. Depending on the feedback we get from the community, some of these features will be incorporated into future releases of the runtimes.


9. I have ideas for new features, who do I talk to? //我有一个好点子,我跟谁说?
We welcome new ideas from the community. Please submit your ideas to us at


68 小但是却很有用的开源 ActionScript 类库,他们可以提高FLASH/FLEX开发的速度

1. appcorelib

Open Source Flex Application Core Library, AppCoreLib is a collection of useful classes that facilitate easy RIA development with regards to XML based data being pulled in. The general approach is that an application needs to load various content/setting files prior to loading the UI. Through a series of simple checks, an application can then load the UI once those dependencies have been loaded or alert the user if they have not.

AppCoreLib provides simple XMLDataBroker classes with convenience methods that allows easy traversal of the XML data using simple IDs.


2. as3awss3lib

as3awss3lib is an AS3 library for accessing Amazon’s S3 service. It only works in Apollo because of restrictions in the browser player. It supports managing buckets and objects.


3. as3barcodelib

as3barcodelib is a library for reading and decoding barcodes in Actionscript 3. Initially it will be able to read and decode the one-dimensional EAN 13 symbology from bitmaps.


4. as3bloggerlib

AS3BloggerLib is an Actionscript 3.0 library that allows installed (AIR) applications to access the Blogger Data API. This library also contains functionality to authenticate a Google account using Google’s ClientLogin protocol.


5. as3cannonball

Cannonball is an implementation of the DOM Level 3, HTML and CSS3 core specifications written in ActionScript 3.0.


6. as3csslib

as3csslib is an CSS engine separated from as3cannonball for ActionScript 3.0


7. as3corelib

as3corelib is an ActionScript 3 Library that contains a number of classes and utilities for working with ActionScript 3. These include classes for MD5 and SHA 1 hashing, Image encoders, and JSON serialization as well as general String, Number and Date APIs.


8. as3crypto

As3 Crypto is a cryptography library written in Actionscript 3 that provides several common algorithms.


9. as3ebaylib

The eBay ActionScript 3.0 library provides an interface between the eBay XML API and ActionScript 3.0. This open-source library will allow developers to create novel and innovative applications leveraging both eBay’s marketplace services and Adobe’s Flash Player 9 runtime!


10. as3facebooklib

The Facebook API provides an ActionScript 3.0 for interacting with the Facebook Platform API.


11. as3fedexlib

This is an ActionScript 3.0 wrapper on top of the FedEx XML APIs. It also provides a solid framework on top of which you can easily add additional functionality.


12. as3flexdb


AS3FlexDB project is a open source lib that allows Adobe Flex applications to connect to a MySQL server.



13. as3flickrlib

The Flickr library is an ActionScript 3.0 API for the online photo sharing application, Flickr. It provides access to the entire Flickr API.


14. as3gamelib

Library of useful gaming classes for game development on the actionscript/flash platform


15. as3isolib

As3isolib (v1.0) is an open-source ActionScript 3.0 Isometric Library developed to assist in creating isometrically projected content (such as games and graphics) targeted for the Flash player platform. As3isolib includes utilities, primitives and views. As3isolib was developed with simplicity, speed and performance in mind so that developers can focus on actual implementations rather than having to learn a complex API.


16. as3mathlib

The Flex/Actionscript Math Library (as3mathlib) is intended to provide a rudimentary numerical analysis toolkit for the Actionscript/Flex programming environment.


17. as3mp3streamplayer

This project requires Flash player 10 and allows you to play shoutcast mp3 streams without memory problems.


18. as3nativealertlib

as3nativealertlib is an AIR alert that appears in a native window.

In Flex, we have alerts, but they are Flex windows rather than native OS windows. This is fine in the browser, but doesn’t make much sense in AIR (Adobe Integrated Runtime). In AIR, we want our alerts to show up in their own native windows. This project creates Flex-like alerts, but they are native windows.


19. as3notificationlib

as3notificationlib is a notification framework written in AS3 for the Adobe Integrated Runtime (AIR).

This project makes it easy to add cross-platform notifications to your AIR application. It handles “native system notifications” like the dock icon bouncing and the taskbar icon flashing, and it allows you to easily create alert “pop-ups”.


20. as3plsreader

as3plsreader is a PLS (Playlist) reader for Adobe AIR / Actionscript 3 which allows you to read and write PLS and M3U files.

PLS files and M3U Files are Playlist files used by alot of audio programs. Programs like iTunes, Real player, Winamp, VLC media player and Foobar play these formats without any extra codecs required.


21. as3powncelib

The as3powncelib is an interface between the Pownce API and ActionScript 3. It does all the grunt work of parsing the XML from the API and turning it in to AS3 objects.


22. as3scribdlib

The Scribd library is an ActionScript 3.0 API for the online document sharing application, Scribd. It provides access to the entire Scribd API.


23. as3soundeditorlib

as3soundeditorlib is an Actionscript 3.0 library for sound playback, spectrum display, and cue point display.


24. as3syndicationlib

as3syndicationlib is an ActionScript 3.0 library for handling syndication feeds.

Use the syndication library to parse Atom and all versions of RSS easily. This library hides the differences between the formats so you can parse any type of feed without having to know what kind of feed it is.


25. as3webservice

as3webservice is an open-source Webservice class implementation in AS3 for Flash CS3 IDE.


26. as3xls

as3xls is an library which allows you to read and write Excel files in Flex.


27. as3youtubelib

as3YoutubeLib is an ActionScript 3.0  library which provides an interface to search videos from YouTube.


28. as3-bits(prior version: adobe-air-util)

Miscalleneous AS3 bits, Adobe AIR AS3 utility classes


29. as3-rpclib

As3 RPC lib is a set of libraries that can be used with Flex 2 or AS 3 to invoke remote procedure calls using:

  • AMF0 (Flash Remoting MX)
  • JSON-RPC (Coming Soon)


30. ascollada

ascollada is an actionscript library for parsing Collada files.


31. assql

asSQL is an Actionscript 3 Mysql Driver aimed towards AIR projects to allow Mysql database connectivity directly from Actionscript.


32. assqliteutils

assqliteutils is an actionscript 3 SQLite utils library.


33. beziercurve

beziercurve is an ActionScript 3 library which lets you create and on the fly edit bezier curves with an easy syntax. You can add as many anchor and control points as you want.


34. bigroom

bigroom is an actionscript 3 library from Big Room. Various Flash/Flex Actionscript 3 source code released to the community by Richard Lord of Big Room


35. birdeye


BirdEye is a community project to advance the design and development of a comprehensive open source information visualization and visual analytics library for Adobe Flex. The actionscript-based library enables users to create multi-dimensional data visualization interfaces for the analysis and presentation of information.



36. bulk-loader

BulkLoader is a minimal library written in Actionscript 3 (AS3) that aims to make loading and managing complex loading requirements easier and faster.


37. csvlib

csvlib is a csv parser for actionscript 3.


38. degrafa

Degrafa is a declarative graphics framework for Flex, which allows you to use MXML markup to draw shapes, make complex graphics, create skins and also includes advanced CSS support.


39. displaylistmonitor

dispalylistmonitor is a panel for use inside of the Flash IDE to monitor objects within the display list.


40. efflex

efflex is an Designer Effects library for Flex.


41. everythingflexairlib

These free components and classes will help with your development of AIR applications. EverythingFlexAIR1.swc includes the ContextWindow, AlertWindow, NativeAlertWindow, SuperWindow, ConnectionManager, and UpdateManager classes.


42. facebook-as3

facebook-as3 provides AS3 API to access Facebook’s Platform API(Implementation of Facebook’s REST API in Actionscript 3.).


43. fastas3

FastAS3 is an ActionScript 3.0 Library inspired by jQuery which is a new type of JavaScript library for fast and fun development.


44. flexfiltering

FlexFiltering is an Controls and Collections for AS3 and Flex that support fast filtering across large datasets.


45. flexircclient

FlexIRCClient is an ActionScript 3 based IRC library which aims to be a Flex / Flash based IRC Client.


46. flexwires

FlexWires is a Wires UI control library for Adobe Flex.


47. flexlib

flexlib is an Open Source Flex Component Library which efforts to create open source user interface components for Adobe Flex 2, 3 and 4.

48. flexsurverylibrary

flexsurverylibrary is an ActionScript 3 library which allows you create survey for Flex applications.


49. flvplayerlite

FLVPlayerLite is a simple and lightweight FLV Player.


50. flvrecorder

FLVRecorder is an library which record BitmapData to an FLV-encoded file for Adobe AIR.

The class offers the user to record via inputting BitmapData, Bitmaps and even your custom components, Flex component, like your VideoDisplay and also Flash components, like the FLVPlayBack or your custom Sprites and MovieClips.


51. foam-as3

FOAM is a two-dimensional rigid body physics engine written in ActionScript 3.0.


52. googleas3api

GoogleAS3API is a simple collection of Google’s API features, there is a class per feature, like Google Web search, Images Search, Google Suggest etc which help you to integrate the power of Google in your Flash/Flex/AIR application (searches, translation, suggest, weather, feeds).


53. icodecoder

icodecoder is an ActionScript 3.0 library(one class) icon file decoder.


54. lastfm-as3

lastfm-as3 is an Actionscript 3.0 API to access all the available web services.


55. masapi

The target of the Masapi is to provide a complete framework dedicated to the management of the massive loading into a flash/flex application. It is designed to be as easy as possible to use but also to be as flexible as possible.


56. MinimalComps

MinimalComps are a set of minimal user interface components for use in ActionScript 3.0 based projects.


57. openzoom

open-zoom is an open source Toolkit for Multiscale Images and Zoomable User Interfaces (ZUI).


58. PdfUtil

PdfUtil is a simple AS3 library based on AlivePDF, which helps to create PDF out of a complex component, Parse HTM.


59. popforge

The Popforge library is the sum of several free time and research activities. Each piece in its own a project itself.


60. queueloader-as3

QueueLoader is an actionscript library for sequential asset loading and monitoring which designed to be used with Actionscript 3.0.


61. redherring

RedHerring is a light duty HTTP proxy for AS3.


62. reflexutil

This open source utility allows Adobe Flex developers to debug and alter properties of components while running an application.


63. snackr

Snackr is an RSS feed ticker for Windows/Mac/Linux built with Adobe AIR and Flex.


64. splinklibrary

splinklibrary is an actionscript 3 library to ease the daily work.


65. splinkresource

splinkresource is an actionscript 3 resource loading framework which aims to ease the workflow with resources in actionscript3 multilanguage applications.


66. swfin

swfIN is a javascript toolkit for flash developers.


67. swiz

Swiz is a framework for Adobe Flex that aims to bring complete simplicity to RIA development. Swiz provides Inversion of Control, event handing, and simple life cycle for asynchronous remote methods. In contrast to other major frameworks for Flex, Swiz imposes no JEE patterns on your code, no repetitive folder layouts, and no boilerplate code on your development.


68. urlkit

UrlKit supports Adobe Flex applications that need to expose URLs and window titles in the browser to represent their state. These URLs can be bookmarked, accessed via the Back button, etc.


Screen Capture with Flash (屏幕捕捉与FLASH)


Problem 问题

While working on numerous projects I often had requirements for doing screen capture in AS3.0. Unfortunately I found none in Google search, but got some resources which helped me to develop a component for screen capture. With the hope that this will help someone out there, I have posted it here.


Solution 解决

The SWC takes snapshots of each frames and converts it to bytesArray for storing and displaying in the end as an FLV bytes stream.


Detailed explanation 详细解释

Below is the Main mxml page developed using Adobe Flash Builder, SDK 4.1, Flash Player version 10.1.0. In this example I am doing a screen capture of the stage.  I have added a video and placed 3 buttons, Record, Stop and Play.

下面是使用Adobe Flash Builder, SDK 4.1开发的Main mxml页面,需要Flash Player 版本 10.1.0。在这个例子中我使用了一个屏幕捕捉舞台。我添加了一个视频和3个按钮,分别是录制,停止,以及播放。

On clicking on the Record button, the recording of the page starts. Once you click on stop, it stops recording.

Then click on Play button to see the recorded version. You may have other things/animations on stage for recording too, I have just tried with an FLV.


The recording play is basically bytesArray of an FLV created on run-time. You can save it to your server by passing this binary data to any back-end technology – ASP.Net or PHP, etc.

录制播放是基于一个实时创建的FLV中的字节流。你也可以通过传送二进制数据到任何后台技术例如 或者 PHP等,将它存储到自己的服务器,


01 <?xml version="1.0" encoding="utf-8"?>
02 <s:Application xmlns:fx=""
05 width="955" height="600"
06 addedToStage="onInit();"
07 frameRate="24" >
09 <fx:Script>
10 <![CDATA[
11 import com.dd.screencapture.ScreenCapture;
12 import com.dd.screencapture.SimpleFlvWriter;
14 private var screenCapture:ScreenCapture;
16 private function onInit():void
17 {
18 screenCapture = ScreenCapture.getInstance();
19 screenCapture.source = stage;
20 screenCapture.fps = 12;
21 screenCapture.size( 400, 300 );
22 screenCapture.x = 400;
23 screenCapture.y = 250;
24 stage.addChild( screenCapture );
25 }
27 private function startRecord( event:MouseEvent ):void
28 {
29 screenCapture.record();
30 }
32 private function stopRecord( event:MouseEvent ):void
33 {
34 screenCapture.stop();
35 }
37 private function playVideo( event:MouseEvent ):void
38 {
40 }
41 ]]>
42 </fx:Script>
43 <s:VideoDisplay width="400" height="300" source="assets/myVideo.flv" />
45 <mx:HBox >
46 <s:Button label="Record" click="startRecord( event );" />
47 <s:Button label="Stop" click="stopRecord( event );" />
48 <s:Button label="Play" click="playVideo( event );" />
49 </mx:HBox>
50 </s:Application>

Place the ScreenCapture.swc in lib folder of the flex project. You may also use this swc for any ActionScript 3.0 projects. Kindly note that this requires Flash Player 10.1 to run properly. No audio capabilities here.

放置ScreenCapture.swc 到flex项目中的lib文件夹中。你也可以在任何ActionScript 3.0中使用这个swc。请注意,其中项目需求在Flash Player 10.1下运行,并且无法使用音频捕捉。

Interestingly, you can save the screen capture as FLV format by using this piece of code below:


var saveFile:FileReference = new FileReference();, "video.flv" );//screenCapture is the ScreenCapture instance created in the above code block.

Resources used:

The links shows how to save BitmapData to an FLV in binary format and then save to dish using Adobe AIR, using FileStream. I have taken the part of writing the binary data for FLV and playing that FLV as stream on run-time

这个链接显示如何存储BitmapData到一个二进制的FLV格式,然后通过ADOBE AIR存储,使用FileStream。在代码中,我已经写了如何转换二进制数据到FLV并且如何实时播放FLV流媒体。



当我在写第二章 “字节可以做什么的时候?”,我想出了一个微型的帮助类,可以帮助开发者在他们的程序中轻松地从麦克风中录制音频。 

这就是MicRecorder,通过Flash Player 10.1中介绍的Microphone对象派发的Event.SAMPLE_DATA事件处理内部的ByteArray,并将WAV打包。 Wav解码器已被嵌入到其中,不过不久以后其他解码器也将可以被使用。


  1. // volume in the final WAV file will be downsampled to 50%
  2. var volume:Number = .5;
  3. // we create the WAV encoder to be used by MicRecorder
  4. var wavEncoder:WaveEncoder = new WaveEncoder( volume );
  5. // we create the MicRecorder object which does the job
  6. var recorder:MicRecorder = new MicRecorder( wavEncoder );
  7. // starts recording
  8. recorder.record();
  9. // stop recording
  10. recorder.stop();


当开始录制时,RecordingEvent.RECORDING事件被触发,并给出时间的信息。 当它停止录音时,Event.COMPLETE事件触发,你可以使用一个简单 的FileReference 对象将Micorder.output字节保存成音频流(作为一个wav):

  1. recorder.addEventListener(RecordingEvent.RECORDING, onRecording);
  2. recorder.addEventListener(Event.COMPLETE, onRecordComplete);
  3. private function onRecording(event:RecordingEvent):void
  4. {
  5. trace ( event.time );
  6. }
  7. private function onRecordComplete(event:Event):void
  8. {
  9. ( recorder.output, “recording.wav” );
  10. }



  1. private function onRecordComplete(event:Event):void
  2. {
  3. var player:WavSound = new WavSound(recorder.output);
  5. }



  1. // a specific Microphone instance can be passed
  2. var recorder:MicRecorder = new MicRecorder( wavEncoder, microphoneDevice );



在ActionScript 3中动态加载类

classes dynamically in ActionScript 3 is easy, but there are a couple of tricks
to keep in mind.

ActionScript 3动态加载类很容易。有一些窍门便于使用。

First of all, to load a
class dynamically, use the
 flash.utils.getDefinitionByName function.
Be sure to pass in the fully qualified class name, like this:


var MyClass:Class =
getDefinitionByName("com.mydomain.package.MyClass") as Class;

var myInstance:MyClass = new MyClass();


Easy enough. But there’s
something to watch out for. Class definitions only get compiled into your SWF
if they’re declared somewhere in your code. In other words, if
 MyClass was never declared, the class definition wouldn’t be included in your SWF,
and you would get a runtime error when trying to load it dynamically. (Note
that this is not the case for classes native to the runtime — only your own
custom classes.) Even importing the class isn’t enough to get it included — it
must actually be declared.

很容易做到。但是有一些需要注意。如果他们使用在代码的某个地方,类的声明只编译到您的SWF中。换句话说,当它试图动态加载时,如果MyClass从未引用,类定义将不包括在您的SWF,你会得到一个运行时错误。 (请注意,这不是对原生类(即FLASH PLAYER自带的)情况只有你自己的自定义类。)即使引入类是不够的,得将它包含进去它实际上必须调用。

are two ways to work around this issue:


Declare the class somewhere
in the code

Use a command line
argument to force the class definition to be included.
is an example of declaring the class before loading it dynamically:



// or

var mc:MyClass;

var MyClass:Class =
getDefinitionByName("com.mydomain.package.MyClass") as Class;

var myInstance:MyClass = new MyClass();

works fine, but in my opinion, it may defeat the purpose of loading a class
dynamically. Usually you want to load classes dynamically because you’re not
sure until runtime which class you’re going to want. If you knew which classes
you wanted before you loaded them dynamically, you could just instantiate them

The other option is to use
the mxmlc
 -includes compiler argument like

另一种选择是使用mxmlc –includes 编译器这样:



the class definition will be compiled into your SWF, and you can load it
dynamically anytime you want without ever having to declare it.


specify compiler arguments in Flash Builder, follow these steps:

具体在Flash Builder中的编译参数,遵循下列步骤:

Right-click on your

Choose “Properties”.选择“属性”

Select “Flex
选择“Flex 编译”

Enter your arguments
in the “Additional compiler arguments” section.
输入你的参数在“Additional compiler arguments”选项中

As an aside, you can use
 flash.utils.getQualifiedClassName andflash.utils.getQualifiedSuperclassName functions
to get the fully qualified class name of an object instance.


flash.utils.getQualifiedClassName flash.utils.getQualifiedSuperclassName


作者 池建强 发布于 2010年6月21日 下午8时59分





  1. Intranet到Internet的转变:企业应用系统由局域网转到互联网,企业应用开始要求多浏览器支持,国际化的支持,全球业务的互联互通。同时企业应用不再满足简单的表单和表格界面,富互联网应用(RIA)的需求应运而生,企业客户越来越倡导用户体验,RIA也是我们后续要重点讨论的话题。
  2. 企业应用的内容转变:除了企业的核心业务系统,这样一些需求渐渐浮出水面:交互性门户系统、电子商务平台、企业级2.0(博客、Wiki、RSS和微博等)、企业级SNS(社区平台)和无线企业应用等。
  3. 需求的转变:除了功能需求,客户对于安全、性能、大容量和大并发等特性愈发关注,在可预见的未来,企业应用一定是构建在互联网而非局域网,可能是在云端,也可能在其他的新技术上实现



RIA技术的全称是富互联网应用(Rich Internet Application),RIA首先应该是一个网络应用程序,其次它还要具有桌面应用程序的特征和功能。可以这样理解,如果你的桌面程序能在网络上(目前主要是基于浏览器)运行,并且能保持其原来的功能和特征,那么我们就可以称它们为RIA应用(富互联网客户端应用)。

目前RIA的主流技术主要包括Adobe公司的Flex,微软公司的Silverlight和Java阵营的JavaFX。Flash由于Flex SDK的支撑,很早就从单纯的动画展示转入RIA领域,而且由于Flash的普及,Flex目前应该是三大技术体系中市场份额最大、应用最广泛的技术;Silverlight是微软推出的跨浏览器和跨平台的插件,能在微软的.NET上交付炫目的多媒体体验和有丰富交互功能的Web应用,已经对Flex有了很大的冲击;JavaFX是未被收购前的Sun公司在2007年推出的用来对抗Flex和Silverlight的桌面应用,但由于起步较晚,目前应用并不广泛,但其Java的原生性和开源性质对Java社区的开发人员还是有很大的吸引力。




Flex是Adobe公司开发的可以输出成基于Flash Player来运行的互联网应用程序。Flex 基于标准的语言,与各种可扩展用户界面及数据访问组件结合起来,使开发人员能够快速构建具有丰富数据演示、强大客户端逻辑和集成多媒体的应用程序。Flex目前最新版本是4,一个Flex应用程序应该有两种语言代码完成,那就是ActionScript和MXML。ActionScript是一种面向对象的脚本语言,MXML则是一种标记语言,非常类似于大家所熟悉的超文本标记语言(HTML),扩展标记语言(XML)。简单来说MXML用来描述界面,ActionScript用来处理业务逻辑。


  1. 可视化开发,通过拖拽方式开发界面
  2. 对于有XML和脚本开发经验的人员,很容易上手
  3. 可实现表现层与后台的真正分离
  4. 丰富的媒体支持和动画效果,良好的用户体验
  5. 支持多种通讯方式和数据格式
  6. 同时支持客户端和浏览器模式
  7. 跨平台,支持各种操作系统和浏览器


与普通开发者使用Flex技术不同的是,我们采用了一种组件化的方式引入Flex,这是因为我们对这部分技术的引入并不是从零开始,为了应对企业级应用开发的需求,我们很早就构建了一个企业级应用开发平台——GAP(Global Application Platform)平台,这是一个Full-Stack的应用开发平台,除了底层框架、组织权限、工作流引擎、数据字典等等,还包括界面框架、通用Web控件,Ajax控件等,Flex的引入是对现在平台的补充和完善。


首先,进行Flex与GAP平台的整合,包括组件化集成、前后台通信机制的设计,在这一阶段我们主要采用了ant和xdoclet技术进行组件的打包、资源文件的合并,采用Spring BlazeDS Integration技术与GAP平台框架进行交互访问,通信方式采用了Felx提供的RemoteObject。(Spring BlazeDS Integration是Adobe与Spring共同联合开发一个开源项目,其目标是开发者可以利用Spring开发模型通过Flex、BlazeDS、Spring以及Java技术创建RIA )。
















通过图表描述业务数据,加强数据的展现能力。每个图表都可以支持参数的动态变化,响应点击事件,实现动态效果,而这些几乎不需要额外编写代码。传统的报表工具或制图工具,例如BIRT或JFreeChart等,处理报表图片时都是通过流的方式输入静态图片,一旦生成,就是静态页面,用户无法与之交互。而使用Flex进行图表的开发,则可以轻易突破 这一障碍,Flex提供了大量内置的图表控件,用来进行图表展示,在浏览器上的表现方式为Flash,可以在生成图表之后,继续实现前后台数据的交互和展示。例如使用CandlestickChart控件来实现蜡烛图的动态展示。从一下两张图可以很清楚的看出,通过选择不同的选项,可以显示不同的趋势变化,点击图元还可以显示该图元的相关数据。这些复杂的数据操作基本上是由CandlestickChart控件完成的,开发者只需要组装数据即可。事实上要实现这个功能样例,只需要100行左右的代码。


企业信息化10年,积累了大量的数据、文件、视频需要进行展示,通过Flex可以构建通用的播放器,利用流媒体技术、全文检索技术实现企业内部的知识管理。类似的技术和功能在互联网上已经不是什么新鲜事了,例如slideshare、youtube,国内的豆丁、优酷等,这些网站要么是基于文档的管理,要么是基于视频的处理,但它们的共同点是核心技术都采用了Flex。对于互联网领域,领域的细分无疑是非常明智的,但是在企业级应用领域,企业客户更关注的是应用的整合,我们拟基于Flex技术开发通用的前台播放器,可以同事播放视频和文档,后台采用Flash Midea Server和文件服务器,结合内容管理、全文检索和标签云技术,实现企业信息数据的全流程管理。









Flex 3 与 Flex 4 beta 之间的区别

Flex 4(代码名:Gumbo)beta 发行版在 Flex 3 基础上做出重大改动。Flex 4 beta 引入了一个新的组件和外观架构。但是作为 Flex 3 开发人员,您在使用 Flex 4 beta 编译 Flex 3 应用程序时可能不会遇到太多难题,因为新发行版的目的之一是保持与 Flex 3 的向后兼容性。

在本文中,我将 简要概述 Flex 4 beta 的主要目的和架构区别并介绍组件、布局、状态使用和效果方面的变化。我还将针对使用 Flex 4 beta 编译 Flex 3 应用程序时遇到的情况回答一些提问。本文无法涵盖 Flex 4 的所有新增功能。有关这些信息,请参阅 Matt Chotin 的Flex 4 SDK beta 的新增功能*一文。

本文中的术语 Halo 组件是指 Flex 3 原先包含的组件。术语 Spark 组件是指 Flex 4 beta 中的一套新组件。



Flex 4 SDK beta


本文假设您熟悉 Flex 3 Framework。

将应用程序迁移到 Flex 4 beta

将 Flex 3 应用程序迁移到 Flex 4 beta 时,步骤并不复杂。除了一些缺陷修复以及默认主题稍有变化,您的应用程序通常可以像 Flex 3 中那样正常运行(或更好)。但您必须注意几点。


请务必针对 Flash Player 10 进行编译。Flex 4 beta 需要 Flash Player 10 支持。


CSS 字体选择器将 Flex 类命名为 style。例如,以下是 Button 和 DateField 的字体选择器:

Button {
    cornerRadius: 10;
DateField {
   color: #780800;

从 Flex 4 beta 开始,当应用程序使用字体选择器时,需要名称空间。如果您只在 Flex 应用程序中使用 MXML 2006 名称空间,请将以下默认名称空间声明添加到 CSS 中:

@namespace "";

如果在应用程序中使用多个名称空间,您需要在 CSS 中提供各个名称空间。有关示例,请参阅本文稍后部分中的 Flex 4 beta 中的名称空间与包

此 外,如果应用程序使用 StyleManager.getStyleDeclaration("Button") 等方法,字体选择器必须包含它的包。例如,对 getStyleDeclaration() 的调用将改为 StyleManager.getStyleDeclaration("mx.controls.Button")。


Flex 3 (Halo) 组件的默认主题目前是 Spark 主题。因此,当您使用 Flex 4 beta 编译应用程序时,它可能会自行调整外观和大小。但是,如果要使用 Flex 3 的外观,您还是可以做到的,因为 Flex 4 beta 包含 Flex 3 的 Halo 主题。要使用 Halo 主题进行编译,您可以使用-compatibility-version=3.0 标志或使用 -theme 作为附加编译器参数来编译应用程序。在 Flash Builder 4 beta 中,您可以通过更改“Properties”(属性)面板的“Flex Compiler”(Flex 编译器)部分中的“Additional Compiler Arguments”(其他编译器参数)设置做到这一点(请参阅图 1)。如果要使用其他编译器参数,请确保 framework/themes/Halo 目录包含在您的源路径中。


图 1.设置其他编译器参数

如果您选择使用新的 Spark 主题,请注意许多可用于 Halo 主题的样式无法用于 Spark 主题。Spark 主题只支持数量有限的样式,包括baseColorcolorcontentBackgroundColorfocusColorsymbolColorselectionColor 和 rollOverColor。要使用 Spark 主题更改组件上的边框或圆角等可视部分,您需要创建一个自定义外观。Flex 4 beta 还加入了一种设计用于快速模型的线框外观。

除了主题更改外,Flex 4 beta 应用程序的默认预下载器也已经改为 mx.preloaders.SparkDownloadProgressBar。这个更轻量级的预下载器可以缩短一些启动时间。如果要使用 Flex 3 预下载器,您只需更改一行代码。在 Application 标签中添加以下内容:preloader="mx.preloaders.DownloadProgressBar"

如 果要将应用程序从 Flex 3 迁移到 Flex 4 beta,我不建议将各个 Flex 3 Halo 组件替换为它们对应的 Flex 4 beta 组件。这样投入时间可能并不是一个好方法。您应当为新的应用程序转而使用 Flex 4 beta 组件架构。

Flex 4 beta 架构变化概述

Flex 4 beta 的重要主题之一是“用心设计”。这个目标涉及在设计人员和开发人员之间创造一个更顺畅的工作流程。为了帮助实现这一点,该框架将组件可视部分与其剩余行为 明确划分开。在 Flex 3 中,组件的代码包括以其行为、布局和可视变化为中心的逻辑。在 Flex 4 beta 中,组件被划分为不同的类,各个类负责处理特定的行为。

Gumbo 架构文档*中的说明如下:

主组件类,即类名与组件的 MXML 标签名匹配的那个类封装了组件的核心行为。这包括定义组件调度的事件、组件表示的数据、接通作为主组件组成部分的任何子组件以及管理和跟踪内部组件状态(稍后我们将详细讨论状态)。

与 之相应的组件类是一个外观类,它负责管理与组件的可视外观相关的一切内容,包括图形、布局、表示数据、更改不同状态中的外观以及从一个状态过渡到另一个状 态。在 Halo 模型中,Flex 组件外观是只负责组件的某个图形部分的资源。更改组件外观的任何其他方面,如布局或状态可视化,需要将组件子类化并直接编辑 ActionScript 代码。在 Gumbo 模型中,所有这一切都在外观类中以声明方式进行定义,并且主要通过名为 FXG 标签的新图形标签进行定义。”

要进一步了解 Flex 4 beta 中新的图形标签,您可以阅读 FXG 1.0 规范*

作为上述架构的示例,您可以参考 spark.components.Button 类的代码。这个类只包含以组件行为为中心的逻辑。在外观类 spark.skins.default.ButtonSkin 中定义这个恶组件的所有可视部分。

考虑到性能,Flex 4 beta 为开发人员提供了构造块,可供他们根据需要选择功能。默认情况下,关闭并非所有应用程序都需要的重量级功能,如滚动和虚拟化。

Flex 4 beta 中的名称空间与包

在将 Flex 3 类原封不动地保留在同一 mx.* 包中的同时,Flex 4 beta 为组件、核心类、效果、滤镜、布局、基元、外观和 utils 引入了 spark.* 包。

Flex 4 beta 提供一套新的组件和效果,它们与 Flex 3 组件共享许多相同类名。为了避免 MXML 中出现名称冲突,Flex 4 beta 随附四个独特的名称空间:MXML 2006、MXML 2009、Spark 和 Halo。

MXML 2006:之前版本的 Flex 中使用的旧版 MXML 语言名称空间。使用 Flex 4 beta 编译的 Flex 3 应用程序可以继续使用这个名称空间。



MXML 2009:新的 MXML 语言名称空间。这纯粹是一个语言名称空间,包含组件标签。


Spark:这个名称空间包含所有新的 Spark 组件。它应当与 MXML 2009 语言名称空间一起使用。


Halo:这个名称空间包含所有 Halo 组件。它应当与 MXML 2009 语言名称空间一起使用。


以下是使用 MXML 2009、Spark 和 Halo 名称空间创建一个简单的 Flex 4 beta 应用程序的简明示例。它使用一个 Halo DateChooser 和一个 Spark Button。

    <mx:DateChooser id="main_calendar" x="20" y="20"/>
    <s:Button label="submit" x="220" y="20"/>

Flex 4 beta 还在 CSS 中加入了多名称空间支持。如果将 MXML 2009、Spark 和 Halo 名称空间与字体选择器一起使用,您需要在 CSS 定义中定义一组名称空间以避免名称冲突。

以下是一个将字体选择器用于 Halo 和 Spark 组件的 CSS 示例:

    @namespace s "library://";
    @namespace mx "library://";
    s|Button {
        color: #FF0000;
    mx|DateChooser {
        color: #FF0000;

默认 Property 和 Declarations 标签

在 Flex 4 beta 发布之前,Flex 语言允许 Application 根标签包含可视子代和非可视子代。可视子代与 addChild() 一起添加到Application,非可视子代则作为属性声明。随后,表示新属性声明的非可视子代不可以作为 Application 的直接子代。您可以将这些非可视子代添加到 <fx:Declarations> 标签下。这包括效果、验证程序、格式化程序、数据声明和 RPC 类等非可视子代。以下是一个简短的示例:

<s:Application xmlns:fx=""   
        <s:Fade id="fadeEffect" target="{targetButton}" alphaFrom="1" alphaTo="0" />       
    <s:Button id="targetButton" />
    <s:Button label="play effect" click="" x="80" />


如前所述,Flex 4 beta 引入了许多使用新架构的新组件类,它们应当可以令外观和其他自定义操作更简单。下表列出了 Flex 3 Halo 组件及其 Flex 4 beta Spark 对应组件:

Flex 3 Halo 组件 Flex 4 beta Spark 组件
mx.controls.Button spark.components.Button
mx.controls.ButtonBar spark.components.ButtonBar
mx.controls.CheckBox spark.components.CheckBox
mx.controls.ComboBox spark.components.DropDownList(不可编辑)
mx.controls.HorizontalList spark.components.List(带一个 HorizontalLayout)
mx.controls.HRule spark.primitives.Line
mx.controls.HScrollBar spark.components.HScrollBar
mx.controls.HSlider spark.components.HSlider
mx.controls.Image spark.primitives.BitmapImage
mx.controls.LinkBar spark.components.ButtonBar(带一个自定义外观)
mx.controls.LinkButton spark.components.Button(带一个自定义外观)
mx.controls.List spark.components.List
mx.controls.NumericStepper spark.components.NumericStepper
mx.controls.RadioButton spark.components.RadioButton
mx.controls.RadioButtonGroup spark.components.RadioButtonGroup
mx.controls.TextArea spark.components.TextArea
mx.controls.TextInput spark.components.TextInput
mx.controls.TileList spark.components.List(带一个 TileLayout)
mx.controls.ToggleButtonBar spark.components.ButtonBar
mx.controls.VideoDisplay spark.components.VideoPlayer
mx.controls.VRule spark.primitives.Line
mx.controls.VScrollBar spark.components.VScrollBar


mx.core.Application spark.components.Application
mx.core.Window spark.components.Window
mx.core.WindowedApplication spark.components.WindowedApplication
mx.containers.Canvas spark.components.Group
mx.containers.HBox spark.components.HGroup
mx.containers.Panel spark.components.Panel
mx.containers.Tile spark.components.Group(带一个 TileLayout)
mx.containers.VBox spark.components.VGroup

Adobe 鼓励您与 Spark 组件一起使用 Halo 组件和容器。由于 Adobe 在同一基类 (UIComponent) 上构建组件,Spark 与 Halo 之间应当可以实现全面的可互操作性。下表列出了目前没有 Spark 直接等效类的组件和容器。

Flex 3 类,没有直接的 Flex 4 beta 对应类


Flex 4 beta 将状态功能升级为一个全面的 MXML 语言功能。因此,您可能会发现状态更灵活、更直接。新的状态语法内联程度更高,允许在上下文中指定状态特定变化。以下是 Flex 4 beta 语法中的主要区别:

  • 只有状态是在状态阵列中定义的。
  • 在新的状态语法中,不能使用 AddChild 和 RemoveChild。您必须使用 includeIn 和 excludeFrom 属性在组件上定义组件在特定状态中的角色。

在以下 Flex 3 示例中,仅当文档的 currentState 为 submitState 时,才使用状态包含一个 Button 并删除一个 TextInput。对于较复杂的状态,这种方法可以做到十分详细。

    <mx:State name="submitState" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="submit" bottom="10" right="10"/>
        <mx:RemoveChild target="{firstTextInput}"/>
<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

以下是一段使用 includeIn 和 excludeFrom、更简单的 Flex 4 beta 代码。

    <s:State name="submitState" />
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
    <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
  • SetPropertySetStyle 和 SetEventHandler 已替换为新的语法,它允许您限定具备特定状态标识符的 MXML 属性值。

在以下 Flex 3 示例中,代码为 submitState 中的一个 Button 定义了属性、样式和事件。

    <mx:State name="submitState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="submit" />
        <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
        <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
    <mx:State name="clearState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="clear" />
        <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
<mx:Button id="submitButton" />

在 Flex 4 beta 中,代码如下:

    <s:State name="submitState" />
    <s:State name="clearState" />
<s:Button label.submitState="submit" textDecoration.submitState="underline"
   click.submitState="trace('done')" click.clearState="emptyDocument()"
   label.clearState="clear" textDecoration.clearState="none"/>
  • 组件不能再处于未定义状态或空状态。默认情况下,声明的第一个状态是组件的初始状态。
    当文档使用 MXML 2009 语言名称空间时,可以使用新语法。可以混合使用旧版语法和新版状态语法。只有 MXML 2006 名称空间中可以使用旧版语法。

此外,各个组件现在支持外观类中定义的一组状态,这使得根据组件状态应用可视变化更加简单。例如,如果查看 Spark Button 的外观,您会发现已定义以下状态:

    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />

ButtonSkin 类定义了各个状态中 Spark Button 在可视方面的变化。

以上只是简要介绍了新的 Flex 4 beta 状态语法。有关更多详细信息,请参阅增强的状态语法规范*


Flex 4 beta 的效果架构改进显著。虽然 Halo 效果只能用于不基于 UIComponent 的控件,Spark 效果可用于任何目标,包括框架中的新图形基元。所有这些效果类都包含在 spark.effects.* package 中。由于 Spark 效果可用于 Halo 组件、Spark 组件和图形基元,Adobe 建议您在今后的应用程序中使用 Spark 效果类。

我并未赘述这一问题,因为您可以通过 Chet Haase 的 Adobe Flex 4 SDK beta 中的效果一文了解效果类中新增功能的更多详细信息。


之 前的 Flex 版本在各个控件中定义组件和容器布局。因此,List、TileList 和 HorizontalList 等组件都共享布局以外的相同功能。而它们的布局逻辑仍在这些组件类中进行定义。在 Flex 4 beta 中,布局已与组件剥离开来。现在,Application、List、ButtonBar 和 Panel 等 Spark 组件可以通过声明方式定义布局。在所有组件中,Group 类负责管理包含,而 Group 的子代的布局则委派到相关的布局对象。布局除了 FXG 图形基元,还支持 Spark 和 Halo 组件。甚至可以在运行时更改布局。

作为开发人员,您可以轻松编写自定义布局并将它们切入或切出个别组件。以下是定义垂直 List、水平 List 和拼贴 List 的一个示例。

垂直 List(Spark List 的默认布局是 VerticalLayout):

<s:List />

水平 List:

        <s:HorizontalLayout />

拼贴 List:

        <s:TileLayout />

如前所述,Flex 4 beta 架构旨在为开发人员提供构造块,供他们根据需要选择功能。默认情况下,关闭虚拟化和滚动。要增加 Group 上的滚动栏选项并开启虚拟化,您需要:

1) 在布局对象上将 useVirtualLayout 设为 true 2) 将一个 Scroller 组件添加到 Group。

以下是对 Spark Panel 使用虚拟化和滚动的一个示例:

<s:Panel title="Horizontal Panel" width="300" height="220" left="20" top="20">
    <s:Scroller width="100%" height="100%">
               <s:HorizontalLayout useVirtualLayout="true" />
           <s:TextInput />
           <s:Button label="clear" />
           <mx:DateChooser />
           <s:Button label="submit" />

有关 Flex 4 beta 中的所有布局增强(包括对变换的更好支持)的更多信息,请参阅 Spark 布局规范*


所有 Spark 组件都使用 Flash Player 10 中的新文本引擎。这些新类为控制文本度量标准、垂直文本以及连字、双向文本等字形元素提供了低级支持。并且,设备字体现在具备嵌入字体的大部分功能,可以 对这些字体消除锯齿、旋转和设置样式。Flex 4 beta 在使用文本的所有 Spark 组件中用到了这一功能。有关 Flex 4 beta 提供的文本基元和文本组件的更多信息,请参阅 Flex 4 功能和迁移指南*中的“文本基元”部分。

Spark 组件现在还使用 Flash Player 10 和 AIR 1.5 中的 DefineFont4 嵌入字体格式。从最新的 beta 版开始,Halo 组件无法再使用 DefineFont4 格式。将 Spark 和 Halo 组件混合在一个应用程序中并嵌入字体时,这会造成一些开销。就目前而言,如果要对所有组件使用同一种嵌入字体,您需要嵌入字体两次,即使用针对 Spark 组件的 DefineFont4 和针对 Halo 组件的 DefineFont3 各嵌入一次。

以下是一个为使用 Spark TextInput 和 Halo DataGrid 的 Flex 4 beta 应用程序嵌入字体 Arial 的示例。

    @namespace s "library://";
    @namespace mx "library://";
    @font-face {
        src: url("arial.ttf");
        fontFamily: "ArialDF3";
    @font-face {
        src: url("arial.ttf");
        fontFamily: "ArialDF4";
        cff: true;
    s|TextInput {
        fontFamily: "ArialDF4";
        fontAntiAliasType: "normal";
    mx|DataGrid {
        fontFamily: "ArialDF3";
        fontAntiAliasType: "normal";

请注意,为 Spark 组件嵌入字体时,您需要在字体定义中指定 cff: true。

为 Spark 和 Halo 组件嵌入字体的解决方案仍处于开发阶段,因此今后这个过程应该会更简单。

与 Flex 3 的向后兼容性

与 Flex 3 一样,您可以使用其他编译参数编译应用程序:


这个编译器参数允许应用程序使用某些 Flex 3 行为,而不是新的 Flex 4 beta 行为。要获得 Flex 4 beta 中支持使用-compatibility-version 参数的向后兼容性变化的完整列表,请参阅向后兼容性文档*

注意:调用 Flex 3 兼容性时,无法选择性地保留一个 Flex 4 beta 行为变化子集。如果使用参数 -compatibility-version=3.0.0 进行编译,您将获得文档中描述的所有 Flex 3 行为。


从 Flex 3 迁移到 Flex 4 beta 有可能没那么痛苦。这个框架旨在尽可能地向后兼容。并且,当您熟悉新架构后,您会发现它其实更“灵活”!有关 Flex 4 beta 功能的更多信息,请访问 Web 帮助*