09
Feb
08

Using an embedded font with the Flex ProgressBar control

The following example shows how you can use an embedded font with the ProgressBar control in Flex.

Full code after the jump.

There are two basic approaches to using an embedded font with a ProgressBar control. By default the progress bar’s label uses a bold font weight, so the first technique is to set the progress bar’s fontWeight style to “normal” using MXML or CSS, as shown in the following example:

View MXML

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

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function progressBar_initialize():void {
                progressBar.setProgress(76, 100);
            }
        ]]>
    </mx:Script>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="center"
            barColor="haloBlue"
            borderColor="black"
            color="black"
            fontFamily="EmbeddedBase02"
            fontSize="48"
            fontWeight="normal"
            trackColors="[black, black]"
            width="100%"
            height="100%"
            initialize="progressBar_initialize();" />

</mx:Application>

View source is enabled in the following example.

The second technique shows how you can embed the bold version of a font family in the <mx:Style /> block:

View MXML

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

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

    <mx:Script>
        <![CDATA[
            private function progressBar_initialize():void {
                progressBar.setProgress(76, 100);
            }
        ]]>
    </mx:Script>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="center"
            barColor="haloBlue"
            borderColor="black"
            color="black"
            fontFamily="EmbeddedBase02"
            fontSize="48"
            trackColors="[black, black]"
            width="100%"
            height="100%"
            initialize="progressBar_initialize();" />

</mx:Application>

View source is enabled in the following example.

Base 02 font by http://www.stereo-type.net/.


2 Responses to “Using an embedded font with the Flex ProgressBar control”


  1. 1 peterd Feb 9th, 2008 at 11:46 pm

    Probably not the best font choice for this example, I forgot that the “Base 02″ font face doesn’t include the “%” symbol.

    Peter

  2. 2 valentineday Feb 11th, 2008 at 6:55 pm

    it makes sense.

    great example.

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




February 2008
M T W T F S S
« Jan   Mar »
 123
45678910
11121314151617
18192021222324
2526272829  

Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed