Attention: you're visiting an archived version of this post on my old website. Click here to view this same post on my new website.

The search for the perfect bezier tweening syntax

Undoubtedly, the biggest challenge when implementing some feature on Tweener is deciding on the syntax to be used - that is, doing the syntax design itself. It can’t be too complex, or else it’ll be too convoluted to use, but it also can’t be too simple, or it won’t be able to do everything it could; it has to be flexible, but still be straightforward. The funny thing is that once the syntax is decided upon, the implementation follows easily; I’ve spent literally months deciding on how some features should work, then once the “Eureka!” moment arrives, it’s just a matter of a couple of hours until it’s implememented.

The most recent of such challenges was implementing beziér curves on tweenings. At a simplistic level, this feature allows for an object to slide on screen by following a curved path; at a more complex level, it allows any number of properties of a object to follow a complex ‘path’ of values until it reaches its destination.

In the most basic sense, this could easily be achieved with, say, a special property. Using Tweener, it could work like this, for a sliding based on a quadratic bezier curve path:

Tweener.addTween(myMC, {_x:10, _y:10, _controlX:20, _controlY:0, time:1, transition:"easeoutquad"});

That is, the _controlX and _controlY properties actually define the location of the control point of the bezier curve, as one would expect when using, say, the curveTo method from the actionscript drawing API.

At close analysis, however, this seemingly natural syntax poses two significant problems. For one, it uses special, separate properties for control points that are hardcoded into the engine - they should know in advance which properties should be modified: _x and _y, on this case. What would happen if, instead of tweening properties of a MovieClip instance, I was tweening properties of a custom StageWindow instance, with respective cameraX and cameraY properties? I’d need to create a new hardcoded special property just for my own custom classes.

One alternative solution would be to make a guess on what should be tweened: for example, “the first two properties to be defined on the tweening parameter object will be respectively considered to be x and y”. That would work on the above case and in many other cases where bezier tweening was needed on two dimensions. It would create new syntax rules which are not exactly healthy, though — on Tweener, the parameters order itself doesn’t matter.

The second problem is that it’s limited to one control point. Paths based on bezier curves can, instead, use several different control points, allowing a more complex path to be taken. For that, the above solution would need separate arrays, or additional control point variables, and it could become quite clumsy.

Hence why a more flexible solution is needed. I spent a good deal of thought on this matter, and I honestly believe I’ve reached a good compromise. So the final syntax for bezier transitions on Tweener is as such, just as an example:

Tweener.addTween(myMC, {_x:10, _y:10, _bezier:{_x:20, _y:20}, time:1, transition:"easeoutquad"});

That is, the tweening or sliding is done the same way it’s always done - by using _x and _y properties, or whatever’s the norm at that specific language version or Class - and a bezier point can be defined by the special property named _bezier, which contains one object with the properties that define its position.

Here’s the first good point: by using the destination property names themselves when defining the control point, the bezier code already knows what to tween and how. You don’t need any other special parameter rule when writing the code - you could tackle an _alpha tweening there on the same object and it would still work - and, specially, you can use whichever property you need when doing a bezier tweening. So, for example, if you had my hypothetical StageWindow instance there, you can still tween it by using this syntax:

Tweener.addTween(myStageWindow, {cameraX:10, cameraY:10, _bezier:{cameraX:20, cameraY:20}, time:1, transition:"easeoutquad"});

That is, you just need to define your points based on the properties you actually want to tween.

The second good point is that, because of the way the _bezier special property is used - it’s only one property - it’s easier to allow several different points to be used. This is done, obviously enough, by allowing this special property to use an array of objects as its parameter, instead of just an object. So to make an object do a path following two bezier curves (or a curve defined by two quadratic bezier curves), it would be like so:

Tweener.addTween(myMC, {_x:10, _y:10, _bezier:[{_x:20, _y:20}, {_x:30, _y:30}], time:1, transition:"easeoutquad"});

Obviously this can be split into several different lines, it’s the same thing.

var myPath:Array = new Array();
myPath.push({_x:20, _y:20});
myPath.push({_x:30, _y:30});
Tweener.addTween(myMC, {_x:10, _y:10, _bezier:myPath, time:1, transition:"easeoutquad"});

Anyhow, I probably write too many boring details though; it’s better to show it working. So check it out, the Tweener bezier example, appropriately named Bezier Maker:

{}

Download the source here (Flash 8, AS2) or here (Flash CS3, AS3).

To operate it, click and drag each point to change the path origin, destination, or bezier control points, and to better understand how it works. Clicking on “Add Bezier Point” adds a point next to the currently selected point; clicking on “Remove Point” removes the currently selected point. For demonstration purposes, the code one would use for such animation is generated at the bottom. The animation time is set to 1 second. Try adding more points and noticing how the path adapts to the control points, and how the ball travels through the path.

From this example, it’s also possible to notice one quasi-caveat of quadratic bezier curves: depending on how you setup your control points, or how your curves are laid out, it will change the speed of travel an object could have when sliding through the path. You can notice this happens by looking at the circles distributed among the curves, when you create a very acute curve: if the circles are too close to each other on a specific point of the path, that means a point of deceleration. Code wise, there are ways to avoid that kind of behavior and provide a normalized travel speed over the curved path; this will probably show up on Tweener as an optional bezier setting on the future. Right now, however, this kind of bezier-driven speed is the way it’s supposed to work by default.

And at last, but not least, the third and final good point of this bezier syntax is that by allowing a loose object to define the bezier control points, the code is freed from the obligation to do a bezier on two properties (or dimensions) and can instead apply a bezier to one, two, three, or more dimensions. So what this means is that the same code that can be used to slide a MovieClip on screen can be used to change its _rotation value only, or even change the X, Y and Z properties of a Camera object on a 3d projection. So considering the previous bezier tweening syntax, the syntax for such task would be simple enough:

Tweener.addTween(myCamera, {x:10, y:10, z:10, _bezier:{x:20, y:20, z:30}, time:1, transition:"easeoutquad"});

This is almost accidental in design - the syntax wasn’t built with any specific class or rendering engine in mind - but shows how a flexible syntax approach can just happen to fit well into other classes that make use of numeric properties. Once again, this is better shown than explained, so check this out, another example using Papervision3D:

{}

Download the source here (Flash CS3, AS3) or here (Flash 9 alpha preview, AS3). But again, it does not contain the Papervision3D source, as it’s not publicly released; more information on how to get the beta here.

This example operates similarly to the previous one; the difference is that it has to use three different properties for tweening, and as such, it has a few more viewports to allow setting each of the points on a 3d world. Also notice you can not only drag the points around on the bottom viewports, but also the cone objects themselves. It’s also a bit crude as it’s just a quick example, so you’ll notice you can drag elements outside of the viewports, and there are other small user interface issues.

On the question of cameras, however, one interesting point must be brought up. Moving the camera around the space is just one of the steps needed for this kind of animation; moving the camera target around is another story. On 3d views, this can usually be done by aligning the rotation of the camera according to the path traveled (on all axis) and thus achieving the desired effect. This requires some more math, though, so on the above example, a little trick is used: instead of trying to calculate the angles of the camera in real time in a way that makes it stay aligned to the path, what is done is that the camera target itself is also tweened, but ahead of the camera in time. This means that both the camera and the target are running on the same rail, but because the camera is delayed, the effect of alignment is achieved because the camera is always “looking” a little bit further its own path (this is also what causes the slight movement delay when the travel starts). Animating the target with a second, different path would allow better movement control, but I’ll let that open as a suggestion for people who download the code. Anyhow, to test the difference between the two types of camera target, click the “toggle target type” button on the above example; it toggles between a fixed target (on the center of the world) and a target that follows the path a little bit ahead in time. The generated code is also updated to match these options.

To be honest, I think that for real, professional, tight, super-controlled camera control on 3d extensions such as Papervision3D, another solution must be created; something based on curves copied straight out of a 3d editing package, maybe something that parses a collada spline to create all needed points and then tween the position of a camera; or maybe a maxscript (or similar) script that outputs a number of points from a spline in the form of points that allow interpolation. As a quick solution for many cases, however, this simple bezier tweening will do.

Is this the perfect tweening syntax? It’s difficult to say. There are other mathematical solutions to the path problem which could be based on cubic (or higher level) bezier curves instead of the default quadratic ones; different approaches should be taken if the travel speed is to be maintained the same on the entire path, as it is dependent of all properties being tweened on any given path (the default quadratic bezier, on the other hand, allows all properties to be calculated separately); and there are different usage patterns that surely make for different syntactical solutions, as are almost most features on these tweening engines and classes. For me, however, this is the perfect boat to sail through curved streams, and it might also fit other people’s needs, so there it is.

Lastly, please notice this bezier feature has been added on the latest Tweener version, 1.25.53, only available through the subversion repository. This means the zipped “stable” download version is a bit older (1.24.51), and will be like that for a few days, until the new version has been tested enough. This version is now stable and can be downloaded from the regular download page.

Posted on 28/Apr/2007 at 8:46 pm | Comments (0) | Trackbacks (0) | Categories: Actionscript, Easing, Flash, Papervision3D, Sources, Tweener

Comments (58)

awesome – nice work.

Posted by wormik on 29/Apr/2007 at 5:55 am

Great Job…in fact AWESOME Job.
I’m getting used to cs3, maybe I can get it to work…Thank you so much for sharing your beautiful discovery.
-Pete

Posted by Peter Kapelyan on 29/Apr/2007 at 6:06 am

Zeh, you are truly amazing. I’m so happy to see what is happening with Tweener. You are pushing it so much further than I could have imagined.

Posted by Chad on 29/Apr/2007 at 7:21 am

Hey Zeh.

Beautiful. Bezier tweening is a great addition to Tweener.
To be honest, after seeing these, I feel like all my previous animations are stiff: always from point A to point B – one dimension.
With bezier tweens it seems than a new dimension for animation opens up. Lot’s of thinking to do.

Thanks for the new feature (and this great walk through).

cheers
arthur

Posted by Arthur Debert on 29/Apr/2007 at 7:40 am

Aí Zé! Ce só pode ser sócio da Adobe! Caramba, irado! Abraços

Posted by Fernando Bueno on 29/Apr/2007 at 5:09 pm

Six months and this is a full fledged scene creator for papervision and maybe even in some game development kits for flash. Killer.

Posted by drawlogic on 29/Apr/2007 at 9:26 pm

Hey guys, thanks.

drawlogic: just to make it clear, although I’d love to make it a real editor, it’s not really the point of this post… because I wouldn’t have time to it. This is just an example I’ve done in a couple of hours, adapted from the previous 2d example, and it’s only meant to explain the syntax by way of the code generator. I won’t be adding features to it (although I can think of dozens of cool features) or fixing any of its interface issues… but since the source is available, or at least the idea is out there, maybe something better will pop up by something else.

My point is, PV3D deserves a camera path editor, regardless of any tweening extension that could be used with it. So I hope someone comes up with something like it in the future. The above one is just a small proof-of-concept example.

Posted by Zeh on 29/Apr/2007 at 10:21 pm

Hey Zeh,

Yeh that is what I meant, now that the source is out there its bound to happen. I think it is a great piece of work and the possibilities with it for pathing and setting up cameras or scripted scenes is a pretty cool concept is all. Thanks for putting it out there.

Posted by drawlogic on 30/Apr/2007 at 1:49 am

Incredible work ! Thanks so much for sharing !

Posted by Fardeen on 30/Apr/2007 at 9:56 am

hey zeh,
that looks amazing. want to try it :) but i only have f9 and it says “Un expected file format” while opening. is there any chance to get it running in f9 beta?
cheers,
björn

Posted by björn on 2/May/2007 at 3:26 pm

Hey Björn,

Yeah, sorry — I created the example with Flash CS 3 trial, it was the first time I was running it and I wanted to test how it worked. My bad, I forgot not everybody has the trial yet.

I had to change it a bit to run on Flash 9 Alpha, one of the classes is pretty much duplicated and there’s a bit more declared on Main.as, but apparently it’s running fine. Here it is:

http://hosted.zeh.com.br/misc/bezierMaker_pv3d_as3_flash9alpha.zip

Remember it doesn’t include Papervision3D classes.

As a side note, my conclusion was that Flash CS3 runs pretty well. It’s easy to get used to it. It has some annoying user interface bugs :/ but hopefully they’ll release an update in the future. It also has a good number of differences from Flash 9 Alpha, actionscript compilation-wise. I’ll wait for the official local prices (still unknown) before deciding on when to purchase it.

Posted by Zeh on 2/May/2007 at 7:42 pm

Wow – very nice addition to Tweener Zeh. Good brains man.

Are you liking Papervision3D? I am not familiar with 3D production in Flash, but I am seeing it spring up everywhere.

BTW – Flash CS3 is quite nice for those who do not yet have it. Although I am currently using it to script in AS2, I really dig the new interface controls. Much improved over Flash 8.

Posted by craig on 3/May/2007 at 12:14 pm

Craig, thanks.

Yes, I’m liking Papervision3D. I’m not using it much, mind you, just to test tweening with Tweener – but, overall, it works perfectly and seamlessly. Once I downloaded it, I had a quick check on the provided examples and documentation, and was able to use it in no time. Maybe the fact that I work with 3d from time to time helped, but the way Papervision3D works, it’s just similar to 2d animation in flash, just using three dimensions — so there’s almost no learning curve.

It’s also fast, as fast as it’s possible to push a engine full of layers as Flash anyhow. I can see it (or solutions similar to it) being used a lot in the future on certain specific tasks. The coming years will be a good time for experimentation — if Adobe ever decides to get 3d hardware support on Flash player in the future, what’s done with Papervision3D from now on will tell them what they need to address.

Posted by Zeh on 3/May/2007 at 12:28 pm

hey zeh,
you are great. big thx to you. it’s working and i know that i need the pv3d classes ;) and i have them :)
so thx again,
björn

Posted by björn on 3/May/2007 at 3:28 pm

I would like to thank you and all the people working on the tweener project. I’ve been searching for a good Tweening class ever since the release of Flex Builder 2. A couple of weeks ago I stumbled upon your project and it’s the best Tweening class I’ve ever used.

Great syntax, great preformance, cool features (the filter tweening feature is amazing.)

Respect and big thanks again.

Posted by Thomas Colliers on 4/May/2007 at 12:38 am

Oi zeh, muito bom esta nova feature. Vou ver se traduzo seu post e coloco la no blog do flashmasters.

[]s

Posted by Celina Uemura (aka cezinha) on 7/May/2007 at 5:17 pm

Brilliant!!!(!)

What is the debug warnings one get when one click on the “start travel” button ? Its complaining about some missing classes or classpaths i think, I could not find references to the com.blitzagency in your source though.
Well the example seems to run flawlessly so I should perhaps not complain

// ArgumentError: Error #2083: Close failed because the object is not connected.
at flash.net::LocalConnection/close()
at com.blitzagency.xray.logger::Debug$/::makeConnection()
at com.blitzagency.xray.logger::Debug$/trace()
at com.blitzagency.xray.logger::XrayLogger/log()
at com.blitzagency.xray.logger::XrayLogger/debug()

Posted by Øivind on 8/May/2007 at 9:56 am

Øivind: it’s a problem with the current beta builds of PV3D: it tries to import or use some classes that don’t exist. So if you use the ‘standard’ PV3D version on top of my files it’ll probably issue those warnings.

If I remember well, you can turn off strict mode to avoid getting those errors, or simply remove or comment out those references/calls inside the code (that’s what I did since I don’t use xray).

Posted by Zeh on 8/May/2007 at 11:26 am

+fav thx!

Posted by katopz on 12/May/2007 at 12:09 am

Muito show Zé! Parabéns novamente!

[]’s

Posted by Leandro Amano on 16/May/2007 at 10:42 am

Wow! That is a very inspiring piece of work. A word about syntax. Obviously you have thought a great deal on the function signatures and basic API of your Tweener and subsequent tween types. I truly appreciate the magnitude of the subject. I spent over a year on my Isometrics API in AS2.0 to then turn around and spend nearly the same amount of time on the AS3.0 versions. And it still isn’t finished.

Though this is still a work in progress, you may find many folks will want to make their own tween types to use with Tweener (I being one of them). Might I suggest maybe making use of interfaces for part of the parameters. Having tween target object classes or something of the like would help solidify the syntax a bit.

Of course I rattle this comment off with no previous experience using your Tweener. But I am truly sold on it and am sure to find plenty of things to learn with it on.

Thanks again for your contribution

Posted by jwopitz on 6/Jun/2007 at 1:59 pm

@jwopitz: thanks!

Tween targets can be any kind of object; as long as they have a numeric *property* they can be tweened natively with no additional code. That’s something I wanted to show with this PV3D example.

The engine does allow for extensibility though. If you want to use additional (customized) equations, it lets you use them as the “transition” parameter (just use another function). You can also register them with Tweener.registerTransition so you can access them by string names. There’s a certain kind of common easing equation interface it uses. For example, any equation created with this tool would work:

http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm

“Special properties” can also be created for custom object classes with no numeric properties (ie, classes that rely on functions and methods only). This is done by registerSpecialProperty (like “autoAlpha”), registerSpecialPropertyModifier (“_bezier” is the example on topic) or registerSpecialPropertySplitter (a complex property that is turned into several different properties, like “_blur” or “_scale”).

On both accounts – transitions and special properties – there are external classes that “register” the default ones with the engine. So anyone could potentially add a bunch of features from a custom class by simply having a method to register it all. If you’re curious, see SpecialPropertiesDefault.as and Equations.as on the Tweener classes, specially the init() method, which registers them all.

Anyhow, I admit the documentation still leaves a lot to be desired so much of this extensibility is a mystery to most developers. But most of what’s needed is there and will be made clear pretty soon. There’s room for improvement, and there’s a few other features we want to add, of course, but I believe there’s a nice engine in place for a lot of stuff to be connected and work “natively” on it.

If there’s some specific use case you think Tweener falls short, please let us know (possibly on the mailing list) so we can discuss that and explain how it works or add it to the to-do queue.

Posted by Zeh on 6/Jun/2007 at 2:19 pm

Hi Zeh, thanks for all tutorials and good works.

I am doing a Bezier tweening and i wonder if it posible to adjust the scale of the MC within the points ?
I.e something like this..

Tweener.addTween(myMC, {x:36, y:261,_scale:0.3,_bezier:[{x:171, y:395,_scale:0.1}, {x:668.5, y:450,_scale:1}…etc

I want to (without papervision and the z-depth) simulate a 3D elipse with multiple MC’s circulating around. So,to achive a good effect the MC’s needs to be scaled during the tweening. Any hint on how to do that ?

Thanks a million!
Regards
Aero

Posted by Aero on 6/Aug/2007 at 3:18 pm

E aí Zeh! Tu jah considerou usar a curva Catmull-Rom?
Eu criei um Tweener tempos atrás que usava ela! Essa curva tem característica C2 de conectividade é bem boa dá uma pesquisada!

Teu tweener ficou show!
Valeu!

Posted by Eduardo on 11/Aug/2007 at 12:23 pm

Genius! Thanks much for your work

Posted by Victor on 16/Sep/2007 at 8:53 pm

valare nannaayittund.anyway thank you very much !!!

Posted by Nodesfor on 4/Oct/2007 at 4:28 am

brilliant, thanks!

Posted by Trevor on 19/Oct/2007 at 10:39 am

Rocking stuff .. you go in the hall of fame dude !!

Cheers again

Posted by Amit on 2/Nov/2007 at 7:58 am

Thanks. Great work.

Could I make a simple suggestion. You may want to name the packages so they start with ‘com.caurina…’ instead of plain ‘caurina…’ When using third-party stuff into a project, the convention seems to be to name the packages with inverse domains (i.e. com.domain.project). That way, all the third-party project stuff can be organized inside the ‘com’ folder and it keeps the source directory cleaner.

We could rename them manually, but then every time we do an update against the SVN repository, it would get over-written.

Just a thought.

Posted by ramin on 11/Nov/2007 at 12:00 pm

could we have a complete solution?
i’m using version 1.31.66 AS3 and the code snippet

Tweener.addTween(my_mc, {_x:460, _y:100, _bezier:{_x:250, _y:200}, time:1, transition:”linear”});

but get error
## [Tweener] Error: The property ‘_bezier’ doesn’t seem to be a normal object property of [object Test_mc] or a registered special property.

i’ve also tried omiting the _ i.e. bezier

I am very new to Tweener so i apologise if ive missed something obvious

Posted by mh on 19/Nov/2007 at 7:04 am

mh: on the recent version (the one on SVN), the special properties are on separate packages.

Now you have to initialize the special property (_bezier included) before using them. Do this:

import caurina.transitions.properties.CurveModifiers;
CurveModifiers.init();

Then you can use _bezier.

Check the documentation that comes with the SVN version, it has a list of all available special property packages and how to use them.

Posted by Zeh on 19/Nov/2007 at 7:12 am

I’ve just noticed the package with this example is from April 2007, does that mean that the _bezier property has been dropped for now?

Posted by mh on 19/Nov/2007 at 7:18 am

No.. like I said, you just have to init() it. It’s not dropped.

I’ll update the examples when that SVN version goes stable and is out of beta. But if you want to use the examples with that beta version, you have to add the code I mentioned above.

Posted by Zeh on 19/Nov/2007 at 7:23 am

Wow , thanks for the quick reply, will go and grab the svn docs.
And thanks for the great work.

Posted by mh on 19/Nov/2007 at 7:37 am

Hi Zeh,
I wander what’s the need for a custom Tweener? Why not using the tweening mechanism provided with the Flex SDK? Are there reasonable arguments in favor of one of the two tweening mechanisms?
What were your reasons to make the Tweener?

Best Regards

Posted by Vladimir Tsvetkov on 18/Dec/2007 at 6:55 am

Vladimir: it’s a lengthy discussion and it depends a lot on who’s using it. Certainly, there are people who will prefer the built-in tweenings classes, and there’s nothing wrong without it.

However, before planning Tweener I had a look at the built-in classes and decided they weren’t for me.

My reasons for building Tweener include having a more modular approach, with the possibility for creating new special properties as needed, a few more features (more equations, delays, etc), simpler/more straightforward syntax, and a few other things.

That’s why I built it. Not to be just another redundant class, but because *I* needed it. Other people’s mileage can and will vary. That’s why you’ll see there are other tweening classes around, not just Tweener.

The built in classes are not bad. But Tweener fits well into what I need.

Posted by Zeh on 18/Dec/2007 at 7:13 am

Zeh,
Thanks for the response. I have a few other questions regarding the performance and accuracy of Tweener vs. Flex Tween. To your opinion do they produce the same results when used for effects in Flex? I spent some time comparing them when used with Papervision3D, but my comparison was quite subjective.
I stick with the Flex Tween when extending Flex effects, just because I want to use my effects within the Flex effects and transition model, benefiting from the traditional Flex declarative syntax. But I still can’t get rid of my doubts whether the Tweener is better suited for use with Papervision3D in regard of performance and overall look and feel.
Please share your opinion on that!

Best Regards

Posted by Vladimir Tsvetkov on 19/Dec/2007 at 2:24 am

Vladimir,

All comparisons will always be subjective. They depend on each developer’s workflow and expectations. I’d say, test the extensions you find, but then use the one you like the most.

Performance wise, while there are differences between all extensions available, they’d only be noticeable when you’re using hundreds or thousands of tweens. And the biggest bottleneck when doing so is usually rendering anyway. So unless you have a very specific case with too many tweenings, there’s no need to switch engines just because of performance.

Posted by Zeh on 19/Dec/2007 at 6:10 am

Zeh I have been using your tweener in just about every PPV3D project I have done and I love it! Now I am interested in using tweener’s bezier method to move a camera around a sphere in PPV3D. Right now I have a demo at
http://xillo.com/dev/3d/Sphere3dv2/SphereCloud.html

here is the code:

http://pastebin.com/d6e9249e9

I am using tweener on line 409 to tween the camera from one plane to another. Now what I need to do is figure out how to calculate the bezier control point for a spherical curve less than 180 degrees. I know that as the angle approaches 180 the CP would approach infinity so I thought that for any angle greater than 90 I would split the path in two and generate two control points. Do you know of a formula for figuring out the Quad Bezier control points for two points on a sphere? I figure it is some simple 3d triangle stuff, but I am not sure. Thanks for your help and Tweener rocks!

rh

Posted by randy on 11/Jan/2008 at 7:56 pm

Hello Randy,

Hm, the code’s not showing.

Anyhow, I believe you’d have to trace an imaginary line that comes from the center of the circle to the two curve points (begin and end), then draw a perpendicular line (at a 90″ angle) from each of these lines going towards each other. The point they meet, halfway through the length of the curve, is the point your control point should be. This is an approximation, but should be good enough for a nice, smooth travel.

However, for that specific kind of control, you don’t really *need* it. You see, you could create your planes inside another DisplayObject3D. This would act as a “group” of objects… then you would simply need to rotate this DisplayObject3d accordingly to achieve the same effect. The camera would be frozen in place.

Posted by Zeh on 12/Jan/2008 at 8:16 am

Thanks zeh! Yeah I’ve done it by rotating sphere and keeping the camera still, but I also want to know how to do it by moving the camera as well. I figured out the I have figured out that the radius to the control point, call it cpR, is:

cpR =r/cos(1/2 *delta)

where r is the radius of the sphere and delta is the angle between the start and stop points on the sphere now I just need to figure out the get delta from the change in theta(long angle) and phi(lat angle) between the two points and I can calculate cpX, cpY , and cpZ. A little more geometry and I think I have it. I know its a bit of math but I am only running through it once or twice per move so hopefully it won’t be too much of a hit on the processor. If you know of the equation of how to calculate delta from theta and phi of two points on a sphere, I would love to hear it! I assume its pretty simple and I am going to google some more geometry sites to see if I can find it. I’ll post my code again and make sure it stays up for longer than a day this time!

Thanks again!

rh

Posted by randy on 12/Jan/2008 at 10:45 am

Hi Randy,

Yeah, your equation is right. Then based on that for both angles (long and lat) you’d can find xyz. This is a matter of trigonometry and while I’ve done that in the past, it’s not something I completely master and the equations fail me now – from what I remember, it’s a matter of using one angle once for xy and then using it again (with the found hypotenuse) and the other angle for z.

Posted by Zeh on 13/Jan/2008 at 8:10 pm

Great work Zeh!
This is very useful and I’d love to use this class for some animation tests, however what I need is a path system for object animation where you can ‘break’ the tangents of the spline with ‘handles’.
I’ve found an implementation here:
http://www.flash-creations.com/notes/astb_saveshapes.php
This only has one tangent handle where as ultimately you would need two to get the most accuracy beween speed and shape.
This way you could create a good approximation of a bouncing ball etc.
Is this kind of thing possible?
How hard would it be to have the path handles and cone manipulation in 3D??? (Without the need for top and side views) That would be cool!
Thanks for the great work
-Tim

Posted by Tim on 15/Jan/2008 at 4:41 am

Bezier curves implementation is great and very useful, thanks Zeh!

My question is:
I have a movieclip moving from an ‘A’ point to a ‘B’ point following a certain bezier curve.

Is it possible to break the movement in a ‘C’ point bewteen A and B, and to return the movieclip to the ‘A’ point (or move it to another point) always on the same curve?

Thanks.

Posted by Marco on 1/Feb/2008 at 3:49 am

How do I make a bezier tween travel at a constant speed along sequential tweens? So that as I add length to the curve the speed remains constant?
Do I need to find the total curve length some how?
Thanks.

Posted by t on 6/Feb/2008 at 2:05 am

Points would need to be evenly distributed.

Posted by Zeh on 6/Feb/2008 at 6:18 am

Nice Work! That’s what I needed…

Have you got any ideas on rotating the MovieClip during the Tween like timeline Tweens “orient to Path”?

Thanks!
Timo

Posted by Timo on 22/Feb/2008 at 4:19 am

Timo, Maybe you could use an onUpdate function which keeps track of previous x,y(,z). Then use some trig to align the appropriate object axis with the imaginary line between its previous and current position.

Posted by steve on 22/Feb/2008 at 11:59 am

Hi Steve,

thanks for your idea. I tried to do so:
————————————————————–
import caurina.transitions.Tweener
caurina.transitions.properties.CurveModifiers.init()

var Path:Array = new Array()
// START AT
Path.push({_x:myMc._x, _y:myMc._y})
Path.push({_x:250, _y:150})
Path.push({_x:350, _y:400})
// END AT
Path.push({_x:550, _y:0})

myMc.oldX = Path[0]._x
myMc.oldY = Path[0]._y

function orientToPath(){
var rot = Math.atan2( (this.oldY – this._y), (this.oldX – this._x) ) * ( 180 / Math.PI )
this._rotation = rot
this.oldX = this._x
this.oldY = this._y
}

start = Path.shift()
end = Path.pop()
Tweener.addTween(myMc, {_x:end._x, _y:end._y, _bezier:Path, time:10, onUpdate:orientToPath, transition:”easeInOutQuint”})
————————————————————–

works, but wiggling the MovieClip at start and end of the tweening specifically when easing the tween.

Can’t find a solution for that.

Thanks again

Posted by Timo on 23/Feb/2008 at 8:33 am

For those who have missed this on the list, here is some nice trick to do with _bezier to build your path in a bit more straightforward manner:

http://makc.coverthesky.com/FlashFX/ffx.php?id=15

Posted by makc on 6/Mar/2008 at 1:35 am

Hey Zeh.

Great Work!!l.you inspired me.
Recently i’ve post on my blog a similar aproximation to this problem and i think i’ve found an alternative solution to this problem:
http://rhye.890m.com/blog/?p=9
Rhye

Posted by Rhye on 16/Apr/2008 at 1:06 am

Hi Zeh, believe me I have become a fan of your Tweener Class. I just had a question regarding Easing Equations. Can we not have control over the equations; let’s say “easeOutBack”; can I not control the back flow of this equation. Actually I want to try more easing options though there a lot of Available options but still sometimes I feel that i should have control over that as well. Any suggestions ??

Posted by TahirAhmed on 21/May/2008 at 4:10 pm

Hello TahirAhmed,

The additional parameters are defined by the “transitionParams” property. ease*back has an “overshoot” parameter. Here’s an example:

http://hosted.zeh.com.br/tweener/docs/en-us/parameters/transitionParams.html

They follow Robert Penner’s original values. So for overshoot “higher values means greater overshoot (0 produces cubic easing with no overshoot, and the default value of 1.70158 produces an overshoot of 10 percent).”

ease*elastic is used in a similar way, but the parameters are “period” and “amplitude”. I never fully understood the role of each of them though, so it takes a while to get them working in the way you want. Default “period” is 30% of d (d being the difference between the start value and end value), default “amplitude” is 0.

No other transitions take parameters.

Posted by Zeh on 22/May/2008 at 8:17 am

Thanks very very much dude.

Posted by TahirAhmed on 29/May/2008 at 4:50 pm

Has anyone come across a problem with _bezier in AS3 between Mac and PC. When published my SWF runs how it should on a MAC but the item doesn’t follow the bezier path when run on a PC???

Posted by Matt Booth on 5/Jun/2008 at 5:55 am

I’m just digging into PaperVision after watching it from the sidelines for a year or so. Tweener has been great. Thanks so much for your work.

Posted by Jeff Young on 20/Jun/2008 at 8:45 am

Zeh.

Lovely library.
Although I wanted to let you know, I was thoroughly confused for a couple of hours trying to figure out that using a special property like “_bezier” required:

import caurina.transitions.properties.CurveModifiers;
CurveModifiers.init();

Especially since the “bezierMaker_as3.fla” demo doesn’t make mention of it when printing source.

It makes perfect sense *now*, but it took me awhile to track down a definitive answer to this error message:

## [Tweener] Error: The property ‘_bezier’ doesn’t seem to be a normal object property of [object Test_mc] or a registered special property.

A small detail for such a wonderful package!
Thanks again for all your work.

Posted by Mark on 8/Jul/2008 at 6:17 pm

Mark: you’re right. It’s because the need for the init() is new. It wasn’t required at first. My fault, as I hadn’t had the time to update the examples.

Posted by Zeh on 8/Jul/2008 at 6:29 pm