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!
26 Comments
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
its a really amazing effects, i really like it, could u send more like this to me?
Abhishek,
You can see more Flex effects here:
http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html
-James
so amazing, and I just began to learn Flex, and the demo really help me a lot, thanks
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
Hi Prasad,
The best resource is http://learn.adobe.com
Check it out and let me know what you think.
-James
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
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
Hi Prasad,
i think you can set the vertical bar in the canvas by setting the canvas’s “verticalScrollPolicy=auto”. just try it.
Hi James,
Sorry, but I’m not getting it. Can I request you to suggest me detailed procedure or provide an example.
Regards
Prasad
The Scroll is working guys! Thanks.
Thanks
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
Hi Prasad,
Check out:
http://butterfliesandbugs.wordpress.com/2007/06/08/generic-background-gradient-for-containers/
http://www.brucephillips.name/blog/index.cfm/2007/1/20/Apply-A-Background-Color-Gradient-To-A-Flex-Panel
Hope that helps.
-James
Hi James!!
You’re genius man! Thanks, got solution for my problem.
Thanks a lot!
Regards
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
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
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
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
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
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.
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
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.
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
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
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 :-)
Real Nice! Thanks for the share.
One Trackback
[...] Flex Easing Function Explorer (from James Ward blog) allows experimenting with ease functions that allow applying non-linear motion to [...]