A problem with my first interactive HTML5 project; Please help!

[MWX]

Hi Guys,

I am new to interactive HTML5 stuff, so I'm hoping you good folks can help me with this. I'm no professional developer, but I am a professional audio editor. I have a little bit of experience with HTML code and javascript/c# and enjoy working on small projects as a sideline.

To make my first interactive/game-like project a bit easier, I decided to try Google Web Designer. I had some problems with the first attempt, so this time, I coded the CSS content and some other bits myself. The problem I am stuck on now is where I want a spritesheet animation to change play direction with a click event. I recreated the problem in a small project:

This is the outcome

When Reverse is clicked, I created a function event which adds reverseplay="" to the element which is a boolean attribute. When I add this in the HTML, then run it, it works, it changes the direction of the animation. But when I change it dynamically, it doesn't work. So how do you guys work around this kind of screen/GUI update problem?

To test if changing a different attribute works, I dynamically change loopcount="1" to loopcount="2", which works fine. So the Loop = 2 button makes the animation loop twice.

I appreciate any help with this; If you need to know anything else about the project, just ask.

Thanks

[harrywatson]

Not sure what google web designer does.

You could always try a True - False statement within your function.

function if reverse == true.        go in reverse

else if foward == true.       go forward.

But you'll need some variables first; here is something I wrote for

opening and closing a door;

	
	
var door1open = false;
var ghostly = true;
door1.on("click", function(event){
	createjs.Tween.get(uparrow)
	.wait(1800)
	.to({alpha: .5}, 100);
		if (ghostly == true){
		
		createjs.Tween.get(ghost1)
		.wait(800)
		.to({scaleX: 3, scaleY: 3, x: 300, y: 200}, 800)
		.wait(800)
		.to({alpha: 0}, 500);}
		ghostly = false;
		if(door1open == false){
		createjs.Tween.get(door1)
		.to({scaleX: -.3}, 1000);
		createjs.Sound.play("creak");
		door1open = true;}else
		
		if(door1open == true){
		createjs.Tween.get(door1)
		.to({scaleX: 1}, 1000);
		createjs.Sound.play("creak");
		door1open = false;}

  Now we've got two variables; ghostly and door1. In your case set your own two variables to something

like reverse and forward. So if you've played your forward animation, your reverse animation is false and

if you play your reverse animation your forward animation is false. Very simple, very useful. You'll need to strip

out my own commands to replace them with your own and it's framework neutral so you can ignore 'createjs.tween' etc

'==' means compares true to false and = tells a variable what to do, so if you say 1 = 2 then that's a certainty and if you say 1==2 that

compares one to two.

It'd be nice to see how you get on.

 

[none-9999]

pure js:

function Animation(radio){

	this.direction=true; //clock / anticlock
	this.cutY=0;//position in spritesheet
	this.cutX=0;
	this.maxCutY=13;// last sprite position

	this.adder=0;//to prevent that animation run much quickly
	this.changer=0;//in this point chnage cut in sprite
	
	this.center={x:0,y:0};//position center by star
	this.pos={x:0,y:0};//position to draw star
	this.radio=radio;

	this.width=this.radio*2;
	this.height=this.radio*2;


	this.isInDisplay=false;
}

Animation.prototype.set = function(dir,posX,posY) {
	// body...
	this.direction=dir;//need boolean value from arguments
	
	if(this.direction){
		//if clock direction
		this.cutY=0;
	}else{
		//if anti-clock direction
		this.cutY=this.maxCutY;
	}

	this.adder=0;
	
	this.isInDisplay=true;//to procces in loop, optimization ;)

	this.center.x=posX;
	this.center.y=posY;

	//asign coordinates to draw
	this.pos.x=this.center.x - this.radio;
	this.pos.y=this.center.y - this.radio;
};

Animation.prototype.update = function() {
	if(!this.isInDisplay)return;

	this.adder+=1;

	if(this.adder > this.changer){
		this.adder=0;

		if(this.direction){

			this.cutY+=1;//in direction of clock

			if(this.cutY > this.maxCutY){

				//this.cutY=0;//if loop
				this.isInDisplay=false;//if loop comment this
			}

		}else{

			this.cutY-=1;

			if(this.cutY < 0){

				//this.cutY=this.maxCutY; if loop
				this.isInDisplay=false;//if loop comment this
			}

		}


	}
};

Animation.prototype.paint = function() {
	if(!this.isInDisplay)return;//to optimization
	
    
    ctx.drawImage(imageStar,
    	this.cutX*this.width,
    	this.cutY*this.height,
    	this.width,
    	this.height,
    	this.pos.x,
    	this.pos.y
    	this.width,
    	this.height	);
   
};