Slide in object onclick

[hdc50060]

My goal is to get a panel to slide in with easing when I click a button.

Solution attempt #1: I tried using the Action Wizard to change the position of the panel:

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.myTermConditionsBtn.on('click', function(){
/*
Moves the specified symbol instance up or down by decreasing or increasing its y property by the specified number of pixels.
To move the instance up input a negative number.
*/
	_this.termsConditionsPanel.y-=140;
});
var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.termsConditionsPanel.on('click', function(){
/*
Moves the specified symbol instance up or down by decreasing or increasing its y property by the specified number of pixels.
To move the instance up input a negative number.
*/
	_this.termsConditionsPanel.y+=140;
});

Issue with Solution 1: This works well without affecting the main animation, but I have not been able to figure out how to add easing/smooth transition. It starts off canvas, I click the button and then it jumps into place.

Solution attempt #2: I've tried stopping the main animation and adding the slide-in animation at the end of the timeline:

/* stop main animation */
this.stop();

var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.myTermConditionsBtn.on('click', function(){
	/*
	Moves the playhead to the specified frame label in the timeline and continues playback from that frame.
	Can be used on the main timeline or on movie clip timelines.
	*/
	_this.gotoAndPlay('slidePanelOpen');
});


var _this = this;
/*
Clicking on the specified symbol instance executes a function.
*/
_this.termsConditionsPanel.on('click', function(){
	/*
	Moves the playhead to the specified frame label in the timeline and continues playback from that frame.
	Can be used on the main timeline or on movie clip timelines.
	*/
	_this.gotoAndPlay('slidePanelClose');
});*/

Issue with solution #2: When I click the button, the animation works by jumping to a particular frame where I've added the slide in animation. The trouble with this solution is that if I click the button during the main animation, it will skip the rest of the main animation and jump to the frame with the slide in animation. I really don't want to skip the main animation.

Any suggestions of a solution how to add a slide-in panel with easing without affecting the main animation?

[JoãoCésar · Accepted solution]

Hi.

If your panel is a single Movie Clip containing both the in and out animations, then the panel can be called and dismissed by just using the play method. Like this:

var root = this;

root.myTermConditionsBtn.on("click", function()
{	
	root.termsConditionsPanel.play();
});

root.termsConditionsPanel.on("click", function(e)
{
	e.currentTarget.play();
});

FLA / source code / download:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/slide_panel

And this approach also has the advantges of allowing the user to click multiple times on the button and on the panel without causing any jumps and also the button become capable of toggling the panel.

I hope it helps.

Regards,

JC

[hdc50060]

@JoãoCésar Oh man, I've been stuck on this for ages! Thank you, this is perfect!! 

[JoãoCésar]

Excellent! You're welcome!