Fun with Easing Functions in Flex

By James Ward | Published: February 16, 2007

Last week I was doing an impromptu session at Slivafug when I discovered Easing Functions in Flex. I love it when after almost three years with a technology I can still just stumble across something amazingly cool! Easing functions allow you to apply non-linear motion to effects. There are many types of effects which you could apply easing functions to, but I’ve only touched the surface by playing with Move effects and Series Interpolation on charts. I’ve created a little demo application to show off Flex’s built-in easing functions:
Fun with Easing Functions Demo

This application was very simple to build. You can get the source via right-click in the demo, or here. Have fun with those Easing Functions!

This entry was posted in Flex. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • http://flexibleexperiments.wordpress.com Jason Hawryluk

    Nice demo James! For me it hasn’t been a priority *yet* so I haven’t had much time with easing and effects etc.. It certainly adds to the user experience.

    Jason

  • abhishek

    its a really amazing effects, i really like it, could u send more like this to me?

  • http://www.jamesward.org James Ward

    Abhishek,

    You can see more Flex effects here:
    http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

    -James

  • yx

    so amazing, and I just began to learn Flex, and the demo really help me a lot, thanks

  • prasad

    Hey James, quite cool effects huh.. It would help me lot, since I’m a Graphic Designer n’ just began with Flex. Thanks.
    The only locking issue is lack of my programming knowledge. How do I get familiar with scripting..

    Regards
    Prasad

  • http://www.jamesward.org James Ward

    Hi Prasad,

    The best resource is http://learn.adobe.com

    Check it out and let me know what you think.

    -James

  • prasad

    Hi James,
    Yeah.. it seems to be a good learning stuff for me! I’m specially looking for good visual effects in Flex.
    I’ll certainly go through n’ thanks a lot for helping me out.
    Keep the good work going..

    Regards
    Prasad

  • prasad

    Hi,
    Can anybody tell me, how to set a vertical scrollbar to canvas?
    my design has height more than screen resolution, it going out of screen from bottom, i want to set a vertical scrollbar to it.
    pls help!

    Regards
    Prasad

  • Subrat

    Hi Prasad,
    i think you can set the vertical bar in the canvas by setting the canvas’s “verticalScrollPolicy=auto”. just try it.

  • prasad

    Hi James,

    Sorry, but I’m not getting it. Can I request you to suggest me detailed procedure or provide an example.

    Regards
    Prasad

  • prasad

    The Scroll is working guys! Thanks.

    Thanks
    Prasad

  • prasad

    Hi James,

    Can I apply a gradient of two colors to a ‘canvas’ ?
    Please let me know if you have any idea?

    Regards
    Prasad

  • http://www.jamesward.org James Ward
  • prasad

    Hi James!!

    You’re genius man! Thanks, got solution for my problem.
    Thanks a lot!

    Regards
    Prasad

  • prasad

    Here is a query, please help me out!
    On Tabnavigator : I want to switch from first Tab to second Tab by clicking on a ‘button present on first Tab’.

    Thanks & Regards
    Prasad

  • http://www.jamesward.org James Ward

    Hi Prasad,

    You can set the selectedIndex on the TabNavigator.

    BTW: You might find flexcoders on Yahoo! Groups a better way to get your questions answered.

    -James

  • prasad

    Hi James!

    I really tried a huge search for following problem, didn’t get any solution. Please help me out!
    My flex project has screen size of 1280 x 1024 which is perfectly visible on my screen, but if I try to see the same .swf on laptop with lower resolution screen, the display gets out of screen without showing any scrollbar.
    I can set scrollbar to any component like Vbox or canvas, but still have not found how to set scrollbar to Flex Application.
    This is something like very basic blocking appearing for my flex project!!
    Hoping for a solution on this blog.

    Thanks & Regards
    Prasad

  • prasad

    I’m facing another error for the images that I have included.
    the error is like, “../xyz.gif doesn’t have recognized extension, and mimeType was not provided.”

    - prasad

  • http://www.jamesward.org James Ward

    Hi Prasad,

    Most containers in Flex should add scroll bars automatically. Make sure you haven’t turned off scrollbars for any of the containers in your app.

    I’m not sure what the context of your mimeType error is. Can you provide more details?

    -James

  • prasad

    Hi James,
    yeah, it’s true that containers do generate scroll bar automatically, but its the Flash player or Browser which is supposed to generate the Scroll wherever needed.

    Regarding mimeType : “../xyz.gif doesn’t have recognized extension, and mimeType was not provided.”.. that’s the only error I’m getting! I don’t know the details, but the magic is when I make any change at any place, and save the project, the above error disappears. But it might create blocking on client side.

  • prasad

    Hi James,
    I have used some modified effects like glow, rotate etc.
    Can I show any of these effects on say button till the cursor is on button.
    Else can I set the duration of effect to Infinity? :)

    Regards
    Prasad

  • Andriy Drozdenko

    Hi James,
    could you help me to solve my problem? I need to create a line chart where i can double click on the line and create a data point, then i need to be able to drag it and save coordinates in to charts Array Collection. Is it possible in Flex? I can’t find any information about this thing online so i decided to ask you. Please could you help me out with it?

    Thank you, Andriy Drozdenko.

  • http://www.jamesward.org James Ward

    Hi Andriy,

    That is certainly possible but will probably require some lower level coding in ActionScript. Do you have a mock-up of what you are trying to do? Do you want to email me? jaward at adobe dot com

    -James

  • prasad

    Hi James,

    I have some blocking in printing a page from Flex Application.
    I have taken an image control, in which I have kept an image of about 600 X 900 pixel.
    The problem occurs when I hit Print button, the image (it is a form!) gets printed on A4 size page (2400 X 3500 pixel).
    And it gets blurred.

    If I try to display 2400 X 3500 image, it obviously gets out of size!!

    I have been trying hard to solve this problem…
    Please help me out!!

    Regards
    Prasad

  • http://Prasadisfunny! Unknown

    Haaa haa!!

    It was funny reading the thread between james and prasad. Prasad you’ve gotto understand that blogs are meant to share info on a particular topic .. You cant go on asking general questions on flex.. Please ask questions related to the post in contention :-) Or else you might want to take up adobe training or pay james some consulting feee :-)

  • Saul

    Real Nice! Thanks for the share.

  • Pingback: The Blogagic Flex Explorer Collection (Component, Style, Effect) | Blogagic

  • Suhas

    Nice demo. Loved it, especially the part where you can compare easeOut easeIn and easingFunction effects with different types of charts. Valuable!