Friday, July 4, 2008

Flash Player: Text Around A Circle

I received a rare and very welcome comment about my most recent postings about the new Flash Player 10 (FP10) and my 1st demo, FontWheels.  In his comment, OLMSTJ, mentioned he was currently working on a project where he was placing text around a circle and therefore curious how I approached doing it in my demo.

Unlike my previous published code, for example my sort function for XML, this code is not at the point where it is generic.  It was actually more generic when I first built it for Flash Player 9 (FP9) when I was rotating text first converted to bitmaps.

 So I’m going to release the FP9 code, a single static function wrapped in a simple demo.  The framework (oh, I hate that word) for the old and new functions are similar but there are differences in how I place each character.  If at some point, I reduce the FP10 code to a similar scope, I’ll probably publish that code.  The FP10 code has a lot more functionality due to the demo’s requirement to stuff an entire circle with different font fields and other minor details that wouldn’t be needed outside the demo.

I did stripped a little code from the FP9 function.  It converted the complex Sprite to a single centered bitmap in a Sprite.  Each text character is implemented with a Bitmap inside its own Sprite.  Since I tend to make my pages very detailed, I like to strip away the complexity by converting content to a Bitmap whenever I can.  After reviewing the code, due to writing this blog, I decided building the conversion to a centered Bitmap in a Sprite into this static function was not a good design.

Code Narrative

The function has 3 arguments: 1) the radius; 2) a TextField containing the desired text and the formatting information; and 3) a Boolean where true means to place the text centered on the top and false means to center on the bottom.

I use a TextField object to specify the input data.  I wanted to be able vary the format of each character.  Therefore I build the multi-formatted text outside of the function.  However it turns out the results of doing this are varied.  It is somewhat dependent of the actual font.  For example changing the 1st character font size or setting it to bold sometimes does not look that great.  Of course, it might not look that good when displayed in a straight line either.  On the other hand changing the color works well (despite potential bad taste).

Don’t set the background color unless you are looking for some special effect.  The underline I created in my link to this blog, in the picture to the right, was drawn by hand.  This was a feature I tacked on at the end which contributes to the process not being as generic as I would like.  In order to know where to begin and end the underline circle you need internal information that is known at the time it was drawn.

As I said providing the underlined circular text was a last minute requirement for the FP10 project.  I needed a way to change the color when the mouse hovers over the link text.  I chose to not convert the text and underline to bitmapData, but instead I left it as a complex sprite.  I drill down to each TextField and change each of their colors.  I also redraw the underline to change the color.

Now that I’m done, I’ve had a chance to 2nd guess the approach.  My feelings at the moment would be to convert it to bitmapData and use its class functions to change the color.  This, of course, conflicts with the ability to restore different colors on the each character when the mouse rolls off the link.  A link shouldn’t be multi-colored but it just shows the complexity when you try to make one solution for all (like frameworks end up doing).

I hope this much detail in the design is useful to someone and doesn’t put everyone else to sleep.

The first thing I do is convert the input TextField to a bitmapData object.  I will use this object to extract each character into a bitmap.

Next I compute how many degrees the text will consume.  Using that number I figure where I need to start placing the text based on the fact that I want the text centered at the top or bottom.

Then, I loop through each character of the argument TextField.  I ignore spaces.  For each character, I create a Sprite and add a Bitmap containing that character to that Sprite.  Now the code is different depending on whether you want characters at the top or bottom.  Notice that the when the characters are at the top you are placing the bottom of the character around the circumference of the circle.  Then look at the pictures above and notice my name at the bottom of the circle.  Here, the top of the each character is drawn around circumference of the circle.  It took a while to get my head straight on this concept.

Each character is then extracted into a new little bitmap.  These bitmaps are each inserted into their own Sprite.  I rotate each of these Sprites to the correct location.  I compute this location by getting the location from the input argument TextField.  Earlier I computed the number of degrees the whole field needs so that I could compute where to put the 1st character after centering.  I took the easy way out and simply apply the same fractional character positioning of the flat text field and apply that to the total number of degrees the field consumes on the curve to find the rotation to apply to the sprite.  I’m sure most of you have taken math more recently than the 60’s and would have done it a different way, but this way I only had to look up how to compute the circumference of a circle.

But first where do you put the Bitmap character in the Sprite.  Imagine each Sprite to be like a spoke in a wheel with a character attached to the end and the other end at the center of the wheel.  As I mentioned earlier it depends on whether you are drawing the text around the top or on the bottom.  If on the top, the spoke connects to the bottom of the character and to the top of the character if the text goes on the bottom.

There is a short coming in using the spoke in a wheel to describe this.  The hardest part of writing this code was placing the text on the bottom of the circle.  I’m sure I won’t explain this properly but if you need to dive into the code maybe this will give you a head start.  I kept trying to calculate the rotation of the Sprite’s when the text is on the bottom by computing the rotation at the bottom.  But that is wrong.

Imagine the spoke for characters at the bottom to extend across the entire wheel instead of just to the center like the spokes for the top.  They still rotate at the center of the wheel but you control them by moving it at the top which is at the opposite end of where the Bitmap character is.  When you rotate the spoke at the top to the right the Bitmap at the bottom moves to the left.

Obviously, you can tell I’m not a mathematician by describing it that way.  But that’s they way I figured it out.

That’s basically it.  It isn’t a large function.

Friday, June 27, 2008

More on: Flash Player 10 Beta Development Without Installing Anything


I have now built an HTML page containing my FontWheels Flash Player 10 Beta Demo which is only useful if you have installed Flash Player 10 beta.

However, to summarize my previous post, you may view Flash Player 10 Beta content without installing anything if you fear impacting your system with beta installables.  This can be done by downloading the external Flash Player 10 beta: FlashPlayer.exe.

This is not an install executable.  It is the stand-alone external player and requires no installation.  To view content on the player, execute FlashPlayer.exe and enter the URL from the File/Open menu.  The URL to my swf demo is:

Thursday, June 26, 2008

Flash Player 10 Beta Development Without Installing Anything

I wrote some ActionScript 3 code to try some of the new features in the Adobe Flash Player 10 beta and became so excited about it I can't put it down.

I have a demo, FontWheels, with some explanation below but first let me tell you how I build the swf.

I had some problems getting started and still haven't work out some basic things. Fortunately, by accident, I found a way to do beta develop without having to install anything on my Windows XP machine.  At least to the best of my knowledge I didn't install anything and I can still use my Flex Builder 2 and Flash Debugger 9 with no conflicts.

I initially tried following the instructions from Adobe about installing Flash Player 10 and the SDK. I was able to get it installed and ran through their examples and tutorials just fine. However I wasn't able to get it to work with Flex Builder 2 and then I started having problems trying to resume developing for Flash Player 9 with the debugger.

I ended up removing everything (except the new SDK) and reinstalling Flex Builder 2 with the current debug player. I'm not trying to discourage anyone from doing this. I'm sure I goofed somewhere.

But I thought I'd give it one more shot and by accident came up with something acceptable and as I said nothing needs to be installed.

I ended up using the FlashDevelop version for FP10 from which for some reason is distributed as a compressed file with the rar extension. This gave me some problems coming up with something that worked with rar files instead of zip. However I eventually decompressed it. I created a shortcut on my desktop to the FlashDevelop.exe in the decompressed files and double clicked on the shortcut. Sure enough, FlashDevelop ran without any install.

However I still need Flash Player 10 but found out I could use the external Flash Player 10 beta instead of the versions for embedding into a browser. In the support page for FP10 at there is a link to the standalone content debugger ("External player"):

The external player requires no installation. (Note this is for Windows.)

Next in the FlashDevelop Project\Properties menu I had to change the Target to Flash Player 10 and Test Player to “Play in external player”.

Now I'm not sure how FlashDevelop knew where to find the standalone Flash Player and I'm not sure how it found the Flash Player 10 SDK. I was unable to follow their instructions to set up the SDK path but it ran anyway. I previously placed the SDK on my C: drive as C:\FLEX_SDK\ and edited C:\FLEX_SDK\frameworks\flex-config.xml according to the alternative directions from Adobe as follows:













FlashDevelop works quite well with the external player and handles the trace command just fine.  I had been using FlashDevelop until FlexBuilder came along but it has changed a lot since then.  It handles the new vector syntax of Flash 10.  The behavior of the code completion is different from Flex Builder.  I think Flex Builder is smoother but FlexDevelop tries to do more with code completion.  It seems to fail to “code complete” more frequently than Flex Builder and I find it mildly annoying because I have to use the escape key to get out of the code completion mode much too often.  In all fairness I haven't tried much customization to get rid of the annoyances and overall I like FlexDevelop.  It has a bunch of useful feature many of which I haven't mastered.  If I ever figure out how to make a living out of this I definitely plan on donating something for this product.

So here is my demo but you might have go through some hoops to see it.  Since I am using the external Flash 10 Player I don't have a way of testing a SWF within a web page. So if you want to see my demo, download the External Play Player 10 from the link mentioned above. Then in the menu File open enter the following:

Of course, if you are able to view Flash 10 content from your browser, you should be able to view the swf file by entering the above URL.  I’ve never seen it that way so I can only hope it runs.


FontWheels, the Flash 10 Beta Demo

I was working on  an ActionScript 3  for Player 9 project where I wanted to display characters around a circle dynamically.  I don’t like having to embed fonts so I thought I would see how bad it would be to first convert characters to a bitmap and then rotate them.  The result was far from perfect but since the size of the characters were fairly small it didn’t look as bad as I expected.  Certain letters, like “W” looked pretty bad but I decided I could live with it.  Since I first heard about Flash Player 10 beta while I was working on rotating the fonts I used that code as the starting place for testing the new player.

Using the exact code, that is first converting to bitmaps and the rotating, there was amazing improvement.  This wasn’t something I was anticipating.  I hadn’t read anything about the new player improving the results of rotating a bitmap, but there is no doubt it is a lot better.

Well, that created a lot of interest on my part so I decided to try rotating a TextField instead of a bitmap but still not embedding a font.  We let me tell you it looks a whole lot better than the bitmap.

Next I wondered what would it look like if I rotated the characters around the circle live.  My initial app was to build a static medallion with characters around a curve but I couldn’t resist seeing them rotate on the screen.  Then I wondered if I could do this will all of my device fonts.  Yes.  The player could handle displaying all of my approximately 110 device fonts on the screen rotating simultaneously.  Later on after trying it on my granddaughter’s older computer I decide it would be best to limit the total number of fonts.

Then I wanted to play with the 3D  capability.  I discovered that rotating each letter on another axis and the rotating the font wheel on another axis I could get what appears to be a circular marquee.

So there it is.  I hope you take the time to see it run.  I’ve rush this post out because I’m anxious to get back and try some other new things.  I hope I’m not leaving in too many misspellings and grammar errors but I’m in a hurry!

Tuesday, July 24, 2007

ActionScript 3, E4X Snippet

I have been working on an E4X function to transform XML attributes into elements for displaying in a Tree.  I have a working function, not exactly in the form I wanted, but I am lacking a good example of it to post this week.  This is all tied into the work I have posted in the last few weeks about sorting XML for trees.

Code snippet

There was one little code snippet which was part of solving the problem I thought I would share with you now.  Unlike my XML sort routines where I modify the source object, this routine creates a duplicate XML object but with elements instead of attributes.

The problem I had was coming up with code to copy the root element of the source code to a new XML object.  It wasn't so straight forward with E4X.  I think concise code could have been written to simply copy the object with the copy() function and the delete its children but I was concerned this could be inefficient especially if the object was large.

This is what I did:

 1 public static function transformXmlAttributeToElement
 2     ( avXmlIn               :XML,
 3       avAttributeName       :String,
 4       avArrayAttributeNames :Array )
 5     :XML
 6 {
 7     var lvXmlOut:XML = <{}/>;
 8     for each( var lvXmlAttribute:XML
 9                in avXmlIn.attributes() )
10        lvXmlOut.@[] = lvXmlAttribute;

Line 7 creates a root element with the same name as the source.  Lines 8 and 9 loop through all of the attributes in the source root element with line 10 creating a duplicate of each attribute in the destination element.

My generic functions can't use hard coded names, but most examples you find on the Internet use hard coded names.  I thought maybe someone needing to do something similar could benefit from the example.  I prefer to write more comprehensive posts than this but I'm just not ready this week.


My post More Hierarchical Sorting E4X XML: for Flex Tree & Beyond was my 1st attempt to make use of publishing a Flex application along with the Publish Application Source feature of Flex Builder 2.  Boy am I dumb.  For some reason it got into my head that every time I recompile, the new source code would be regenerated.  Not true.  If you downloaded the source code before last Friday, you got old source code.  I've fixed that.

I also fixed a state transition flicker problem that crept back into the example.  There appears to be a little bit of art in handling flicker in state changes.

Wednesday, July 18, 2007

ActionScript 3, Undocumented Features?

You have been entrusted to be in on some secret features of ActionScript 3.  Only a handful of programmers around the world will see this information.  This is mostly due to the fact you have been able to hack your way into one of the most obscure blogs on the planet!

Actually, I don't know if I am breaking new ground here but I haven't been able to find any mention of this feature.  I really discovered it sometime ago while writing an earlier post but I didn't know the extent of the find.

And the find is fairly extensive but I've come up with only a few practical uses and one of those was already discussed in the mentioned post.  I don't know how far back these features go.  It may be they were around before ActionScript 2; before I ever used Flash.  Maybe veteran Flash developers find it so ho-hum they forget to pass it on to newbies.  I haven't tried this with AS2 because I don't want to fire up Flash again and have to re-learn anything.  BE WARNED: Be careful how you use undocumented features.  Also, "undocumented" means I haven't been able to find anything about them in the Adobe documentation.

Please let me know if you can find this someplace.  Someone needs to write a book about how to best use and find available resources for Flash, Flex and ActionScript.

The Secret Features:

You can insert multiple comma separated expressions when the syntax calls for an expression between parentheses.

For example:

    // do something
} while( a = b, a == 0 );

The while test will be performed on the rightmost expression, a == 0, but variable a will be set to the value of b prior to the test.  You are not limited in the number of expressions but you are limited in the type of expression.  For example, you cannot declare a variable with a var and you can't use an if statement.  The expression must resolve to a value.  The ? : expression can be used and you can call a function.

The do while statement, the while statement and the E4X filter predicate expression are the best candidates for this feature.  However it can also be done in the return and switch statements although I can't see any value in using it.  The return statement doesn't even require parentheses.

I was hoping to show a compelling example using do while or while but haven't been able to think of one.  I made this discovery when I was creating a loop and using IViewCursor to iterate over an XMLListCollection.  The where clause was getting too long to fit into a line and I wanted to break it up.  So I thought, what the heck, why not try it.

You can also do something similar with the for statement:

for( I = 0, N = 2; N < 5,I < 3; I++, N++ ){}

I think I recall seeing examples of the for statement before, but I don't remember if it was for ActionScript.

I guess when the ActionScript parser encounters the open parenthesis it handles it as though it is a function call with arguments without paying too much attention to the context.  It's okay, I won't tell Adobe if you won't.

Monday, July 9, 2007

More Hierarchical Sorting E4X XML: for Flex Tree & Beyond

This is a continuation of my most recent posts.  I've changed the Tree's dataProvider to an XMLListCollection object instead of an XML object as discussed in a recent post in this series.

My hierarchical sort function still works with an XML object so it may be used for other purposes besides a Flex Tree.  The sort function is only dependent on the resources built in the Flash Player.

The earlier sort function had a limitation which required sorting an attribute that needed to be in all elements of the XML object.  The new sort function no longer has that requirement.  This opens the door for even more functionality.

The new function still only sorts on a single attribute but if you combine that with some old tech you can do quite a bit.

Old TechDo you know what this is?  No, it's not a computer but it frequently worked as a stunt double for computers in 60's and 70's movies.  It is a card sorter and I have used one many times. 

I still vividly recall a conversation I was having with my programmer son a few years ago.  We were driving up Highway 6 and it's one of those events in your life when you remember where you were.  We were having a recurring argument about cutting 25 years from my resume.  My son asked me what could you possibly use today that you learned in those days.  I guess I remember this incident so well because it forced up the reality that so much of my professional self esteem is based on things nobody cares about today.  It was a good question albeit a little cold.

Well here it is: I can use my experience of operating a card sorter today!  And do you know how to sort on one, son?  Of course you don't!  A field in a card must be sorted one column at a time backwards.  Multiple fields must be sorted in reverse order.  For example if you wanted to sort by last name in columns 1 thru 10 and first name in columns 11 thru 20 you would sort on columns 20,19,18...3,2,1; one at a time.

And if you combine this old tech with my simple function you can sort multiple attribute fields each one independently of the others.  That means you can sort some ascending, some descending, some dates, some numbers, etc. You can do it backwards (with one hand tied behind your back).  Hah!

No, you don't have to sort a character at a time.

Here is the new ActionScript 3 E4X sort XML attributes function:

 1 public static function 

 2     ( avXml                :XML,
 3       avAttributeName      :String,
 4       avPutEmptiesAtBottom :Boolean,
 5       avArraySortArgument0 :* = 0,
 6       avArraySortArgument1 :* = 0 )
 7     :void
 8 {
 9     var lvChildrenCount:int
10         = avXml.children().length();
12     if( lvChildrenCount == 0 )
13         return;
15     if( lvChildrenCount > 1 )
16     {
17         var lvAttributeValue    :String;
18         var lvXml               :XML;
20         var lvSortOptions:int
21             = avArraySortArgument0 is Function
22               ? avArraySortArgument1
23               : avArraySortArgument0;
25         var lvSortCaseInsensitive:Boolean
26             = ( lvSortOptions & Array.CASEINSENSITIVE )
27               == Array.CASEINSENSITIVE;
29         var lvArray:Array = new Array();
31         for each( lvXml in avXml.children() )
32         {
33           lvAttributeValue
34               = lvXml.attribute( avAttributeName );
36           if( lvSortCaseInsensitive )
37               lvAttributeValue
38                   = lvAttributeValue.toUpperCase();
40           if( lvArray.indexOf( lvAttributeValue ) == -1 )
41               lvArray.push( lvAttributeValue );
43         } // for each
45         if( lvArray.length > 1 )
46         {
47             lvArray.sort
48             (
49                 avArraySortArgument0,
50                 avArraySortArgument1
51             );
53             if( avPutEmptiesAtBottom )
54             {
55                 if( lvArray[0] == "" )
56                     lvArray.push( lvArray.shift() );
57             } // if
59         } // if
61         var lvXmlList:XMLList = new XMLList();
62         for each( lvAttributeValue in lvArray )
63         {
64             for each( lvXml in avXml.children() )
65             {
66               var lvXmlAttributeValue:String
67                    = lvXml.attribute
68         ( avAttributeName );
70               if( lvSortCaseInsensitive )
71                   lvXmlAttributeValue
72                     = lvXmlAttributeValue.toUpperCase();
74               if( lvXmlAttributeValue
75                   ==
76                   lvAttributeValue )
77                   lvXmlList += lvXml;
79             } // for each
81         } // for each
83         avXml.setChildren( lvXmlList );
85     } // if             
87     for each( var lvXmlChild:XML in avXml.children() )
88     {
89         sortXmlAttribute
90         (
91             lvXmlChild,
92             avAttributeName,
93             avPutEmptiesAtBottom,
94             avArraySortArgument0,
95             avArraySortArgument1
96         );
97     } // for each
99 } // sortXmlAttribute

Function sortXmlAttribute Description


# Name Type Description
1 avXml XML Object to be sorted.
2 avAttributeName String Attribute Name to sort
3 avPutEmptiesAtBottom Boolean Where to put elements that have empty values for sorted attribute.
4 avArraySortArgument0 * Array.sort() 1st argument
5 avArraySortArgument1 * Array.sort() 2nd argument


There were two big changes from the earlier function.  One, I have removed E4X filtering and used the more conventional E4X syntax.  This really simplified the function.  I'm not putting down the filtering feature, but in this instance I am better off without it.

The second was dealing with case insensitive sorts.  The problem I had before was that I ended up separating strings that had different cases but were otherwise equal.  This isn't a problem when you are doing a single sort, but when you stack sorts back to back the problem shows up.

I also added a feature that controls where you put the XML elements that do not have an attribute value.  The need do this varies with the type of data you are looking at.  It was actually easy to implement.

Lines 20 thru 27

This code determines if the sort is case insensitive.

Lines 29 thru 43

This section builds an array of unique attribute values.  If the sort is case insensitive I convert all of the values to upper case.

Lines 47 thru 51

This sorts the array with the Array.sort() function.  That's all I ever sort; just the unique attribute values.  This is important.  I don't sort the XML object (because I can't).  I never upset the order of the children which may have been sorted on another field previously.

Lines 53 thru 57

This is where I move the XML elements that have empty attribute values if necessary.  It just moves an empty string from the beginning of the array to the end.

Lines 61 thru 81

This is where the real meat of the function is.  I want to build a new XMLList object that represents all of the XML children but in the new sorted order.  I iterate through each of the sorted unique attribute values.  Inside that iteration I iterate through all of the XML children.  If the child has the current attribute value I append it to the end of the temporary XMLList I'm building.  I have to allow for case insensitivity.  It is important make sure that children with the same value stay in the same order.  This actually means doing nothing and I do it well.

Line 83

I replace the children of the input XML object with the temporary XMLList I just built with the E4X setChildren function.  It is really nice to have this very simple function.

Lines 87 thru 97

This makes the function recursive.

That is the function.

It is very straightforward.  If all algorithms were like this, most everyone could be a programmer.

The Example

Previously, I have included the source code in the post but no compiled example.  I know personally I prefer to just look at the code and if I'm interested I'll compile it myself.  I've also kept the examples to one file.  I started this post and the example in the same manner, but the example just kept getting bigger.  It is still only one file, but in the future I will have to break it into more than one class.  I've decided to provide a page with the source code.  My intention is to do this in the future, but the page will probably contain more than one file.  In addition I have a link to a page that contains the SWF file.  I will also compile with the "Publish Source Code" option.  This will give you the ability to view the source code from the SWF program.  You'll also be able to download the program in a zip file along with the Flex 2 SDK.


The new example has a lot more goodies in it.  There are 2 built-in examples but you can also paste in your own XML.  So it actually can be used as an XML sort tool.


I'm now starting to think about sorting element names and values.


I came across someone wanting to sort XML via the E4X capabilities of JavaScript.  I think my function will work.  You might have to remove the static declaration. (I don't know.)

There are several functions in the example declared as static.  This is my way of implying the function stands on its own and it may have other uses.

I wouldn't mind expanding to other platforms if for no other reason than to improve my visibility.  (I probably only have a total of 30 lifetime hits.)  Please point me in the right direction on how to set up a test environment of E4X JavaScript.

Monday, July 2, 2007

ActionScript 3 isNaN is BaD

A primary rule of my programming style is to keep things positive whenever possible.  For example it always clearer to test for things to be equal than to test for them to be not equal.  So I'm not surprised there are many discussions about the ActionScript isNaN function on the Internet.  NaN stands for "not a number".  Its roots go deeper than ActionScript.  It is self-evident why the term was coined and equally predictable to be a subject of confusion.

However, the function's negativity can only be charged with creating "bad vibes" in the misdeeds mentioned in this post.  The following comes from the Adobe documentation: 


The last two table rows in the documentation pass strings to the isNaN function.  However, I get a fatal compile error when I try to do this.  The same documentation clearly specifies the argument type is "Number".  The editor's "Intellisense?" (I don't know what Adobe calls it) says the argument is a "Number".

But I can find plenty of examples on the Internet showing string arguments.  I think some of these examples may be explained by the fact that they don't specify the type in the var declaration.  When I do this, I get a compiler warning.  I wouldn't post an example that produced a compiler warning, at least without pointing it out, but maybe I'm in the minority.

Other examples may be about earlier versions of ActionScript or maybe beta versions.  It's sometimes hard sort these things out.  I am using Flex Builder 2 and have also tried this with the Flex Builder 3 beta.  I got around the warning message by using the asterisk as the variable type.  I don't like using an asterisk as a workaround, but in this case I think that is how the argument is internally defined.  This is because the function actually works when I pass a string to the function.

I really only wanted to write a function to determined if a string contained a valid number.  The following example works.  Notice the asterisk in the "for each" statement.

<?xml version="1.0" 

        // -----------------------------------------
        // onCreationComplete
        // -----------------------------------------

        private function onCreationComplete
            var lvString:String = "";
            for each( var lvValue:*
                  in ["5", "A", "-1", "-.7", "*" ] )
                lvString += lvValue
                          + ": NaN is "
                          + isNaN( lvValue ).toString()
                          + "\n";
            Text1.text += lvString;

        } // onCreationComplete

Text1 contains the following when the example is run:

5: NaN is false
A: NaN is true
-1: NaN is false
-.7: NaN is false
*: NaN is true

This has been a minor distraction while developing an example program for a new post on my series of Sorting XML which I hope to have ready this week.