Resize function loop problem

**althe3rduww** · 06-06-2006, 01:05 PM

I have a problem with the function I use in my flash movie that scales movie clips smoothly. The whole thing works correctly, however I quickly noticed that it is a cpu hog even when the site activity is idle. Basically the function that resizes the movieclip only seems to work with the method of onEnterFrame which means the function runs continuously regardless of user interaction and eats up cpu power.

I place the following function actionscript in the timeline. The function is:

Code:

function myScale(myTarget, xScale, yScale) {
	myTarget.onEnterFrame = function() {
		intX = myTarget._xscale;
		intY = myTarget._yscale;
		newX = xScale;
		newY = yScale;
		newSizeX = intX+((newX-intX)/4);
		newSizeY = intY+((newY-intY)/4);
		myTarget._xscale = newSizeX;
		myTarget._yscale = newSizeY;
	
	
		diffX = initX-this._x;
		posX = (posX+diffX/10)*0.9;
		diffY = initY-this._y;
		posY = (posY+diffY/10)*0.9;
		this._x += posX;
		this._y += posY;
	
	}
}

So in my flash movie if I want to resize a movie clip (named "movieclip" in this case) to 80% width by 80% height, I would put the following actionscript in a button.

Code:

myScale(this.movieclip, 80, 80);

Is there anyway to do this differently so the function is not running continuously or perhaps a different function all together. Basically I am looking for any solution that will get me the same effect without eating up cpu power when the site is idle.

To help better understand what the effect looks like, here is the current iteration of it on my site. http://www.flashevolved.com/glasstest/index.html

If you open up your performance monitor on your computer you will notice that even when you do not click anything the site will still use a large quanity of cpu power. The performance being the result of the function is also confirmed by changing the frame rate of the flash movie. When I reduced the frame rate to 10 the cpu power used when idle dramatically decreased but still remained in use.

I greatly appreciate the help of all the action script pros out there.

Thanks

**hum** · 06-06-2006, 01:32 PM

Hi
Couldn't view your example.....but this should work for you...

code:

function myScale(myTarget, xScale, yScale) {

	myTarget.onEnterFrame = function() {

		intX = myTarget._xscale;

		intY = myTarget._yscale;

		newX = xScale;

		newY = yScale;

		newSizeX = intX+((newX-intX)/4);

		newSizeY = intY+((newY-intY)/4);

		myTarget._xscale = newSizeX;

		myTarget._yscale = newSizeY;

		diffX = initX-this._x;

		posX = (posX+diffX/10)*0.9;

		diffY = initY-this._y;

		posY = (posY+diffY/10)*0.9;

		this._x += posX;

		this._y += posY;

		if (this._xscale<xScale+.09 && this._yscale<yScale+.09) {

			this._xscale = xScale;

			this._yscale = yScale;

			trace(this._xscale);

			trace(this._yscale);

			delete (myTarget.onEnterFrame);

		}

	};

}

**althe3rduww** · 06-06-2006, 02:56 PM

Thanks, I will give that a shot now and let you know if that works.

**althe3rduww** · 06-06-2006, 03:02 PM

Well its definatly a step in the right direction. It solves that issue of the cpu usage which is great!

The new thing I have to work out yet is this.

When the movie clip is being sized from 80,80 to lets say 40,40 it works great and is smooth. but going the opposite direction it just jumps to that size as opposed to smoothly changing to that size. It never did that in the previous function but I imagine because its due to the calculation that is judging when to get rid of the function now.

If you happen to know why that is happening please let me know, otherwise I will work to solve it. I greatly appreciate you help. This is definatly moving in the right direction.

**althe3rduww** · 06-06-2006, 03:12 PM

After further evaluation I have found that the jump to scale as opposed to the smooth scaling happends when the new size is larger in both the x and y dimensions.

Meaning that if I scale a movie clip from 80,80 to 40,40 its smooth and if I scale a move cip from 40,90 to 80,80 its smooth as well. But if I scale a movieclip from 40,40 to 80,80 it instantly jumps to 80,80.

So to recap the scaling jumps instantly to the new size without smooth scaling if both the x and y sizes are larger on the finishing size.

**hum** · 06-06-2006, 05:27 PM

Hi

This should do it!
Autosizer Example:
Have a movieclip named ...mc on stage,
and a button named....btn.
Then this on the timeline....

code:

function myScale(myTarget, xScale, yScale) {

	intX = xScale;

	intY = yScale;

	myTarget.onEnterFrame = function() {

		if (this._width>xScale && this._height>yScale) {

			this._width -= 8;//speed

			this._height -= 8;

			if (this._width<intX && this._height<intY) {

				this._width = intX;

				this._height = intY;

				trace("W="+this._width+"H="+this._height);

				delete (myTarget.onEnterFrame);

			}

		} else if (this._width<xScale && this._height<yScale) {

			this._width += 8;

			this._height += 8;

			if (this._width>intX && this._height>intY) {

				this._width = intX;

				this._height = intY;

				trace("W="+this._width+"H="+this._height);

				delete (myTarget.onEnterFrame);

			}

		} else if (this._width<xScale && this._height>yScale) {

			this._width += 8;

			this._height -= 8;

			if (this._width>intX && this._height<intY) {

				this._width = intX;

				this._height = intY;

				trace("W="+this._width+"H="+this._height);

				delete (myTarget.onEnterFrame);

			}

		} else if (this._width>xScale && this._height<yScale) {

			this._width -= 8;

			this._height += 8;

			if (this._width<intX && this._height>intY) {

				this._width = intX;

				this._height = intY;

				trace("W="+this._width+"H="+this._height);

				delete (myTarget.onEnterFrame);

			}

		}

	};

}

//example width and height settings....edit to suit!

btn.onPress = function() {

	myScale(mc, 60, 120);

};

**althe3rduww** · 06-06-2006, 06:32 PM

I gave that new one a try and although it resizes it doesn't do it very smoothly or with any acceleration, although that may be adjustable the other issue is that the _width and _height seem to be off because a setting of 120,60 makes the movie clip about the size of a 12 point letter 'A'.

On the upside it does accomplish resizing both directions without hurting the cpu usage, but unfortunatly the sizing and smoothness of function seem to be issues.

I also want to mention that I don't want to come off as too negative, I greatly appreciate the help you have given so far. It really is helping tremedously. I just want to be honest with the results as to what I am looking for. Oh and incase you were having trouble seeing my site before I put up a flash detector which may have been causing the issue for you. I now put up a page for that detector which will make sure you have flash player 8 so you should be to now see where your contribution is going towards.

http://www.flashevolved.com/glasstest/index.html

I will continue to play with the function you submitted most recently to see if I can achieve the results I am aiming for (basically the smoothness of my previous function with the efficiency of the newest function). If you come up with more ideas or ways to rewrite that function I would love to hear em. And ofcourse if i come up with a solution I will post up here with the solution.

**hum** · 06-06-2006, 07:22 PM

Aah ok....Now i have seen your site...then this prototype is smoother and less code...

BTW....nice site!

code:

MovieClip.prototype.sizer = function(w, h) {

	this.onEnterFrame = function() {

		this._width += (w-this._width)/5;

		this._height += (h-this._height)/5;

		if (Math.abs(w-this._width)<1) {

			this._width = w;

			this._height = h;

			delete this.onEnterFrame;

		}

	};

};

btn.onRelease = function() {

	mc.sizer(20, 100);

};

**althe3rduww** · 06-06-2006, 08:24 PM

that one seems to work very well. I am evaluating its cpu usage, but so far so good.

**althe3rduww** · 06-07-2006, 09:33 AM

That last script seems to work well. The only hiccup I am still working out with it is I can't seem to simply call the function in the timeline. Meaning the resizing only seems to work as an action of a button. I have tried several options but the only one that seems to work is onEnterFrame which is not what i want to use since it utilizes cpu power constantly.

onEnterFrame = function() {

mc.sizer(20, 100);

};

If I just say mc.sizer(20,100); by itself on the timeline nothing happends.

I will keep plugging away at that, if you know what the syntax is to have that call from the timeline though please let me know.

Thanks

**althe3rduww** · 06-07-2006, 09:43 AM

Lol silly me. I forgot to identify the movieclip name before the onEnterFrame statment. It all works great now.

Hum You Rock!

**hum** · 06-07-2006, 09:47 AM

code:

MovieClip.prototype.sizer = function(w, h) {

	this.onEnterFrame = function() {

		this._width += (w-this._width)/5;

		this._height += (h-this._height)/5;

		if (Math.abs(w-this._width)<1) {

			this._width = w;

			this._height = h;

			delete this.onEnterFrame;

		}

	};

};

mc.sizer(20, 100);

**althe3rduww** · 06-07-2006, 03:05 PM

Believe it or not... just using

Code:

mc.sizer(20, 100);

Doesn't work on the my main timeline but it does inside one of the movieclips.

Ofourse at that point I need to point to the outside movieclip by saying

Code:

_parent.mc.sizer(20,100);

While that resizes the movieclip it no long is smooth (using the function). Even copying the function to keyframe inside the movieclip does not bring back the smooth movement.

All I can say is that sometimes flash does somethings I can't quite explain.

**hum** · 06-07-2006, 03:22 PM

Can you email or post your fla?

**althe3rduww** · 06-07-2006, 03:34 PM

Sure, since the fla is 7mb I will post a link to so I don't clog your email. I will have a link here in about 2 hours when I get home from work.

**althe3rduww** · 06-07-2006, 06:17 PM

Ok here is the link to the fla as promised. Take a look.

http://homepage.mac.com/althe3rduww/finished3c.fla

**hum** · 06-07-2006, 07:51 PM

Ok i see your fla....can you explain in more detail what it is you are trying to do.........

**althe3rduww** · 06-07-2006, 08:06 PM

Gladly,

Basically I wanted to have a site in which the content was encased in one window and if you clicked the navigation to go to another part of the site the window would simply resize to the new size and load the content.

In order to get the effect of frosted glass you need a transparent graphic and a blurred background behind the glass. Normally one could accomplish this effect by just having two images (one blurry one clear) and just a mask to reveal the blurred one under the graphic of the glass. However, I wanted to do it dynamically so any movement (whatever that may be) can be blurred as well. You will notice this by when the butterfly flies behind the window. The butterfly isn't necesarily permanant but it gets the point across for the effect I am going for. Thankfully figuring out the blur part wasn't too bad and that also explains why I have a flash detector that checks for flash 8.

As you will notice by the most recent example that the cpu usage is extremely low now when their is no movment going on. A little cpu is used when the butterfly flies past, and much more is used when the window transitions from one size to the next. Which means as of so far the design is working. You will notice that the navigation up top changes sizes on certain sections of the site. This will be used to reveal a submenu for that particular section. (ie. when clicking gallery you will then be presented with options for viewing the web, photo, or print sections of the gallery).

The main idea of the site is it will be a new site to showcase my portfolio so that may help explain the current simplified nature of the site.

Let me know if you have more questions about the fla. I also want to offer that anyone who wishes to use the code on the site to attempt to create their own site is ofcourse welcome to do so. I always want to help out my fellow web designers.

**hum** · 06-08-2006, 09:19 AM

Hi
Well the autosizing looks great on your site now though i am unsure as to how you would want to use this involving a blur effect?.......I have yet to learn about the Blur filter!

**althe3rduww** · 06-08-2006, 10:10 AM

Yea, thanks to your help the autosizing seems to work just as I would want it.

I have been spending the last couple of hours on it trying to refine other parts of the site so its even more cpu efficient. Pretty soon I will be ready to start adding more effects and content.

To explain the blur effect usage. Basically if you want to have a nearly transparent object seem seperated from the objects behind it you need to create some levels of depth. One of these is a drop shadow, this will start to give the illusion of the glass window behind closer to the user and requiring attention. But to really enhance that effect you should blur what is behind the window. Now, whatever content is on the window is brought out much more to the users eye. And in my site, by doing it dynamically I end up with a very interactive blur that will literally blur anything I put in the background. (ie. motion, pictures, video)

Thread: Resize function loop problem

Thread Tools

Display

Resize function loop problem

Posting Permissions