Just as a quick update, I’ve updated the previously created unicode finder app, to be a bit more helpful for the everyday usage.
Here a list of things that have been changed:

• No double unicodes.
• Automatic generation of embed code, easy for you to copy & paste directly into your application.

One thing that I can’t handle for you is to define the source of the font with it’s according fontname as defined in your system, but hey if I find a way around this, I will update it.

And again if you would like to play around with it, here the app. Have fun!

You might have read on one of my previous tweets, where I was screaming about using “special” characters in Flash, with “special” I mean arabic, cyrillic, hebrew, chinese simplified and traditional, as well japanese.

I know,  I know, there is TLF (Text Layout Framework) that handles the whole text, but I’m talking about embedding the font, did you knew that the complete chinese Unicode range helds something around 20’000 characters? You might think so what? Let me tell you that the complete chinese character range is over 7MB big!!! Do you really want to let your viewers download a 7MB file just for the font? No.

So I’ve created a quick app that will enable you to read out the UTF code from the text you need to use, with it you can specifically embed only the characters you need and take the file size down to a minimum. Now there is only a downside of this method, if the textual content changes a day, you need to again import the new characters.
Apart from that, I haven’t seen any bad things about this implementation.

At the end of this post you will find an useful small tool to get all the needed characters.

As an example below with this line you are embedding a font only containing numerals typing 1234567890 will give you a range from U+0030 to U+0039

Embed(source="font_file_name", fontName="font_name", mimeType="application/x-font-truetype", unicodeRange="U+0030-U+0039,U+002E")]

So let’s assume you would like to write this: “Nemusíte oči vidět, musíte vidění” which means “You don’t need eyes to see, you need vision” and only embed the needed characters, you would embed your font like this

Embed(source="font_file_name", fontName="font_name",  mimeType="application/x-font-truetype",  unicodeRange="U+004e, U+0065, U+006d, U+0075, U+0073, U+00ed, U+0074, U+0065, U+0020,  U+006f, U+010d, U+0069, U+0020, U+0076, U+0069, U+0064, U+011b, U+0074,  U+002c, U+0020, U+006d, U+0075, U+0073, U+00ed, U+0074, U+0065, U+0020,  U+0076, U+0069, U+0064, U+011b, U+006e, U+00ed")]

If you don’t know how to use this kind of font embedding, have a read here:

http://soledadpenades.com/2008/10/21/embedding-fonts-in-actionscript-3-using-flex-sdk/

Test ride it your self and have fun

Last week I had to do something that I never thought of, let me present you the case:

First of all we have a multiline, word-wrapped textfield in AS3, the text is picked up from an external XML file and gets styled with a CSS stylesheet, the textfield CAN have one line or multiple lines (depending on the translation and the language used), if the text is only an one-liner, the graphic (a simple small gray arrow) needs to be placed after the text in the middle of the first line, so you are able to visualize this, think about a standard <li> tag where you get the black dot, in my case just at the other side eg. at the end fo the line. have a look at the Example for a visual clarification what I want to achieve.

Basically a simple task, you grab the textlength add the gutter and margin to it and place the small arrow at that position.. but what do you do when the text goes multine and word wraps automatically?
After doing some experiments, I’ve came up with a simple yet appropriate solution for this.
Let’s start with a simple text field, containing some text and setup for multiline and wordwrapping.

var tf:TextField = new TextField();
tf.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry.";
tf.width = 100;
tf.multiline = true;
tf.wordWrap = true;
addChild( tf );

This will display a simple textfield without any formatting with 5 lines of content. Why did I set a width value on my textfield? Well without it, the textfield would just be as wide as the text, resulting in a single line text, and that’s not what we want.

Now we create a simple square / dot / arrow whatever you like acting as a marker for the end of line, so you can visualize what’s happening, I’ve created a small rectangle like this:

var rect:Sprite = new Sprite();
rect.graphics.beginFill(0xff0000);
rect.graphics.drawRect(0,0,10, 2);
rect.graphics.endFill();
addChild( rect );

Simple rectangle, doesn’t need much of an explanation, maybe you asking yourself why I’ve set it at x & y 0? Although I could position the rectangle right at the proper position I always preferred to use the setters of it so I rather create all my shapes/graphs at 0,0 and move them with myShape.x = 100, it makes things more obvious to read and you find it much quicker then doing directly on the drawRect() method.

Next up let’s have a look at our class that returns the requested values.

public class StringUtil
{
	private static var _lastChar		:TextLineMetrics;
	private static var _x			:int;
	private static var _y			:int;
 
	private static var _gutter		:int = 2;
 
	public static function getEndOfLine( tf:TextField, line:int ):Point
	{
		_lastChar 	= tf.getLineMetrics(line);
		_x		= tf.x + _lastChar.width + _gutter;
		_y		= _lastChar.height * line  + _lastChar.ascent;
 
		return new Point( _x, _y );
	}
}

What we are doing here is rather simple then you think. First we pass the textfield and the desired line to our static function, then using the getLineMetrics() method we return the desired line’s metrics, this can now be used to set an x and y position of the to be returned Point(). as you see at the _x value, I’m just telling it to add the textfields x position to the width of the requested line, at the end we add the gutter value for the textfield.
The vertical position is another story, here we need to get the height of the desired line and multiply with it. this has the reason that there is no method available to get the proper y position of the line, so by multiplying the textheight with the desired line you get the proper y position of it. After that calculation we add the _lastCahr.ascent property of the line, asking what ascent? Take a look at the image below for more information about it but basically it’s just the length of the baseline to the top of the line height in pixels, so exactly the middle of our text.

Have a look at the image below for a nice and clean overview about the gutter of a flash textfield as well about the other properties a textfield has.

Something you should also be aware of is that the width of the text line is relative to the textfield width, but you need to subtract the gutter width of 4 pixels (2 pixels on each side ).

Now that our class is available let’s take a look at how I used it for this example.

var point:Point = StringUtil.getEndOfLine( tf, tf.numLines - 1 );
rect.x = point.x;
rect.y = point.y;

What we are doing here is nothing else then creating a new Point based on the position returned by our class, passing the textfield and specially since I want to have the rectangle on the LAST line I just ask for the textfields number of lines – 1.

When running this example above you should see the small red rectangle on the last line of our textfield. yay!!!

You can download the StringUtil class here: StringUtil.as
Hope this serves you as well as it served me last week, and don’t forget to leave a comment if you have any questions about it.

The Open Source Media Framework went live a few weeks ago with it’s first release 1.0, I already worked with various sprint versions of it, and lately created a final project using OSMF.

Something that I was missing was the capability of displaying a Sprite or Text Element inside a Serial- or Parallel-Element.
So I’ve wrote a simple class named “InteractiveDisplayObjectElementt” that will handle this need:

public class InteractiveDisplayElement extends MediaElement
{
private var displayObjectTrait:InteractiveDisplayObjectTrait;
private var _sprite:Sprite;
 
public function InteractiveDisplayElement( displayObject:Sprite=null)
{
   super();
   this.sprite = displayObject;
}
 
public function set sprite( value:Sprite ):void
{
   _sprite = value;
    updateSprite();
}
 
public function get sprite():Sprite
{
    return _sprite;
}
 
private function updateSprite():void
{
   var sprite:Sprite = new Sprite();
   sprite.addChild( _sprite );
 
   if ( displayObjectTrait == null )
   {
      displayObjectTrait = new InteractiveDisplayObjectTrait( sprite );
      addTrait( MediaTraitType.DISPLAY_OBJECT, displayObjectTrait );
   }
   displayObjectTrait.setSize( sprite.width, sprite.height );
}

Extending the MediaElement class enables you to create a visible displayelement that can be attached to any kind of OSMF container including the serial & parallel elements, this is aswell the class being used for all kind of non-loadable elements.
So basically we are passing a Sprite to our new element to be placed in it, as soon as it’s set we call up the updateSprite() method that will add the passed sprite to the displaylist and assign it to the InteractiveDisplayObjectTrait (class following below)

The second class built was the InteractiveDisplayObjectTrait, this was only to keep the structure and logic of OSMF kind of in “place”, with it you can set the size of the element separately.

internal class InteractiveDisplayObjectTrait extends DisplayObjectTrait
{
  public function InteractiveDisplayObjectTrait(displayObject:DisplayObject, mediaWidth:Number=0, mediaHeight:Number=0)
  {
    super(displayObject, mediaWidth, mediaHeight);
  }
 
  public function setSize(mediaWidth:Number, mediaHeight:Number):void
  {
     setMediaSize(mediaWidth, mediaHeight);
  }
}

With it you are now able to use simple as well complex sprites in your Composition elements, below an example of how I tested the newly built class.

...
var aniHolder:Sprite = new Sprite();
sp.addChild( aniHolder );
var ball:Sprite = new Sprite();
ball.graphics.beginFill(0xff0000,1 );
ball.graphics.drawCircle( 0, 0, 8 );
ball.graphics.endFill();
aniHolder.addChild( ball );
 
TweenMax.to( ball, 2, { x: 400, repeat:-1, yoyo:true, ease:com.greensock.easing.Bounce.easeInOut});
 
var _spriteElement2:InteractiveDisplayElement = new InteractiveDisplayElement( aniHolder );
layout							= new LayoutMetadata();
layout.left = 400;
_spriteElement2.addMetadata( LayoutMetadata.LAYOUT_NAMESPACE, layout );
_pararellElement.addChild( _spriteElement2 );
...

What do you need to know about the code above? Well as you see I’m only creating a red circle that is being added to the aniHolder sprite, with the help of tweenmax I’m animating the circle to bounce left to right and viceversa, then I create a new InteractiveDisplayElement (the class we created before) assign a layout to it and add to the ParallelElement (this could also be a serialelement or a simple mediacontainerSprite).

During Developer Week, learn about the Adobe® Flash® Platform, including Adobe® Flex®, Adobe® Flash® Builder™, Adobe® AIR®, Adobe® Flash® Player, and how it integrates with Adobe® Creative Suite® 5 technologies. This weeklong event features free, live webinars presented by Adobe technology experts. See live demos and have your questions answered by the experts during interactive Q&A sessions.

Want to attend? Nothing easier then that! Just jump over directly here:
http://www.adobe.com/cfusion/event/index.cfm?event=detail&id=1489921&loc=en_us

If you guys haven’t noticed it yet, deMonsterDebugger is now officially available in its new version,
one of the features that absolutely rocks is the FPS/Memory monitor deMonsters built in. One of those features I was waiting for before switching completely from Alcon to deMonsterDebugger.

If you guys haven’t downloaded it yet, then just click on the banner on the right side or jump directly to www.demonsterdebugger.com

Thanks again for such a great app!

almost 2 weeks passed by and I saved an insane amount of time debugging my applications with DemonsterDebugger, it’s an amazing piece of work what these guys did and I’m looking forward to see more updates, as soon as I have a bit of time I will come up with a wishlist from my side, and will try to send it over to them.

What I liked most was as expected the live editing feature, you can just select a component which is completely off the stage and align it properly just with a few clicks and at the same time you can test your application by accessing functions that are not even made public.

Guys, you did a wonderful job! Thank you very much for this great app!

This ist just too cool For quite a while I was using Alcon as my default debugger for any kind of flash / flex applications, today I just found this awesome Debugger which caught my eyes, not only because the cool logo but mainly because of the possibilities. Check out the features:

• AIR /Flex & Flash Debugger (only AS3)
• Trace EVERYTHING (even customclasses)
• Edit properties during runtime (no, I’m not kidding)
• Method testing
• Of course it’s an AIR app

I’ve just replaced Alcon with MonsterDebugger on a project that I’m working on, looks like I’m moving with the monsters in the future

Now go get it here and don’t forget to check the full feature list as well the “How it Works” part

Have fun monsterdebugging

Recently while working on an AIR app, I had to create some functionality when the user clicked on a different tab, therefore I wanted to simply check for the active tab using an event. Something that I have found was that as soon as you use a viewstack as a dataprovider no events will be sent. Which led me to the conclusion that it’s not possible to track which tab the user clicked.. UNTIL I came across the ItemClickEvent which was exactly the piece that I was searching for.

How to use the ItemClickEvent

 
import mx.events.ItemClickEvent;
 
private function tabChange(e:ItemClickEvent):void{
trace(e.label); //outputs the label of the selected tab
trace(e.item); //outputs the item in the dataprovider of the selected tab
trace(e.index); // outputs the index of the selected navigation item
}

and below the mxml tag for the tabbar component

<mx :TabBar id="navBar" x="10" y="125" dataProvider="viewstack1" themeColor="#648B9A"  selectedIndex="0" itemClick="tabChange(event)"/>

Actually pretty simple, but when reading throuh the docs, then you pretty quick think that it’s not possible.. although nothing is impossible

I just stumbled across this page, and I think it’s a very good starting position for people who would like to learn Flex or strengthen their knowledge, all you need is a working version of AMP and this link to include into the RSS feed of AMP.
http://sessions.adobe.com/FlexInAWeek/feed.xml

For a more detailed list of available videos and more check out this site:
http://www.adobe.com/devnet/flex/videotraining/?sdid=DXGFC

Want to win a copy of Flex Builder 3 Professional?
Actionscripthero.org has started a contest right in time for Adobe MAX 2008 (Milan), participation is easy.

You just need to get your creative mind working and design a wallpaper with the Subject “ Adobe MAX Europe 2008-2009 in Milano, Italy“

Jump over to the dedicated contest page to read the rules and requirements.

Wish you all good luck

Tiago

if you are a standalone flex user you probably never noticed the option when you do a right click on a project folder inside flex, yeh there is this option called “team”,

and how useful this one is, it allows you to use a CVS repository so you can easily share and keep track of the code changes. Really really useful, but what do you do if don’t have a CVS repository? Nowadays most hosting companies offer you an SVN repository and that’s not compatible with CVS, so there is no way to use that functionality in flex right? wrong!

Since Flex3 and it’l older versions are based on the Eclipse SDK, you can install any of the extra packages that come along with Eclipse, you can download them directly from the UI by going to Help-> Software Updates ->Find & Install.

By now that should be pretty clear, you can install plugins from Eclipse directly from the UI, but you didn’t found an SVN option right? Jump right over to this site: http://www.polarion.org/index.php?page=download&project=subversive, and add the two sources download the SVN and the SVN connector, you’ll be asked to restart Flex to apply the changes, go on and do that.

As soon as Flex started again, go have  a look at the team option and select Share Project now you can choose between CVS and SVN

I’ll be writing a tutorial on how to install the SVN extensions and some first steps very soon, so stay tuned for an update