Skip to main content
Known Participant
March 20, 2023
Answered

Animating a Movie clip with code

  • March 20, 2023
  • 1 reply
  • 308 views

Dear All thank you for your time and patience.

I am trying to animate a sky moving up as it playing fwd, I am using a simple time line tween to animate the Mc of the sky but have tried various ways to move the clip up or down, to simulate an aircraft climbing or descending.

I tried using the set interval to call the the function and a for loop

both say in console "y is not defined "when I run the animation.

The only way can get it to work is a tick function but when i try to clear the event lisetner with "clear interval(interval name)"for the Ticker nothing happens.

 

this.mystop_btn.addEventListener("click", fl_ClickToGoToAndPlayFromFrame.bind(this));

function fl_ClickToGoToAndPlayFromFrame(){

    this.mysky_mc.gotoAndPlay(1)
skyup()

}

function skyup(){
	
	for(var i= 0; i< 100; i ++){
	this.mysky_mc.y-=1
		console.log(y)
}
}

this.addEventListener("tick", fl_AnimateHorizontally.bind(this));

function fl_AnimateHorizontally()
{
	
	this.mysky_mc.y-=1
	
		console.log(this.mysky_mc.x)

		console.log("test3")
		
	

	}

I am doing something wrong, but not sure what it is looked at many articles but cant seem to find the info anywhere.

Best Regards

Peter

 

    This topic has been closed for replies.
    Correct answer kglad

    you can't use a for-loop to display animation because the loop executes from start to end before anything on stage is updated.

     

    setInterval will work, but it's easy to loose scope (ie, "this" isn't defined) when using setInterval.  ie, try:

     

    var _this = this;  // used to retrieve scope in skyup

    function fl_ClickToGoToAndPlayFromFrame(){

    this.mysky_mc.gotoAndPlay(1);  // you probably don't want this if you're already animating.

    if(!this.skyup_interval){
    this.skyup_interval = setInterval(skyup, 60);

    }

    }

    function skyup(){
    if(_this.mysky_mc.y>100){  // 100 is incorrect.  fix that.
    _this.mysky_mc.y-=1
    } else {

    clearInterval(_this.skyup_interval);

    }
    }

    }

    1 reply

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    March 20, 2023

    you can't use a for-loop to display animation because the loop executes from start to end before anything on stage is updated.

     

    setInterval will work, but it's easy to loose scope (ie, "this" isn't defined) when using setInterval.  ie, try:

     

    var _this = this;  // used to retrieve scope in skyup

    function fl_ClickToGoToAndPlayFromFrame(){

    this.mysky_mc.gotoAndPlay(1);  // you probably don't want this if you're already animating.

    if(!this.skyup_interval){
    this.skyup_interval = setInterval(skyup, 60);

    }

    }

    function skyup(){
    if(_this.mysky_mc.y>100){  // 100 is incorrect.  fix that.
    _this.mysky_mc.y-=1
    } else {

    clearInterval(_this.skyup_interval);

    }
    }

    }

    Known Participant
    March 21, 2023

    Dear Kglad

    Thank you very much, did not realise could not change position because "this" is not defined.

    Appreciate your help

    Best Regards

    Peter

    kglad
    Community Expert
    Community Expert
    March 21, 2023

    you're welcome.