I wanted a radial gradient graphic as a background in my application. The Flex application tag supports linear gradients but not the radial one. I could set a huge graphic (png) as the backgroundImage for the Application, but that would add filesize to my swf file. I could extendApplication and override the updateDisplayList function and draw my graphic there, but I don’t think that’s the way to go either.

So I tried creating a programmatic skin which may sound like the right solution, but which styleable property do we need to attach the Classreference to? Here’s the solution:

Style the Application tag. Set the Classreference on the backgroundImage property (who would have guessed that one). Don’t forget to set the backgroundSize property to 100%, otherwise our graphic won’t stretch to the full size of the container.

1
2
3
4

Application {
backgroundImage: ClassReference("test.skins.ApplicationBackgroundSkin");
backgroundSize: "100%";
}

Then create a programmatic skin class by extending the ProgrammaticSkin class and override the following functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

override public function get measuredWidth():Number
{
return 200;
}
 
override public function get measuredHeight():Number
{
return 200;
}
 
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
var mat:Matrix = new Matrix();
var colors:Array = [0xEAEAEA, 0xFFFFFF];
var alphas:Array = [1, 1];
var ratios:Array = [0, 255];
 
mat.createGradientBox(200,200, 0);
graphics.lineStyle();
graphics.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, mat);
graphics.drawRect(0,0,200,200);
graphics.endFill();
}

Draw the graphic in the updateDisplayList function. Don’t forget to override the getters for measuredWidth and measuredHeight. If you don’t, the programmatic skin doesn’t have a width and height and the graphic wil not be visible.

Now I’m not frequent user of the command line, but I know terminal (on my mac) a bit, so I just navigated to the bin directory of my Flex sdk and did this:

copylocale en_US nl_NL

Didn’t work. Terminal just sais:

-bash: copylocale: command not found

Turns out you have to call the copylocale command from the root directory of your sdk, and include the /bin in the command call, like this:

bin/copylocale en_US nl_NL

Damn command line tools, no one ever tells you this stuff.

Some more info on runtime localisation:
http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions:_Runtime_Localization

• WOW Physics engine: This is a particle based engine, which means every vertex has it’s own physics properties
• JigLibFlash Physics engine: This is a Rigid Body based engine. You work with primitive types like boxes and speres to create a rough shape of you 3d object. These rigid body based engines are faster than particle based engines, because there’s just one rigid body with physics properties instead of (in case of a simple cube) 8.

There’s quite a lot of examples around built with JigLibFlash and Papervision3D. Because I prefer building my 3D stuff in Away3D, I wanted to create some 3D physics with JigLibFlash and Away3D. Here’s a simple example of how it works:

Just use the arrow keys to move the ball around, try to get it to jump the ramp . You can download the source code here.

That’s it for now. it takes a lot of time to figure out how everything works because these physics engines are still buggy and undocumented (grrr). The project members of JigLibFlash did a great job by porting this c++ engine to actionscript, but, for an open source project to be successful they better start documenting the source code (I know it’s a boring job) instead of creating demo apps with Papervision, which, in my opinion is not the best 3D engine around.

What is ANT?
You can do about anyting with ANT by creating an ANT Script (xml) that tells ANT what to do. ANT can do anyting with files (copy, paste, move, duplicate, extract zip files, etc) and with ANT you can execute applications which you would normally use through the command line (or Terminal on a Mac).

ASDoc ANT Script
Ok, back to the ASDoc ant script. Click “File -> New -> File” and create a file called asdocbuild.xml. Paste this code into the xml file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8"?>
<project name="ASDoc build" default="createdocs">
 
	<property file="asdoc.properties"/>
 
	<target name="createdocs">
		<exec executable="${asdoc.dir}/asdoc" failonerror="true">
			<arg line="-doc-sources 'src/'"/>
			<arg line="-main-title 'Undercore, a Flash and Flex development framework'"/>
			<arg line="-window-title 'Undercore'"/>
			<arg line="-output 'docs'"/>
		</exec>
	</target>
</project>

Some explanation of what happens in the xml file above: Obviously it’s an xml file (line 1).  The project tag defines the projectname of the build and the default target to execute, in this case the target on line 5 called createdocs. This node contains an exec node which tells ANT to execute a command line statement with the arguments contained in the exec tag. This is the actual asdoc execution.

Before it executes any of the targets, it loads a properties file. You can define variables in a properties file, such as ${asdoc.dir} which is defined as asdoc.dir in the property file. This is the properties file content:

asdoc.dir=/Applications/Adobe Flex Builder 3 Plug-in/sdks/3.2.0/bin

Just create a file named asdoc.properties and paste the code above in it. Your project should look something like this:

Now right-click the asdocbuild.xml file and choose Run As -> Ant Build. Your documentation’s being created.

The same thing goes for Flex, but Flex has it’s own measuring and sizing methods. I’ve come to know that it’s a great thing as regards to performance, maintainability and scalability of your component to adapt to the Flex Framework.

In this case, I’ve extended a Flex component. The new Component contains an Away3D scene, which wants to take up the full width and height of my Flex Application. To solve this we need to override the updateDisplayList method. This method get’s called by the Flex Framework every time something in the measuring has changed. Here’s how it looks in code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
 
super.updateDisplayList(unscaledWidth, unscaledHeight);
 
// Set the clipping of the 3D scene to make sure only the visible elements are rendered,
// this is great improvement for the performance
var clipping:RectangleClipping = new RectangleClipping(-this.width/2, -this.width/2, this.width/2, this.width/2);
 
// Asign the clipping to the _view3D, in this case a private variable within my class
_view3D.clip = clipping;
 
// Remove the old mask if there is one
if (_mask != null) {
this.removeChild(_mask);
}
 
// Create a new mask
_mask = new Sprite();
_mask.x = this.x;
_mask.y = this.y;
_mask.graphics.beginFill(0xFF0000,1);
_mask.graphics.drawRect(0, 0, this.width, this.height);
_mask.graphics.endFill();
 
// Add it to the displayList
this.addChild(_mask);
// And assign the mask to the view3D
_view3D.mask = _mask;
 
// And center the view3D in the available space
_view3D.x = this.width / 2;
_view3D.y = this.height / 2;
}

So as you see above, it’s quite straighforward. The clipping in the beginning of the method is not necessary for the masking, but since only the masked area is being displayed, there’s no need to render the invisible parts of the view3D.

As you may have read in a few of my other posts I’ve hacked a CoverFlow component together, just to see if it could be done. I was glad to see a lot of people liked it, so I decided to turn it into a proper component instead of the “hacked together” version I’ve posted before.

A lot of things have changed under the hood, a lot of bugs are fixed and you have to use the component a bit different.

• The previous version was built as a container, the new version is built more like a dataGrid, so it’s a component with a dataProvider. The component just renders the data in the dataProvider
• It’s dynamic! It loads the images from the dataProvider. Changes on the dataProvider will be detected through binding
• It’s now compatible with the Flex history manager, I’ve implemented the IHistoryManagerClient interface
• It’s now compatible with the Flex focus manager, I’ve implemented the IFocusManagerComponent interface
• I’ve added keyboard control, so the left and right arrow keys change the selected cover
• It dispatches events, it lets everyone who’s listening know that the selectedIndex has changed, that it’s finished animating, etc
• It’s now properly masked, the 3d scene doesn’t stretch to the full stage width and height anymore
• And some more other small things

I’ve created a new sample project to demonstrate all of the features, see it in action here. You can see and download the source code of the sample project here.

The component free to download and free to use, download the swc here. I’m not publishing the source code of this one for now.

I’ve created documentation to help you put this component to good use, read it here.

Let me know what you think of it. I’d also like to see some end results. some projects in which you’ve used my component.

The next step? Hmm, a piclens component perhaps?

To conveniently call the asdoc.exe command from every folder on your system you have to add the path to the folder asdoc.exe is in to the PATH system variable. Here’s how: Go to your Control Panel and click System. Go to the Advanced tab and click Environment Variables. In the System Variables list locate the Path variable. If it doesn’t exist create it. Doubleclick the variable to edit the value and add the location of your Flex bin folder, in my case it is: “d:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\bin”. Don’t replace any of the other values in the variable, the value of the variable is semicolon-separated, so just add the path at the end of the value. Now click OK OK and reboot. After the reboot you should be able to just enter this in the command line: c:\asdoc, and ASDoc should respond with a beautiful error.

I hate typing in a command prompt (I don’t like typing at all), so I create a batch file to call ASDoc so I can create and recreate my documentation again and again. I place the batch file in the root of my project, so here’s what my project looks like:

1

asdoc -source-path . -doc-sources . -output asdoc -external-library-path=lib -main-title "My work API documentation" -window-title "My work API documentation"

Some explanation about the switches in this command:

• asdoc: this calls the asdoc command
• -source-path: Enter a dot to tell ASDoc that the current folder is the source path
• -doc-sources: Enter a dot to tell ASDoc to document all of the sources in the current Folder
• -output asdoc: This is the name of the Folder in which the documentation will be generated
• -external-library-path: If you use external swc’s, ASDoc wants to know about them, so enter the Folder in which they are located. In my project above I’ve used Away3D and Tweener, they are located in the lib folder
• -main-title: The title at the top of the document
• -window-title: The title the browser window displays

Note that the -external-library-path is an undocumented switch, I’ve spent an hour to get ASDoc to work properly with external libraries. Using -library-path won’t work, you’ll replace the Flex Framework by doing that, so ASDoc will say something like “Hey, what’s a UIComponent?”.

Everything should work fine, but with ASDoc you’re never sure. Just run the batch file from the command line and see what happens.

By the way: don’t use unsupported tags in your code. The @description tag for instance is not supported, which will result in ASDoc throwing a useless xml parser error.

Good luck, you’re on your own now…

I’ve been quite busy working on my CoverFlow component. I’ve added my reflection class and added the possibility to use cubes instead of planes as a cover. Since I’ve used a true 3D engine (Away3D) to build this component it’s become much more than just a CoverFlow rip-off. Here are some examples of what it can do:

Click here to see the CoverCube in action. Try the presets and drag the sliders to explore the possibilities of this component.
Click here to view the source code.

Here’s a few examples of the component using just planes:

Click here to see the CoverFlowV2 in action. Try the presets and drag the sliders to explore the possibilities of this component.
Click here to view the source code.

So the idea is that there are two flavors to this Reflection classes:

• The Actionscript-only way to create a Reflection
• The MXML-only way to create a Reflection

I also wanted to be able to create a reflection of a video or any other moving object. Check the example to see it in action.

The Actionscript-only way to create a Reflection

I’ve created this one so you can create reflections in Flash or in any Actionscript project. I’m going to use this to create reflection BitmapData’s to use in Away3D. Here’s how you use it:

1

var reflection:Reflect = new Reflect(this.image1 as Sprite, 0.4, 100, true, Reflect.BOTTOM, 0);

The constructor arguments are:

• The sprite to reflect
• the alpha value
• the ratio value
• a boolean to tell if it should be added as a child to the target sprite
• the direction of the reflection
• the updateTime, this one is set to 0, so it doesn’t periodically update the reflection

See the example here
See the sourcecode here

The MXML-only way to create a Reflection

The component version uses exactly the same arguments as the Actionscript class. All properties (except for the updateTime) are bindable, so you can alter the alpha, ratio, etc at runtime.

1

See the example here
See the sourcecode here

There’s one problem with reflecting dynamic textfields. I’m using a Matrix to create the Flipped BitmapData. Unfortunately the scale and translate methods of the Matrix mess up the rendering of dynamic textfields, but hey, who would want to reflect a boring textfield or dateChooser
I’ve written a post about this problem, you can read it here. I know the solution to this problem; Use a Bitmap and set the scaleY property, but this will only flip the Bitmap, the BitmapData is still not flipped, and as I mentioned before, this was all to do about the Flipped and reflected BitmapData.