Using buttons within symbols (HTML5 Canvas)

New Here ,
Jun 15, 2020 Jun 15, 2020

Copy link to clipboard


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


//Swipe Function

var that = this;
var pages;

that.start = function()
	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 = 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);"pressmove", that.pressMoveHandler);"stagemouseup", that.stageMouseUpHandler);
	pages.pressed = false;

setTimeout(that.start, 0);

//BUTTONS ==========================================================

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.







Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation