Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2006-03-25
24
Medium Priority
?
744 Views
Last Modified: 2011-09-20
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 ?
0
Comment
Question by:Donelson
  • 15
  • 7
  • 2
24 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 16287598
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
 

Author Comment

by:Donelson
ID: 16287681
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
 

Author Comment

by:Donelson
ID: 16287685
( NOTE - Of course, if the PC "goes away" doing something else for a while, you're scrwd. )
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 49

Expert Comment

by:Roonaan
ID: 16287696
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
 

Author Comment

by:Donelson
ID: 16287747
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
 

Author Comment

by:Donelson
ID: 16288108
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
 
LVL 34

Expert Comment

by:Aneesh Chopra
ID: 16288175
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
 
LVL 34

Expert Comment

by:Aneesh Chopra
ID: 16288202
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
 
LVL 34

Expert Comment

by:Aneesh Chopra
ID: 16288204
TYPO correction:

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

Author Comment

by:Donelson
ID: 16289755
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
 

Author Comment

by:Donelson
ID: 16289777
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
 

Author Comment

by:Donelson
ID: 16289810
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
 

Author Comment

by:Donelson
ID: 16289821
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
 

Author Comment

by:Donelson
ID: 16289884
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
 

Author Comment

by:Donelson
ID: 16289907
Adding

   updateAfterEvent( );

to the above script did NOT help any.
0
 

Author Comment

by:Donelson
ID: 16290003
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
 
LVL 34

Accepted Solution

by:
Aneesh Chopra earned 750 total points
ID: 16291761
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
 
LVL 34

Expert Comment

by:Aneesh Chopra
ID: 16291801
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
 

Author Comment

by:Donelson
ID: 16293103
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
 

Author Comment

by:Donelson
ID: 16293116
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
 
LVL 34

Expert Comment

by:Aneesh Chopra
ID: 16293143
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
 

Author Comment

by:Donelson
ID: 16293155

----  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
 
LVL 34

Expert Comment

by:Aneesh Chopra
ID: 16293217
"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
 

Author Comment

by:Donelson
ID: 16293221
Thanks, Aneesh.

I think I am mostly writing pretty good code now; pretty optimised, thanks to your help !
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question