Archive for May, 2008

26MayEmbeding fonts in flash to display bold the right way

In order to use the <b> tag within html text in flash and have Flash automatically detect the right font to use for bold, you must embed both character sets and specify the fontWeight of both.

Sounds more complicated than it is. Just use the following code when embedding fonts:

[Embed(mimeType='application/x-font', source='fonts/myFont-Medium.ttf', fontName='myfont')]
private var font:Class;

[Embed(mimeType='application/x-font', source='fonts/myFont-Bold.ttf', fontName='myfont', fontWeight='bold')]
private var fontBold:Class;

14MayHTML tags and CSS properties available in Flash 9

  • HTML tags supported
  • Tag Description
    Anchor tag The <a> tag creates a hypertext link and supports the following attributes:

    • target: Specifies the name of the target window where you load the page. Options include _self, _blank, _parent, and _top. The _self option specifies the current frame in the current window, _blank specifies a new window, _parent specifies the parent of the current frame, and _top specifies the top-level frame in the current window.
    • href: Specifies a URL or an ActionScript link event.The URL can be either absolute or relative to the location of the SWF file that is loading the page. An example of an absolute reference to a URL is http://www.adobe.com; an example of a relative reference is /index.html. Absolute URLs must be prefixed with http://; otherwise, Flash treats them as relative URLs. You can use the link event to cause the link to execute an ActionScript function in a SWF file instead of opening a URL. To specify a link event, use the event scheme instead of the http scheme in your href attribute. An example is href="event:myText" instead of href="http://myURL"; when the user clicks a hypertext link that contains the event scheme, the text field dispatches a link TextEvent with its text property set to "myText". You can then create an ActionScript function that executes whenever the link TextEvent is dispatched. You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets.
    Bold tag The <b> tag renders text as bold. A bold typeface must be available for the font used.
    Break tag The <br> tag creates a line break in the text field. You must set the text field to be a multiline text field to use this tag.
    Font tag The <font> tag specifies a font or list of fonts to display the text.The font tag supports the following attributes:

    • color: Only hexadecimal color (#FFFFFF) values are supported.
    • face: Specifies the name of the font to use. As shown in the following example, you can specify a list of comma-delimited font names, in which case Flash Player selects the first available font. If the specified font is not installed on the user's computer system or isn't embedded in the SWF file, Flash Player selects a substitute font.
    • size: Specifies the size of the font. You can use absolute pixel sizes, such as 16 or 18, or relative point sizes, such as +2 or -4.
    Image tag The <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. To use this tag, you must set the text field to be multiline and to wrap text.The <img> tag supports the following attributes:

    • src: Specifies the URL to an image or SWF file, or the linkage identifier for a movie clip symbol in the library. This attribute is required; all other attributes are optional. External files (JPEG, GIF, PNG, and SWF files) do not show until they are downloaded completely.
    • width: The width of the image, SWF file, or movie clip being inserted, in pixels.
    • height: The height of the image, SWF file, or movie clip being inserted, in pixels.
    • align: Specifies the horizontal alignment of the embedded image within the text field. Valid values are left and right. The default value is left.
    • hspace: Specifies the amount of horizontal space that surrounds the image where no text appears. The default value is 8.
    • vspace: Specifies the amount of vertical space that surrounds the image where no text appears. The default value is 8.
    • id: Specifies the name for the movie clip instance (created by Flash Player) that contains the embedded image file, SWF file, or movie clip. This is useful if you want to control the embedded content with ActionScript.
    • checkPolicyFile: Specifies that Flash Player will check for a cross-domain policy file on the server associated with the image's domain. If a cross-domain policy file exists, SWF files in the domains listed in the file can access the data of the loaded image, for instance by calling the BitmapData.draw() method with this image as the source parameter. For more information, see the "Flash Player Security" chapter in Programming ActionScript 3.0.

    Flash displays media embedded in a text field at full size. To specify the dimensions of the media you are embedding, use the <img> tag's height and width attributes.

    In general, an image embedded in a text field appears on the line following the <img> tag. However, when the <img> tag is the first character in the text field, the image appears on the first line of the text field.

    Italic tag The <i> tag displays the tagged text in italics. An italic typeface must be available for the font used.
    List item tag The <li> tag places a bullet in front of the text that it encloses. Note: Because Flash Player does not recognize ordered and unordered list tags (<ol> and <ul>, they do not modify how your list is rendered. All lists are unordered and all list items use bullets.
    Paragraph tag The <p> tag creates a new paragraph. You must set the text field to be a multiline text field to use this tag. The <p> tag supports the following attributes:

    • align: Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
    • class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
    Span tag The <span> tag is available only for use with CSS text styles. It supports the following attribute:

    • class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
    Text format tag The <textformat> tag lets you use a subset of paragraph formatting properties of the TextFormat class within text fields, including line leading, indentation, margins, and tab stops. You can combine <textformat> tags with the built-in HTML tags.The <textformat> tag has the following attributes:

    • blockindent: Specifies the block indentation in points; corresponds to TextFormat.blockIndent.
    • indent: Specifies the indentation from the left margin to the first character in the paragraph; corresponds to TextFormat.indent. Both positive and negative numbers are acceptable.
    • leading: Specifies the amount of leading (vertical space) between lines; corresponds to TextFormat.leading. Both positive and negative numbers are acceptable.
    • leftmargin: Specifies the left margin of the paragraph, in points; corresponds to TextFormat.leftMargin.
    • rightmargin: Specifies the right margin of the paragraph, in points; corresponds to TextFormat.rightMargin.
    • tabstops: Specifies custom tab stops as an array of non-negative integers; corresponds to TextFormat.tabStops.
    Underline tag The <u> tag underlines the tagged text.
  • CSS properties
  • These are all the CSS properties that can be manipulated from an external style sheet and with actionscript.

    CSS property ActionScript property Usage and supported values
    color color Only hexadecimal color values are supported. Named colors (such as blue) are not supported. Colors are written in the following format: #FF0000.
    display display Supported values are inline, block, and none.
    font-family fontFamily A comma-separated list of fonts to use, in descending order of desirability. Any font family name can be used. If you specify a generic font name, it is converted to an appropriate device font. The following font conversions are available: mono is converted to _typewriter, sans-serif is converted to _sans, and serif is converted to _serif.
    font-size fontSize Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
    font-style fontStyle Recognized values are normal and italic.
    font-weight fontWeight Recognized values are normal and bold.
    kerning kerning Recognized values are true and false. Kerning is supported for embedded fonts only. Certain fonts, such as Courier New, do not support kerning. The kerning property is only supported in SWF files created in Windows, not in SWF files created on the Macintosh. However, these SWF files can be played in non-Windows versions of Flash Player and the kerning still applies.
    leading leading The amount of space that is uniformly distributed between lines. The value specifies the number of pixels that are added after each line. A negative value condenses the space between lines. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
    letter-spacing letterSpacing The amount of space that is uniformly distributed between characters. The value specifies the number of pixels that are added after each character. A negative value condenses the space between characters. Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
    margin-left marginLeft Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
    margin-right marginRight Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
    text-align textAlign Recognized values are left, center, right, and justify.
    text-decoration textDecoration Recognized values are none and underline.
    text-indent textIndent Only the numeric part of the value is used. Units (px, pt) are not parsed; pixels and points are equivalent.
This content is straight out of the documentation in the Flash help files, but it's always a pain to find.

03MaySWFAddress 2.1 supports Google Analytics

And it does it out of the box.

SWFAddress 2.1 is out and it supports Google Analytics with no extra effort. No code necessary except for the usual SCRIPT tags code provided by Google.

If you are like me and don't like to read all the fine print, keep in mind that you'll have to remove the following code

pageTracker._trackPageview();

from the HTML, because SWFAddress tracks the page view automatically for you. If you don't remove you'll end up with double page visits.

Pages are ready to be tracked. So now to track events:

public static function track(event:String):void
{
    ExternalInterface.call("pageTracker._trackPageview('"+event+"')");
}

And you are all set.

02MayInspiration: Publicis & Hal Riney

Publicis & Hal Riney is probably the first site I've navigated leaning back on my seat without touching my mouse or keyboard, and for that they deserve fame, recognition, and free beer.
You'll need a webcam or you'll totally miss the point.

Innovative with the cam, slightly confusing with the keyboard.