Using setInterval(...) to zoom a movieClip - --> Can I make the steps less jerky ?

I set up setInterval(...) to repeatedly increase the scale of a movieClip. This works fine, but is slightly jerky in motion (time-steps are not quite even)

setInterval(this, "blowUp", 50);

function blowUp( ) {
  var z:Number = theMovie._xscale;
  theMovie._xscale = theMovie._yscale = z + 0.1;
}

Could it be that the time taken to Zoom each step is beating against the timing of the Interval ?

How can I smooth out the steps ?
DonelsonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
You could determine the startTime of the interval, and set a duration. Then retrieve the time on any interval tick, and rather than incrementing at an even rate, look at the time passed since startTime.

I think you can use

var start = getTimer();
var duration = 10 * 1000; //10 seconds, is 10.000 miliseconds

//at each tick:
var elapsed = getTimer() - start;
if(elapsed > duration) {
  //done
} else {
  var progress = 100* elapsed/duration;
  //progress will hold a value in between 0 and 100, like a percentage.
}

-r-
0
DonelsonAuthor Commented:
Roonaan
Thanks. But is this done by Frame animation or by Interval animation ?

For a 40 mSec step, I think I could set the interval to, say 5 mSecs, and then trigger a zoom step if "elapsed" >= 37  ( allow +/- 3 )

Is that what you mean ?
0
DonelsonAuthor Commented:
( NOTE - Of course, if the PC "goes away" doing something else for a while, you're scrwd. )
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

RoonaanCommented:
I mean that you don't think in steps, but in terms of duration. Which amount of time does your animation have to complete.

The number of steps in that timespan can vary depending on the speed of your interval and application, but the animation always stops in lets say, 1 second.

If you then use a setInterval or a frame on(enterFrame) (or both) to update the zoom, doesn't realy matter.

-r-
0
DonelsonAuthor Commented:
Yes, I see.

But it's not the duration I am worried about, its Smoothing out the time between steps.

If you display a zoom step at 20, 21, 23, 21, 42, 21, 19, 22, 23

Then the "42" will appear on the screen as a Jerk-Jump in the zooming of the picture.

I want to remove the Jerks. (Don't we all !)
0
DonelsonAuthor Commented:
A purely time-based zoom animation seems to be beating against the Frame rate of the main movie.

If the setInterval is about the same as the Frame Rate time, then there are many occasions where a "frame" is skipped, making the animtaion hyper-jerky.
0
Aneesh ChopraCommented:
1.
interval duration is 50ms, which should be less....
for smooth animation, use following formulaa.

1000/fps of your movie..

thats mean if fps is 25, then it should be 20ms..


2.
scale value should increment by equal to one pixel atleast,
means, if movieClip is 100px than xscale increment should be 1%

here is the fixed code, if movie fps is 25 and movieSize is 100px..
---------
setInterval(this, "blowUp", 20);

function blowUp( ) {
  theMovie._xscale = theMovie._yscale += 1;
}
-----------

Rgds
Aneesh
0
Aneesh ChopraCommented:
YOU WROTE:
---------
A purely time-based zoom animation seems to be beating against the Frame rate of the main movie.

If the setInterval is about the same as the Frame Rate time, then there are many occasions where a "frame" is skipped, making the animtaion hyper-jerky.
---------

I just want to make this clear, flash animation runs on frame rate speed.
fps means, how many times FLash player have to repaint the whole stage in a second..
it does not matter is it a time-based animation or frame-based animation...

In simple words, if you have set the FPS to 1, means 1 frame per second...

and write a code to move a object by 2 pixels on every 50ms, you will see it moving after each second only because frame rate is 1...

it will move by 40pixels every second, you will see it moving 2 pixel every 50ms..

I hope it would be clear now

Rgds
Aneesh
0
Aneesh ChopraCommented:
TYPO correction:

it will move by 40pixels every second, you will not see it moving 2 pixel every 50ms..
0
DonelsonAuthor Commented:
Yes, so for smoothest animation, should I set my frame rate to: 1,000,000 ? (Just joking)

BUT... What frame rate should I use?  And if I use a high frame rate, e.g. 50 fps, should I use "onEnterFrame" to do the animation to Avoid Beating rythms against the   setInterval(...)

If I set the   setInterval (this, "foo", 1) -- then I see "foo" being called very quickly.  But if the animations are not shown on screen except per the frame rate, then HOW Do I Get the Smoooothest, Most Even timing between steps of the animation ?

Thanks
0
DonelsonAuthor Commented:
Currently, I have movie fps = 100

Here is the current code. Note that the left side, right side, top side and bottom side of thePic are expanding at DIFFERENT rates...
=========================
/*
      Blow up image -- TEST
*/

zoomDuration = 1000;
// r = [ 150,100,350,204 ];
r = [ 324, 53, 492, 141 ];
xL = r[0];
wOrig = r[2] - r[0];
t = 0;
//
function blowUp() {
      if (xL <= 0 ) {
            clearInterval(intID);
            return;
      }
      //
      trace(getTimer()-t);
      t = getTimer();
      //
      elapsedTime = getTimer() - startTime;
      amt = elapsedTime*elapsedTime / (zoomDuration*zoomDuration);  // slower start, faster end
      //
      xL = r[0] + amt * ( 0 - r[0] );
      yT = r[1] + amt * ( 0 - r[1] );
      xR = r[2] + amt * ( pic_w - r[2] );
      //
      zoom = (xR - xL) / wOrig; // Zoom is ratio of new rect width to old
      //      
      thePic._x = pic_x + xL - r[0] * zoom;
      thePic._y = pic_y + yT - r[1] * zoom;
      thePic._xscale = thePic._yscale = zoom * 100; // scale is zoom * 100
      //
}

function startZoom() {
      clearInterval(intID);
      intID = setInterval(this, "blowUp", 20);
      t = startTime = getTimer();
}

intID = setInterval(this, "startZoom", 1000);  // Keep thePic on-screen for one second Before Zooming.
stop();
0
DonelsonAuthor Commented:
Pay particular attention to the Accelerating "amt" -- Increases proportional to the SQUARE of the elapsed time.

So I cannot use  _xscale += 1 --- that would give a SQRT area expansion over time, which looks fast early, and very slow later on. NOT what I want.

The "amt" being the function of the SQUARE OF ELAPSED TIME  keeps the AREA expansion linear ( instead of just the xLeft & xRight expansion linear ) and make the zoom look more pleasing.
0
DonelsonAuthor Commented:
I think the animation MUST be sync'ed with the Frame Rate, and NOT via setInterval to make it smooth.

This is a REAL problem, because this animation will eventually be a separate SWF, and will therefore be dependent on the BRAIN-DAMAGED "master movie frame rate which cannot be changed".  If the master-movie has a low frame rate, then that will mess up the animation, won't it ?
0
DonelsonAuthor Commented:
From Macrodmedia "setInterval" documentation

=========
If interval is less than the SWF file's frame rate (for example, 10 frames per second [fps] is equal to 100 millisecond intervals), the interval function is called as close in time to the value of interval as possible. ... ... If the function being called initiates a change to visual elements, you should use the updateAfterEvent() function to make sure that the screen refreshes often enough. If interval is greater than the SWF file's frame rate, THE INTERVAL FUNCTION IS CALLED ONLY AFTER interval HAS EXPIRED  ---AND--- THE PLAYHEAD HAS ENTERED THE NEXT FRAME; this minimizes the impact each time the screen is refreshed.
=========

So, I am using "stop();" but I think the playhead is "still running" at the movie FPS...

And will the "updateAfterEvent()"  call work to improve it ?

This is too complex to program Without Expert Knowledge !
0
DonelsonAuthor Commented:
Adding

   updateAfterEvent( );

to the above script did NOT help any.
0
DonelsonAuthor Commented:
Using

  this.onEnterFrame = function ( ... )

to trigger the animation works more smoothly, especially if the FPS is 12 fps or less in the movie.  Unfortunately, 12 FPS makes the zoom look distinctly Step, Step, Steppy.

If the FPS is more than 12, you then often get glitches in the smoothness, even though NO setInterval or any trigger other than  onEnterFrame()  is being used which could beat against the   enterFrame.


0
Aneesh ChopraCommented:
REPLY on your following comments:
----------
Comment from Donelson
Date: 03/25/2006 10:16AM PST
----------------

"Yes, so for smoothest animation, should I set my frame rate to: 1,000,000 ? (Just joking)"
I prefer to keep 25-30 FPS

"BUT... What frame rate should I use?  And if I use a high frame rate, e.g. 50 fps, should I use "onEnterFrame" to do the animation to Avoid Beating rythms against the   setInterval(...)"

secondly, yes, I prefere onEnterFrame over setInterval to do animation...

if I would have some  calculation and show the result with fixed interval then I prefer to use setInterval....
For example:.. ticking clock...
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Aneesh ChopraCommented:
why dont you try this:
-------------
dynTween component is a shell for dynTweenMX tween engine v1.34
It allows you first to preview motion tween, and then apply it totally dynamically to movieclips.
The passed series of tweens can be looped by assigning the function which has called the dynTween method itself to the callback.
Also, dynTween does not use the caller mc's onEnterFrame, that is, you can apply dynTween to an mc which already has onEnterFrame event method assigned.
--------------

preview is also available here:
http://www.flashcomponents.net/components/preview/preview.php?id=280

download it here....
http://flashcomponents.net/components/sources/dynTweenComponent.zip
0
DonelsonAuthor Commented:
What is the driver-engine for this ?

Is it affected by main-movie frame rates, or any setIntervals, or streaming sounds ?

Is the animation done by the Flash engine, or by separate code ?

Thanks
0
DonelsonAuthor Commented:
I set up some terrible CPU-intensive tasks, and they did NOT make any difference to the un-even playback of the animation. So there must be some stupidity somewhere in the Flash engine, or the Mac or the PC or something.

The animation zooms into a 536 x 280 bitmap (under a 526 x 280 mask movieClip), so that's not so bad. Running flat out, each step of the zoom only takes around 4-8 milliseconds, so running at 25 fps (40 mSec per step) should NOT tax the Flash engine so much.

I have decided to Cut My Losses on this problem (2.5 days now) and just Go with the 25 fps Defined-FPS for the movie.

Thanks very much for your help, Aneesh !!!
0
Aneesh ChopraCommented:
What is the driver-engine for this ?
REPLY:  it is a prototype function.. uses onEnterFrame...

Is it affected by main-movie frame rates, or any setIntervals, or streaming sounds ?
REPLY: No.

Is the animation done by the Flash engine, or by separate code ?
REPLY: code is written in dynTween component first Frame...
0
DonelsonAuthor Commented:

----  REPLY: code is written in dynTween component first Frame...

So, this is just a series of calls to the Flash engine; it is not a separate engine?

Is the performance any better than (clever) animating in ActionScript?  

Will it be any smoother than using My Own 25-fps defined frame-rate to zoom the image movieClip ?

This is really the Only Part of the whole project which requires Smooooth, Even animation,  (except perhaps a smooth, quite-small-image, horizontal-scroll later on )
0
Aneesh ChopraCommented:
"So, this is just a series of calls to the Flash engine; it is not a separate engine?"
REPLY:
yes, it is only series of actionscript calls..

"Is the performance any better than (clever) animating in ActionScript?  "
REPLY:
obviously, optimized actionscript approach improves the performance....

"Will it be any smoother than using My Own 25-fps defined frame-rate to zoom the image movieClip ?"
REPLY:
Its on you, how optimized code you can write.....

understand it, expertise comes with experience... no short cut available....

0
DonelsonAuthor Commented:
Thanks, Aneesh.

I think I am mostly writing pretty good code now; pretty optimised, thanks to your help !
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.