Fun with Easing Functions in Flex

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.

26 Comments

  1. Posted February 16, 2007 at 12:50 pm | Permalink

    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

  2. abhishek
    Posted October 16, 2007 at 11:27 pm | Permalink

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

  3. Posted October 17, 2007 at 9:04 am | Permalink

    Abhishek,

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

    -James

  4. yx
    Posted November 21, 2007 at 2:51 am | Permalink

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

  5. prasad
    Posted February 20, 2008 at 11:33 pm | Permalink

    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

  6. Posted February 20, 2008 at 11:52 pm | Permalink

    Hi Prasad,

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

    Check it out and let me know what you think.

    -James

  7. prasad
    Posted February 22, 2008 at 4:50 am | Permalink

    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

  8. prasad
    Posted February 25, 2008 at 11:16 pm | Permalink

    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

  9. Subrat
    Posted February 26, 2008 at 2:50 am | Permalink

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

  10. prasad
    Posted February 27, 2008 at 3:48 am | Permalink

    Hi James,

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

    Regards
    Prasad

  11. prasad
    Posted February 27, 2008 at 4:35 am | Permalink

    The Scroll is working guys! Thanks.

    Thanks
    Prasad

  12. prasad
    Posted March 2, 2008 at 11:55 pm | Permalink

    Hi James,

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

    Regards
    Prasad

  13. Posted March 3, 2008 at 6:42 pm | Permalink
  14. prasad
    Posted March 4, 2008 at 12:34 am | Permalink

    Hi James!!

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

    Regards
    Prasad

  15. prasad
    Posted March 6, 2008 at 6:17 am | Permalink

    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

  16. Posted March 6, 2008 at 3:54 pm | Permalink

    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

  17. prasad
    Posted April 6, 2008 at 10:38 pm | Permalink

    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

  18. prasad
    Posted April 7, 2008 at 12:36 am | Permalink

    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

  19. Posted April 9, 2008 at 4:45 am | Permalink

    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

  20. prasad
    Posted April 10, 2008 at 11:23 pm | Permalink

    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.

  21. prasad
    Posted April 16, 2008 at 11:57 pm | Permalink

    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

  22. Andriy Drozdenko
    Posted April 28, 2008 at 3:03 pm | Permalink

    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.

  23. Posted April 28, 2008 at 3:43 pm | Permalink

    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

  24. prasad
    Posted July 14, 2008 at 6:05 am | Permalink

    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

  25. Posted September 8, 2008 at 10:58 pm | Permalink

    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 :-)

  26. Saul
    Posted October 9, 2008 at 8:00 am | Permalink

    Real Nice! Thanks for the share.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Subscribe without commenting

  • About James Ward



    View James Ward's profile on LinkedIn

  • First Steps in Flex by James Ward and Bruce Eckel




  • Twitter Updates


  • Tour de Flex