Re: [flexcoders] Tween Motion along a path
is this what you want?
The search for the perfect bezier tweening syntax
http://labs.zeh.com.br/blog/?p=104
- Original Message
From: Doug McCune [EMAIL PROTECTED]
To: flexcoders@yahoogroups.com
Sent: Monday, October 29, 2007 12:29:11 PM
Subject: Re: [flexcoders] Tween Motion along a path
For starters, the presentation you're referring from Michael Labriola to was
just posted online: http://blogs. digitalpri mates.net/codeSling er/index.
cfm/2007/ 10/28/Max- Presentation
The basic idea that I think makes sense for you to approach the problem with is
that you want a function that lays out all your items for any given rotation of
the circle. This function doesn't do anything in terms of animating. All it
does is lays out your items given a particular rotation of your circle. So if
you have a method like:
function layoutItems( angle:Number) :void {
//layout all your items here for the given angle passed in
}
then you just make sure to call that function whenever you change the rotation
of your circle. You can make that happen in a setter for a property on your
class, and then you can tween that property. Not sure if that's all making
sense. Take a look at the code from the MAX preso in the link above. You'll see
a setter for a property called currentPosition. That setter calls
invalidateDisplayLi st(), and in updateDisplayist he's got the code that moves
all the items to their proper positions given whatever currentPosition has been
set to.
Then what he does is tweens the currentPosition property. So he doesn't have to
have a bazillion tweens running for each of his items. He tweens a single
property, and then when that property gets set, he makes sure to re-layout the
items.
If you want to go completely overboard and learn how to do crazy stuff with
animating on paths (in 2D and in 3D) then you can read up on Jim Armstrong's
blog: http://algorithmist .wordpress. com He has tons of stuff about animating
along curves and gets into the crazy math you need. That's overkill for what
you're trying to do, but worth checking out.
Doug
On 10/28/07, Bjorn Schultheiss bjorn.mailinglists@ gmail.com wrote:
I wasn't at Max, but have you seen this, http://labs. zeh.com.br/ blog/?p=95 ?
Bjorn
On 29/10/2007, at 1:34 AM, snowjunkie73 wrote:
At Adobe Max 2007 I went to a session on creating custom components in
Flex. The example component used in the session was a custom carousel
component where objects would tween along a circular path. The source
for this example class was never released, but I am fairly certain
that the math for the path was done entirely in Flex, and it was not
using a Flash CS3 generated path. The movement was nice and smooth.
I'm trying to do my own tweening along a circular path but in a flat
2d manner. I've done all the math in action script 3 to find the
circular path but I am having trouble getting objects to move smoothly
along the path. Basically I pick a number of points along the path
and use Move effects from point to point. The more points I pick the
closer it appears to be on a true circle. I've tried both manually
kicking off each individual move effect from the effect end event and
also putting the move effects in a sequence effect. Both methods
cause the motion to be either extremely slow (if I set each move
duration to be large) or pretty jerky (if I set the move duration to
be very small like 0-2). It appears that there is a pause between the
end of each move effect before the next move effect starts.
The reason I want to do it all in code is that I want to be able to
vary the radius of my circular path dynamically. Anyone have ideas on
how I can get smoother motion along my path? Thanks in advance.
__
Do You Yahoo!?
Tired of spam? Yahoo! Mail has the best spam protection around
http://mail.yahoo.com
[flexcoders] Tween Motion along a path
At Adobe Max 2007 I went to a session on creating custom components in Flex. The example component used in the session was a custom carousel component where objects would tween along a circular path. The source for this example class was never released, but I am fairly certain that the math for the path was done entirely in Flex, and it was not using a Flash CS3 generated path. The movement was nice and smooth. I'm trying to do my own tweening along a circular path but in a flat 2d manner. I've done all the math in action script 3 to find the circular path but I am having trouble getting objects to move smoothly along the path. Basically I pick a number of points along the path and use Move effects from point to point. The more points I pick the closer it appears to be on a true circle. I've tried both manually kicking off each individual move effect from the effect end event and also putting the move effects in a sequence effect. Both methods cause the motion to be either extremely slow (if I set each move duration to be large) or pretty jerky (if I set the move duration to be very small like 0-2). It appears that there is a pause between the end of each move effect before the next move effect starts. The reason I want to do it all in code is that I want to be able to vary the radius of my circular path dynamically. Anyone have ideas on how I can get smoother motion along my path? Thanks in advance.
Re: [flexcoders] Tween Motion along a path
I wasn't at Max, but have you seen this, http://labs.zeh.com.br/blog/? p=95 ? Bjorn On 29/10/2007, at 1:34 AM, snowjunkie73 wrote: At Adobe Max 2007 I went to a session on creating custom components in Flex. The example component used in the session was a custom carousel component where objects would tween along a circular path. The source for this example class was never released, but I am fairly certain that the math for the path was done entirely in Flex, and it was not using a Flash CS3 generated path. The movement was nice and smooth. I'm trying to do my own tweening along a circular path but in a flat 2d manner. I've done all the math in action script 3 to find the circular path but I am having trouble getting objects to move smoothly along the path. Basically I pick a number of points along the path and use Move effects from point to point. The more points I pick the closer it appears to be on a true circle. I've tried both manually kicking off each individual move effect from the effect end event and also putting the move effects in a sequence effect. Both methods cause the motion to be either extremely slow (if I set each move duration to be large) or pretty jerky (if I set the move duration to be very small like 0-2). It appears that there is a pause between the end of each move effect before the next move effect starts. The reason I want to do it all in code is that I want to be able to vary the radius of my circular path dynamically. Anyone have ideas on how I can get smoother motion along my path? Thanks in advance.
Re: [flexcoders] Tween Motion along a path
For starters, the presentation you're referring from Michael Labriola to was
just posted online: http://blogs.digitalpri
mates.net/codeSlinger/index.cfm/2007/10/28/Max-Presentation
The basic idea that I think makes sense for you to approach the problem with
is that you want a function that lays out all your items for any given
rotation of the circle. This function doesn't do anything in terms of
animating. All it does is lays out your items given a particular rotation of
your circle. So if you have a method like:
function layoutItems(angle:Number):void {
//layout all your items here for the given angle passed in
}
then you just make sure to call that function whenever you change the
rotation of your circle. You can make that happen in a setter for a property
on your class, and then you can tween that property. Not sure if that's all
making sense. Take a look at the code from the MAX preso in the link above.
You'll see a setter for a property called currentPosition. That setter calls
invalidateDisplayList(), and in updateDisplayist he's got the code that
moves all the items to their proper positions given whatever currentPosition
has been set to.
Then what he does is tweens the currentPosition property. So he doesn't have
to have a bazillion tweens running for each of his items. He tweens a single
property, and then when that property gets set, he makes sure to re-layout
the items.
If you want to go completely overboard and learn how to do crazy stuff with
animating on paths (in 2D and in 3D) then you can read up on Jim Armstrong's
blog: http://algorithmist.wordpress.com He has tons of stuff about animating
along curves and gets into the crazy math you need. That's overkill for what
you're trying to do, but worth checking out.
Doug
On 10/28/07, Bjorn Schultheiss [EMAIL PROTECTED] wrote:
I wasn't at Max, but have you seen this,
http://labs.zeh.com.br/blog/?p=95 ?
Bjorn
On 29/10/2007, at 1:34 AM, snowjunkie73 wrote:
At Adobe Max 2007 I went to a session on creating custom components in
Flex. The example component used in the session was a custom carousel
component where objects would tween along a circular path. The source
for this example class was never released, but I am fairly certain
that the math for the path was done entirely in Flex, and it was not
using a Flash CS3 generated path. The movement was nice and smooth.
I'm trying to do my own tweening along a circular path but in a flat
2d manner. I've done all the math in action script 3 to find the
circular path but I am having trouble getting objects to move smoothly
along the path. Basically I pick a number of points along the path
and use Move effects from point to point. The more points I pick the
closer it appears to be on a true circle. I've tried both manually
kicking off each individual move effect from the effect end event and
also putting the move effects in a sequence effect. Both methods
cause the motion to be either extremely slow (if I set each move
duration to be large) or pretty jerky (if I set the move duration to
be very small like 0-2). It appears that there is a pause between the
end of each move effect before the next move effect starts.
The reason I want to do it all in code is that I want to be able to
vary the radius of my circular path dynamically. Anyone have ideas on
how I can get smoother motion along my path? Thanks in advance.
