Friday, September 4, 2009

Flash ComboBox Style

For a recent project, I needed to change how a Flash ComboBox looked. How do you change the font style for the ComboBox text and its dropdown list? Can you make the text one font size and the dropdown another? Yes, but I found it wasn't as easy as I thought it should be. Basically, I embedded a new font and created a CellRenderer to style the dropdown.




ComboBox Designed with Embedded Font

The ComboBox above was created in Flash CS3, and the text styles were modified using ActionScript 3.0. By extending the ComboBox class, I created a custom DesignComboBox class, then added the CBDesignRenderer class to style the dropdown fields.

The ComboBox component needs to exist in the library before you can create it with AS3. The DesignComboBox class and CBDesignRenderer class are listed below.

You can DM me on Twitter @jazzairtech if you want me to send you the FLA and AS files.


/* DesignComboBox.as */

package com.jazzairtech.ComboBoxDesign
{
import flash.text.TextFormat;
import fl.controls.ComboBox;
import fl.controls.List;

/**
* DesignComboBox class
* Apply embedded font to ComboBox List items
*/
public class DesignComboBox extends ComboBox {
private var cdDesignFmt:TextFormat;

public function DesignComboBox() {
super();

var cbFmt:TextFormat = new TextFormat();
var myArial:Arial = new Arial();
cbFmt.font = myArial.fontName;
cbFmt.size = 20;

textField.setStyle("embedFonts", true);
textField.setStyle("textFormat", cbFmt);

// Apply CBDesignRenderer to set dropdown format
dropdown.setStyle("cellRenderer", CBDesignRenderer);
}

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




/* CBDesignRenderer.as */

package com.jazzairtech.ComboBoxDesign
{
import flash.text.TextFormat;
import fl.controls.listClasses.CellRenderer;

/**
* CBDesignRenderer class
* Adds an embedded font (Arial) to ComboBox List items
*/
public class CBDesignRenderer extends CellRenderer {

public function CBDesignRenderer() {
super();

var cbFmt:TextFormat = new TextFormat();
var myArial:Arial = new Arial();
cbFmt.font = myArial.fontName;
cbFmt.size = 16;

this.setStyle("embedFonts", true);
this.setStyle("textFormat", cbFmt);
}
}
}

Styling the ComboBox with AS3 takes a little extra coding, but I think it's worth the effort to improve how it looks.


Aloha, Joe

Thursday, August 27, 2009

Regular Expressions in AS3

Lately, I've been using more Regular Expressions in JavaScript and ActionScript 3.0. projects. In AS3, RegExp can be useful for validating user entries or searching for matches. I found that you can test your the RegExp patterns using DreamWeaver's Find and Replace dialog by checking the "Use regular expression" option.

Tonight I built a RegExp Tester in Flash that kind of does the same thing. I'm sure it needs more tweaking to get better results and display the results more cleanly. You can test RegExp here:

http://www.jazzairwaves.com/Flash/RegExp/

The Regular Expressions Cookbook by Jan Goyvaerts and Steven Levithan, published by O'Reilly, offers great details on the subject.

I'm sure that becoming proficient at regex will improve my coding for text search and validation. Does it also increase my geek score? Yeah.

Aloha, Joe

Tuesday, August 25, 2009

Audio Player and Twitter Outtage

Our audio player prototype is coming along well, and I was able to rebuild Ryan Berdeen's SoundTouch Demo using the CS4 Flash IDE (Integrated Development Environment) and ActionScript 3 (AS3). The player works pretty well to adjust rate, pitch, and tempo on an externally loaded MP3 file. The controls appear to be stable.

On the Twitter scene, I've found a lot of useful links by following key players who tweet in the info-spheres of technology. Technical discussions on a variety of blogs, forums, and discussion groups are linked via LinkedIn.com and Twitter. Unfortunately, Twitter seems to be suffering growing pains, and its servers are down again for some reason. Error 503, not a good sign for Twitter.

Aloha, Joe

Thursday, August 20, 2009

Getting Flash Windows to Shake Hands

Have you ever needed to embed Flash movies in two separate windows, then get the two Flash windows to communicate with one another? With the ActionScript 3.0 ExternalInterface class, you can get the Flash objects to communicate with one another through their respective window clients.

Each of the Flash movies will include ExternalInterface call and addCallBack methods to relay function calls through JavaScript functions in their HTML pages. The pages need to be able to reference each other's window, which can be done using Window names.

Ok, I know I should post an example of two Flash windows talking to each other. It's doable, I assure you. Someday when there's less crunch at work and more time at home I'll be able to post such an example. Meantime... sorry, lame excuse.

Aloha, Joe

Thursday, August 13, 2009

Flash CS3 to Flash CS4

I've been jumping back and forth between the two Flash IDEs lately. Most of my work is done in CS3, but I'm finding more and more effective solutions in CS4. As I look deeper, there are some amazing classes like the new Sound API for Flash 10 that provide more controls over audio. Of course, applying new animation and 3D effects are greatly improved in CS4.

I registered for one of Adobe's online eSeminars on CS4, and hope to get even deeper into the benefits of using Flash CS4.

My latest project applies the Flash 10 Sound API to create new audio controls. I've been previewing several audio libraries, including the NoteFlight StandingWave2 sound library by Joe Berkovitz, and Ryan Berdeen's SoundTouch library. I hope to discuss the results of these studies sometime soon.

A couple of great resources for additional Flash and ActionScript 3 references have turned up on Twitter and in LinkedIn.com groups. To better focus on my attention on programming, I'm trying to rebuild my Twitter network. Follow jazzairtech.

Aloha, Joe

Wednesday, March 18, 2009

Exploring MapQuest Flash API

I just started experimenting with the MapQuest Developer API for Flash CS3 (ActionScript 3). So far it's been an enjoyable project! I worked through some of the samples and experimented with many of the cool MapQuest features that are available in the free developer Flash extensions. I'm having fun making custom points of interest (POIs) on maps, zooming, scrolling, and icons. There are a couple of traps that I ran into when following the AS3 code in the Sample Scripts found in the MapQuest Developer Library.

All was going well until I tried to build the Geocode interface found in the samples. It took a while to realize the right login parameters, but the main bug that bit my example was the server name. The sample script points to a geocode access server, but the correct server is actually the free server! That took a while to troubleshoot.

I uploaded a working version of the Geocode Address interface.

I think I'll tinker with this API for a while and see what waves I can generate across the Pacific!

Aloha, Joe

Wednesday, March 11, 2009

Embedding Fonts in Flash

I'm working on a project that displays articles from an external XML file. I want the text to be displayed as HTML, so I'm applying an external cascading style sheet (CSS) to the text field. In the Flash .fla file, I added a new font and linked it for ActionScript. Everything seemed to be working fine, and normal text was appearing like I imaged it would with the appropriate styles.

The problem was, I couldn't seem to get bold <b> or italic <i> tags to render the text properly.

After some digging, I found that I needed to add another new font for bold, one more for italic, and yet another for bold-italic text!

To add a new font, open the Options menu in the Flash file's Library, then select New Font... Select a font from the dropdown menu, and give it a name, which you will use like a new Font class. Be sure to update the linkage for your new font so you can apply it in AS3. If you need a bold, add another new Font, but check the Bold checkbox. Likewise with italic. Then when you apply a style sheet, you'll get the text displayed the way you want!


Aloha, Joe

Saturday, March 7, 2009

Sound Spectrum Using Flash ActionScript 3.0

Working with the sound functions in Flash ActionScript 3.0, it took some work to understand the Sound, SoundMixer, SoundChannel, and SoundTransform classes. My goal was to use a sound object to animate other display objects. I found a few examples that applied sound spectrum functions, so I started by looking at Lee Brimelow's Sound Spectrum Display tutorial on his excellent Flash tutorials site, www.gotoandlearn.com.

I created a SpectrumTest class for manipulating the animation and sound object, which worked out well. Using an EnterFrame event handler, the function draws colored circles along a linear path representing frequency, and the size of the circles is derived from the values extraced from the SoundMixer's computeSpectrum function.

The first iteration displayed the animated objects in spectrum along a horizonal axis.



I decided to change the orientation of the spectrum along a vertical axis, so I modified the function. Additional controls include a play button and a volume slide bar. I also wanted to view the media load process, so I added a media progress bar along the top. You can view the Flash movie here: http://www.jazzairwaves.com/Flash/SpectrumTest/

This was a good learning experience for me, and didn't take too long to produce.

The song I used for this project is All Of Your Love by Aphek, an artist I enjoy listening to on www.acidplanet.com.


Download for this Flash project (song not included): SpectrumTest.zip


Aloha, Joe

Saturday, February 28, 2009

RSS Feeds with ActionScript 3

I built an RSS app in Flash CS3 using ActionScript 3. The bulk of the supporting classes came from Mike Chambers' AS3 XML Syndication library, which was written a while ago. The parsing and date utilities needed to be modified so it would work with Flash 9 and AS3, but the essentials were there to work with.


I tested a number of RSS 2.0 feeds, such as FlashGuru's feed and a few from Feedburner. Now it's a matter of improving my display layout in a Flash object that will be embedded in a Web page. Fabuloso!


Aloha, Joe

Sunday, February 22, 2009

I think I'll start a new blog this week

I hope to share some of what I'm working with in Flash and ActionScript 3. There's lots out there, and perhaps I can contribute something.

Aloha, Joe