via blog.six4rty.ch

I like the article at http://blog.six4rty.ch/2010/07/31/as3-multiline-textfields-and-line-metrics/, mainly because of this graphic. I found it somewhere before long ago (maybe the same place) — it is a big help when dealing with customized text layout situations in flash where you have to do manual baseline aligment and such.

Posted via email from micro-plains

package {

	import fl.controls.TextInput;
	import fl.managers.IFocusManagerComponent;

	/**
	 * Extends the TextInput component in order to set the default width and
	 * height, and sets the focusRectPadding to 0 (so the focus rectangle lies
	 * directly on top of the grey text input border skin.
	 */
	public class TextInput2 extends TextInput implements IFocusManagerComponent {

		/**
		 * @constructor
		 */
		public function TextInput2() {
			super();
			textField.width = 1;
			textField.height = 1;
			width = 64;
			height = 18;
			setStyle("focusRectPadding", 0);
		}

		/**
		 * The UIComponent class, when the component is in focus, creates the
		 * uiFocusRect and sets it at childIndex 0. Unfortunately, the text input
		 * skin is then above the focus rect, and so the focus rect disappears
		 * when the focusRectPadding is 0. This calls the parent implementation,
		 * then ensures that the focus rect is visible by changing its
		 * child index.
		 */
		override public function drawFocus(draw:Boolean):void {
			super.drawFocus(draw);

			if (uiFocusRect != null) {
				setChildIndex(uiFocusRect, numChildren - 1);
			}
		}
	}
}

UPDATE: I updated the above script to set the size of the TextField in the TextInput component to be 1x1. This also fixes the problem that the TextField is created as 100x100 pixels when it is first created (as are all dynamically generated text fields). This matters if you wish to use any customized layout (such as the Yahoo astra layout managers), and don't want to have to call drawNow() or wait a frame to finalize layout settings in a UI.

Regardless of whether or not a shape, such as a rectangle, is drawn in Flash with a hairline border line, or a borderline of 1, the result on an unscaled shape is essentially the same. The crisp outline of the shape is drawn with a pixel width of 1. The downside of this occurs when trying to create pixel perfect UI's, and especially those using shapes with a scalenine grid assigned to them.

Using the AS3 drawing API, you can create a rectangle that has a lineStyle with a width of 1, and some fill, which would look something like this:

var sh:Shape = new Shape();
sh.graphics.lineStyle(1, 0xFF0000);
sh.graphics.beginFill(0xFF6600);
sh.graphics.drawRect(0, 0, 100, 100);
sh.graphics.endFill();
addChild(sh);
trace("Size: " + sh.width + " x " + sh.height);

The code above so draws an orange rectangle with a red border that is 201 pixels wide and 101 pixels tall. If you don't know why, the reason is because flash draws the line on the pixel width and height of the rectangle with a line size of 1. This makes your shape 201 x 101; thankfully, Flash will report the width and height correctly as 201 x 101.

This gets stickier if you have a shape that is used as a component skin, and has a scale9Grid applied to it. In this case you will likely be working with a component that you expect to take up 200x100 pixels on the stage when you tell it to be that size. However, if the skin used features "line" outlines at its borders, your component will get drawn on the stage with extra pixels. If you dig into the Flash component skins, you will notice that most of the skins use fills for any borders on the shapes (even 1 pixel wide borders) so that the scale9Grid enabled shapes will scale correctly to the pixel. That being said, the proper way to draw the simple skin shape in this case, programmatically, would be:

var sh2:Shape = new Shape();
sh2.graphics.beginFill(0xFF0000);
sh2.graphics.drawRect(0, 0, 200, 100);
sh2.graphics.beginFill(0xFF6600);
sh2.graphics.drawRect(1, 1, 198, 98);
sh2.graphics.endFill();
addChild(sh2);
trace("Size: " + sh2.width + " x " + sh2.height);

Incidentally, this also often cleans up some anti-aliasing at the corners of rectangular shapes which I believe is cause by some weirdness in the way the "caps" are drawn on the shapes. (but don't quote me on that...)

Flash 9 LiveDocs:  qss-http://www.google.com/search?&btnI&q=site%3Ahttp%3A%2F%2Flivedocs.adobe.com%2Fflash%2F9.0%2FActionScriptLangRefV3%2F+***

Flash 10 Help Docs:  qss-http://www.google.com/search?&btnI&q=site%3Ahttp%3A%2F%2Fhelp.adobe.com%2Fen_US%2FAS3LCR%2FFlash_10.0%2F+***

Basically, since there is no convenient way I found to use the search mechanisms on the Adobe site, these queries are running a google lucky search on the wildcard applied search term, while restricting the search to the site pertinent to the docs of interest. Running the assigned key command will trigger the Quicksilver text entry box; simply enter the term, such as "vector" for Flash 10, and the google lucky search will be performed. Since the lucky search is restricted to the livedocs and the help docs, the first search result returned will be the frameless html page in the docs for the search term. When searching for the docs for a specific actionscript term, this cuts the search time for a term down to a couple of seconds, which is highly convenient...

Update: the chumby widget can be found at http://www.chumby.com/guide/widget/Japanese Syllabary Flash Card. Enjoy!

However, for those of you out there in Mac OSX land, I wouldn't recommend downloading the current version listed on the site for OSX, entitled "as2api-allinone-osx-0.4.sit" in the downloads section. I think that it is missing files, or that it just doesn't work correctly at all. I would recommend instead downloading the first link for "as2api-0.4.tar". The downside of downloading this version is that there is no OSX command line executable in there, so you have to run the Ruby script "ruby as2api.rb packages --classpath classpath" which works just fine.

Honestly, I don't know enough about ANT scripts yet to know if you can run Ruby scripts from an ANT script target, so I used rubyscript2exe, another handy little application to convert the Ruby scripts into a mac command line executable. (Incidentally, and to add a little geek comedy to this post, you have to install the Pascal compiler and compile a piece of the rubyscript2exe library in order to run it...so I had to compile one application in order to create another one...).

Anyway, I have included below 2 downloadables in this post. The first is the command line version of as2api that is compiled from the package that you can download as Ruby code from the as2api site. The down side is that you cannot tweek the css and html templates that are part of that code; the up side is that you can actually use it as a command line executable, which is entitled "as2api_darwin". You can used it exactly as you would the as2api.rb Ruby script.

PlasticWare Downloadable ::
Darwin Executable of As2Api (JavaDoc for Actionscript) (Sep. 5, 2006)
Download (~4.5mB) :: as2api-0.4.zip

The second downloadable I have included here is the rubyscript2exe download, altered to include the eee_darwin file that I compiled from the pascal source on my mactel laptop in OSX 10.4.7, and repackaged using tar2rubyscript.rb, which was also necessary to get it running properly. I have also included the example hello world script "hello.rb" from the tutorial, which you can use to test the code and make a hello world exe.

PlasticWare Downloadable ::
RubyScript2Exe with eee_darwin for OSX environment (Sep. 5, 2006)
Download (~1.1mB) :: rubyscript2exe.zip.gz

Both of these pieces of software are released by their proper creators under the GNU License, and I have included the source and license for each as well, as posted on their sites. Please download judiciously, the executable for as2api package is 4.5 mb.

The implementation of the interface method doesn't match its definition.

Despite the fact that MTASC has no problem with it.

*I believe* that it is acceptable according to ECMA script standards to define functions in interfaces by supplying the types of the parameters, rather than the names and types. Compare:

public function moo(Object, String):Void;

vs:

public function moo(cow:Object, foo:String):Void;

The former is handled fine by MTASC; however, when compiled in the Flash IDE, the error "The implementation of the interface method doesn't match its definition." is returned for every function defined in the interface that has input parameters. The solution is to define the methods is in the latter example; however, for the Flash IDE to compile without errors, not only do the parameter types have to match, but also the parameters names have to match.

Hopefully that will help someone searching for this error...

In most flash projects, interfaces are a bit convoluted and require thoughtfully building out to what amounts to an extra class. Most of the time in smaller projects, subclassing "default" classes pretty much gets the job done. To backtrack slightly for those unfamiliar with the term, an interface is an abstract type which is used to designate how classes can be accessed and manipulated. To use the terminology, an interface specifies the interface that must be implemented by a set of classes.

Utilizing Interfaces

Interfaces in actionscript are particularly useful when creating a set of classes that all have the same methods; the interface strictly defines the guidelines that must be followed when creating a new class of this type.

As an example, let us suppose that we are creating a set of shape classes; we will be creating a circle class and a square class. Let us suppose for now that the only method that we want to implement is the getArea() method. Here are our classes:

View as Plain Text

View as Plain Text

So, both implement the same methods here. We can define an interface for all new shapes that get created, which must all allow for the calculation of their area (note that by convention, interfaces usually begin with the letter "I"):

View as Plain Text

You must then go back and change your class definition line in each of the two classes to

View as Plain Text

and

View as Plain Text

The interface defines how we can interact with shapes. The big advantage of this when working on projects is that when using environments such as Eclipse with FDT, you can specify that something is an IShape without knowing what shape it is specifically, thereby allowing you to build more flexible projects. In addition, rather than the alternative, which would be to type them as Object, you have a way of typing them that works with syntax checking and code hinting, which saves you time in the long run.

Combining Interfaces with Inheritance

Another handy trick to help when coding is to combine the use of interfaces with inheritance. Let's suppose we want to create a Shape superclass as such:

View as Plain Text

So, our definitions would change as such:

View as Plain Text

Now we have a few added benefits. Our shapes are now subclassed as MovieClips and Shapes, which means that they can inherit methods from the Shape class. All of our shapes have a __type and all are now MovieClips, so all of them can inherit toString() and setColor().

The cool part about this is that in this case, we now can implement the IShape interface (remember, all classes that implement an interface are required to implement the designated methods) without declaring ones inherited from the superclass unless we choose to do so. This means that we don't have to add toString() and setColor() unless we want to override the ones in the superclass. This is really great when you have several private variables with getters and setters that you want required by the interface, but don't want to have to duplicate and comment in every single subclass.

Another advantage of using interfaces is that, unlike extending superclasses, classes can implement as many interfaces as you want. For example, you could have a set of Shapes that implement an IAnimation interface as well as the IShape interface. Other types of objects could also implement this same IAnimation interface, so you could call the method pulse(cycleDuration) the same way on both types of class, and your code hinting would tell you that the method pulse requires a number input. This is probably the biggest advantage -- being able to type an object as an interface when passing it to another object that wants to treat it as something that has the methods that the interface requires.

1. In TM, go to the menu Bundles/Bundle Editor and choose Edit Snippets...
2. Open the ActionScript section on the left, and click the "+" button at the bottom left and choose to add a new snippet.
3. Name the new snippet, such as "Continue Block Comment".
4. In the text area where is says Syntax Summary, delete the contents, and paste in the following:

   ${TM_CURRENT_LINE/(.*\*\/$)|.*?(\/\*(?!.*\*\/)).*|.*/(?1:
   :
   (?2: )* )/}

5. Now click the Activation menu below (says "Tab Trigger") and change it to Key Equivalent. Click the field next to it, and hit the key (or the key if you prefer). The return key symbol should show up.
6. In the scope selector field, type

   source.actionscript comment.block

   - this will set the snippet to just work inside actionscript block comments bounded by "/** */"

You can now close the bundle editor, and while typing in block comments in actionscript files, the return key should drop you to the next line, preserve the indent, and type in an asterisk followed by a space.

Started working yesterday on my FlickrContactr application which can be found at my other domain, www.intafon.com. It's kind of fun to play with so I went ahead and made it public, although it is still pretty seriously in a pre-alpha state. I don't think it will blow up your computer, but I suppose there is the possibility that it could crash your browser. Anyhow, I'll be posting updates to it pretty frequently in the next week or so, until I get a good bit of the functionality that I want to put in there implemented. Right now, its just a fun way to quickly view your contacts (and their contacts, and theirs, etc.). See it here :: http://www.intafon.com/flickrcontactr/index.php

As for the code below, it is a simple drawing class that allows you to easily draw a generic box, a hairline box, and a filled rectangle. The main reason, however, that I created the class, is for those occasions where you may need a box that is not filled and is not made up of flash lines. If you've used Flash enough, you know that if you draw a 3 pixel line box, the corners are often rounded looking, which doesn't fly unless that is what you want in your design. I have worked on several projects that were to use photos that needed a "frame" of a certain width. The drawing class drawFrame method basically draws 4 filled boxes to create a rectangular "frame" of a certain thickness, made entirely of "fill" rather than lines, so the corners are nice and sharp. Of the instances where I have used this class, I have used the drawFrame method 90% of the time. Enjoy.

View as Plain Text

[*NOTE: for the code below, you may want to click the permalink link at the bottom of the article - I haven't had time yet to set up my style sheets to have this look correct (i.e. some of the code is getting cut off on the right)...]

A co-worker had a friend who was looking to traverse hierarchical menu data and print it out in PHP and needed a quick thought-jump-start, so I gave him the following algorithm. The code I've included below is actually more in AS 2.0 format, but its just the syntax that differs from PHP.

The idea is that there is a heirarchical menu sort of like this:

Menu 1
Submenu 1
Subsubmenu 1
Subsubmenu 2
Submenu 2
Menu 2
Menu 3

...and this menu is currently bundled into an object array (for my example) that could have been parsed from XML. My example below gives each menu a "value," which is the text of the menu, such as "File" and also gives each menu a menu of its own, called here by name as "children."

An example of this menu in object syntax is as follows:

View as Plain Text

Basically, the challenge for most people is just making that leap to get their head around how to traverse any number of submenu levels, since in the structure above, any submenu item can have its own submenus. The key to doing this lies in using a recursive function call (if you are unfamiliar you can just look up "recursion" on Google or Wikipedia). What the recursion allows you to do is define a situation in which the function calls itself with a new set of data, which is perfect for our hierarchical menu object. Basically we want to print the menu values out, but if a menu has submenus, then we also want to print them out (and perhaps indent them). The AS 2.0 code for this is as follows:

View as Plain Text

Please note that above I am using a hypothetical function called "print" to do the printing. In Flash, you could just use "trace" instead of "print" to see the results. Basically, the function is called, and the menu list (myMenuList here would be perhaps the object from above) and an initial indent of "" is passed in. As the menu is printed out, it checks to see if there are any menu children. If there are, the function calls itself again, this time with an augmented indention string. The function as it runs basically "drills down" the structure as far as it finds objects with children. I will say, however, that one needs to be careful how they use this in Flash, as I believe it still has a limit for the number of recursions that can be performed in a given period of time. Also, importantly, the variable "n" used as the index in the for loop must be scoped locally so that each time the function calls itself, a different local instance of a variable "n" gets used to do the loop. Hope this helps someone out there...

Originally, the way that I had been doing this was to first create a class that extends MovieClip such as this ::

View as Plain Text

Then, I would create an empty movieclip symbol in the library of my .fla file, and give it a linkage id, and then in the linkage associate it with the AS 2.0 class of my choosing, or in this case, com.plasticstare.SpaceInvader.

There are a few problems with this beyond the fact that it seems a bit laborious to have to do this. When compiling code in MTASC, for example, you have to create a special little class to make sure that any .swfs that you are publishing as shared libraries actually get the newly compiled code and make a reference to it in your .fla files (or there is probably some other way to do this as well). Otherwise, if you make a change to your class for that linked symbol, you have to publish back out of the Flash IDE again. (And if you have a bunch of them, its a real pain.)

I stumbled upon another way of doing this today when checking out something else in the Flash LiveDocs. Someone had contributed the code below in its original form, and I've since made a couple of tweeks - one to fix a major flaw.

View as Plain Text

The idea would be to use this in your Main.as class or some utility class -- some class that you can reach universally. So, supposed that I have it in my Main singleton class. I would call the function this way

Main.getInstance().createExtendedMovieClip(SpaceInvader,_root);

in order to create a new SpaceInvader clip in the _root. _constructor is simply the name of the class that you want to instantiate, and _parent and _depth are the clip you want it to reside in and at what depth. (the latter 2 parameters as you see are optional) Using this code, you can just create any new Class that extends MovieClip and instantiate it as a MovieClip instance on the stage on the fly, without creating any special linked symbols in the library.

• MovieClip.prototype.setPos :: handy for setting the position to an x,y coordinate
• MovieClip.prototype.hideMe
• MovieClip.prototype.showMe
• MovieClip.prototype.loadWithFade :: for loading jpgs and fading them in
• MovieClip.prototype.crossFadeTo :: for crossfading clips
• MovieClip.prototype.roundCoords :: for use with pixel fonts - rounds to nearest integer coords
• MovieClip.prototype.linearAnimate :: for doing linear animations of clip properties

Version 1.5

Download :: movieClipExtensions.zip