So, how to use RSL winthin an ant script to reduce the size of the swf result file ?

Firs of all, you have to use a configuration file witch specifies a lots of information to the compiler about your application like the name, the player version, etc. So, you can create your own configuration file and specify all the informations needed. A sample of the file is in the flex sdk named “flex-config.xml”. Inside this file, you can write a tag runtime-shared-library-path witch specify the SWC file you want to use as an RSL.

An example of the config file may be:

<flex-config>
<compiler>
...
</compiler>

</flex-config>

The <path-element> tag is the relative path to the library file, the <rsl-url> is the relative url of the RSL relatively to the root server path and the <policy-file-url> is the relative URL for the crossdomain.xml file. If not specify, flash will try to find it at the root of the server.

Now we can use this file in our ant task as a config file for the compiler. Therefore, the compiler will create correct links to the RSL in the project SWF file.

This is a sample how to use the config file:

<mxmlc file="..." >
...

<load-config filename="${basedir}/flex-config.xml"/>
...
</mxmlc>

After the build, the SWF file of the project is smaller than before and you have just to put the framework.swz and framework.swf file at the correct location on the server to use them as Runtime Shared Libraries !

Ready to try Bime? Take the free trial

<chartsExtention:ColoredAndSizedColumnChart id="chart" width="100%" height="100%">
  <chartsExtention:annotationElements>
	<DataCanvas:TrendCartesianDataCanvas id="trendCanvas" includeInRanges="true"/>
   </chartsExtention:annotationElements>
...

Now you can call method like drawLinearTrend() or drawPolynomialTrend(). It’s that easy and should work with all cartesian charts (column / bar / plot etc…) without extra work.

Have a look here for a demo. View source enabled.

Let us know for any trouble. Huge credits to the as3mathlib for the maths.

We don’t stop to add features like this in Bime so if you are interested in, register above to the Beta. It should come very soon: jump on the bandwagon!

Ready to try Bime? Take the free trial

Design goals were to:

1) add more encoding variables to the standard charts: size, color and shape are used to convey more meaning to visualizations.

2) charts should be as easy to use as the flex ones and require no extra work.

Click on the image below to see some sample (but be warned that it is just technical examples: axis are not properly formated, titles are missing etc…)

We used extensively degrafa. Almost all data renderers are rewritten using it. Thanks to the degrafa team for the good work. We only scratched the surface and it opens already a lot of opportunities for innovations in the data visualization field. We also used examples written by Ely Greenfield. Once again, I can’t imagine doing this kind of work without Flex being open source.

Bime will help end users to create easily this type of visualization (+ treemap, sparkline etc…) on the fly. With a simple drag and drop user interface, they’ll be able to visually analyze their data from almost anywhere: web services, cloud databases, relational databases, spreadsheets…

If we see some interest, we plan to open source these extensions soon after the official launch of bime in March. So, if you are interested drop us a line in a comment below!

Ready to try Bime? Take the free trial

Why?

Try to validate your default flex 3 html wrapper against this validator. You should get a bunch of errors. For the full rational look at here and at Ted Patrick.

How?

Gumbo, Flex 4, will include templates based on SWFObject. Steal them and use them today!

1) Download Gumbo SDK here. Choose the latest milestone release and the Open Source Flex SDK (the small one).

2) Look for a “templates” folder in the unziped directory. Copy it. 10 seconds…

3) Go to your SDK home. On Mac os: Applications > Adobe Flex Builder 3 (plug-in) > sdks > 3.x.x . Rename the “templates” directory as “templates bak”. Paste the new one. 20 seconds…

4) Open Flex Builder / Eclipse. Force the refresh by making a change on the project settings of the html wrapper. Build. 30 seconds: you are done.

By the way, validate your new page against the validator. Woow, no error. Thanks Gumbo.

Disclaimer: I didn’t test extensively with history enabled. But we use that for our main app and some projects for several weeks and so far it works great. Let me know if you face any trouble.

Ready to try Bime? Take the free trial

Solution 1: the wrong way

You take care of hosting the videos file on a server behind the same domain you served your RIA application. This is important because you can’t stream videos (or anything for that it matters) from another domain unless it has a liberal crossdomain.xml file in the root or unless you proxy request (a pain). Forget YouTube, Vimeo and any major video delivering solution.

Problems: all rely in the solution= “you need to take care of the files”. Here come a bunch of problems: files are most of the time pretty big. You will need to back them up, you can’t check them in your source control or they slow down your deploy to a new server and explode your repository size, you can, of course, host them on a separate server but, hey, it’s a new server to manage etc…

Solution 2: the easy way

You can simply put your videos (and all your static files by the way) on Amazon S3. I hear your inner geek: “but Amazon S3 don’t have a a liberal crossdomain.xml file!”. Yes but they have virtual hosting of bucket. It means you can have a cname that points to S3 in your domain.

For example: videos.wearecloud.com can point to a S3 bucket available at videos.wearecloud.com.s3.amazonaws.com. For the Flashplayer it is exactly the same domain that served the RIA application, hence no security error. For you, it is a whole new world of easy video streaming in your RIA with nothing to worry about.

The steps

1) Create a bucket that matches the hostname you want. Let’s say “videos.wearecloud.com”

2) Create a CNAME on your domain like that:

videos.wearecloud.com CNAME videos.wearecloud.com.s3.amazonaws.com

nota: the exact process depends of your DNS hosting but it should be pretty easy and, in general, involves a DNS zone file.

That’s it. In your Flex app you can:

<mx:VideoDisplay autoPlay="true"  source="http://videos.wearecloud.com/yourvideo.flv" />

Going further

On the performance side, we are so far pretty happy with this solution. But let’s face it: it is not yet as fast as with a FMS in the basement. Nevertheless, amazon annouced a few weeks ago CloudFront, that is basically a Content Delivery Network (CDN) on top of S3. An simple API call make your bucket redundant across the globe for faster delivery.

We didn’t test this yet, but it should be an effective way to speed up the solution. Let us know if you test this out or if you have any trouble with the steps above.

Ready to try Bime? Take the free trial

For the flex part of the application (that is 75% of the code base), we use Puremvc as a micro architecture framework. It is heavily based on G.O.F design patterns : observers, proxy, mediator, command and MVC separation of concerns. It allows you to organize your code in a loosely coupled way with a minimal boiler plate code set up. But it had one drawback: it was based on a singleton facade. The 2 side effects of that:

1) It was hard to test because you can’t have a fresh instance for each test

2) Even if separation of concerns between Model / View / controller (let’s call it “vertical separation”) was great, the code base will have too much intimacy between the different parts of your application as it gets bigger almost inevitably (let’s call it lack of ‘Horizontal separation’). In our example of generalizing data sources, the model building engine knew too much about Google Spreadsheet, our first data source.

Enter the multi-core version of Puremvc and its pipe utility. Multicore version of Puremvc framework allows you to have several MVC stacks, called cores, in your application. It is not anymore singleton based. This allows you to really isolate the different functions of your applications. In our case study about data sources, we used multicore as a kind of giant strategy pattern: we encapsulated all the knowledge of a data source (including UI like forms) in a core. We can swap between them at runtime. The shell application knows nothing of the data source except its name and a set of message it can send or receive. The same is true for the data source core.

The sequence looks like this:

• As soon as the shell core needs something from a data source, it sends a notification with the action it wants to perform.
• This notification will be catched by a command that will look if we need to load the data source core
• If the core is already loaded, it will pass the notification to a junction Mediator that will send a message to the data source core (using the pipes utility).

This means our data sources’ cores are completely dynamic. They are only loaded when needed. This means faster initialization when starting up. The long term aim is to allow you, our users, to define data sources’ connectors the same way we do. That is, you register a new data source in Paperboy bime, point to an url where you module is hosted and that’s it. You have a new data source supported in Paperboy bime. It is like in the old world of database connectivity (JDBC, ODBC etc..) but with the power of the new web world and distributed systems: the source file is hosted on only one computer, it is always up to date, no installation needed…

We really feel good with this plug-in architecture because supporting a new data source is now really easy, can be done in parallel, won’t break anything and won’t increase startup time. Moreover, we laid down foundation to let our users define their own custom data sources

Ready to try Bime? Take the free trial

Problem : need to distort some screenshots with a 3D effects for the home page.

Possible solutions : photo editor trick, expensive plugin…but wait. Can’t Papervision do the trick ? But I would need to access the file system…hum can’t Adobe Air do the trick ?

Result: One hour later => welcome the image3D utility (I seriously run out of creativity for the name, I know). Drop an image on it, distort it in 3D, and press capture to get a brand new distorted image on your desktop.

Credits to Mickael Ruellan who made the papervision/flex bridge easy.

Watch the video :

and get it (view source enabled) :

image3D.air

This code is one hour of work, so basically, it took me more time to do some research than to code it. The good thing is it’s so simple that it can be VERY easily extended. Anyway let me know if you have any trouble with it.

Playtime is over. Back to Paperboy bime now.

Ready to try Bime? Take the free trial