The spirit sustains the stone  

hi Guys,

Over time I’ve accumulated about 4 copies of ‘Essential Action Script 3.0′ books by Colin Moock from conferences and talks, I have 2 left. Rather than using them as monitor stands if anyone wants one just reply to this post. On Friday I’ll pick 2 people from the comments and send them to you. If you don’t live in UK I might ask u to cover postage. (don’t put your address in the comments! I’ll get in touch with u from your email) ta paddy ;)

I’ve just gone through umpteen different code highlighter/beautifier plugins for wordpress. So far I’ve only found one that works correctly with the k2 theme (http://www.getk2.com) it’s this one:

http://wordpress.org/extend/plugins/wp-syntax/

this also looks like a good extension:

http://wordpress.org/extend/plugins/wp-syntax-colorizer/

anyone know of ‘better’ ones?

Often when you need to embed a font you also need to include ‘bold’ and sometimes ‘italic’ styles. Sometimes you need more than one fontFamily. Flex by default will embed all glyphs of a fontFamily. Embedding every glyph if generally unnecessary. By restricting the character set (’unicode-range’) you can shave off between 50-100kb or more per font style (FontFamilies have varying amounts of glyphs and obviously varying complexities of outlines which effects how much you can save). Anyway by setting unicode-range for fonts we managed to shave 300kb off our application, I wasn’t expecting it to be so much so thought worth a blog ;)

@font-face {
    src: url("assets/Arial.ttf");
    fontFamily: Arial;
    advancedAntiAliasing: true;
    unicode-range: U+0030-U+0039, /* 0-9 */
    U+0041-U+005A, /* Uppercase A-Z */
    U+0061-U+007A, /* Lowercase a-z */
    U+0021-U+002F, /* !"#$%&'()*+,-./ */
    U+003A-U+0040, /* :;<=>?@ */
    U+005B-U+0060, /* [\]^_ */
    U+00A3-U+00A3, /* £ */
    U+00A9-U+00A9, /* © */
    U+00AE-U+00AE /* ® */
    /* U+00BF-U+0259  FOREIGN CHRS */
}

if anyone knows of other ranges you think can be generally useful please let me know ;)

This is a handy little method to know about. It enables you to change default css styles of alternative content to enable 100% Flash dimensions.
Normally, if you try to change css you can get a nasty little flicker but this method can be called before the DOM of a page is loaded which prevents the flicker (more info in api link at bottom of post)

Example:

http://www.verbier-summits.com/one-day-taster.php

If you didn’t have flash or javascript enabled (think search engine crawlers) you’d see this:

http://www.verbier-summits.com/one-day-taster.php?noflash=true

The html has a scrollbar but when flash is detected the scrollbar disappears so that flash can be displayed at 100%. All thanks to swfobject.createCSS( );

this is the code that does it:

if (swfobject.hasFlashPlayerVersion("6.0.0") && swfobject.getQueryParamValue('noflash') !="true" )
{
 // Overwrite regular CSS used for alternative content to enable Full Browser Flash
swfobject.createCSS("html", "overflow:hidden;");
swfobject.createCSS("body", "margin:0; padding:0;");
swfobject.embedSWF("application.swf", "content-for-flash", "100%", "100%", "9.0.0", "expressInstall.swf" , flashvars, params, attributes);
} 

http://code.google.com/p/swfobject/wiki/api

At the moment some of Photoshop’s anti-aliasing options are not supported in Flash i.e ‘Strong’. I’m not sure enought designers are aware of this? I’m often handed designs with font renderings that can’t be replicated in Flash. I wonder if it would be possible to have a setting in Photoshop that lets it know it is dealing with a design to be outputted to flash and then remove/disable the text aliasing options that aren’t supported. I’m sure it would help designers heaps. I would imagine one of a designer’s most annoying request is being told you have to use a different font! Below is an example of what happens if the ‘Strong’ anti-aliasing option is set in Photoshop and then rendered in Flash. This, generally, is much worse for thin fonts. (Below is using Myriad Pro Light)

PhotoShop:

Flash

UPDATE:

Good news - It’s been brought to my attention that it is possible to achieve the same aliasing effects, see the comments. This gives me a Photoshop wishlist/feature request.

1. A way of getting the correct values for fontThickness & Sharpness without having to recreate it in flash
2. When a psd is imported into flash is it possible to have a checkbox to retain the fontThickness fontSharpness settings?

Flex (with fontThickness/fontSharpness custom settings)

happy anti-aliasing ;)