Using buttons within symbols (HTML5 Canvas)

Report · Jun 15, 2020

Greetings. I have a little problem and I hope you have a possible solution for me.

With some help I was able to create a slider which can be navigated by swiping left and right. One button (paraButton) is on another layer and always visible and clickable, while another one (popupButton2) is located within the movie clip that is moved around by swiping. The buttons are supposed to make another layer visible. Sadly, the second button is not clickable and does not react. When hovering over it, the pointer still changes and indicates a clickable surface.

Is there any way to make interacting with a button within a symbol interactable or is there another problem in my script that prevents this?

//TOUCH NAVIGATION =================================================
//Activate Touch-Function for Tablets/Smartphones

createjs.Touch.enable(stage);

//Swipe Function

var that = this;
var pages;

that.start = function()
{
	createjs.Touch.enable(true);
	stage.mouseMoveOutside = true;
	
	pages = that.pages;
	pages.dragTolerance = 10;
	pages.index = 0;
	pages.transitionDelay = 350;
	pages.transitionEase = createjs.Ease.quintOut;
	pages.on("mousedown", that.mouseDownHandler);
}

that.mouseDownHandler = function(e)
{
	e.currentTarget.pressedX = e.currentTarget.x;
	e.currentTarget.pressed = true;
	e.currentTarget.offsetX = (e.stageX / stage.scaleX) - e.currentTarget.x;
	e.currentTarget.on("pressmove", that.pressMoveHandler);
	stage.on("stagemouseup", that.stageMouseUpHandler);
};

that.pressMoveHandler = function(e)
{
	e.currentTarget.dragDistance = pages.x - e.currentTarget.pressedX;
	e.currentTarget.x = (e.stageX / stage.scaleX) - e.currentTarget.offsetX;
};

that.stageMouseUpHandler = function(e)
{
	if (pages.pressed && Math.abs(pages.dragDistance) > pages.dragTolerance)
	{
		if (pages.dragDistance > 0)
			pages.index--;
		else
			pages.index++;
		
		pages.index = Math.min(Math.max(0, pages.index), pages.children.length - 1);
	}
	
	createjs.Tween.get(pages).to({x:-pages.index * (canvas.width / stage.scaleX)}, pages.transitionDelay, pages.transitionEase);
	pages.off("pressmove", that.pressMoveHandler);
	stage.off("stagemouseup", that.stageMouseUpHandler);
	pages.pressed = false;
};

setTimeout(that.start, 0);

//BUTTONS ==========================================================
//Paragraph-Button

this.paraPopup.visible = false;

this.paraButton.addEventListener("click", fl_ClickToShow_0.bind(this));

function fl_ClickToShow_0()
{
	this.paraPopup.visible = true;
}

this.paraPopup.addEventListener("click", fl_ClickToHide_0.bind(this));

function fl_ClickToHide_0()
{
	this.paraPopup.visible = false;
}

//Popup2 Button

this.Popup2.visible = false;

this.popupButton2.addEventListener("click", fl_ClickToShow_1.bind(this));

function fl_ClickToShow_1()
{
	this.Popup2.visible = true;
}

Thank you very much for your assistance.