Flex Examples » easing http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Changing the default easing function on a Wipe effect http://blog.flexexamples.com/2007/10/11/changing-the-default-easing-function-on-a-wipe-effect/ http://blog.flexexamples.com/2007/10/11/changing-the-default-easing-function-on-a-wipe-effect/#comments Fri, 12 Oct 2007 06:56:49 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/11/changing-the-default-easing-function-on-a-wipe-effect/ The following example shows how you can customize the move easing function on a wipe effect.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/11/changing-the-default-easing-function-on-a-wipe-effect/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.effects.easing.*; ]]> </mx:Script> <mx:WipeLeft id="wipeLeft" target="{image}" moveEasingFunction="Elastic.easeOut" duration="5000" /> <mx:ApplicationControlBar dock="true"> <mx:Button label="Start wipe" click="wipeLeft.play();" [...]]]> The following example shows how you can customize the move easing function on a wipe effect.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/11/changing-the-default-easing-function-on-a-wipe-effect/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;
        ]]>
    </mx:Script>

    <mx:WipeLeft id="wipeLeft"
            target="{image}"
            moveEasingFunction="Elastic.easeOut"
            duration="5000" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Start wipe"
                click="wipeLeft.play();" />
    </mx:ApplicationControlBar>

    <mx:Image id="image"
            source="assets/flex_sm.png" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/11/changing-the-default-easing-function-on-a-wipe-effect/feed/ 2 Customizing the slide duration and slide easing function on a Flex slider control http://blog.flexexamples.com/2007/09/12/customizing-the-slide-duration-and-slide-easing-function-on-a-flex-slider-control/ http://blog.flexexamples.com/2007/09/12/customizing-the-slide-duration-and-slide-easing-function-on-a-flex-slider-control/#comments Thu, 13 Sep 2007 03:21:28 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/12/customizing-the-slide-duration-and-slide-easing-function-on-a-flex-slider-control/ The following example shows how you can customize the duration and easing function used when a user clicks on a thumb track on an HSlider or VSlider control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/09/12/customizing-the-slide-duration-and-slide-easing-function-on-a-flex-slider-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import [...]]]> The following example shows how you can customize the duration and easing function used when a user clicks on a thumb track on an HSlider or VSlider control in Flex.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/12/customizing-the-slide-duration-and-slide-easing-function-on-a-flex-slider-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
            import mx.events.NumericStepperEvent;
            import mx.effects.easing.*;

            private var arr:Array;

            private function init():void {
                arr = new Array();
                arr.push({label:"Elastic.easeInOut", func:Elastic.easeInOut});
                arr.push({label:"Bounce.easeOut", func:Bounce.easeOut});
                arr.push({label:"Back.easeIn", func:Back.easeIn});

                easingFunc.dataProvider = arr;
            }

            private function duration_change(evt:NumericStepperEvent):void {
                slider.setStyle("slideDuration", evt.value);
            }

            private function easingFunc_change(evt:ListEvent):void {
                slider.setStyle("slideEasingFunction", easingFunc.selectedItem.func);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="slideDuration:" />
        <mx:NumericStepper id="duration"
                minimum="0"
                maximum="2000"
                value="300"
                stepSize="100"
                change="duration_change(event);" />

        <mx:Label text="slideEasingFunction:" />
        <mx:ComboBox id="easingFunc"
                change="easingFunc_change(event);"
                prompt="Please select an easing function..." />
    </mx:ApplicationControlBar>

    <mx:HSlider id="slider" showTrackHighlight="true" tickInterval="1" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/12/customizing-the-slide-duration-and-slide-easing-function-on-a-flex-slider-control/feed/ 0 Changing the Accordion container’s easing duration and easing functions http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/ http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/#comments Tue, 28 Aug 2007 05:57:19 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/ The following example shows how you can control the easing duration and easing function that the Accordion container uses when changing the visible child container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.effects.easing.*; private function init():void { [...]]]> The following example shows how you can control the easing duration and easing function that the Accordion container uses when changing the visible child container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;

            private function init():void {
                /**    Back */
                arrColl.addItem({label:"Back.easeIn", func:Back.easeIn});
                arrColl.addItem({label:"Back.easeOut", func:Back.easeOut});
                arrColl.addItem({label:"Back.easeInOut", func:Back.easeInOut});
                /** Bounce */
                arrColl.addItem({label:"Bounce.easeIn", func:Bounce.easeIn});
                arrColl.addItem({label:"Bounce.easeOut", func:Bounce.easeOut});
                arrColl.addItem({label:"Bounce.easeInOut", func:Bounce.easeInOut});
                /** Circular */
                arrColl.addItem({label:"Circular.easeIn", func:Circular.easeIn});
                arrColl.addItem({label:"Circular.easeOut", func:Circular.easeOut});
                arrColl.addItem({label:"Circular.easeInOut", func:Circular.easeInOut});
                /** Cubic */
                arrColl.addItem({label:"Cubic.easeIn", func:Cubic.easeIn});
                arrColl.addItem({label:"Cubic.easeOut", func:Cubic.easeOut});
                arrColl.addItem({label:"Cubic.easeInOut", func:Cubic.easeInOut});
                /** Elastic */
                arrColl.addItem({label:"Elastic.easeIn", func:Elastic.easeIn});
                arrColl.addItem({label:"Elastic.easeOut", func:Elastic.easeOut});
                arrColl.addItem({label:"Elastic.easeInOut", func:Elastic.easeInOut});
                /** Exponential */
                arrColl.addItem({label:"Exponential.easeIn", func:Exponential.easeIn});
                arrColl.addItem({label:"Exponential.easeOut", func:Exponential.easeOut});
                arrColl.addItem({label:"Exponential.easeInOut", func:Exponential.easeInOut});
                /** Linear */
                arrColl.addItem({label:"Linear.easeIn", func:Linear.easeIn});
                arrColl.addItem({label:"Linear.easeOut", func:Linear.easeOut});
                arrColl.addItem({label:"Linear.easeInOut", func:Linear.easeInOut});
                /** Quadratic */
                arrColl.addItem({label:"Quadratic.easeIn", func:Quadratic.easeIn});
                arrColl.addItem({label:"Quadratic.easeOut", func:Quadratic.easeOut});
                arrColl.addItem({label:"Quadratic.easeInOut", func:Quadratic.easeInOut});
                /** Quartic */
                arrColl.addItem({label:"Quartic.easeIn", func:Quartic.easeIn});
                arrColl.addItem({label:"Quartic.easeOut", func:Quartic.easeOut});
                arrColl.addItem({label:"Quartic.easeInOut", func:Quartic.easeInOut});
                /** Quintic */
                arrColl.addItem({label:"Quintic.easeIn", func:Quintic.easeIn});
                arrColl.addItem({label:"Quintic.easeOut", func:Quintic.easeOut});
                arrColl.addItem({label:"Quintic.easeInOut", func:Quintic.easeInOut});
                /** Sine */
                arrColl.addItem({label:"Sine.easeIn", func:Sine.easeIn});
                arrColl.addItem({label:"Sine.easeOut", func:Sine.easeOut});
                arrColl.addItem({label:"Sine.easeInOut", func:Sine.easeInOut});
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="openEasingFunction:" />
        <mx:ComboBox id="openEasingFunc"
                dataProvider="{arrColl}" />

        <mx:Label text="openDuration:" />
        <mx:HSlider id="openDur"
                minimum="100"
                maximum="1500"
                value="1000"
                liveDragging="true"
                snapInterval="100"
                tickInterval="100"
                dataTipPrecision="0" />
    </mx:ApplicationControlBar>

    <mx:Accordion width="400" height="120"
            openDuration="{openDur.value}"
            openEasingFunction="{openEasingFunc.selectedItem.func}">
        <mx:VBox id="child1" label="Child 1" />
        <mx:VBox id="child2" label="Child 2" />
        <mx:VBox id="child3" label="Child 3" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/27/changing-the-accordion-containers-easing-duration-and-easing-functions/feed/ 0 Specifying certain unicode-ranges for embedded fonts http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/#comments Wed, 08 Aug 2007 05:15:44 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ In a previous post (“Embedding and animating fonts in a Flex application“), we looked at embedding a font in a Flex application so we could animate, rotate, and set the alpha for a Text control. Well, as we learnt, sometimes embedding a whole font face can dramatically increase the size of the final SWF [...]]]> In a previous post (“Embedding and animating fonts in a Flex application“), we looked at embedding a font in a Flex application so we could animate, rotate, and set the alpha for a Text control. Well, as we learnt, sometimes embedding a whole font face can dramatically increase the size of the final SWF output. In this post we’ll look at only specifying a certain range of characters for an embedded font, which will help reduce file sizes.

Full code after the jump.

Before we get too far, we’ll quickly look at some of the font basics. If you’re a Windows user, a good place to start is with the Character Map application. Its a little Window’s utility that gets installed on most modern operating systems and lets you quickly browse a font’s supported characters, different character sets, filter characters by Unicode subranges, search for certain characters (such as © or ®), see a characters Unicode value as well as character code. It also lets you quickly copy certain characters to the clipboard for easy copy-pasting between applications. Because I can never remember where the application gets installed, or where to find its icon, it is usually just easiest to type “charmap” from a command prompt. If you have a modern-day keyboard, hit Windows+R to bring up the Run dialog, type “charmap”, hit Enter, and get ready to be amazed! Most of the features I mentioned before are cleverly hidden behind the “Advanced view” checkbox, so if you’re feeling up to the challenge check that checkbox to go to advanced view, otherwise the basic view will do just fine for now. At the top of the Character Map application is a Font drop down menu which lists all the fonts you currently have installed on your system. If you just downloaded a TrueType font (TTF) and didn’t install it into the Fonts directory (C:\Windows\Fonts by default), it won’t be listed here. Don’t worry if your specific font isn’t listed here, it isn’t the end of the world. Select any old font and click around.

If you want to embed the numbers 0-9, you would click on “0″ and note it’s Unicode value (U+0030), then click on “9″ and do the same (U+0039). Now, in your Flex application, you would specify this range in the @font-family style block like so:

unicode-range: U+0030-U+0039;

If you wanted to specify multiple ranges, you would just separate them with commas:

unicode-range:
    U+0030-U+0039, /* 0-9 */
    U+0041-U+0051, /* Uppercase A-Z */
    U+0052-U+007A; /* Lowercase a-z */

And if you just want to embed the whole range of all uppercase, lowercase, punctuation, and symbols, you could just specify the following unicode range:

@font-face {
    src: url('assets/base02.ttf');
    font-family: Base02;
    unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
}

Again, use the character map if you want to find additional character such as the copyright symbol (©) or other symbols.

Remember, all fonts may not include special “extended” characters such as copyright symbols, dollar signs, fractions, pound signs, euro signs, etc. Make sure you check that your font includes the characters you need.

Now, with that out of the way, lets look at a full sample of unicode-range embedding in action!

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            /* Import all the easing classes so its
               easier to switch between them on the
               fly without tweaking import statements. */
            import mx.effects.easing.*;
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face {
            src: url('assets/base02.ttf');
            font-family: Base02;
            unicode-range: U+0021-U+007B; /* whole range of uppercase, lowercase, symbols and punctuation. */
        }

        .MyEmbeddedFont {
            font-family: Base02;
            font-size: 14px;
        }
    </mx:Style>

    <!-- Set zoom effect for 2.5 seconds (2500 milliseconds) and use the Elastic.easeOut easing method. -->
    <mx:Zoom id="zoom" duration="2500" easingFunction="Elastic.easeOut" target="{embeddedText}" />

    <!-- Use advanced font anti-aliasing for the embedded font, set the rotation to 5 degrees, alpha to 80% and loop the animation. -->
    <mx:Text id="embeddedText" text="The quick brown fox jumped over the lazy dog." styleName="MyEmbeddedFont" rotation="5" alpha="0.8" fontAntiAliasType="advanced" creationComplete="zoom.play();" effectEnd="zoom.play()" />

</mx:Application>

Shocking? No, not really, because we saw the new unicode-range style earlier in the pre-code discussion. But what kind of filesize savings did we encounter by only embedding a “small range” of characters? Well, in this case, none really. The Base02 font really only has the regular letters, numbers, punctuation and symbols to begin with, so our SWF size is still ~260 KB, same as the previous article where we didn’t specify a range at all.

But what if we only specify the exact characters that we need, the uppercase “T”, full range of lowercase letters and the period? Well, as luck has it, I did just that:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            /* Import all the easing classes so its
               easier to switch between them on the
               fly without tweaking import statements. */
            import mx.effects.easing.*;
        ]]>
    </mx:Script>

    <mx:Style>
        @font-face {
            src: url('assets/base02.ttf');
            font-family: Base02;
            unicode-range:
                U+0054-U+0054, /* T */
                U+0061-U+007A, /* a-z */
                U+002E-U+002E; /* . (period) */
        }

        .MyEmbeddedFont {
            font-family: Base02;
            font-size: 14px;
        }
    </mx:Style>

    <!-- Set zoom effect for 2.5 seconds (2500 milliseconds) and use the Elastic.easeOut easing method. -->
    <mx:Zoom id="zoom" duration="2500" easingFunction="Elastic.easeOut" target="{embeddedText}" />

    <!-- Use advanced font anti-aliasing for the embedded font, set the rotation to 5 degrees, alpha to 80% and loop the animation. -->
    <mx:Text id="embeddedText" text="The quick brown fox jumped over the lazy dog." styleName="MyEmbeddedFont" rotation="5" alpha="0.8" fontAntiAliasType="advanced" creationComplete="zoom.play();" effectEnd="zoom.play()" />

</mx:Application>

Yeah, the same big snippet for a minor little tweak, but hey. I’m sure it makes somebody’s life easier if they can grab all the code in one place instead of copying from two sources.

So, with the bare minimum of characters embedded, what is the new file size of the SWF? My main SWF file is now down to 193 KB (down from ~260 KB), which is about 74% of its original size, and only 46 KB larger than the same example without any embedded font. Not too bad for a tiny bit of work! Of course, its pretty easy when you know exactly which characters are used. If we were using the font for multiple text fields or a TextInput/TextArea control you would probably need to embed the whole range of characters since you couldn’t be sure of what the user would be entering.

View source is enabled in the following example.

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

 
]]> http://blog.flexexamples.com/2007/08/07/specifying-certain-unicode-ranges-for-embedded-fonts/feed/ 8 Embedding and animating fonts in a Flex application http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/ http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/#comments Tue, 07 Aug 2007 05:58:28 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/ I meant to post this earlier, and I already touched on font embedding in an earlier post (Building a basic controller for the VideoDisplay control), but here’s a quick little way to embed a font in a Flex application.

In this example we embed a font (the awesome “Base 02″ PC TrueType font (TTF) [...]]]> I meant to post this earlier, and I already touched on font embedding in an earlier post (Building a basic controller for the VideoDisplay control), but here’s a quick little way to embed a font in a Flex application.

In this example we embed a font (the awesome “Base 02″ PC TrueType font (TTF) from http://www.stereo-type.net/), animate it using the Zoom effect and the Elastic.easeOut easing method. We also set the rotation and alpha properties (which you can’t do with non-embedded fonts), and we set the fontAntiAliasType to “advanced” to give the font a cleaner look. Finally we use the effectEnd event to loop the animation.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/ -->
<mx:Application name="Font_antiAliasType_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            /* Import all the easing classes so its easier to switch between
               them on the fly without tweaking import statements. */
            import mx.effects.easing.*;
        ]]>
    </mx:Script>
 
    <mx:Style>
        @font-face {
            src: url('assets/base02.ttf');
            font-family: Base02;
        }
 
        .MyEmbeddedFont {
            font-family: Base02;
            font-size: 16px;
        }
    </mx:Style>
 
    <!-- Set zoom effect for 2.5 seconds (2500 milliseconds) and use the 
         Elastic.easeOut easing method. -->
    <mx:Zoom id="zoom"
            duration="2500"
            easingFunction="Elastic.easeOut"
            target="{embeddedText}" />
 
    <!-- Use advanced font anti-aliasing for the embedded font, set the rotation
         to 5 degrees, alpha to 80% and loop the animation. -->
    <mx:Text id="embeddedText"
            text="The quick brown fox jumped over the lazy dog."
            styleName="MyEmbeddedFont"
            rotation="5"
            alpha="0.8"
            fontAntiAliasType="advanced"
            creationComplete="zoom.play();"
            effectEnd="zoom.play()" />
 
</mx:Application>

View source is enabled in the following example.

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

It is important to note that embedding fonts can dramatically increase the size of generated SWFs. The size of the SWF above is roughly 260 KB (the base02.ttf file (not included in the ZIP) on its own is 177 KB). By comparison, if embedded fonts were not used, the file size of the SWF would have been only 147 KB, although the rotation and alpha effects would not have been possible. In a future entry I’ll cover how to embed certain characters/ranges of a font-face to reduce the overall size.

 
]]> http://blog.flexexamples.com/2007/08/06/embedding-and-animating-fonts-in-a-flex-application/feed/ 11