Categories Displayed in Flash

Archive for the 'flash' Category

Flash + Fonts: getCharBoundaries Tips, adding End Signs

One of the coolest things about Flash9 in my opinion is the increased power of the TextField, we are already seeing applications like Buzzword only really possible now, and Flash 10 promises even more with enhanced - exotic even ligatures and system / device font antialiasing.

If ligatures aren't turning your typographic socks,  there are several great examples of how to use it to do practical things live search and highlighting of text, using the magic of getCharBoundaries.

We are using it at kidthing on the phase 2 to do something kinda neat - End Signs. You know those small little playful graphics used typically in magazines, at the end of a story to indicate no more hunting through advertisements for the next section. It's a great way to brand the experience but is rarely in web except for magazines like the New Yorker.

  As mentioned in previous articles we are consuming XHTML +CSS to convert into rich headers, and MovieClip dingbats at the end of a section. In implementing the later this eve I ran into some quirks. The goal is to find the last character of HTML formatted text and place the graphic on the same line a character or so to the right. Note that just putting it on the bounding box border of a TextField wouldn't work as there might only be a single word on that line.

The magic is getCharBoundaries getting the last character is assumed to have a period, so makes this easy:

  1.  
  2.         var idx : int = (myTextField.text as String).lastIndexOf(".");
  3.         var bnds : Rectangle = field.getCharBoundaries(idx);
  4.  

Tells you the position of the character, in this case a period at the very end of our section.

Tip1: Wait a Frame
When all the auto-goodness are turned on, e.g. wordWrap, autoKern, antiAliasType, on the TextField, it takes a frame for Flash to report back accurate positioning. This took me some time to figure out as the layout routines using it would report back values, it wasn't until testing them again in response to clicking that I realized that they weren't *quite* the right ones.

The easiest way to do this for me was to set a setTimeOut(setupDingBat, 1000/24); to fire about a frame later.

Tip2: Add the position of the TextField as an Offset
Unlike DisplayObject.getBounds(scope). it doesn't really tell you where that bounds actually belongs in the parent, but is relative to the textfield itself so you have to add the position of the textfield's x and y values as an offset.

  1.  
  2.         graphics.clear();  
  3.         graphics.beginFill(0xFF0000, .9);
  4.         graphics.drawRect(myTextField.x + (bnds.x ), myTextField.y + (bnds.y), Math.abs(bnds.width), bnds.height);
  5.         graphics.endFill();
  6.  

Tip3: Beware Negatives
NOTE the weird Math.abs on the bnds.width, was returning a negative width, making the graphic placed the opposite from where it was supposed to.

Tip4: Get Creative
It's very easy to create a static array with multiple linkageId's of symbols to attach, e.g. we have a bunch of bugs.

  1.  
  2. try {
  3.                                         // checking if the imageHeader exists in the library
  4.                                         //cycle through them
  5.                                         var mcStyle : String = blockEnds.shift();
  6.                                         blockEnds.push(mcStyle);
  7.                                         //      trace("put end sign " + mcStyle);
  8.                                         //trace("==================================================");
  9.                                         var ClassReference : Class = getDefinitionByName(mcStyle) as Class;
  10.                                         blockEndSymbol = new ClassReference();
  11.                                         addChild(blockEndSymbol);
  12.                
  13.                                         // positioning
  14.                                         blockEndSymbol.x = field.x + (bnds.x ) +Math.abs(bnds.width*2);
  15.                                         blockEndSymbol.y =field.y + (bnds.y);
  16.                                        
  17.                                 }
  18.                 catch(e : Error) {
  19.                                         trace("ERROR in TextPageBlock " + e.message);
  20.                                 }
  21.  

September 30, 2008 at 5:41 am   and Filed Under flash  | 1 Comment

Full Flash-website Deconstruction #1

This is going to be the opening post on the phase2 of the award winning  http://www.kidthing.com website.   What's been learned along the way about adding: SEO, deeplinking, CMS, blog, and store,web services, Browser resizing, dealing with big files and big traffic days, CDN wrangling, shared libraries, Font sanity and clarity.  To a flash RIA website.  There are so much more to creating successful websites than just uploading webpages to the web!

 Why Flash?

The brilliant design and animator team team do really amazing work in Illustrator and AfterFx, both of which are a natural fit to take directly into Flash and result in smaller pages than slicing up images Photoshop. Some of the pages in phase 2 are 2-7Kb for the rich graphics.

Compared to conventional HTML we have much better control over preloading and transitions, the ability to do engaging interstitials while the pages load up behind, resulting in a better end user experience.  Compared to pure AJAX+DHTML there are less browser compatibility issues.

Stay tuned.

September 25, 2008 at 7:45 am   and Filed Under flash  | 1 Comment

Blog opened up for commenting.

Finally got time to install recaptcha, so comments no longer require registering, which I don't think was possible either as I had it turned off due to damn spammers.  Thanks to Doug for reminding me.

Speaking of the blog.  Funny how being a web professional means that I never have time to work on my own stuff, so my main site is still the same one built in 2004 (I kinda actually take pride in it).  And this blog design started last year was supposed to be finished barely has changed, thus the lame 'flash cateogries here'.

On the brightside been working on some flash front end skinning to wordpress at kidthing   we are using it a s an inexpensive CMS at several places.    Which means I might be able to resuse some of the lessons learned on it on this blog and get past some of the annoying things I can't do easily with html+dhtml.

September 25, 2008 at 7:10 am   and Filed Under flash  | Add Comment

Flash + Fonts: autosize textfield html fix

More fun with text.  TextFieldAutoSize only appears to work when TextFields are set to MultiLine noWrap in the Text Tool properties editor, or in actionscript

  1.  
  2. txt.multiline = true;
  3.  
  4. txt.wordWrap = false;

Otherwise it's appeared to be ignored. I'm sure this is documented somewhere, it's not on the livedocs, but it would be nice if there was a warning for this if this actually the case.

September 20, 2008 at 10:09 pm   and Filed Under as3, flash, fonts, text  | 2 Comments

Printing in Flash with LayoutUtils

Printing movie clips from Flash becomes extremely easy with the printImage functions of the LayoutUtils package from Troyworks.

Two functions printImagePortrait and printImageLandscape will place your image portrait like or landscape like. Moreover, it doesn’t matter for this printing function if the paper is set to Portrait or Landscape. The image will be scaled to the size of paper (using the scaleTo function in the crop mode of the LayoutUtils) and centered; however, margins are left to fit the standard printer settings. To use the printing functions we need a movie clip, say “mc”, and then we create a snapshot object for it.

  1.  
  2. var snapObject:IDisplayObjectSnapShot = LayoutUtil.snapshotDimensions(mc);

Now, using the snapObject, we can print our image in portrait mode:

  1.  
  2. LayoutUtil.printImagePortrait(mc, snapObject);

Or in landscape:

  1.  
  2. LayoutUtil.printImageLandscape(mc, snapObject);

The other useful function is to print all the frames of the movie clip. To do that you can call one of the two functions

  1.  
  2. LayoutUtil.printImageLandscapeFrames(mc, snapObject, true);
  3.  
  4. LayoutUtil.printImagePortraitFrames(mc, snapObject, true);

The last boolean parameter indicating if you want to print all the frames of the movie clip (true) or just the first one (false). Each new frame would be printed on a new page.

If you need the reverse process, printing from PDF to SWF, you can use the PDF2SWF Converter from SWFTools, which is a free collection of SWF manipulation and creation utilities. PDF2SWF converts every page of the PDF document into a frame in the SWF file. The last version of the converter supports Flash 9 output format.

That’s it!

You can find LayoutUtil.as source code on GoogleCode or you can have a look here

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

September 19, 2008 at 8:43 am   and Filed Under flash  | 1 Comment

Flash + Fonts: Dynamically Loaded Fonts + Embedding + CSS + HTML == Hell

I swear about every year I end up reexploring the dark internals to flash's murky font seas, lose a day to a weekend everytime.

Basically the embedded fonts + html is a fairly complicated beast, that in order to work has to be called in a very specific order to work.

Here's a new twist.  As I've covered in previous articles the ability to load fonts dynamically is very cool, but what of those textfields on stage used as placeholders? How do they join in the font fun?  THEY DON'T.   It doesn't appear possible to have them styled as CSS+HTML+Embedded, even if you set it to new text with CSS the text inside just dissapears.  However you can create a new TextField that does support those values at the exact same place, and swap them like:

  1.  
  2.                 //////////// Takes a clip on stage and replaces it with an 'identical' one ////////////////////////////////////////
  3.                 public static function  swapClip(txt : TextField) : TextField {
  4.                         trace("swapClip2..............." + txt.name);
  5.                         var par : DisplayObjectContainer = txt.parent;
  6.  
  7.                         var tf : TextField = new TextField();
  8.                         var ss : StyleSheet = new StyleSheet();
  9.                         var tff : TextFormat = txt.defaultTextFormat;
  10.                        
  11.                         var p : Object = new Object();
  12.                         p.fontSize = tff.size;
  13.                
  14.                         p.fontFamily = tff.font;
  15.                         //"Myriad Pro";
  16.                         p.color = tff.color;
  17.                         p.size = tff.size;
  18.                         ss.setStyle("p", p);
  19.                         //
  20.                         tff.font = tff.font;
  21.                         //"Myriad Pro";
  22.                         tf.defaultTextFormat = tff;
  23.                         // new TextFormat("Myriad Pro", 16, 0);  
  24.                         tf.styleSheet = ss;
  25.                        
  26.                        
  27.                         tf.width = txt.width;
  28.                         tf.height = txt.height;
  29.                         tf.x = txt.x;
  30.                         tf.y = txt.y;
  31.                         //      tf.border = true;
  32.  
  33.                         tf.embedFonts = true;
  34.                         tf.antiAliasType = AntiAliasType.ADVANCED;
  35.                         tf.selectable = true;
  36.                         tf.multiline = true;
  37.                         tf.wordWrap = true;
  38.                         tf.condenseWhite = false;
  39.    
  40.                         //      tf.rotation = 15;
  41.                         //      txt.visible = false;
  42.                         trace("swapClip htmlText " + txt.htmlText);
  43.                         var html : String = "<p>" + txt.text + "</p>";
  44.                         tf.htmlText = html;
  45.                         tf.name = txt.name + "";
  46.              
  47.                         //              par
  48.                         par.addChildAt(tf, par.getChildIndex(txt));
  49.                         par.removeChild(txt);
  50.                         return tf;
  51.                 }
  52.  

Weirdly you have to give it both TextFormat and styleSheet to get the similar formatting as the clip on stage, clearly Flash's internal renderer has significant internal state and both TextFormat or StyleSheet overlapp controlling different aspects of it.

September 19, 2008 at 5:56 am   and Filed Under as3, flash, fonts, seo, text  | 1 Comment

Flash: Multiple Runtime Font Sharing Embedding with only Partial Character sets: How To.

Here's another example of runtime font loading, this time using html text, multiple flavors of the font library, in two separate swf libs, one with the regular font, the other with the bold, italic, bold italic flavors. Typically these would be loaded at different times, but this example should give you the basic idea.

The multiple font lib built by FlashDevelop + Flex 3.0 as "FontLibs.swf", being output as 'MyriadProExtendedFontLibs.swf', the one we created in the previous is now being loaded as 'MyriadProRegMinLib.swf'

package{ import flash.display.Sprite;import flash.text.Font;

public class MyriadExtendedLib extends Sprite

{

[Embed(source='C:/WINDOWS/Fonts/MyriadPro-Bold.otf', fontWeight='bold', fontName='Myriad Pro', unicodeRange='U+0020-U+0020,U+0021-U+0021,U+0022-U+0022,U+0023-U+0023,U+0024-U+0024,U+0025-U+0025,U+0026-U+0026,U+0027-U+0027,U+0028-U+0028,U+0029-U+0029,U+002A-U+002A,U+002B-U+002B,U+002C-U+002C,U+002D-U+002D,U+002E-U+002E,U+002F-U+002F,U+0030-U+0030,U+0031-U+0031,U+0032-U+0032,U+0033-U+0033,U+0034-U+0034,U+0035-U+0035,U+0036-U+0036,U+0037-U+0037,U+0038-U+0038,U+0039-U+0039,U+003A-U+003A,U+003B-U+003B,U+003C-U+003C,U+003D-U+003D,U+003E-U+003E,U+003F-U+003F,U+0040-U+0040,U+0041-U+0041,U+0042-U+0042,U+0043-U+0043,U+0044-U+0044,U+0045-U+0045,U+0046-U+0046,U+0047-U+0047,U+0048-U+0048,U+0049-U+0049,U+004A-U+004A,U+004B-U+004B,U+004C-U+004C,U+004D-U+004D,U+004E-U+004E,U+004F-U+004F,U+0050-U+0050,U+0051-U+0051,U+0052-U+0052,U+0053-U+0053,U+0054-U+0054,U+0055-U+0055,U+0056-U+0056,U+0057-U+0057,U+0058-U+0058,U+0059-U+0059,U+005A-U+005A,U+005B-U+005B,U+005C-U+005C,U+005D-U+005D,U+005E-U+005E,U+005F-U+005F,U+0060-U+0060,U+0061-U+0061,U+0062-U+0062,U+0063-U+0063,U+0064-U+0064,U+0065-U+0065,U+0066-U+0066,U+0067-U+0067,U+0068-U+0068,U+0069-U+0069,U+006A-U+006A,U+006B-U+006B,U+006C-U+006C,U+006D-U+006D,U+006E-U+006E,U+006F-U+006F,U+0070-U+0070,U+0071-U+0071,U+0072-U+0072,U+0073-U+0073,U+0074-U+0074,U+0075-U+0075,U+0076-U+0076,U+0077-U+0077,U+0078-U+0078,U+0079-U+0079,U+007A-U+007A,U+007B-U+007B,U+007C-U+007C,U+007D-U+007D,U+007E-U+007E,U+00A9-U+00A9,U+00AE-U+00AE,U+00B7-U+00B7,U+02C6-U+02C6,U+02DC-U+02DC,U+2013-U+2013,U+2014-U+2014,U+2018-U+2018,U+2019-U+2019,U+201A-U+201A,U+201C-U+201C,U+201D-U+201D,U+201E-U+201E,U+2020-U+2020,U+2021-U+2021,U+2022-U+2022,U+2026-U+2026,U+2030-U+2030,U+2039-U+2039,U+203A-U+203A,U+20AC-U+20AC,U+2122-U+2122')]

public static var _MyriadProBold:Class;

[Embed(source='C:/WINDOWS/Fonts/MyriadPro-BoldIt.otf', fontWeight='bold', fontStyle='italic', fontName='Myriad Pro', unicodeRange='U+0020-U+0020,U+0021-U+0021,U+0022-U+0022,U+0023-U+0023,U+0024-U+0024,U+0025-U+0025,U+0026-U+0026,U+0027-U+0027,U+0028-U+0028,U+0029-U+0029,U+002A-U+002A,U+002B-U+002B,U+002C-U+002C,U+002D-U+002D,U+002E-U+002E,U+002F-U+002F,U+0030-U+0030,U+0031-U+0031,U+0032-U+0032,U+0033-U+0033,U+0034-U+0034,U+0035-U+0035,U+0036-U+0036,U+0037-U+0037,U+0038-U+0038,U+0039-U+0039,U+003A-U+003A,U+003B-U+003B,U+003C-U+003C,U+003D-U+003D,U+003E-U+003E,U+003F-U+003F,U+0040-U+0040,U+0041-U+0041,U+0042-U+0042,U+0043-U+0043,U+0044-U+0044,U+0045-U+0045,U+0046-U+0046,U+0047-U+0047,U+0048-U+0048,U+0049-U+0049,U+004A-U+004A,U+004B-U+004B,U+004C-U+004C,U+004D-U+004D,U+004E-U+004E,U+004F-U+004F,U+0050-U+0050,U+0051-U+0051,U+0052-U+0052,U+0053-U+0053,U+0054-U+0054,U+0055-U+0055,U+0056-U+0056,U+0057-U+0057,U+0058-U+0058,U+0059-U+0059,U+005A-U+005A,U+005B-U+005B,U+005C-U+005C,U+005D-U+005D,U+005E-U+005E,U+005F-U+005F,U+0060-U+0060,U+0061-U+0061,U+0062-U+0062,U+0063-U+0063,U+0064-U+0064,U+0065-U+0065,U+0066-U+0066,U+0067-U+0067,U+0068-U+0068,U+0069-U+0069,U+006A-U+006A,U+006B-U+006B,U+006C-U+006C,U+006D-U+006D,U+006E-U+006E,U+006F-U+006F,U+0070-U+0070,U+0071-U+0071,U+0072-U+0072,U+0073-U+0073,U+0074-U+0074,U+0075-U+0075,U+0076-U+0076,U+0077-U+0077,U+0078-U+0078,U+0079-U+0079,U+007A-U+007A,U+007B-U+007B,U+007C-U+007C,U+007D-U+007D,U+007E-U+007E,U+00A9-U+00A9,U+00AE-U+00AE,U+00B7-U+00B7,U+02C6-U+02C6,U+02DC-U+02DC,U+2013-U+2013,U+2014-U+2014,U+2018-U+2018,U+2019-U+2019,U+201A-U+201A,U+201C-U+201C,U+201D-U+201D,U+201E-U+201E,U+2020-U+2020,U+2021-U+2021,U+2022-U+2022,U+2026-U+2026,U+2030-U+2030,U+2039-U+2039,U+203A-U+203A,U+20AC-U+20AC,U+2122-U+2122')]

public static var _MyriadProItalBold:Class;

[Embed(source='C:/WINDOWS/Fonts/MyriadPro-It.otf', fontName='Myriad Pro', fontStyle='italic', unicodeRange='U+0020-U+0020,U+0021-U+0021,U+0022-U+0022,U+0023-U+0023,U+0024-U+0024,U+0025-U+0025,U+0026-U+0026,U+0027-U+0027,U+0028-U+0028,U+0029-U+0029,U+002A-U+002A,U+002B-U+002B,U+002C-U+002C,U+002D-U+002D,U+002E-U+002E,U+002F-U+002F,U+0030-U+0030,U+0031-U+0031,U+0032-U+0032,U+0033-U+0033,U+0034-U+0034,U+0035-U+0035,U+0036-U+0036,U+0037-U+0037,U+0038-U+0038,U+0039-U+0039,U+003A-U+003A,U+003B-U+003B,U+003C-U+003C,U+003D-U+003D,U+003E-U+003E,U+003F-U+003F,U+0040-U+0040,U+0041-U+0041,U+0042-U+0042,U+0043-U+0043,U+0044-U+0044,U+0045-U+0045,U+0046-U+0046,U+0047-U+0047,U+0048-U+0048,U+0049-U+0049,U+004A-U+004A,U+004B-U+004B,U+004C-U+004C,U+004D-U+004D,U+004E-U+004E,U+004F-U+004F,U+0050-U+0050,U+0051-U+0051,U+0052-U+0052,U+0053-U+0053,U+0054-U+0054,U+0055-U+0055,U+0056-U+0056,U+0057-U+0057,U+0058-U+0058,U+0059-U+0059,U+005A-U+005A,U+005B-U+005B,U+005C-U+005C,U+005D-U+005D,U+005E-U+005E,U+005F-U+005F,U+0060-U+0060,U+0061-U+0061,U+0062-U+0062,U+0063-U+0063,U+0064-U+0064,U+0065-U+0065,U+0066-U+0066,U+0067-U+0067,U+0068-U+0068,U+0069-U+0069,U+006A-U+006A,U+006B-U+006B,U+006C-U+006C,U+006D-U+006D,U+006E-U+006E,U+006F-U+006F,U+0070-U+0070,U+0071-U+0071,U+0072-U+0072,U+0073-U+0073,U+0074-U+0074,U+0075-U+0075,U+0076-U+0076,U+0077-U+0077,U+0078-U+0078,U+0079-U+0079,U+007A-U+007A,U+007B-U+007B,U+007C-U+007C,U+007D-U+007D,U+007E-U+007E,U+00A9-U+00A9,U+00AE-U+00AE,U+00B7-U+00B7,U+02C6-U+02C6,U+02DC-U+02DC,U+2013-U+2013,U+2014-U+2014,U+2018-U+2018,U+2019-U+2019,U+201A-U+201A,U+201C-U+201C,U+201D-U+201D,U+201E-U+201E,U+2020-U+2020,U+2021-U+2021,U+2022-U+2022,U+2026-U+2026,U+2030-U+2030,U+2039-U+2039,U+203A-U+203A,U+20AC-U+20AC,U+2122-U+2122')]

public static var _MyriadProItal:Class;

public function MyriadExtendedLib()

{

super();

Font.registerFont(_MyriadProBold);

Font.registerFont(_MyriadProItalBold);

Font.registerFont(_MyriadProItal);

}

}

}

And the consumer of the fonts

  1. package {import flash.display.Loader;import flash.display.Sprite;
  2.  
  3. import flash.events.Event;
  4.  
  5. import flash.net.URLRequest;
  6.  
  7. import flash.text.*;
  8.  
  9. public class MultiFontLoader extends Sprite {
  10.  
  11. public function MultiFontLoader() {
  12.  
  13. loadFont("MyriadProRegMinLib.swf");
  14.  
  15.                loadFont("BaskervilleRegFontLib.swf");
  16.  
  17.                loadFont("MyriadProExtendedFontLibs.swf", true);
  18.  
  19. }
  20.  
  21. private function loadFont(url:String, complete:Boolean = false):void {
  22.  
  23. var loader:Loader = new Loader();
  24.  
  25. if (complete) {
  26.  
  27. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontLoaded);
  28.  
  29. }
  30.  
  31. loader.load(new URLRequest(url));
  32.  
  33. }
  34.  
  35. private function fontLoaded(event:Event):void {
  36.  
  37. drawText();
  38.  
  39. }
  40.  
  41. public function drawText():void {
  42.  
  43. var tf:TextField = new TextField();
  44.  
  45. tf.defaultTextFormat = new TextFormat("Myriad Pro", 16, 0);
  46.  
  47. tf.embedFonts = true;
  48.  
  49. tf.antiAliasType = AntiAliasType.ADVANCED;
  50.  
  51. tf.multiline = true;
  52.  
  53. tf.autoSize = TextFieldAutoSize.LEFT;
  54.  
  55. tf.border = true;
  56.  
  57. tf.htmlText = "<p><b>Troy</b> was <b><i>here</i></b><br/> <font face='Baskerville'>Scott was</font> <i>here too</i><br/>...:;*&amp;^% </p>";
  58.  
  59. tf.rotation = 15;
  60.  
  61. addChild(tf);
  62.  
  63. }
  64.  
  65. }
  66.  
  67. }

September 12, 2008 at 2:24 am   and Filed Under Flash IDE, flash, fonts, loading, preloading, workflow  | 1 Comment

Flash: Runtime Font Sharing Embedding with only Partial Character sets: How To.

While not planning on it, spent most the day figuring out how to implement runtime shared fonts, while only embedding a fraction off the characters. Holy moly was this a minefield. But happily got a simple solution.

Here's the goal, I'm working on the phase 2.x of a website, and we are using several flavors of Myriad Pro to make it look great, plus a few others. However with each flavor weighing in at ~35Kb each we are loading about 200K worth of fonts (bold, italic, bold italic etc), and at present many of the pages have their own copies of the fonts (the typical evil that comes up on projects with no time), so the sight loads far more sluggish than it should. After this and the following are done, the load is down to 54kb, as only the elements needed are loaded once.

In Flash IDE (CS3) and prior selecting partial characters was easy if you only had one swf, just select from the characters in the embed button, in the properties panel. If you have character sets you use often, short cut this by creating custom character sets, with this neat approach, perhaps even with this tool However this is only really good for elements scoped inside the swf with the embedded font, no way to share them between swfs without resorting to traditional runtime shared libraries that have several issues (like bypassing preloaders all together). In AS2.0 there was a nifty hack possible to help,where a embedded font was coerced into sharing by a proxy clip that referenced it as a runtime shared library, at the preloaders convenience, but this (for me) was brittle in having font collisions, e.g. a static textfield on stage could render the approach useless, and I'm pretty sure this doesn't work anymore in AS3. UPDATE. !%!$ AS3 has the exact same issue, flash player appears to load a font in a given swf scope on a first come-first serve only once. Meaning any static or textfield anywhere on teh stage (regardless or not if any characters are embedded) will collide with whatever you load in dynamically later, rendering the dynamically loaded useless,...and any references to it. Meaning your dynamic textfields will break...not show up at all!. A possible workaround is having either the placeholder textfields with a sacrificial font (e.g. sans), or renaming the font in the embed created in a few steps to something like (Myriad Pro ->MyriadPro) and adjusting the css/etc.

For reasons unknown to me, adding a Font symbol to the library (either for use with actioncript, or runtime sharing) embeds the whole font. Needless to say, when on the web, getting every character known to mankind is not going to help your site load fast. This can be the difference of 2kb for only what you need for the preloader, to 2MB for entire international character sets. Also it can grind compile times to a halt, as every publish requires every glyph to be embedded and this is time consuming. Both seem like major oversights on the Flash IDE's design.

So oddly the best way to create fonts is to use the Flex 3.x SDK (download). For this the great and free FlashDevelop (download) will work great (if your on windows). Just follow the installation instructions, setup a new Actionscript 3, Flex 3 Project.

Create a class like the following in the 'src' directory, and in the righthand tree, right click over it and select 'always compile'

  1.  
  2.  package {  
  3.  
  4.       import flash.display.Sprite;
  5.           import flash.text.Font;
  6.       public class MyriadProFontLib extends Sprite {  
  7.  
  8.            [Embed(source='C:/WINDOWS/Fonts/MyriadPro-Regular.otf', fontName='Myriad Pro', unicodeRange='U+0020-U+0020,U+0021-U+0021,U+0022-U+0022,U+0023-U+0023,U+0024-U+0024,U+0025-U+0025,U+0026-U+0026,U+0027-U+0027,U+0028-U+0028,U+0029-U+0029,U+002A-U+002A,U+002B-U+002B,U+002C-U+002C,U+002D-U+002D,U+002E-U+002E,U+002F-U+002F,U+0030-U+0030,U+0031-U+0031,U+0032-U+0032,U+0033-U+0033,U+0034-U+0034,U+0035-U+0035,U+0036-U+0036,U+0037-U+0037,U+0038-U+0038,U+0039-U+0039,U+003A-U+003A,U+003B-U+003B,U+003C-U+003C,U+003D-U+003D,U+003E-U+003E,U+003F-U+003F,U+0040-U+0040,U+0041-U+0041,U+0042-U+0042,U+0043-U+0043,U+0044-U+0044,U+0045-U+0045,U+0046-U+0046,U+0047-U+0047,U+0048-U+0048,U+0049-U+0049,U+004A-U+004A,U+004B-U+004B,U+004C-U+004C,U+004D-U+004D,U+004E-U+004E,U+004F-U+004F,U+0050-U+0050,U+0051-U+0051,U+0052-U+0052,U+0053-U+0053,U+0054-U+0054,U+0055-U+0055,U+0056-U+0056,U+0057-U+0057,U+0058-U+0058,U+0059-U+0059,U+005A-U+005A,U+005B-U+005B,U+005C-U+005C,U+005D-U+005D,U+005E-U+005E,U+005F-U+005F,U+0060-U+0060,U+0061-U+0061,U+0062-U+0062,U+0063-U+0063,U+0064-U+0064,U+0065-U+0065,U+0066-U+0066,U+0067-U+0067,U+0068-U+0068,U+0069-U+0069,U+006A-U+006A,U+006B-U+006B,U+006C-U+006C,U+006D-U+006D,U+006E-U+006E,U+006F-U+006F,U+0070-U+0070,U+0071-U+0071,U+0072-U+0072,U+0073-U+0073,U+0074-U+0074,U+0075-U+0075,U+0076-U+0076,U+0077-U+0077,U+0078-U+0078,U+0079-U+0079,U+007A-U+007A,U+007B-U+007B,U+007C-U+007C,U+007D-U+007D,U+007E-U+007E,U+00A9-U+00A9,U+00AE-U+00AE,U+00B7-U+00B7,U+02C6-U+02C6,U+02DC-U+02DC,U+2013-U+2013,U+2014-U+2014,U+2018-U+2018,U+2019-U+2019,U+201A-U+201A,U+201C-U+201C,U+201D-U+201D,U+201E-U+201E,U+2020-U+2020,U+2021-U+2021,U+2022-U+2022,U+2026-U+2026,U+2030-U+2030,U+2039-U+2039,U+203A-U+203A,U+20AC-U+20AC,U+2122-U+2122')]  
  9.  
  10.             public static var _MyriadPro:Class;  
  11.  
  12.                         public function MyriadProFontLib()
  13.                         {
  14.                                 super();
  15.                                  Font.registerFont(_MyriadPro);
  16.                         }
  17.       }
  18.  }

Go to the Top Nav's "Project>Properties" and adjust the output file to something like "bin\FontLibs.swf"

Copy the characters you want as Ascii e.g. (missing white space)
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~©®·ˆ˜–—‘’‚“”„†‡•…‰‹›€™

goto this great unicode converter here

top left 'characters' box, then hit convert

select the output from the Unicode U+hex notation box, and paste it into this app's left side.
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Copy the right side and replace the 'unicodeRange=''' in the above class.
Build the file by pressing the green play looking button. If all goes well you should see the console output

(fcsh)
Build succeeded
Done (0)

and a new FontLibs.swf in the bin folder.

You can use the excellent Action Script Viewer 6 to look at the glyphs embedded into the FontLibs.swf. This is very useful for seeing if the unicode is getting you the characters you think you are putting in. I tried several ascii to unicode convertors, and only the one linked above got it right.

Then using the tool of your choice create this class to load up the fontlib and use a dynamic textfield.

  1. package {  
  2.  
  3.       import flash.display.Loader;  
  4.  
  5.       import flash.display.Sprite;  
  6.  
  7.       import flash.events.Event;  
  8.  
  9.       import flash.net.URLRequest;  
  10.  
  11.       import flash.text.*;
  12.         import flash.utils.describeType;
  13.  
  14.       public class FontLoader extends Sprite {  
  15.  
  16.            public function FontLoader() {  
  17.  
  18.                 loadFont("FontLibs.swf");
  19.            }  
  20.  
  21.            private function loadFont(url:String):void {  
  22.  
  23.                 var loader:Loader = new Loader();  
  24.  
  25.                 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontLoaded);  
  26.  
  27.                 loader.load(new URLRequest(url));  
  28.  
  29.            }  
  30.  
  31.            private function fontLoaded(event:Event):void {  
  32.  
  33.                 drawText();  
  34.  
  35.            }  
  36.  
  37.            public function drawText():void {  
  38.  
  39.                 var tf:TextField = new TextField();  
  40.  
  41.                 tf.defaultTextFormat = new TextFormat("Myriad Pro", 16, 0);  
  42.  
  43.                                 tf.embedFonts = true;  
  44.  
  45.               tf.antiAliasType = AntiAliasType.ADVANCED;  
  46.  
  47.                 tf.autoSize = TextFieldAutoSize.LEFT;  
  48.  
  49.                 tf.border = true;
  50.                 tf.text = "Troy was here\nScott was here too\nblah scott...:;*&amp;^% ";
  51.                 tf.rotation = 15;
  52.                 addChild(tf);  
  53.  
  54.            }  
  55.  
  56.       }  
  57.  
  58.  }

In decreasing order of relevance, these are some of the posts that I read to get to this point.

If characters that are embedded are funky, and your using Flex 2.0, upgrade to Flex SDK 3.x. I was originally using Flex 2.0...very dated at this point.

If your using OTF (Open Type Fonts) like Myriad Pro make sure your using Flex SDK 3.x else you might have issues...flex 2.0 is very dated at this point. Also consider using a tool like the excellent CrossFont if you're trying to use Mac Fonts.

[1] The one that helped me realize the ability to limit the unicode. The more readable one on the yahoo labs, and the authors blog with many comments. The solution he and others presented didn't work for me, and I think the solution here is cleaner.

[2] Flex 3.x Compiler comes with multiple The font transcoder doesn't always work, try another. in particular the (flash.fonts.AFEFontManager);

[3] Runtime Font Sharing For Flash CS3...[Robert's excellent article and followup] [far more verbose] , using the traditional whole-enchilda Font.

[4] Special considerations when using Japanese character sets (a) usin (b)

[5] A must read if you want a grand Q&A of embedded fonts and many quirks, (CSS specific)

[6] More details on mime-type for the font, I think this was only relevant in Flex 2.0 than Flex 3.x.

[7 ] Basics with AS3/Flex without using a library

[ 8 ] More rants on Flash CS3's lack of proper embedding, in particular with pixel fonts..Flash CS3 renames them for you.

September 12, 2008 at 1:43 am   and Filed Under Flash IDE, FlashDevelop, FlashFirst, flash, preloading, workflow  | 2 Comments

Flex | 360 Recap, and conference

The Flex | 360 Conference in San Jose rocked.  I'd recap but Adobe graciously taped the whole thing in HiDef! so you can catch the many excellent talks for free!.  Ted talks about the motivations here, a listing of the videos as they get released (RSS) are here

My Presentation talk was

Advanced State management "Cogs is a heirarchical statemachine library for use with AS3.0 projects. and it's viewable here.  (damn I talk fast!)

I'll be giving a modified + updated version of the talk at the October Flash Users Group meeting. based on the feedback I got at Flex | 360.

I'll also be presenting at the <head> conference in late October on:

One Swf to rule them all.

Using AIR's FileStream normally causes your swf to stop working on the web. I'll show how to use one SWF to rule both desktop and web. Automatically switching to the appropriate save (http post or AIR) in whatever context it's in, via the troyworks framework library.

September 9, 2008 at 5:40 pm   and Filed Under flash  | Add Comment

Fix for Error #1063: Argument count mismatch on BitmapData Expected 2, got 0.

Normally creating blank BitmapData requires you pass in an the width and height in pixels.  But what about when you embed an image with a linkageid?  You'll get the above error trying to create a new myEmbeddedImage(); unless you pass it with two numbers, even if they don't mean anything e.g.

var bdata:BitmapData = new imageInLibraryLinkageID(0,0);

I would have thought that these would be optional for embedded assets.  Fix originally discovered here.

September 7, 2008 at 11:43 pm   and Filed Under BitmapData, Flash IDE, as3, flash, images  | Add Comment
« Previous Entries Next Entries »
Copyright © 2008. All Rights Reserved  |   MADE IN METHOD-E
info@TroyWorks.com