3 Replies Latest reply on Jul 22, 2010 9:40 AM by Francisc

    Animate Text

    Francisc Level 3

      Hello!

       

      I'm using Flex 4. How can I animate a Label component from normal weight to bold and then back again?

       

      Thanks!

        • 1. Re: Animate Text
          FredericCox Level 1

          I don't think that is possible. You could try doing it by animating the fontThickness ?


          1 person found this helpful
          • 2. Re: Animate Text
            rtalton Level 4

            I agree with animating the fontThickness. It will not be as dramatic as switching to bold though. You have to embed the font for it to work. Example below.

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute">

             

                <mx:Script>
                    <![CDATA[
                       
                    ]]>
                </mx:Script>

             

                <mx:Sequence id="animateFontWeight">

             

                    <mx:AnimateProperty duration="1000"
                        fromValue="0"
                        isStyle="true"
                        property="fontThickness"
                        target="{lbl}"
                        toValue="200"/>
                    <mx:AnimateProperty duration="1000"
                        fromValue="200"
                        isStyle="true"
                        property="fontThickness"
                        target="{lbl}"
                        toValue="0"/>
                </mx:Sequence>

             

                <mx:Label
                    id="lbl"
                    text="test font weight animation"
                    width="214"
                    height="39"
                    y="120"
                    x="63"
                    fontSize="10"
                    fontWeight="normal"/>

             

                <mx:Button
                    click="animateFontWeight.play()"
                    label="animate"
                    y="210"
                    x="80"/>

             

                <mx:Style>
                global
            {
                color: #06053E;
                fontFamily: Verdana;
            }
            @font-face
            {
                fontFamily: Verdana;
                fontWeight: normal;
                fontStyle: normal; 
                src: url("/assets/fonts/verdana_all.swf")
            }
            @font-face
            {
                fontFamily: Verdana;
                fontWeight: bold;
                fontStyle: normal;
                src: url("/assets/fonts/verdana_all.swf")
            }
            </mx:Style>
            </mx:Application>

            • 3. Re: Animate Text
              Francisc Level 3

              l'll give it a try and let you know, thanks!