Skip to main content
Participating Frequently
February 15, 2017
Question

Fade in from button click doesn't work

  • February 15, 2017
  • 1 reply
  • 604 views

I have a old Flash project which I'm attempting to convert to HTML5 using Animate CC 2017 and I'm now working in the Canvas.fla.

The piece is tool which displays information about medical conditions, so it has a couple of intro pages and then an A-Z navigation that exists for the rest of the timeline which is 37 frames in total.

The navigation now works thanks to some guys on here but what I'm now finding is after applying the code to fade in a movie clip which is a definition of a medical condition, the navigation won't go to that frame (for the letter B) and the back/continue buttons skip that frame too.

I'll add the code here from the preceding frame 3 (2) where you'll see there are a couple of definitions which fade in and out and work absolutely fine. I'll only paste the code to include the first two letters of the navigation.

this.stop();

//Adds Aorta definition

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

function fl_MouseClickHandler_2() {

  var Aorta_FadeInCbk = fl_FadeSymbolIn.bind(this);

  this.addEventListener('tick', Aorta_FadeInCbk);

  this.Aorta.alpha = 0;

  function fl_FadeSymbolIn() {

  this.Aorta.alpha += 0.50;

  if (this.Aorta.alpha >= 1) {

  this.removeEventListener('tick', Aorta_FadeInCbk);

  }

  }

}

//Adds Aplastic Aneamia definition

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

function fl_MouseClickHandler_3() {

  var Aplastic_FadeInCbk = fl_FadeSymbolIn_3.bind(this);

  this.addEventListener('tick', Aplastic_FadeInCbk);

  this.Aplastic.alpha = 0;

  function fl_FadeSymbolIn_3() {

  this.Aplastic.alpha += 0.50;

  if (this.Aplastic.alpha >= 1) {

  this.removeEventListener('tick', Aplastic_FadeInCbk);}

//Clicking Aplastic Ameamia button removes Aorta definition

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

function fl_MouseClickHandler_5() {

  var Aorta_FadeOutCbk = fl_FadeSymbolOut_3.bind(this);

  this.addEventListener('tick', Aorta_FadeOutCbk);

  this.Aorta.alpha = 1;

  function fl_FadeSymbolOut_3() {

  this.Aorta.alpha -= 1.00;

  if (this.Aorta.alpha <= 0) {

  this.removeEventListener('tick', Aorta_FadeOutCbk);

  }

  }

}

//Clicking Aorta button removes  Aplastic Ameamia definition

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

function fl_MouseClickHandler_6() {

  var Aplastic_FadeOutCbk = fl_FadeSymbolOut_4.bind(this);

  this.addEventListener('tick', Aplastic_FadeOutCbk);

  this.Aplastic.alpha = 1;

  function fl_FadeSymbolOut_4() {

  this.Aplastic.alpha -= 1.00;

  if (this.Aplastic.alpha <= 0) {

  this.removeEventListener('tick', Aplastic_FadeOutCbk);

  }

  }

}

//Back button code

if (!this.Back2.hasEventListener("click")) {

     this.Back2.addEventListener("click", fl_ClickToGoToAndStopAtFrame_11.bind(this));

}

function fl_ClickToGoToAndStopAtFrame_11() {

  this.gotoAndStop(this.currentFrame - 1);

}

//Continue button code

if (!this.Continue3.hasEventListener("click")) {

     this.Continue3.addEventListener("click", fl_ClickToGoToAndStopAtFrame_12.bind(this));

}

function fl_ClickToGoToAndStopAtFrame_12() {

  this.gotoAndStop(this.currentFrame + 1);

}

//Contact button code

this.contact2_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame_15.bind(this));

function fl_ClickToGoToAndStopAtFrame_15() {

  this.gotoAndStop(36);

}

// Start of A-U navigation

this.a_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame_33.bind(this));

function fl_ClickToGoToAndStopAtFrame_33() {

  this.gotoAndStop(2);

}

this.b_btn.addEventListener("click", fl_ClickToGoToAndStopAtFrame_36.bind(this));

function fl_ClickToGoToAndStopAtFrame_36() {

  this.gotoAndStop(3);

}

And this is the code in the following frame, I've only added one of the definitions here.

this.stop();

this.bac_men_btn.addEventListener("click", fl_MouseClickHandler_17.bind(this));

function fl_MouseClickHandler_17()

{

  var Bacterial_menina_FadeInCbk = fl_FadeSymbolIn_7.bind(this);

this.addEventListener('tick', Bacterial_menina_FadeInCbk);

this.Bacterial_menina.alpha = 0;

function fl_FadeSymbolIn_7()

{

  this.Bacterial_menina.alpha += 0.50;

  if(this.Bacterial_menina.alpha >= 1)

  {

  this.removeEventListener('tick', Bacterial_menina_FadeInCbk);

  }

}

}

Any help would be much appreciated.

Many thanks

Jeff

    This topic has been closed for replies.

    1 reply

    Ned Murphy
    Legend
    February 15, 2017

    See about fixing the way you presented the code and someone might be more willing to take a look at it.

    Colin Holgate
    Inspiring
    February 15, 2017

    I did actually go to the trouble of unravelling the post! There seemed to be functions inside functions inside functions. At least according to the auto formatting.

    There are enough strange techniques in the code that I didn't feel qualified to help.

    Legend
    February 15, 2017

    He seems to not realize there's a built-in tween library. All this nonsense:

    function fl_MouseClickHandler_2() {

        var Aorta_FadeInCbk = fl_FadeSymbolIn.bind(this);

        this.addEventListener('tick', Aorta_FadeInCbk);

        this.Aorta.alpha = 0;

        function fl_FadeSymbolIn() {

            this.Aorta.alpha += 0.50;

            if (this.Aorta.alpha >= 1) {

                this.removeEventListener('tick', Aorta_FadeInCbk);

            }

        }

    }

    Could be replaced with:

    function fl_MouseClickHandler_2() {

        this.Aorta.alpha = 0;

        cjs.Tween.get(this.Aorta, {override:true}).to({alpha: 1}, 250);

    }

    TweenJS v0.6.2 API Documentation : Tween