Float Simulator... help with mouse control of movie clip

[zacharyfolk]

Can someone help with my movie?? I am trying to have the mouse control the movement of a movie clip. Is there a way to limit the amount the mouse can move the clip to prevent it from being pulled off the screen. I want all of the edges of the clip to be the limits that the movie can be moved. Kind of a float simulator.. check out what I mean here:



http://www.folkphotography.com/index...h/rainier.html


Here is the script I used:


onClipEvent (enterFrame) {
//x movement
mx=_root._xmouse;
if (mx<_x) {
dx=_x-mx;
}
else {
dx=mx-_x;
}
moveSpeedx=dx/10;
if (mx<_x) {
_x=_x-moveSpeedx;
}
else {
_x=_x+moveSpeedx;
}
//y movement
my=_root._ymouse;
if (my<_y) {
dy=_y-my;
}
else {
dy=my-_y;
}
moveSpeedy=dy/10;
if (my<_y) {
_y=_y-moveSpeedy;
}
else {
_y=_y+moveSpeedy;
}
}


Any suggestions??

Thanks!

[skyeflye]

Hi there.

That's a pretty interesting image. You must have the "slowly zooming in" effect as a different part of the Flash document...looks like a motion tween perhaps?

Anyway, I think that if you just add this to the end of your script [but inside the onClipEvent(enterFrame)], then you will get exactly what you asked for:

	if (this._x > 0) {
		this._x = 0;
	}	
	if (this._y > 0) {
		this._y = 0;
	}
	if (this._x + this._width < Stage.width) {
		this._x = this._width + Stage.width;
	}
	if (this._y + this._height < Stage.height) {
		this._y = this._height - Stage.width;
	}

However, you may get a better "feel" for your movie if you just use the below code in its entirety. The basis for motion in the code below is kind of opposite the way you had it. In the below script, moving the mose to the top of the stage will actually move the movie clip down, instead of up. And movement towards the right by the mouse will result in a left-ward motion for the movie clip. It seems counter-intuitive at first, but this setup is actually a little more user friendly in my opinion. Here's the entire script I recommend you try:

NOTE: The only limitation of this script would be if the movie clip you placed it on has a _width that was less than Stage.width or if its height was less than Stage.height. Because of this, the first few lines of code [the stuff inside the onClipEvent(load)] will scale the movie clip up to fill the stage, but only if the movie clip isn't already big enough to do so on its own.

onClipEvent(load) {

	// This code assures that the movie clip has larger width and height dimensions than the Stage does
	// It scales up the movie clip proportionally until BOTH its width and height are larger than the stage
	while (this._width < Stage.width || this._height < Stage.height) {
		this._xscale += 1; 
		this._yscale += 1; 
	}

} // end onClipEvent(load)



onClipEvent(enterFrame) {
	
	// Use this variable to set a maximum "speed limit" for the motion
	maxSpeed = 20;
	
	// Use this number to adjust the overall "responsiveness" (speed) of the motion
	speedMultiplier = .08;
	
	/*
	First, we calculate the target position for the clip.
	The target postition is based mainly on the (x,y) position of the 
	mouse on the stage, but it also takes into account the dimensions of this movie clip.
	*/
	targetPositionX = -1 * (_root._xmouse / Stage.width) * (this._width - Stage.width);
	targetPositionY = -1 * (_root._ymouse / Stage.height) * (this._height - Stage.height);

	// Next we calculate the distance from the targetPosition(s) 
	distanceFromTargetX = Math.abs(this._x) - Math.abs(targetPositionX);
	distanceFromTargetY = Math.abs(this._y) - Math.abs(targetPositionY);
	
	/*
	Then we calculate the "speed" at which the movie clip will move. This is actually 
	calculating the distance (in pixels) that the movie clip will move this frame.
	*/
	speedX = (distanceFromTargetX * speedMultiplier);
	speedY = (distanceFromTargetY * speedMultiplier);
	// Reinforce the speed limit with these two if conditionals
	if (speedX > maxSpeed) {
		speedX = maxSpeed;
	}
	if (speedY > maxSpeed) {
		speedY = maxSpeed;
	}

	/* 
	Then we actually move this movie clip based on the following logic:
	"If this movie clip is not already at its target position, then move 
	it toward the target position by speedX and speedY calculated above."
	*/
	if (this._x != targetPositionX) {
		this._x += speedX;
	}
	if (this._y != targetPositionY) {
		this._y += speedY;
	}

	/* 
	Finally, the following code will make sure the movie clip always fills the stage.
	*/
	if (this._x > 0) {
		this._x = 0;
	}	
	if (this._y > 0) {
		this._y = 0;
	}
	if (this._x + this._width < Stage.width) {
		this._x = this._width + Stage.width;
	}
	if (this._y + this._height < Stage.height) {
		this._y = this._height - Stage.width;
	}

	// This statement helps make the animation smoother under certain conditions.
	updateAfterEvent();

} // End onClipEvent(enterFrame)

I tried to comment the code to help with understanding it, but let me know if you have any questions.

Also, you may benefit from increasing the framerate of your movie a little. 30 Frames per second is usually pretty reasonable these days for most stuff, and it could help make the movement look a little smoother.

Take care,

-skyeflye

[zacharyfolk]

wow..thank you so much for all the info.. I am going to chew on this for a while and will bug you if I come up with any more questions. This is super helpful!! THANKS!

[skyeflye]

You are very welcome.

I forgot to mention that the above script is adapted from this site I did a few months back:

http://www.ourdocuments.gov

The only reason I wanted to point this site out is to potentially give you a few more ideas about how you could create an interface for browsing images. There are much cooler interfaces out there than this, but it is what it is.

Also, I apologize in advance to anyone reading this thread, but I can't tell anybody "how to make" a site like the one at the URL above. The short answer is, lots of PHP, lots of session variables, lots of dynamically-generated Flash content, etc...way too much to explain in this forum. Sorry, but I've just had lots of newbs (which I was, and still am in many, many! regards) ask me "How did you make that site?!!" and then actually getting mad at me when I can't "just tell them how". hehe.

Study hard my fellow newbs!!!

Take care,

-skyeflye

[zacharyfolk]

wow!.. that is a great site, very original and user friendly. So... how'd you do it

[zacharyfolk]

That site has an incredible amount of information. What a great link!

[skyeflye]

Yeah, once you start reading it, the content on that site really is more impressive than either the design or the technical implementation...which is a good thing because without good content, even a well designed site is only entertaining for about 60 seconds.

It was an enjoyable project to work on too. The site (and the materials available from it) actually get used by a lot of teachers to help teach their students American History/Social Studies, or whatever they're calling it nowadays. So it's a good feeling to have been part of something that's having that kind of impact.

The client basically gave me a big pile of unorganized crap, and I turned it into that site. It's seems like such a dry subject matter at first (American Historical Documents), but the moment you start to read any of the descriptions of the documents, it starts to get interesting...at least if you live in the USA it does. The high-res PDF downloads of the document pages are really cool to zoom in on. I'm relatively pleased with how the site turned out, and we've been receiving good feedback on it as well.

Thanks for the compliments!

Take care,

-THEO-

[zacharyfolk]

o.k. I tried your scripting but did not get quite the results I wanted...

http://www.folkphotography.com/index.../rainier2.html

i like the reverse mouse for the control... much smoother !

but...
for some reason the movie clip is still not bounded to the stage

and ...I am just shy of being able to reach the top of the mountain
i will keep workin'

[skyeflye]

I'm not sure, but I think you just need to orient the JPEG image so that its X and Y positions are both zero, inside the movie clip it is within.

Make it so that the little white circle that represents the coordinate (0,0) inside the movie clip is at the top left corner of the JPEG image by selecting the JPEG image and setting both its X and Y positions to zero in the Properties Inspector.

If you don't know what I mean, then just give me a URL to download your FLA and I'll get it straightened out, and you can see what I did.

There also may be some kind of issue with the slow zoom in effect you are using. Unless I knew how that effect was implemented I couldn't really say though.

-skyeflye

[zacharyfolk]

o.k. i give up .
Here is the fla:

http://www.folkphotography.com/index...h/rainier2.fla

i tried putting x / y to zero and it was a little better but still pretty messed up... it bounces all over the place and i can not fly to see the summit

the slow zoom is a tween occuring in the movie clip... the movie clip contains two instances of one graphic the second resized about 400%

-zac

[zacharyfolk]

nevermind.. i think i figured it out

thank you so much for your help!

[skyeflye]

That's great!!!

I looked at it a bit, but was going to spend more time tomorrow.

You definitely need to increase the frame rate of your movie. This will make the animation smoother!! Right now your movie is set at 12 frames per second (FPS) which is the default for new Flash documents. You should set it to be 30 FPS.

Of course, after you do this, you will need to make the zooming animation take up more frames that it currently does in order to keep the same duration and rate of change.

Take care,

-skyeflye

[zacharyfolk]

Doh! Nuts! i'm back... still confused

the image will not stay on the stage.. it is not bound by the left or right:

http://www.folkphotography.com/index...flash/end.html

here is the source:

http://www.folkphotography.com/index.../flash/end.fla

here is the other, similar one I am working on:

http://www.folkphotography.com/index...flash/fly.html

thanks for your help skyeflye (kind of ironic thats your name eh?.. you were meant to be harassed about my movie)

[skyeflye]

Hey Zachary,

Sorry, but I basically just re-did your movie from scratch without any tweening at all. So, all the alpha fading and scaling is now due to actionscript instead of motion tweens. You can download it here:

http://www.skyeflye.com/ranier/skyeflye_ranier.fla

There are three movie clips on the stage, each on its own layer.

1. ranier_mc
2. devo_mc
3. text_mc

Each one of these three movie clips has actionscript on its instance.

The script on ranier_mc is pretty much the same as before except I added some code that makes it scale up, then down. There are some new variables at the top that control the rates at which it scales up and down. You can make it scale down faster than it scales up. These variables are pretty self-explanatory, but let me know if you have any questions about these.

Now, when you publish-preview the movie (press F12 as opposed to shift-Enter) you will see that the other two movie clips (devo_mc and text_mc) will fade into existance. The question you are probably asking is: "What is determining the point in time when each of these movie clips starts to become visible?"

Good question.

Back in Falsh, if you click on either of these two movie clips, you will see in the actions panel a bunch of new actionscript. Most of the actionscript is identical inside both of these two movie clips )text_mc and devo_mc).

In either of these movie clips, notice the variable named: "alphaIncreaseAt".

This variable is kind of hard to explain, but I'll try to. This variable controls when this movie clip begins to fade up. It is based on _xscale the ranier_mc though. So, when the movie first begins playing, the ranier_mc begins scaling up. If the "alphaIncreaseAt" variable is set to .6 this means:

"When he ranier_mc is 60% finished with its scaling up..." or "When the ranier_mc is 60% of its maxScale value, then make *this* movie clip start to fade up."

So, if you wanted to have the devo_mc appear sooner, you could set the "alphaIncreaseAt" variable on devo_mc to .5 or .2.

The text_mc has the same variable (alphaIncreaseAt) on it. It does the exact same thing, but with regard to the text_mc.

This is really difficult for me to explain without drawing a diagram, but hopefully you can figure this out by tweaking these two values and seeing what happens during playback.

There are some other values in each the text_mc and devo_mc that dtermine such things as how quickly they each alpha fade up, and what they alpha fade up to. Currently devo_mc is set to fade up to an _alpha of 80.

So, all of this could probably have been made more compact or efficient or whatever, but I think it's a little easier to understand and use in its current form.

Let me know if you have any questions.

Take care,

-skyeflye

[zacharyfolk]

wow.. again thank you so much! I was all excited to see your work but unfortunatly I can not open this fla... it says unexpected file format after Flash starts up




Sorry to keep bugging you.. if you ever need a favor maybe I can help. . .

-Zac

[skyeflye]

What version of Flash do you have?

I'm using MX 2004, so I can probably save it an a previous format for you.

-skyeflye

[skyeflye]

OK, I just re-saved it in Flash MX format (instead of Flash MX 2004 format).

It didn't need any of the MX 2004 capabilities anyway, so it is really identical.

Same URL:

http://www.skyeflye.com/ranier/skyeflye_ranier.fla

You can just overwrite the last one you downloaded.

-skyeflye

[zacharyfolk]

that is awesome! thank you so much. you should email me your address.. I would like to send you a print as a way of thanking you for your help.

-Zac

[skyeflye]

Oh wow! You don't need to do that! I am glad you like it the movie! But since you offered, I would like to have one of your prints. I'll send you an email.

How in the world did you get Devo (is that the dog's name?) to stand like that? He's not taxidermied or something is he? That's a great shot!

Hopefully by messing around with the values of the various values a little bit and seeing the results each time, you'll be able to thoroughly understand the code I wrote out and perhaps apply the tactics used in it to the other movies you're working on. And of course, you could just swap out the JPEGs, change the text, and you'd have a different movie of the same ilk.

I do want to say though that I am sure there are much (much!) "better" ways of accomplishing the same end result. For example, I don't know how to use that "addListener()" function that Flash has (yet), but I'm pretty sure it could have been used in this movie...maybe not though...oh well...

Take care,

-skyeflye

[skyeflye]

Hey, I just now went to your web site. You have a lot of really cool photos in your portfolio.

You don't need me to tell you this, but you are really good...seriously!