Java script is not active for PNG

[Igor_Sulim]

Hello, guys!

I have very good animation with well-working interactive parts.

All the things work well, but I can not fix one problem. I want to use .png in HTML5 technology as symbol (pb or movie clip) with JS.

As soon as i put any graphics to already working vector Pb (with working code) it stops be active at all.

I can't press it and all of my animations stops. Code works perfectly only if I use vector graphics. As soon as I add even .png dot - stop working.

For .swf file with AS3 it works perfect - no problems.

So, can you tell me what's the problem?

How can I add JS to symbol with .png and force it to work well?

I don't want use vector graphics as it decreases FPS significantly, I need to create .png animation (let MC move one side by click and other side by another click).

Here are .png file which I want to animate.

Thank you so much for your help!

With best regards, Igor.

[kglad]

as long as your not using timeline tweening there shouldn't be any problems.  if you are using timeline tweening, there are several potential pitfalls.

bottomline, it's safest to avoid timeline tweening with symbols you want to control with code.

[Igor_Sulim]

Thank you mate, I really use timeline. Could you tell me how to animate it with code without timeline reference? I'm a pilot, not designer, but I need to fix it as the last point of my animation.

You can see "Procedures" on the left side and I want to animate it by click to the rite side and by second click to the beginning position (left).

[kglad · Accepted solution]

here's one way to do that:

// edit these 3 parameters to suit your needs

var leftside_start = 100;

var leftside_end = 300;

var inc=3;

var loopI;

this.leftside.addEventListener('click',startF.bind(this));

function startF(){

if(this.leftside.x<(leftside_start+leftside_end)/2){

inc = Math.abs(inc);

} else {

inc = -Math.abs(inc);

}

clearInterval(loopI)

loopI=setInterval(loopF.bind(this),50);

}

function loopF(){

this.leftside.x+=inc;

if(inc>0 && this.leftside.x>=leftside_end){

clearInterval(loopI);

this.leftside.x = leftside_end;

} else if(inc<0 && this.leftside.x<=leftside_start){

clearInterval(loopI);

this.leftside.x = leftside_start;

}

}

[Igor_Sulim]

It doesn't work...:(

[kglad]

do you have an object with instance name "leftside"??????  that was supposed to be a tip-off for you to use the name of the movieclip on the left side of your screen shot.

[Igor_Sulim]

Ah... thank you. I'll try next time/ I used transparent PB to animate this.

[kglad]

you're welcome.

[ClayUUID]

"PB"?

[Igor_Sulim]

Pushbutton.