Toluu

Ryan Campbell

Flex, Flex and more Flex.

OpenFlux + Degrafa = FluxChartsSeptember 17 2008

Last night I started playing around with the new GeometryRepeater/PropertyModifier classes in Degrafa and decided it would be fun to create an OpenFlux chart component. The code consists of a Chart model class (currently just has a data Array property) and 3 mxml views. You can change the view at runtime to a pie, line or column chart.

The app is below with view source enabled. So far the component is really simple and doesn’t even have a controller. I plan on developing it further but wanted to show it off at the early stage so you can see how simple it is to get started creating a custom OpenFlux component.

I will be posting updates as I add more functionality. Let me know any ideas you have for what you would like to see.

View Source Code

Customizing the OpenFlux ScrollBarSeptember 10 2008

At the 360|Flex Day 1 Keynote, Mark Anders presented on Flex 4, Thermo and Flash Player 10 (video here). One of his demos was a custom scroll bar that was easily built with Flex 4/Thermo, but complicated with Flex 3. I’ve created a similar scroll bar using OpenFlux below with view source enabled. You’ll be pleased to see how little code is involved. Making use of OpenFlux+Degrafa all customizations were done in MXML with not a drop of AS3 code required.

View Source Code

Plexiglass: 3D Components Made Easy at 360|FlexAugust 13 2008

In the time since 360|Flex Atlanta, Ben and I have made a lot of progress on OpenFlux. The majority of my focus has been on what’s called Plexiglass. It consists of an alternate view class, 3D layouts and cameras allowing you to create 3D components with as little as a couple lines of mxml or css.

We’ve still got a ways to go, OpenFlux is still in alpha release, but I’m really happy with what we’ve done so far and I can’t wait to show it off. My session at 360|Flex will give you a great idea on what’s currently possible, how to get started and future plans. Not to mention some sweet demos with full source code provided.

I’ll also be looking to the crowd to drum up discussion on where to go next with the project. Although OpenFlux has been quoted as “Flex 4 Now”, Plexiglass is definitely beyond the scope of the Flex 4 SDK. We’ve got a pretty solid core, I’ve experimented with Flex 4 compatibility and I think with the communities help this project can go a long way.

Below is a quick example (took 5 minutes) of a regular OpenFlux List component using the FlowLayout and an OpenFlux List using Plexiglass with the SpiralLayout. You can see by the source code, Plexiglass is really easy to get started with.

If you are interested in learning more come check out my session on Monday afternoon. On Sunday there is also free training on OpenFlux with Ben Stucki and I’ll also be there to show you how to build a 3D component (e-mail

Updated: PlexiGlass (OpenFlux 3D) ExampleApril 5 2008

Since my previous entry I’ve made some major speed improvements, added back in the 52 cards and added 2 new 3d layouts similar to the ones in Pavan Podila’s Element Flow.

We’ve still got some work ahead of us before this goes public but I definitely can’t wait to see OpenFlux get used and see what new 3D layouts others contribute.

As we get closer to release I’ll be posting more examples and howtos on getting started with OpenFlux.

Click the image below to try out the example.

PlexiGlass (OpenFlux 3D) ExampleMarch 31 2008

I’ve ported over Doug McCune’s CoverFlow component as 3D layouts in OpenFlux. You can switch between horizontal, vertical and carousel layout in the same List component along with a few other adjustable properties. It’s highly likely there are a few bugs and I had to limit it to 20 cards (52 cards was crazy slow) but this should give you a great idea of where OpenFlux is going.

A regular OpenFlux layout class manages the the x/y positions of the item renderers. PlexiGlass layout classes goes a step further and manage z position, x/y rotations and the camera.

We’ve still got some cleaning up to do but the code for this example will be included once PlexiGlass goes public. Click the image below to try out the example.