Adobe Animate CC HTML 5 Canvas

[MuraliK]

What is the procedure and detailed codding to work on next and previous function for multiple frames(images). In animate cc HTML5 format.

[Here is the list of all Adobe forums... https://forums.adobe.com/welcome]

[Moved from Comments forum to specific Program forum... Mod]

[kglad · Accepted solution]

this.nextbutton.addEventListener('mousedown',nextF.bind(this));

this.prevbutton.addEventListener('mousedown',prevF.bind(this));

function nextF(){

if(this.currentFrame<this.totalFrames){

this.gotoAndStop(this.currentFrame+1);

}

}

function prevF(){

if(this.currentFrame>0){
this.gotoAndStop(this.currentFrame-1);

}

}

[MuraliK]

Hi,

Thank you so much for the reply. But this code is not working properly for me. I want to do multiple image rotation and at the end rotation,

it need to stop but it is looping. While clicking next button it is rotating systematically but on clicking previous button , it is not rotating systematically.

Please suggest on the same. 

Thank you.

Murali

[MuraliK]

I am using this code which is working systematically  for me, But I need a shorter version for this , since my code is quite lengthy....

Please go through and suggest.

________________________________________

this.nxt1.visible=true;

this.nxt2.visible=false;

this.nxt3.visible=false;

this.nxt4.visible=false;

this.nxt5.visible=false;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=true;

this.prev2.visible=false;

this.prev3.visible=false;

this.prev4.visible=false;

this.prev5.visible=false;

this.prev6.visible=false;

this.prev7.visible=false;

this.nxt1.addEventListener("click", fl_MouseClickHandler_1.bind(this));

this.nxt2.addEventListener("click", fl_MouseClickHandler_2.bind(this));

this.nxt3.addEventListener("click", fl_MouseClickHandler_3.bind(this));

this.nxt4.addEventListener("click", fl_MouseClickHandler_4.bind(this));

this.nxt5.addEventListener("click", fl_MouseClickHandler_5.bind(this));

this.nxt6.addEventListener("click", fl_MouseClickHandler_6.bind(this));

this.prev1.addEventListener("click", fl_MouseClickHandler_11.bind(this));

this.prev2.addEventListener("click", fl_MouseClickHandler_12.bind(this));

this.prev3.addEventListener("click", fl_MouseClickHandler_13.bind(this));

this.prev4.addEventListener("click", fl_MouseClickHandler_14.bind(this));

this.prev5.addEventListener("click", fl_MouseClickHandler_15.bind(this));

this.prev6.addEventListener("click", fl_MouseClickHandler_16.bind(this));

function fl_MouseClickHandler_11()

{

this.dress.gotoAndStop(0);

this.nxt1.visible=true;

this.nxt2.visible=false;

this.nxt3.visible=false;

this.nxt4.visible=false;

this.nxt5.visible=false;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=true;

this.prev2.visible=false;

this.prev3.visible=false;

this.prev4.visible=false;

this.prev5.visible=false;

this.prev6.visible=false;

}

function fl_MouseClickHandler_12()

{

this.dress.gotoAndStop(1);

this.nxt1.visible=false;

this.nxt2.visible=true;

this.nxt3.visible=false;

this.nxt4.visible=false;

this.nxt5.visible=false;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=true;

this.prev2.visible=false;

this.prev3.visible=false;

this.prev4.visible=false;

this.prev5.visible=false;

this.prev6.visible=false;

}

function fl_MouseClickHandler_13()

{

this.dress.gotoAndStop(2);

this.nxt1.visible=false;

this.nxt2.visible=false;

this.nxt3.visible=true;

this.nxt4.visible=false;

this.nxt5.visible=false;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=false;

this.prev2.visible=true;

this.prev3.visible=false;

this.prev4.visible=false;

this.prev5.visible=false;

this.prev6.visible=false;

}

function fl_MouseClickHandler_14()

{

this.dress.gotoAndStop(3);

this.nxt1.visible=false;

this.nxt2.visible=false;

this.nxt3.visible=false;

this.nxt4.visible=true;

this.nxt5.visible=false;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=false;

this.prev2.visible=false;

this.prev3.visible=true;

this.prev4.visible=false;

this.prev5.visible=false;

this.prev6.visible=false;

}

function fl_MouseClickHandler_15()

{

this.dress.gotoAndStop(4);

this.nxt1.visible=false;

this.nxt2.visible=false;

this.nxt3.visible=false;

this.nxt4.visible=false;

this.nxt5.visible=true;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=false;

this.prev2.visible=false;

this.prev3.visible=false;

this.prev4.visible=true;

this.prev5.visible=false;

this.prev6.visible=false;

}

function fl_MouseClickHandler_16()

{

this.dress.gotoAndStop(5);

this.nxt1.visible=false;

this.nxt2.visible=false;

this.nxt3.visible=false;

this.nxt4.visible=false;

this.nxt5.visible=false;

this.nxt6.visible=true;

this.nxt7.visible=false;

this.prev1.visible=false;

this.prev2.visible=false;

this.prev3.visible=false;

this.prev4.visible=false;

this.prev5.visible=true;

this.prev6.visible=false;

}

function fl_MouseClickHandler_1()

{

this.dress.gotoAndStop(1);

this.nxt1.visible=false;

this.nxt2.visible=true;

this.nxt3.visible=false;

this.nxt4.visible=false;

this.nxt5.visible=false;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=true;

this.prev2.visible=false;

this.prev3.visible=false;

this.prev4.visible=false;

this.prev5.visible=false;

this.prev6.visible=false;

}

function fl_MouseClickHandler_2()

{

this.dress.gotoAndStop(2);

this.nxt1.visible=false;

this.nxt2.visible=false;

this.nxt3.visible=true;

this.nxt4.visible=false;

this.nxt5.visible=false;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=false;

this.prev2.visible=true;

this.prev3.visible=false;

this.prev4.visible=false;

this.prev5.visible=false;

this.prev6.visible=false;

}

function fl_MouseClickHandler_3()

{

this.dress.gotoAndStop(3);

this.nxt1.visible=false;

this.nxt2.visible=false;

this.nxt3.visible=false;

this.nxt4.visible=true;

this.nxt5.visible=false;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=false;

this.prev2.visible=false;

this.prev3.visible=true;

this.prev4.visible=false;

this.prev5.visible=false;

this.prev6.visible=false;

}

function fl_MouseClickHandler_4()

{

this.dress.gotoAndStop(4);

this.nxt1.visible=false;

this.nxt2.visible=false;

this.nxt3.visible=false;

this.nxt4.visible=false;

this.nxt5.visible=true;

this.nxt6.visible=false;

this.nxt7.visible=false;

this.prev1.visible=false;

this.prev2.visible=false;

this.prev3.visible=false;

this.prev4.visible=true;

this.prev5.visible=false;

this.prev6.visible=false;

}

function fl_MouseClickHandler_5()

{

this.dress.gotoAndStop(5);

this.nxt1.visible=false;

this.nxt2.visible=false;

this.nxt3.visible=false;

this.nxt4.visible=false;

this.nxt5.visible=false;

this.nxt6.visible=true;

this.nxt7.visible=false;

this.prev1.visible=false;

this.prev2.visible=false;

this.prev3.visible=false;

this.prev4.visible=false;

this.prev5.visible=true;

this.prev6.visible=false;

}

function fl_MouseClickHandler_6()

{

this.dress.gotoAndStop(6);

this.nxt1.visible=false;

this.nxt2.visible=false;

this.nxt3.visible=false;

this.nxt4.visible=false;

this.nxt5.visible=false;

this.nxt6.visible=false;

this.nxt7.visible=true;

this.prev1.visible=false;

this.prev2.visible=false;

this.prev3.visible=false;

this.prev4.visible=false;

this.prev5.visible=false;

this.prev6.visible=true;

}

[kglad]

you need one next button and one previous button, not different ones for each frame.

you should have a this.stop() on the frame that contains the code i suggested and you need to replace nextbutton with the name of your single next button.  likewise for your previous button.

[MuraliK]

Hi,

Below it is AS 3.0 code. Its working great for me. I need to convert this script to HTML5 canvas scripting. Please advise.

===============================================

leftBtn.buttonMode=true;

rightBtn.buttonMode=true;

leftBtn.addEventListener(MouseEvent.CLICK, leftBtnClick);

rightBtn.addEventListener(MouseEvent.CLICK, rightBtnClick);

function leftBtnClick(e:MouseEvent):void

{

rightBtn.alpha=1;

if(currentFrame === 3)

{

leftBtn.alpha=0.5;

stop();

}

else

{

nextFrame();

}

}

function rightBtnClick(e:MouseEvent):void

{

leftBtn.alpha=1;

if(currentFrame === 1)

{

rightBtn.alpha=0.5;

stop();

}

else

{

prevFrame();

}

}

================================================

Thanks,

Murali

[kglad]

the code i suggested is for html5/canvas.

[MuraliK]

Hi,

But this code is not working properly for me. I want to do seven image rotation and at the end rotation,

it need to stop but it is looping. While clicking next button it is rotating systematically but on clicking previous button , it is not rotating systematically.

Next function is working but previous function is not working. Please help me out on that.

Thanks,

Murali

[kglad]

how is the image rotation related to advancing/retreating one frame when a next/prev button is clicked?

[MuraliK]

We have 7 images between the back and next button. When we click on the next it takes us one image at a time till the 7^th image. Post that, the button is yet active and it should ideally get disabled

This is the same for the back button as well.

[kglad]

do the next and prev buttons work (using the code i suggested)?

[ClayUUID]

Please stop saying "systematically". It doesn't mean what you think it means.