Flash Blog by Jon Danao

I am trying to recreate the Pixelizer plugin by Joe’s Filters. This will be a work-in-progress. I’m planning to include several things into this class like different shapes for the block, color averaging, blur effect, random rotation, jitter, etc.

Download the source here.

Here’s my first take on using the SoundMixer and ByteArray classes to create a simple sound visualization app. After reading tutorials on this topic, I discovered that there are a few basic things you need to get started.

• Sound object to hold the sound
• ByteArray object to hold the spectrum data
• Renderer function to extract and draw the visualization
• Timer object to constantly refresh the spectrum data:

I used a MovieClip with a gradient fill as my base color for the equalizer and a Sprite with bars (drawn using the Drawing API) as the mask for the colors. The gradient fill can be drawn programmatically but I’m too lazy to do that now.

Download the source.

The Flex’s Charting component has a property called labelRotation that tilts / rotates the chart labels for them not to overlap each other and make a mess of your pretty charts. This will not work automatically. You have to first embed the font outline into Flash and the rotation will finally be applied.

Here’s the sample code:

        

    
    	@font-face
	{
		fontFamily: myFont;
		src: local("Verdana");
	}

	LineChart
	{
		fontFamily: myFont;
	}
    

    

    	
    		
    	

    	
		
	

    	
    		
    	

    

By default, Flex does not implement the PageUp, PageDown, Home, End, ArrowUp and ArrowDown scrolling like most browsers do. These functions will try to make keystroke/keyboard scrolling happen.

First, invoke registerGlobalKeyHandler() upon applicationComplete. Got this from the Adobe Flex Cookbook by Kristopher Schultz.

A point for improvement - this scrolling script will only work after the user clicks on the flash app itself. I do not know how to set focus on the app after it has loaded. Maybe you can help?

Code:

public function registerGlobalKeyHandler() :void
{
	stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
}

public function handleKeyDown(event:KeyboardEvent) :void
{
	var newKeyCode:uint = event.keyCode;

	switch(newKeyCode)
	{
		case 33: // PAGE UP
			Application.application.verticalScrollPosition -= 200;
			break;
		case 34: // PAGE DOWN
			Application.application.verticalScrollPosition += 200;
			break;
		case 35: // END
			Application.application.verticalScrollPosition = Application.application.maxVerticalScrollPosition;
			break;
		case 36: // HOME
			Application.application.verticalScrollPosition = 0;
			break;
		case 38: // UP
			Application.application.verticalScrollPosition -= 50;
			break;
		case 40: // DOWN
			Application.application.verticalScrollPosition += 50;
			break;
	}
}

As I mentioned in the First Encounter, Flex is primarily built for web developers and not designers. The way I see it, it’s just like writing HTML with JavaScript but with a slight difference. Let’s take a simple sneak peek to support this claim.

Here we compare HTML and MXML when using a button:

HTML:
<button name=”myButton” onclick=”processClick()” class=”myButtonStyle”>Click Me</button>

MXML:
<mx:Button id=”myButton” click=”processClick()” styleName=”myButtonStyle” label=”Click Me” />

Let’s read these two lines of codes. First - component declaration(button/mx:button), then instance name(name/id), event(onclick/click), event handler(processClick), style property(class/styleName), style name(myButtonStyle) and lastly, the label. Both of them can use either an inline or linked CSS styles. How cool is that?!