Animating on keydown

[jundo12]

I would like to animate between 2 png images when the W button is pressed on the keyboard and when W button is released, the animation stops and starts again when the W button is pressed again, etc. here's the thing i'm trying to animate *the figure in the scene
http://thelivingmoon.com/undomiel/game/homes/

[jundo12]

to clarify: press w and hold it down, and as long as it is held down, the character animates between two png images. it doesn't otherwise have to be animated. like it doesn't have to animate left or right movement or forward movement, it just has to animate between 2 pngs in a loop, as long as the w button is held down. the effect should be that it looks like it's walking from behind, in 3rd person perspective.

[jscheuer1]

Well, a certain portion of that would depend upon what the other image is. If you can supply it, I can more easily show you how to animate it. But the basics of what you ask are pretty simple (using jQuery because it's already on the page). First give the image a unique id:

<img id="venusimage" src="venusfback.png">

Use this code (place it after the other scripts in the head of the page):

<script type="text/javascript">
jQuery(function($){
	var wtimer, wstate = false, wisdown,
	venusim1 = 'venusfback.png',
	venusim2 = 'venusfbackmoving.png';
	$(new Image()).attr('src', venusim2);
	function changevenusimage(){
		var venus = $('#venusimage')
		if((wstate = !wstate)){
			venus.attr('src', venusim2);
		} else {
			venus.attr('src', venusim1);
		}
		wtimer = setTimeout(function(){changevenusimage();}, 500);
	}
	$(document).on('keydown keyup', function(e){
		if(String.fromCharCode(e.keyCode).toUpperCase() !== 'W'){return;}
		if(e.type === 'keyup'){clearTimeout(wtimer); wisdown = wstate = false; $('#venusimage').attr('src', venusim1); return;}
		if(!wisdown){changevenusimage(); wisdown = true;}
	});
});
</script>

Notice the two venusim vars highlighted. Set the first as the current (beginning) image, and the second one to the other image you will be using.

Any questions or other issues, feel free to ask, but please provide the other image to make it easier for me to see it in action.

[jundo12]

thanks! i don't have the other image made for the animation yet. it's not entirely clear if 2 will be enough, but i'm hoping it is because that's already a pretty big image to animate. i'm guessing it'll need 3.

1) the starting image,
2) with left arm swung forward, right arm swung back, right shoulder up, left shoulder down and head leaning left,
3) right arm swung forward, left arm swung back, left shoulder up, right shoulder down and head leaning right.

erm, theoretically. lol but would be nice if i could get away with only using 2. but 3 seems the more natural state. resting, active, active, etc

does that mean we need one more image reference in the script? and do i need to give the other images IDs as well?

[jundo12]

lol oh boy. it works! but i think it needs an animation doctor lol

http://thelivingmoon.com/undomiel/game/homes/

one more frame between those two positions might do the trick. that is funny, though. snappy!

[jundo12]

k the images are (so far lol).

http://thelivingmoon.com/undomiel/ga...venusfback.png
http://thelivingmoon.com/undomiel/ga...ackmoving1.png
http://thelivingmoon.com/undomiel/ga...ackmoving2.png

only her upper torso is being animated cause the rest is below the window frame

[jscheuer1]

You can now have as many images as you like:

<script type="text/javascript">
jQuery(function($){
	var wtimer, wstate = 0, wisdown,
	venusim = ['venusfback.png',
		'venusfbackmoving1.png',
		'venusfbackmoving2.png'],
	$venus = $('#venusimage');
	$.each(venusim, function(i, im){
		i && $(new Image()).attr('src', im);
	});
	function changevenusimage(){
		$venus.attr('src', venusim[(++wstate) % venusim.length]);
		wtimer = setTimeout(function(){changevenusimage();}, 500);
	}
	$(document).on('keydown keyup', function(e){
		if(String.fromCharCode(e.keyCode).toUpperCase() !== 'W'){return;}
		if(e.type === 'keyup'){clearTimeout(wtimer); wisdown = wstate = 0; $venus.attr('src', venusim[0]); return;}
		if(!wisdown){changevenusimage(); wisdown = true;}
	});
});
</script>

[jundo12]

thanks! so i just put the name in up top?
isn't she moving a bit fast? have any idea what the command in the script would be for movement speed? is it rotation?

[jscheuer1]

If you mean to add images and you mean here:

	venusim = ['venusfback.png',
		'venusfbackmoving1.png',
		'venusfbackmoving2.png'],

Then yes. Just make sure the first one is the original one as it is now, the one that the image is hard coded to. And, in case you don't know, that's an array. In this case each entry must be quoted and separated from the others by a comma. the whole thing has to be between the [ and ] brackets. The comma at the end is outside the ] bracket, separating it from the next variable declaration on the next line and is not technically part of the array.

The speed is set by the 500 on this line:

wtimer = setTimeout(function(){changevenusimage();}, 500);

It's the number of milliseconds between steps. 500 is a half of a second. 1000 would be 1 second, 750 would be 3/4 of a second, etc.

It does seem a little fast to me too, a higher number (750, or 1000) will be slower. It can be any positive number. But of course, if it is too high, it will be too slow, or maybe even not appear to move at all.

[jundo12]

ah, sadly, it doesn't work in Chrome or Chromium based browsers like Opera or Maxthon. works badly in IE
apparently that's a browser specific javascript.