Jump to content
Search Community

Unorthodox Tween in Grid-like Fashion

protoemocional test
Moderator Tag

Recommended Posts

Hello TweenMaxers,

 

 

This one is written specially to mr. Greensock himself as this is a very peculiar question...

 

I know this is kind of absurd since Tweens are used to give a sense of fluidity to motion, but I was wondering if there was some alternative in TweenMax in order to NOT give easing to motion. Say, in a 10x10 grid you want to move from (0, 0) to (0,9) by only passing through the slots in the grid (a la Tetris), without 0. to 1. transitions.

 

Is this possible to do with TweenMax? For instance, tell a square movieclip to move from (0,0) to (0,9) in 3–frame intervals? I know this is silly, but I don't want to lose all the TweenMax functionalities. I'm thinking about the excellent LinePath2D, which allows me to move shapes along each point and saves me much time...

 

 

Thanks everybody,

Link to comment
Share on other sites

Could you post some kind of visual representation of what you're looking for? I'm just not sure I understand your question exactly. If you want something to tween, for example, down 200 pixels, then right 100 pixels or something, you should be able to easily do that with a few tweens in a TimelineLite. But I doubt that's what you're looking for. Could you provide some more details? I'm a visual guy, so graphics help a lot. :)

Link to comment
Share on other sites

Thanks for your quick response...

 

I've posted three pictures representing different times. You've got a 10 x 10 grid (could be boxes or pixels, it doesn't matter) and one square shape. I want to be able to define paths with your TweenMax engine and make my shapes follow them, but on a frame schedule and without transitions.

 

For instance, define a path that has points in (0,0), (0,1) and (0,2). I want my square to move through those points as you'd see in those pictures, no transitions, just basic positioning per frame; in this particular case, per 3 frames.

 

Is this possible to do with TweenMax without too much overkill?

Link to comment
Share on other sites

Oh this would be a pretty cool feature for games and stuff although I reckon it should be possible to make a function that did this. Let me do some testing.

 

Wish you could go like:

TweenMax.to(obj, 5, {y:"500", steps:5})

 

So it would take the amount of time / #steps and for only 5 updates 1 second apart it would jump the object 100pixels down y or step almost anything really, alpha, scale etc.

Link to comment
Share on other sites

Ah, okay. Sure, I think I've got a solid solution for you guys: SteppedEase. I just added it to all the public downloads and I attached it here. Basically it allows you to define an ease with a certain number of steps which should give you exactly the effect you're after with minimal hassle. Here's basically how you'd implement it:

 

import com.greensock.*;
import com.greensock.easing.*;

TweenLite.to(mc, 3, {x:100, y:300, ease:SteppedEase.create(5)});

 

That'll tween mc to x:100, y:300 with 5 steps inbetween where it is when the tween begins and the end values. Obviously you can easily change the number of steps to whatever you want.

 

You like?

 

Also, I whipped together a Positions2DPlugin that allows you to pass in an array of Points that you want the target rendered at (in order). Hopefully you'll see how easy things can be using custom plugins like this. The plugin architecture allows nifty features to be added without bloating the core engine, keeping it lean and mean. You may not even need this Positions2DPlugin because SteppedEase should give you what you need, but I figured I'd throw it in here in case you find it useful.

 

Hope this helps.

Link to comment
Share on other sites

Ha ha. Well I must admit I never really thought a "feature" like this would be desirable because typically people want really nice, smooth transitions (or randomized ones like RoughEase) but now that there's a solid use case scenario in front of me, I suppose it could be useful in some situations.

 

Funny side note: I actually started out building a SteppedPropsPlugin for this when I saw your request, but then I realized it would be so much simpler and cleaner to just apply the logic using a special ease instead. Less than half the code and memory. I'm sure you can see by cracking open SteppedEase that it's pretty simple. I love when things come together like that. The less code the better.

 

Anyway, enjoy SteppedEase!

Link to comment
Share on other sites

Thanks a lot man, this is exactly what I was looking for. I think these type of features give extra credit to your engine, as a highly robust system grown out of the simple need for transitioning (as opposed to strict tweening).

 

As for me, this is the reason why I end up coming back to yours, anyways, great support and responsiveness BTW – just like with the other special, RoughEase.

Link to comment
Share on other sites

SteppedEase & Positions2DPlugin I just added it to all the public downloads and I attached it here.

 

Hi Jack, This looks great. I just downloaded my "Shockingly Green" files (also checked the public downloads) and noticed that this was not part of the AS2 version. Its missing both the SteppedEase & Positions2DPlugin. Any chance of getting that updated in the AS2 version when you get time?

 

On the same subject I also noticed the following missing in the AS2 version:

 

- TweenLiteVars

- TweenMaxVars

- TweenEvent

- SetActualSizePlugin.as

- SoundTransformPlugin.as

- motionPaths and associated plugins

 

Are there AS2 flavors of these? They look really helpful as well after reading through the files.

 

Thanks in advance Jack, wonderful stuff.

 

Thanks a lot man, .. I think these type of features give extra credit to your engine

 

Exactly, the best out there! Great stuff Jack!!

Link to comment
Share on other sites

I just posted an updated AS2 zip that includes SteppedEase.

 

On the same subject I also noticed the following missing in the AS2 version:

 

- TweenLiteVars

- TweenMaxVars

- TweenEvent

- SetActualSizePlugin.as

- SoundTransformPlugin.as

- motionPaths and associated plugins

 

Are there AS2 flavors of these? They look really helpful as well after reading through the files.

 

Some of these just don't make much sense to do in AS2. Like TweenEvent is for the AS3 event dispatching (wouldn't apply in AS2). And the TweenLiteVars and TweenMaxVars are primarily for code hinting but most modern code editors are geared towards AS3 and don't handle code hinting for AS2. Add to that the fact that AS2 is a dying language (and has been on its way out for a long time) and the fact that I feel obligated to do my best to target my limited time and efforts at benefiting the greatest proportion of the folks using GreenSock tools, it just isn't practical to develop a lot of these classes in AS2 as well. Don't worry - I've been updating the core classes as necessary, so I'm not saying that I'm dropping all support for anything AS2 - I'm just not actively porting every AS3 class to AS2.

 

Enjoy SteppedEase and the rest of the AS2 stuff :)

Link to comment
Share on other sites

I just posted an updated AS2 zip that includes SteppedEase.

 

Hi Jack, Thanks for your timely response.

 

Thanks for updating the AS2 version with SteppedEase, it would be really great if you could include the Positions2DPlugin as

well please, as this is what really interested me when I saw your post here in this thread. Thanks again. ;)

 

Some of these just don't make much sense to do in AS2. Like TweenEvent is for the AS3 event dispatching (wouldn't apply in AS2). And the TweenLiteVars and TweenMaxVars are primarily for code hinting but most modern code editors are geared towards AS3 and don't handle code hinting for AS2. Add to that the fact that AS2 is a dying language (and has been on its way out for a long time) and the fact that I feel obligated to do my best to target my limited time and efforts at benefiting the greatest proportion of the folks using GreenSock tools, it just isn't practical to develop a lot of these classes in AS2 as well. Don't worry - I've been updating the core classes as necessary, so I'm not saying that I'm dropping all support for anything AS2 - I'm just not actively porting every AS3 class to AS2.

 

Concerning the other classes, yeah when I mentioned those other classes I left out the other obvious AS3 specific ones, on some of the ones I did post it just was not as clear concerning the absence of AS2 versions. On certain ones the features seemed relative to each language. For example the "SoundTransformPlugin" seems relative to both AS2 and AS3, Tweener and McTween each have such a feature for both languages for example and your version seems relative to each language as well. The "motionPaths and associated plugins" look awesome and also seem relative to each language, concerning the concept, math involved, etc.. but yes those are a larger number of classes to port and be available to each language, but still seem relative. AS2 is certainly loosing its significance but I think it will still be around for quite some time to come. Unfortunately in certain cases, legacy, device/platform dependency, etc.. AS3 is not always an option 100% of the time. So its nice to have as close of a version to version code base as possible which is what you seem to strive to provide. I don't doubt your busy, maintaining and moving forward the most popular tweening platform. I certainly appreciate all you do Jack, I hope to continue to be a "Shockingly Green" member and support your efforts.

 

Again if you could please update things to include the Positions2DPlugin that would be awesome. Thanks again Jack, wonderful work you provide, keep up the great work.

Link to comment
Share on other sites

Hello again...

 

I think I found the first bug working with SteppedEase. Let your .FLA have 24 frames per second, you have your mc on stage and you want it to move once every 3 frames (24 * 3 = 72)

 

TweenMax.to(mc, 72, {x:250, useFrames:true, ease:SteppedEase.create(5), onUpdate:onUpdate});

function onUpdate():void {
       trace("this is not your 3-frame interval");
        }

 

 

Clearly, the onUpdate function is being triggered by frame changes and not for every 3 frames – in other words, it is not being triggered when mc changes x position.

I suppose this happens if you are actually using the Timeline within your .FLA, Any thoughts?

Link to comment
Share on other sites

That's not a bug - that's the intended behavior. Technically the tween is being updated; Its "currentTime" value is being changed (and "progress" for TweenMax tweens). If TweenLite/Max were to check the values on every update after the ease is applied and see if the old values matched the new values and only call the onUpdate when they don't match, that would significantly slow everything down. Plus it would introduce potential inconsistencies like what if a single tween is tweening both x and y properties but during one particular update x changes but y doesn't - should it call onUpdate? Probably, but then folks could say that technically x wasn't updated.

 

It should be relatively easy to get the behavior you're after like:

 

TweenMax.to(mc, 72, {x:250, useFrames:true, ease:SteppedEase.create(5), onUpdate:onUpdate});

var xPrev:Number = mc.x;
function onUpdate():void {
   if (xPrev != mc.x) {
       trace("value changed");
       xPrev = mc.x;
    }
}

 

Or feel free to track the tween's "ratio" property to see when it changes.

Link to comment
Share on other sites

I had already tried this method of relying on conditional comparisons on some MovieClip's position, but the thing is, sometimes you are not tweening coordinates but other properties.

 

I see two alternatives to this, unfortunately, intentional behaviour:

 

a – Using some kind of "property changed" Event but this is way out of my actual knowledge, anyone knows of custom events running around the web?

b - Using the "ratio" property as mentioned, but this might seem a little too complicated for determining frame intervals, always requiring by-frame divisions, modulo operations, rounding, etc. I see this as overkill, but perhaps I didn't really understand what you mean, Greensock, by saying that I could

track the tween's "ratio" property to see when it changes.

 

I say this because, of course, this property changes in tandem to frames, so we go back to the beginning of alternative b. Please clarify this point, if I didn't understood correctly.

 

Thank you very much...

Link to comment
Share on other sites

A tween's "ratio" property basically reports the amount of change according to the ease at the given currentTime. Since it is essentially tied to the ease, you can use that in your scenario here because it will only change when the ease result does. It should be as simple as:

 

var tween:TweenMax = new TweenMax(mc, 72, {x:250, useFrames:true, ease:SteppedEase.create(5), onUpdate:onUpdate});

var ratioPrev:Number = 0;
function onUpdate():void {
   if (ratioPrev != tween.ratio) {
       trace("values changed");
       ratioPrev = tween.ratio;
    }
}

 

Heck, you could even create a plugin that would manage this sort of thing for you so that your syntax would be easier like:

TweenMax.to(mc, 1, {x:250, ease:SteppedEase.create(5), onChangeRatio:myFunction});

 

I don't have time at the moment to write that plugin for you, but it should be relatively easy. (I'm on a very tight deadline right now)

Link to comment
Share on other sites

I was about to change my last message as I've been experimenting with the "ratio" property. I did settle for something similar to your proposition.

 

I've been checking your plugins with the hopes of writing this onChangeRatio feature myself, but I'm afraid of ruining your architecture with my absolute lack of proper knowledge. I'll be checking here if you end up writing this plugin, for the sake of others as well, but I understand of course that you are now busy, end of the year, etc.

 

Thanks anyways for your permanent willingness to help, and to solve. Good luck.

Link to comment
Share on other sites

I've been checking your plugins with the hopes of writing this onChangeRatio feature myself, but I'm afraid of ruining your architecture with my absolute lack of proper knowledge. I'll be checking here if you end up writing this plugin, for the sake of others as well, but I understand of course that you are now busy, end of the year, etc.

Wish granted. I attached the OnChangeRatioPlugin in AS2 and AS3. Crack 'em open and see how simple the code actually is - should add very little kb to your project and it's very efficient in terms of CPU usage too.

Link to comment
Share on other sites

Eternal gratefulness to you,

 

I just wanted to add my own (obtuse) way of dealing with the inherent limitations of this callback method, i.e. no parameter availability, in order to reuse the onChangeRatio plugin for different tween instances:

 

var pic:Picture = new Picture();
doTween(pic, 24, true);

doTween(p:Picture, delay:int, frame:Boolean):void {

var tween:TweenLite = new TweenLite(p, delay, {useFrames: frame, x:500, onChangeRatio: function() { trace(p.x)}, ease:SteppedEase.create(12)});

}

 

Hope this helps.

Link to comment
Share on other sites

Actually, I just updated the plugin so that it always passes one parameter - a reference to the tween. So your code would look more like this:

 

TweenLite.to(pic, 24, {useFrames:true, x:500, onChangeRatio:changeHandler, ease:SteppedEase.create(12)});
function changeHandler(tween:TweenLite):void {
   trace(tween.target.x);
}

Link to comment
Share on other sites

Are you talking about an AS2 version?

 

I'm not sure it's worth putting the plugin in the main release (download zips on the main site). If I get several requests, I'll do it though. Just seems so specialized and I'm a little wary about support requests and folks asking about "can we also add ____ feature to it?" :)

 

I've attached an AS2 flavor for you.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...