rockabit

A long while ago I wrote a small Flex application to draw L-systems (post).
With this app I noticed how cool it is to play around with drawing angles by moving the slider (post #2).

But somehow, I never thought of adding a play button to the slider so it plays it as an animation.
So now I did. Well, no play button, but just an animation. Here it is. Please enjoy.

lsystem animator

Note: after clicking once, you can use the + and – keys to speed it up or slow it down

Have you ever had the problem that, when opening the HTML that displays your Flash movie in the browser, all the stuff that is on stage i not positioned correctly?

I have. I encountered this problem with Firefox, when I noticed that objects were not centered on stage while this was the case when I ran the swf standalone or in Safari.

I managed to isolate the problem, and it turned out that what caused it was setting stage.scaleMode to StageScaleMode.NO_SCALE. After doing that, the stageWidth and stageHeight property values changed to zero.
It turned out that this could be solved by not implementing swfobject, but I didn’t want that, so I found a workaround in AS3.

To hack around this problem, I check the stageWidth and stageHeight values to see if either equals 0, and if so, I register a resize event listener, because I found that although the values become zero in Firefox, a resize event is also immediately dispatched after this. So setting a listener for this event and initializing the application inside the handler method solved my problem! Of course, you also want to trigger the handler manually in case there’s no bug, so I just call it directly if neither stageWidth or stageHeight equals 0.

Simple, huh? I know it’s a hack and I’d rather not need it, but at least my application behaves like I want it to now

Here’s the code:

public function Application()
{
    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    if (stage.stageWidth == 0 || stage.stageHeight == 0)
    {
        stage.addEventListener(Event.RESIZE, handleStageResize);
    }
    else
    {
        handleStageResize();
    }
}

private function handleStageResize(event : Event = null) : void
{
    stage.removeEventListener(Event.RESIZE, handleStageResize);
    // initialize application here
}

It was hard for me to find the correct camera settings in papervision to achieve a one to one pixel representation of my objects at z = 0, so here they are:

camera.focus = 10;
camera.zoom = 100;

Voilá! Now move your DisplayObject3D to x, y and z = 0 and you should see it at its actual pixel size.

I wanted to analyse the frequencies of the microphone input in Flash, but guess what? You can’t!

With streaming sound it’s no problem, as this tutorial shows. But surprise: the microphone input is not accessible so you can’t respond to specific frequencies in you live sound input. Crap.

Anyway, after discovering this I set out to simply use the volume of the input, which is represented in the activityLevel property of the Microphone class. When activity is registered (you can set a threshold volume above which it does so), the ActivityEvent.ACTIVITY is dispatched, so you can respond to that.

Get ready for my next surprise: I only see the event being dispatched when my security settings panel is open, and then only when the microphone tab is active! Wtf is going on here?!

After battling with this, and trying out different possible solutions, it turns out that to make it work, you need to have set the loopback setting to true (microphone.setLoopBack(true)). This means that the microphone input will be played back over your speakers.

Needless to say you won’t always want this to happen. In fact, you probably néver want this to happen (think of the feedback!), but apparently you have to in order to be able to read the input volume at all.

Luckily the solution is fairly straightforward: set the soundTransform property of the microphone to a SoundTransform instance with volume zero and presto: no mic sound playing back through your speakers, but an ActivityEvent.ACTIVITY event triggering nonetheless.

I just spent the best part of the morning fixing a bug in a website that made my browser crash when I was trying to play a video in Flash using the FLVPlayback component.

What turned out to be the problem? Well, it was the fact that we used the built-in setTimeOut method to keep checking the buffering progress of the video. It would crash Flash player without exception. I removed the call to this method and replaced it by an enter frame listener, and now it works like a charm. No more crashing.

I haven’t tested it thoroughly yet, but it seemed to appear after I had upgraded to Flash CS4, making Flash Player 10 a suspicious candidate. So my suggestion is: avoid this utility method where possible!

I’ve found a solution to creating singleton classes that make it absolutely impossible for any class outside it to instantiate it directly.

The idea is that you create an inline class (in this case called ‘SingletonEnforcer’) and require an instance of that inline class as a parameter in the constructor of the singleton class. No class outside of it can instantiate SingletonEnforcer, and therefore no class outside of it can directly instantiate the singleton class itself!

Here’s the example code:

package
{

public class SingletonClass
{
private static var instance : SingletonClass;

public static function getInstance() : SingletonClass
{
if (!instance)
{
instance = new SingletonClass(new SingletonEnforcer());
}
return instance;
}

public function SingletonClass(enforcer : SingletonEnforcer)
{
if (!enforcer)
{
throw new Error(”SingletonClass must be instantiated through SingletonClass.getInstance()”);
}
}

}
}

class SingletonEnforcer {}

I’ve found this example on PixelBreaker’s blog. Check it out.

In the project I’m currently working on, I found that HTML links in textfields weren’t properly executing, although the text seemed to be rendered properly. My mouse cursor even changed to a hand cursor on rollover of the link within the text, but I could only actually ópen the link through the context menu that popped up after a control-click (or right click for the PC user).
After some searching, I found the simple answer to my problem on the Flex Examples blog: in order for the HTML link to be properly executed, the ’selectable’ property of the containing TextField must be set to ‘true’! If the text is not selectable, your HTML link won’t automatically be opened on click. Way to go Adobe!

Right now I’m working on a project in which Flex integrates Flash components in its application and we encountered the infamous yellow focus borders when hitting the tab key from inside the application.

It wasn’t as easy as I thought it would be to Google the solution to prevent the ugly yellow rectangles from being displayed. I’ve found the solution in the Flex help though, so I’ll try to improve the search results on Google by providing the solution here.

When you look at the focusRect property description of flash.display.InteractiveObject, it says: “Specifies whether this object displays a focus rectangle. A value of null indicates that this object obeys the stageFocusRect property set on the Stage.”
And there’s your solution! In your Flex application, create a method that is called on creationComplete and in this method add the following code:

stage.stageFocusRect = null;

Now all focus rectangles are globally disabled in your application. It’s as simple as that.

Here’s some small experiments I did in ActionScript 3 with particles in combination with perlin noise determining how they move.

In all cases it’s a bunch of particles placed in a circle, each one having its position linked to a randomly chosen pixel in a scrolling perlin noise filled bitmap. The third example has only a few particles and interconnects them with a curve, creating a moving type of amorphous blob.

pulsating iris

pulsating fountain

globule

Edit: I’ve added a small motion blur effect to the globule to make it a little bit more interesting, visually.

After struggling with it for a while, I’ve finally found the way to set embedFonts and a specific textFormat for all text in a Flash CS3 ComboBox component.

First of all, it is wise to create a subclass of fl.controls.ComboBox to represent your custom comboBox. In this class you can then set some styles in the constructor as follows:

package com.rockabit.utils.as3
{
import fl.controls.ComboBox;
import fl.controls.List;

import flash.text.TextFormat;

/**
* Customized ComboBox component. Graphic changes have been made inside the component itself,
* in the library, changes in textual display are made here.
*/
public class CustomComboBox extends ComboBox
{
private var textFormat:TextFormat;

public function CustomComboBox()
{
super();

textFormat = new TextFormat(”Arial”, 10, 0xffffff);

//textField is the top text, in the closed combobox
textField.setStyle(”embedFonts”, true);
textField.setStyle(”textFormat”, textFormat);

//dropdown is the list that shows when you open the combobox
dropdown.setStyle(”cellRenderer”, CustomCellRenderer);
}

override protected function drawLayout():void
{
super.drawLayout();
textField.y = 0;
}
}
}

So in the constructor, I create a TextFormat instance and assign that to the textField variable. I then set the cellRenderer style of the dropdown list, which is a class that describes how each item in the list is formatted. For that I use another custom class, which extends fl.controls.listClasses.CellRenderer:

package com.rockabit.utils.as3
{
import fl.controls.listClasses.CellRenderer;

import flash.text.TextFormat;

/**
* Custom cellRenderer for comboBox list items.
*/
public class CustomCellRenderer extends CellRenderer
{

public function CustomCellRenderer()
{
super();
this.setStyle(”embedFonts”, true);
this.setStyle(”textFormat”, new TextFormat(”Arial”, 10, 0×000000));
}

}

}

All this class does is extend the default CellRenderer class and set some styles in the constructor.

Using these two simple classes, you can easily make sure that all your fonts are embedded in the comboBox component, and give them custom text formatting.

I’ve made a small example .fla file. You’ll notice that I added the Tahoma font to the library with a linkage class, which I instantiate in the TextFormat constructor parameter to get the correct fontName. Because I set the library font to bitmap text andset embedFonts to true in code, you get a nice crisp font display in your combobox.

Edit: I have now also added functionality to the CustomComboBox class to set vertical positioning of the main textfield. Right now this is hardcoded, but that could be changed to listen to a custom style.

Download source:
http://www.rockabit.com/downloads/as3/combobox_example.zip