Flex Examples » Embed http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Smoothing the background fill on an MX Panel container in Flex 3 http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/#comments Tue, 16 Mar 2010 01:34:36 +0000 Peter deHaan http://blog.flexexamples.com/?p=2601 The following example shows how you can apply smoothing to a background image fill on an MX Panel container in Flex 3 by extending the BitmapAsset class, setting the Boolean smoothing property, and setting the backgroundImage and backgroundSize styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ --> <mx:Application name="Embed_smoothing_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Panel id="pnl1" [...]]]> The following example shows how you can apply smoothing to a background image fill on an MX Panel container in Flex 3 by extending the BitmapAsset class, setting the Boolean smoothing property, and setting the backgroundImage and backgroundSize styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ -->
<mx:Application name="Embed_smoothing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Panel id="pnl1"
            title="default"
            width="100%" height="50%"
            backgroundImage="@Embed('fx_appicon-tn.gif')"
            backgroundSize="100%"/>
 
    <mx:Panel id="pnl2"
            title="smoothing (MXML)"
            width="100%" height="50%"
            backgroundImage="{FxLogo}"
            backgroundSize="100%"/>
 
</mx:Application>

And the custom BitmapAsset class, FxLogo.as, is as follows:

/**
 * http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ 
 */
package {
    import mx.core.BitmapAsset;
 
    [Embed(source="fx_appicon-tn.gif")]
    public class FxLogo extends BitmapAsset {
        public function FxLogo() {
            smoothing = true;
        }
    }
}

You can also set the backgroundImage and backgroundSize styles in an external .CSS file or <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ -->
<mx:Application name="Embed_smoothing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .fxLogoStyles {
            backgroundImage: ClassReference("FxLogo");
            backgroundSize: "100%";
        }
    </mx:Style>
 
    <mx:Panel id="pnl1"
            title="default"
            width="100%" height="50%"
            backgroundImage="@Embed('fx_appicon-tn.gif')"
            backgroundSize="100%"/>
 
    <mx:Panel id="pnl2"
            title="smoothing (CSS)"
            width="100%" height="50%"
            styleName="fxLogoStyles" />
 
</mx:Application>

Or you can also set the backgroundImage and backgroundSize styles using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/ -->
<mx:Application name="Embed_smoothing_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            protected function init():void {
                pnl2.setStyle("backgroundImage", FxLogo);
                pnl2.setStyle("backgroundSize", "100%");
            }
        ]]>
    </mx:Script>
 
    <mx:Panel id="pnl1"
            title="default"
            width="100%" height="50%"
            backgroundImage="@Embed('fx_appicon-tn.gif')"
            backgroundSize="100%"/>
 
    <mx:Panel id="pnl2"
            title="smoothing (ActionScript)"
            width="100%" height="50%"
            initialize="init();" />
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/03/15/smoothing-the-background-fill-on-an-mx-panel-container-in-flex-3/feed/ 1 Embedding fonts in Flex 4 http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/ http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/#comments Thu, 16 Oct 2008 06:50:37 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/ The following example shows how you can embed a font in the Flex 4 and use the embedded font with the new Spark RichEditableText class.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/ --> <s:Application name="Spark_DefineFont4_cff_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" creationComplete="init();"> <s:layout> <s:BasicLayout /> </s:layout>   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo"; [...]]]> The following example shows how you can embed a font in the Flex 4 and use the embedded font with the new Spark RichEditableText class.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/ -->
<s:Application name="Spark_DefineFont4_cff_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        creationComplete="init();">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        @font-face {
            src: url("assets/ACaslonPro-Regular.otf");
            fontFamily: "ACaslonProRegularEmbedded";
            embedAsCFF: true;
        }
 
        s|RichEditableText {
            fontFamily: ACaslonProRegularEmbedded;
            fontLookup: embeddedCFF;
            fontSize: 34;
        }
    </fx:Style>
 
    <s:RichEditableText id="textView"
            text="The quick brown fox jumped over the lazy dog. 01234567890"
            width="400"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/ -->
<s:Application name="Spark_DefineFont4_cff_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        creationComplete="init();">
    <s:layout>
        <s:BasicLayout />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import spark.primitives.RichEditableText;
 
            [Embed(source="assets/ACaslonPro-Regular.otf",
                    fontFamily="ACaslonProRegularEmbedded",
                    mimeType="application/x-font",
                    embedAsCFF="true")]
            private const ACaslonProRegularEmbeddedFont:Class;
 
            private var richEdTxt:RichEditableText;
 
            private function init():void {
                richEdTxt = new RichEditableText();
                richEdTxt.text = "The quick brown fox jumped over the lazy dog. 01234567890";
                richEdTxt.setStyle("fontFamily", "ACaslonProRegularEmbedded");
                richEdTxt.setStyle("fontSize", 34);
                richEdTxt.width = 400;
                richEdTxt.horizontalCenter = 0;
                richEdTxt.verticalCenter = 0;
                addElement(richEdTxt);
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

For examples of embedding fonts in earlier versions of Flex (Flex 3 and earlier), see the Font tag archive at http://blog.flexexamples.com/category/fonts/.

 
]]> http://blog.flexexamples.com/2008/10/15/embedding-fonts-in-flex-gumbo/feed/ 31 Embedding fonts in a Flex application using Embed metadata (redux) http://blog.flexexamples.com/2008/04/01/embedding-fonts-in-a-flex-application-using-embed-metadata-redux/ http://blog.flexexamples.com/2008/04/01/embedding-fonts-in-a-flex-application-using-embed-metadata-redux/#comments Wed, 02 Apr 2008 06:59:26 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/01/embedding-fonts-in-a-flex-application-using-embed-metadata-redux/ In a previous example, “Embedding fonts in a Flex application using Embed metadata”, we saw how you could embed fonts using the [Embed] metadata with the source attribute.

The following example shows how you can embed system fonts in a Flex application using the [Embed] metadata with the systemFont attribute.

Full code after the [...]]]> In a previous example, “Embedding fonts in a Flex application using Embed metadata”, we saw how you could embed fonts using the [Embed] metadata with the source attribute.

The following example shows how you can embed system fonts in a Flex application using the [Embed] metadata with the systemFont attribute.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/01/embedding-fonts-in-a-flex-application-using-embed-metadata-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .regularFontStyle {
            fontFamily: regularFont;
        }

        .italicFontStyle {
            fontFamily: italicFont;
            fontStyle: italic;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.utils.ObjectUtil;

            [Bindable]
            [Embed("bulletWarning.png")]
            private var bulletWarningIcon:Class;

            [Embed(systemFont="Tahoma",
                    fontName="regularFont",
                    mimeType="application/x-font")]
            private var font1:Class;

            [Embed(systemFont="Tahoma",
                    fontName="italicFont",
                    fontStyle="italic",
                    advancedAntiAliasing="true",
                    mimeType="application/x-font")]
            private var font2:Class;

            private function displayEmbeddedFont(name:String):void {
                var font:Object = systemManager.embeddedFontList[name];
                Alert.show(ObjectUtil.toString(font), name + ":");
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="regularFont:" direction="horizontal">
            <mx:Label id="lbl1"
                    text="The quick brown fox jumped over the lazy dog."
                    styleName="regularFontStyle" />
            <mx:Image source="{bulletWarningIcon}"
                    click="displayEmbeddedFont('regularFont');" />
        </mx:FormItem>
        <mx:FormItem label="italicFont:" direction="horizontal">
            <mx:Label id="lbl2"
                    text="The quick brown fox jumped over the lazy dog."
                    styleName="italicFontStyle" />
            <mx:Image source="{bulletWarningIcon}"
                    click="displayEmbeddedFont('italicFont');" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/01/embedding-fonts-in-a-flex-application-using-embed-metadata-redux/feed/ 8 Setting a Button control’s icon to an asset from a SWF file in Flex http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/#comments Fri, 29 Feb 2008 21:17:21 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ The following example shows how you can set a Flex Button control’s icon style to an asset from a SWF file using MXML or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" verticalAlign="middle" backgroundColor="white"> <mx:Button label="Bullet Add" icon="@Embed(source='icons.swf', symbol='bullet_add')" /> <mx:Button label="Bullet Delete" [...]]]> The following example shows how you can set a Flex Button control’s icon style to an asset from a SWF file using MXML or ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Button label="Bullet Add"
            icon="@Embed(source='icons.swf', symbol='bullet_add')" />
    <mx:Button label="Bullet Delete"
            icon="@Embed(source='icons.swf', symbol='bullet_delete')" />
    <mx:Button label="Bullet Star"
            icon="@Embed(source='icons.swf', symbol='bullet_star')" />

</mx:Application>

View source is enabled in the following example.

You can also use the shortcut embed notation (“source#symbol”), as shown in the following snippet:

<mx:Button label="Bullet Add"
        icon="@Embed('icons.swf#bullet_add')" />
<mx:Button label="Bullet Delete"
        icon="@Embed('icons.swf#bullet_delete')" />
<mx:Button label="Bullet Star"
        icon="@Embed('icons.swf#bullet_star')" />

You can also use [Embed] metadata, and then set the icon using databinding, as shown in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed("icons.swf#bullet_add")]
            public var bulletAddIcon:Class;

            [Bindable]
            [Embed("icons.swf#bullet_delete")]
            public var bulletDeleteIcon:Class;

            [Bindable]
            [Embed("icons.swf#bullet_star")]
            public var bulletStarIcon:Class;
        ]]>
    </mx:Script>

    <mx:Button label="Bullet Add" icon="{bulletAddIcon}" />
    <mx:Button label="Bullet Delete" icon="{bulletDeleteIcon}" />
    <mx:Button label="Bullet Star" icon="{bulletStarIcon}" />

</mx:Application>

View source is enabled in the following example.

And finally, if you wanted to create the Button objects dynamically, you could use something like the following code:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Button;

            [Embed("icons.swf#bullet_add")]
            public var bulletAddIcon:Class;

            [Embed("icons.swf#bullet_delete")]
            public var bulletDeleteIcon:Class;

            [Embed("icons.swf#bullet_star")]
            public var bulletStarIcon:Class;

            private var addButton:Button;
            private var deleteButton:Button;
            private var starButton:Button;

            private function init():void {
                // Add
                addButton = new Button();
                addButton.label = "Bullet Add";
                addButton.setStyle("icon", bulletAddIcon);
                addChild(addButton);
                // Delete
                deleteButton = new Button();
                deleteButton.label = "Bullet Delete";
                deleteButton.setStyle("icon", bulletDeleteIcon);
                addChild(deleteButton);
                // Star
                starButton = new Button();
                starButton.label = "Bullet Star";
                starButton.setStyle("icon", bulletStarIcon);
                addChild(starButton);
            }
        ]]>
    </mx:Script>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/29/setting-a-button-controls-icon-to-an-asset-from-a-swf-file-in-flex/feed/ 8 Using embedded fonts with the Panel container in Flex http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/ http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/#comments Fri, 29 Feb 2008 05:32:07 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/ The following example shows how you can use an embedded font with the Flex Panel container so that a Panel container can be rotated or faded without the text “disappearing”. The trick here is to set the panel’s titleStyleName style to a custom style which sets the font family to the embedded font.

Full code [...]]]> The following example shows how you can use an embedded font with the Flex Panel container so that a Panel container can be rotated or faded without the text “disappearing”. The trick here is to set the panel’s titleStyleName style to a custom style which sets the font family to the embedded font.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Verdana");
            fontFamily: VerdanaEmbedded;
        }

        Panel {
            titleStyleName: panelTitleStyleName;
        }

        .panelTitleStyleName {
            fontFamily: VerdanaEmbedded;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Panel fontFamily="VerdanaEmbedded"
            title="Title"
            status="status"
            width="160"
            height="120"
            rotation="15">
        <mx:Text text="The quick brown fox jumped over the lazy dog."
                width="100%" />
        <mx:ControlBar>
            <mx:Label text="ControlBar label" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/02/28/using-embedded-fonts-with-the-panel-container-in-flex/feed/ 4 Embedding fonts in a Flex application using Embed metadata http://blog.flexexamples.com/2008/02/07/embedding-fonts-in-a-flex-application-using-embed-metadata/ http://blog.flexexamples.com/2008/02/07/embedding-fonts-in-a-flex-application-using-embed-metadata/#comments Thu, 07 Feb 2008 16:03:34 +0000 Peter deHaan http://blog.flexexamples.com/2008/02/07/embedding-fonts-in-a-flex-application-using-embed-metadata/ The following example shows how you can embed a font using ActionScript and the [Embed] metadata.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/02/07/embedding-fonts-in-a-flex-application-using-embed-metadata/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" applicationComplete="init();"> <mx:Script> <![CDATA[ import mx.utils.ObjectUtil; [Embed(source="assets/Base 02.ttf", fontName="EmbeddedBase02", mimeType="application/x-font")] private var EmbeddedBase02:Class; private function init():void { var c:Font = new EmbeddedBase02(); ta.text [...]]]> The following example shows how you can embed a font using ActionScript and the [Embed] metadata.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/07/embedding-fonts-in-a-flex-application-using-embed-metadata/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;

            [Embed(source="assets/Base 02.ttf",
                    fontName="EmbeddedBase02",
                    mimeType="application/x-font")]
            private var EmbeddedBase02:Class;

            private function init():void {
                var c:Font = new EmbeddedBase02();
                ta.text = ObjectUtil.toString(c);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label id="lbl"
                text="The quick brown fox jumped over the lazy dog."
                fontFamily="EmbeddedBase02"
                fontSize="18" />
    </mx:ApplicationControlBar>

    <mx:TextArea id="ta"
            editable="false"
            width="100%"
            height="100%" />

</mx:Application>

If you need to specify a custom unicode range (see “Specifying custom named unicode ranges in Flex” for more details), you can use the following snippet:

[Embed(source="assets/Base 02.ttf",
        fontName="EmbeddedBase02",
        mimeType="application/x-font",
        unicodeRange="englishRange")]
private var EmbeddedBase02:Class;

You can also embed system fonts by name, instead of by location, by specifying the systemFont parameter instead of the source parameter, as seen in the following snippet:

[Embed(systemFont="Tahoma",
        fontName="EmbeddedTahomaItalic",
        fontStyle="italic",
        advancedAntiAliasing="true",
        mimeType="application/x-font")]
private var EmbeddedTahomaItalic:Class;
 
]]> http://blog.flexexamples.com/2008/02/07/embedding-fonts-in-a-flex-application-using-embed-metadata/feed/ 9 Embedding fonts from a Flash SWF file into a Flex application http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/ http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/#comments Fri, 26 Oct 2007 06:24:58 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/ The following examples show how you can embed a font from a Flash SWF into a Flex application using @font-face in a <mx:Style /> block, or using the [Embed] metadata.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/ --> <mx:Application name="Embed_fonts_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" applicationComplete="init()">   <mx:Script> <![CDATA[ private function init():void { var appInfo:LoaderInfo = Application.application.loaderInfo; [...]]]> The following examples show how you can embed a font from a Flash SWF into a Flex application using @font-face in a <mx:Style /> block, or using the [Embed] metadata.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/ -->
<mx:Application name="Embed_fonts_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init()">
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                var fileName:String = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                var kbTotal:String = (appInfo.bytesTotal / 1024).toFixed(2);
                info.text = fileName + " (" + kbTotal + "kb)";
            }
        ]]>
    </mx:Script>
 
    <mx:Style>
        @font-face{
            src: url('./fonts/fromFlash.swf');
            fontFamily: "Myriad Web Pro";
        }
 
        .myriadWebProFromSWF {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
        }
    </mx:Style>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Label id="info" />
    </mx:ApplicationControlBar>
 
    <mx:Text styleName="myriadWebProFromSWF">
        <mx:text>The quick brown fox jumped over the lazy dog.</mx:text>
    </mx:Text>
 
</mx:Application>

View source is enabled in the following example.

You can also embed the font SWF using the [Embed] metadata as shown below:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/ -->
<mx:Application name="Embed_fonts_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init()">
 
    <mx:Script>
        <![CDATA[
            [Embed(source="./fonts/fromFlash.swf", fontName="Myriad Web Pro")]
            private var myriadWebProRegular:Class;
 
            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                var fileName:String = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                var kbTotal:String = (appInfo.bytesTotal / 1024).toFixed(2);
                info.text = fileName + " (" + kbTotal + "kb)";
            }
        ]]>
    </mx:Script>
 
    <mx:Style>
        .myriadWebProFromSWF {
            fontFamily: "Myriad Web Pro";
            fontSize: 24;
        }
    </mx:Style>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Label id="info" />
    </mx:ApplicationControlBar>
 
    <mx:Text styleName="myriadWebProFromSWF">
        <mx:text>The quick brown fox jumped over the lazy dog.</mx:text>
    </mx:Text>
 
</mx:Application>

View source is enabled in the following example.

Loyal reader Chris asks: “what happens to bold characters in my text? I just can’t get linkButtons or htmltext to work with my embedded font, since flex doesn’t seem to find the bold typeface.” The answer is, embed more fonts! The previous examples only included a single font face, Myriad Web Pro, and the default font weight, normal. If you want to embed bold or italic, you’ll need two more @font-face sections in your <mx:Style /> block, one where you specify “fontWeight: bold;” and another where you specify “fontStyle: italic;”. Now, what if you want bold AND italic? Simple, embed more fonts! Just create another @font-face section (now you should have 4) that specifies the desired fontWeight and fontStyle value. And just because I’m terrible at explaining things, here’s the code for that. Also note if you right-click on the SWF below and select View Source, you can also take a look at my FLA file (built in Flash CS3). You’ll notice that I had to embed the same font four times, each time with the same settings as the values in the @font-face sections above (regular, bold, italic, bold+italic).

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/ -->
<mx:Application name="Embed_fonts_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init()">
 
    <mx:Script>
        <![CDATA[
            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                var fileName:String = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                var kbTotal:String = (appInfo.bytesTotal / 1024).toFixed(2);
                info.text = fileName + " (" + kbTotal + "kb)";
            }
        ]]>
    </mx:Script>
 
    <mx:Style>
        @font-face{
            src: url("fonts/fonts.swf");
            fontFamily: "Myriad Pro";
        }
 
        @font-face{
            src: url("fonts/fonts.swf");
            fontFamily: "Myriad Pro";
            fontWeight: bold;
        }
 
        @font-face{
            src: url("fonts/fonts.swf");
            fontFamily: "Myriad Pro";
            fontStyle: italic;
        }
 
        @font-face{
            src: url("fonts/fonts.swf");
            fontFamily: "Myriad Pro";
            fontWeight: bold;
            fontStyle: italic;
        }
 
        Label {
            fontFamily: "Myriad Pro";
            fontSize: 24;
        }
    </mx:Style>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Label id="info" />
    </mx:ApplicationControlBar>
 
    <mx:Text rotation="5">
        <mx:htmlText><![CDATA[The quick <b>brown</b> fox <i>jumped</i> over the <b><i>lazy</i></b> dog.]]></mx:htmlText>
    </mx:Text>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/25/embedding-fonts-from-a-flash-swf-file-into-a-flex-application/feed/ 20 Embedding fonts by name instead of location http://blog.flexexamples.com/2007/10/09/embedding-fonts-by-name-instead-of-location/ http://blog.flexexamples.com/2007/10/09/embedding-fonts-by-name-instead-of-location/#comments Tue, 09 Oct 2007 14:46:00 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/09/embedding-fonts-by-name-instead-of-location/ The following example shows how you can embed a font in Flex by specifying the font name instead of a location by using the local() function instead of the src() function when embedding a font.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/09/embedding-fonts-by-name-instead-of-location/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" [...]]]> The following example shows how you can embed a font in Flex by specifying the font name instead of a location by using the local() function instead of the src() function when embedding a font.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/09/embedding-fonts-by-name-instead-of-location/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        applicationComplete="init();">

    <mx:Style>
        @font-face {
            src:local("Arial");
            fontFamily: ArialEmbedded;
        }

        @font-face {
            src:local("Arial");
            fontFamily: ArialEmbedded;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private var bTotal:Number;

            private function init():void {
                bTotal = Application.application.loaderInfo.bytesTotal;
                /* Convert from bytes to kilobytes. */
                lbl.text = (bTotal / 1024).toFixed(2) + " KB";
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label id="lbl" />
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            label="Loading Flex Application"
            labelPlacement="center"
            fontFamily="ArialEmbedded"
            rotation="15"
            indeterminate="true"
            themeColor="haloSilver" />

</mx:Application>

View source is enabled in the following example.

For more information on embedding fonts in Flex, see “Locating embedded fonts” in the Flex documentation.

 
]]> http://blog.flexexamples.com/2007/10/09/embedding-fonts-by-name-instead-of-location/feed/ 1 Setting custom status messages in a Flex Panel container http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/ http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/#comments Fri, 31 Aug 2007 14:59:42 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/ The following example shows how you can set custom status messages in a Flex Panel container by setting the aptly named status property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ [Bindable] [Embed(source="assets/delete.png")] public var DeleteIcon:Class; ]]> </mx:Script> <mx:String id="lorem" [...]]]> The following example shows how you can set custom status messages in a Flex Panel container by setting the aptly named status property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/delete.png")]
            public var DeleteIcon:Class;
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:Panel id="panel"
            titleIcon="{DeleteIcon}"
            title="WARNING"
            status="I'm a custom status message!"
            width="80%">
        <mx:Text text="{lorem}" width="100%" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

If you want to customize the appearance of the status message in the Panel, you can set the statusStyleName style, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myStatusStyle {
            fontWeight: bold;
            color: red;
        }
    </mx:Style>

    <mx:String id="lorem">
        <![CDATA[Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In malesuada sapien eu ipsum. Integer id diam in sapien lobortis pulvinar. Donec mauris augue, sodales vel, luctus elementum, convallis eget, sapien. Suspendisse pretium elementum erat. Ut posuere ornare sem. Nam vestibulum luctus mi. Praesent feugiat blandit ante. Fusce vel massa. Praesent diam. Maecenas risus. Aliquam erat volutpat. Vivamus eget velit vel turpis venenatis dictum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam mattis nibh. Quisque nec odio.]]>
    </mx:String>

    <mx:Panel id="panel"
            title="WARNING"
            status="I'm a custom status message!"
            statusStyleName="myStatusStyle"
            width="320">
        <mx:Text text="{lorem}" width="100%" />
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/31/setting-custom-status-messages-in-a-flex-panel-container/feed/ 8 Styling a Flex Button control using embedded fonts http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/#comments Tue, 28 Aug 2007 15:33:26 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button’s default skin.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ --> <mx:Application name="Button_style_test" xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:String id="fileName" /> <mx:String id="fileSize" /> <mx:Script> <![CDATA[ private function init():void { var appInfo:LoaderInfo = [...]]]> The following example shows how you can customize the appearance of a Flex Button control by using an embedded font and removing the Button’s default skin.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/ -->
<mx:Application name="Button_style_test"
    xmlns:mx="http://www.adobe.com/2006/mxml"
    applicationComplete="init()"
    layout="vertical"
    verticalAlign="middle"
    backgroundColor="white">

    <mx:String id="fileName" />
    <mx:String id="fileSize" />

    <mx:Script>
        <![CDATA[
            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                fileName = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                fileSize = (appInfo.bytesTotal / 1024).toFixed(2);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face{
            src: url("./fonts/base02.ttf");
            fontFamily: "Base02";
        }

        .myButtonStyle {
            embedFonts: true;
            fontFamily: Base02;
            fontWeight: normal;
            fontSize: 24;
            cornerRadius: 0;
            letterSpacing: 4;
            textRollOverColor: red;
            skin: ClassReference(null);
            icon: Embed(source="./assets/iconInstall.png");
        }
    </mx:Style>

    <mx:ApplicationControlBar id="applicationControlBar" dock="true">
        <mx:Label id="info" text="{fileName} ({fileSize}kb)" />
    </mx:ApplicationControlBar>

    <mx:Button id="btn" label="{btn.getStyle('fontFamily')}" styleName="myButtonStyle" />

</mx:Application>

View source is enabled in the following example.

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2007/08/28/styling-a-flex-button-control-using-embedded-fonts/feed/ 5