Highlighted

Using buttons within symbols (HTML5 Canvas)

New Here ,
Jun 15, 2020

Copy link to clipboard

Copied

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.

Views

27

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Using buttons within symbols (HTML5 Canvas)

New Here ,
Jun 15, 2020

Copy link to clipboard

Copied

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.

Views

28

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 15, 2020 0

Have something to add?

Join the conversation