Highlighted

Dropdown menu in Adobe Animate HTML5 Canvas

Community Beginner ,
Mar 12, 2020

Copy link to clipboard

Copied

Hi,

Last week i was reading some replies that JoaoCésar gave to some other users about navigating the timepline using scroll and this works fine to me:

var that = this;
this.targetTimeline = this;
this.targetTimeline.loop = true;
this.targetTimeline.force = 1;
this.targetTimeline.friction = 0.7;
this.targetTimeline.minFrame = 0; // set the start range value here
this.targetTimeline.maxFrame = this.targetTimeline.totalFrames - 1; // set the end range value here

this.loopClamp = function(value, min, max)
{
if (value < min)
return min;

if (value > max)
return max;

return value;
};

this.clamp = function(value, min, max)
{
if (value < min)
return max;

if (value > max)
return min;

return value;
};

this.onMouseWheel = function (e)
{
e.preventDefault();

var evt = window.event || e;
var delta = Math.max(-1, Math.min(1, evt.wheelDelta || -evt.detail));

that.targetTimeline.speed = delta * that.force;
};

this.tickHandler = function (e)
{
var clamp = that.targetTimeline.loop ? "loopClamp" : "clamp";

that.targetTimeline.speed *= that.targetTimeline.friction;
that.targetTimeline.gotoAndStop(that[clamp](that.targetTimeline.currentFrame + that.targetTimeline.speed, that.targetTimeline.minFrame, that.targetTimeline.maxFrame));
};

this.start = function ()
{
canvas.addEventListener('mousewheel', that.onMouseWheel.bind(that));
canvas.addEventListener('DOMMouseScroll', that.onMouseWheel.bind(that));
createjs.Ticker.on("tick", that.tickHandler);
};

if (!this.hasStarted)
{
this.gotoAndStop(this.targetTimeline.minFrame);
this.start();
this.hasStarted = true;
}
/* Evento de la selección pasa de Combobox
Cualquier cambio en la selección de los resultados del cuadro combinado durante la ejecución de esta función a la que puede agregar su código personalizado.

Instrucciones:
1. Agregue el código personalizado en una línea nueva después de la línea que dice "// Inicio del código personalizado" más abajo.
*/
if(!this.FeaturesComboBox_change_cbk) {
function FeaturesComboBox_change(evt) {
// Inicio del código personalizado
console.log(evt.target.value);
// Fin del código personalizado
}
$("#dom_overlay_container").on("change", "#FeaturesComboBox", FeaturesComboBox_change.bind(this));
this.FeaturesComboBox_change_cbk = true;
}

I'm designing a landpage that "scrolls horizontally" with some parallax features.


In this case, the navigation starts with scroll up, can you tell me how to change this code to begin playing the animation with scroll down instead? And then to go backwards with scroll up. Like any other website.


I have other question if you can help me too. I need a dropdown menu, i have designed a custome one but it doesn't work like it should. The previous code that plays the timeline with the mouse scroll, stops or doesn't work properly.
I read on other sites that html5 canvas had some issues with this and one of the options available is placing a combobox from the Components menu.

 

The "button" its named "Features", when the user clicks i need to drop some other options inside the dropdown:

 

I need to go from one stage (left) to the other (right). Every item inside the dropdown is a button, when selected the page will show another information.

 

I inserted a screen capture with the design that i made, i hope that you can help me with this two little things. Thanks, and hugs from an Venezuelan living in Buenos Aires.

 

 

 

Views

517

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

Dropdown menu in Adobe Animate HTML5 Canvas

Community Beginner ,
Mar 12, 2020

Copy link to clipboard

Copied

Hi,

Last week i was reading some replies that JoaoCésar gave to some other users about navigating the timepline using scroll and this works fine to me:

var that = this;
this.targetTimeline = this;
this.targetTimeline.loop = true;
this.targetTimeline.force = 1;
this.targetTimeline.friction = 0.7;
this.targetTimeline.minFrame = 0; // set the start range value here
this.targetTimeline.maxFrame = this.targetTimeline.totalFrames - 1; // set the end range value here

this.loopClamp = function(value, min, max)
{
if (value < min)
return min;

if (value > max)
return max;

return value;
};

this.clamp = function(value, min, max)
{
if (value < min)
return max;

if (value > max)
return min;

return value;
};

this.onMouseWheel = function (e)
{
e.preventDefault();

var evt = window.event || e;
var delta = Math.max(-1, Math.min(1, evt.wheelDelta || -evt.detail));

that.targetTimeline.speed = delta * that.force;
};

this.tickHandler = function (e)
{
var clamp = that.targetTimeline.loop ? "loopClamp" : "clamp";

that.targetTimeline.speed *= that.targetTimeline.friction;
that.targetTimeline.gotoAndStop(that[clamp](that.targetTimeline.currentFrame + that.targetTimeline.speed, that.targetTimeline.minFrame, that.targetTimeline.maxFrame));
};

this.start = function ()
{
canvas.addEventListener('mousewheel', that.onMouseWheel.bind(that));
canvas.addEventListener('DOMMouseScroll', that.onMouseWheel.bind(that));
createjs.Ticker.on("tick", that.tickHandler);
};

if (!this.hasStarted)
{
this.gotoAndStop(this.targetTimeline.minFrame);
this.start();
this.hasStarted = true;
}
/* Evento de la selección pasa de Combobox
Cualquier cambio en la selección de los resultados del cuadro combinado durante la ejecución de esta función a la que puede agregar su código personalizado.

Instrucciones:
1. Agregue el código personalizado en una línea nueva después de la línea que dice "// Inicio del código personalizado" más abajo.
*/
if(!this.FeaturesComboBox_change_cbk) {
function FeaturesComboBox_change(evt) {
// Inicio del código personalizado
console.log(evt.target.value);
// Fin del código personalizado
}
$("#dom_overlay_container").on("change", "#FeaturesComboBox", FeaturesComboBox_change.bind(this));
this.FeaturesComboBox_change_cbk = true;
}

I'm designing a landpage that "scrolls horizontally" with some parallax features.


In this case, the navigation starts with scroll up, can you tell me how to change this code to begin playing the animation with scroll down instead? And then to go backwards with scroll up. Like any other website.


I have other question if you can help me too. I need a dropdown menu, i have designed a custome one but it doesn't work like it should. The previous code that plays the timeline with the mouse scroll, stops or doesn't work properly.
I read on other sites that html5 canvas had some issues with this and one of the options available is placing a combobox from the Components menu.

 

The "button" its named "Features", when the user clicks i need to drop some other options inside the dropdown:

 

I need to go from one stage (left) to the other (right). Every item inside the dropdown is a button, when selected the page will show another information.

 

I inserted a screen capture with the design that i made, i hope that you can help me with this two little things. Thanks, and hugs from an Venezuelan living in Buenos Aires.

 

 

 

Views

518

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
Mar 12, 2020 0
Adobe Community Professional ,
Mar 12, 2020

Copy link to clipboard

Copied

Hi.

 

If I understand your scroll question, I think you can just change the timeline animation to move vertically instead of horizontally. Or maybe not?

 

Please let me know.

 

Anyway, I have a sample on GitHub of how to animate things when the browser window is being scrolled.

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

 

Now, for the dropdown question, I have another sample here.

 

Main JS code:

this.makeDropDown = function(dropDown, callBack, useHit)
{
	if (!dropDown.started)
	{
		dropDown.addHit = function()
		{
			exportRoot.dropDownHit = new createjs.Shape();
			export8Root.dropDownHit.graphics.beginFill("rgba(0,0,0,0.01)");
			exportRoot.dropDownHit.graphics.drawRect(0, 0, canvas.width, canvas.height);
			exportRoot.dropDownHit.graphics.endFill();
			exportRoot.addChildAt(exportRoot.dropDownHit, 0);
			
			exportRoot.dropDownHit.on("mousedown", function(e)
			{
				dropDown.closeAll();
			});
		};
		
		dropDown.open = function()
		{
			dropDown.toggled = true;
			dropDown.gotoAndStop(1);
		};
		
		dropDown.close = function()
		{
			dropDown.toggled = false;
			dropDown.gotoAndStop(0);
		};
		
		dropDown.closeAllOthers = function(e)
		{
			for (var i = exportRoot.dropDowns.length - 1; i >= 0; i--)
				if (exportRoot.dropDowns[i] !== e.currentTarget)
					exportRoot.dropDowns[i].close();
		};
		
		dropDown.closeAll = function(e)
		{
			for (var i = exportRoot.dropDowns.length - 1; i >= 0; i--)
				exportRoot.dropDowns[i].close();
		};
		
		dropDown.register = function()
		{
			if (!exportRoot.dropDowns)
				exportRoot.dropDowns = [];
			
			if (exportRoot.dropDowns.indexOf(dropDown) === -1)
				exportRoot.dropDowns.push(dropDown);
		};
		
		dropDown.on("mousedown", function(e)
		{
			dropDown.closeAllOthers(e);
			
			if (e.currentTarget.currentFrame === 0)
				e.currentTarget.open();
			else
				e.currentTarget.close();
			
			if (callBack !== null)
				callBack(e, e.currentTarget);		
		});
		
		if (useHit && !exportRoot.dropDownHit)
			dropDown.addHit();
		
		if (!exportRoot.dropDownEsc)
		{
			window.addEventListener("keydown", function(e)
			{
				if (e.keyCode === 27)
					dropDown.closeAll();
			});
			
			exportRoot.dropDownEsc = true;
		}
		
		dropDown.register();
		dropDown.stop();
		dropDown.toggled = false;				
		dropDown.started = true;
	}
};

this.stop();

 

How you would call the method from withing a Movie Clip isntance that will behave like a dropdown:

exportRoot.makeDropDown(this, function(e, dropDown)
{
	if (e.target.name === "copy")
	{
		console.log("copy");
		dropDown.close();
	}
	else if (e.target.name === "basic")
	{
		console.log("basic");
		dropDown.close();
	}
	else if (e.target.name === "wallets")
	{
		console.log("wallets");
		dropDown.close();
	}
}, true);

 

And here is a working sample on GitHub:

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

 

Please let me know if you have any further questions.

 

 

Cheers from Brazil!

JC

 

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Mar 12, 2020 0
Community Beginner ,
Mar 13, 2020

Copy link to clipboard

Copied

Hi, i will test the dropdown code today o maybe tomorrow, thanks a lot, dude i will let you know about this.

Respecting the scroll. The code that you provide, starts the animation when i scroll up, i need to start the animation when i scroll down the mouse wheel. Is this possible? Thanks man.

I don't know how to code very well, but i'm learning a little bit each time. So thanks again, and again, and again hahaha

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
Reply
Loading...
Mar 13, 2020 1
Community Beginner ,
Mar 13, 2020

Copy link to clipboard

Copied

WOW dude, i just download the files from your test on the dropdown. Dude, you are so awesome!
Can this drop when i hover over the icon instead clicking?

Joao, you are the freacking god!

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
Reply
Loading...
Mar 13, 2020 0
Community Beginner ,
Mar 13, 2020

Copy link to clipboard

Copied

Hi again! I just sign up in github to send you this:


https://github.com/benson2424/animate-on-scroll_mousewheelup


This is an example. The animation begin to play when i scroll up (mouse wheel up). I need to begin to play the timeline when i scroll down (mouse wheel down). To simulate that is a "horizontal scroll website".

I have anothe issue. This scroll doesn't work on mobile, only for desktop, specifically with a mouse. Is there a way that works when i swipe up or down (Touch) on the screen of any mobile device like using a mouse?

Sorry my english hahah i hope uou can understand me

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
Reply
Loading...
Mar 13, 2020 0
Adobe Community Professional ,
Mar 16, 2020

Copy link to clipboard

Copied

Hi again!

 

Don't you worry! I can understand your English. It is very good! I hope you can understand mine! Hahahahahaha

 

I'm very glad to know that the samples were helpful!

 

And I will let you know about the other issues later today.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Mar 16, 2020 0
Adobe Community Professional ,
Mar 21, 2020

Copy link to clipboard

Copied

Hi again!

 

Sorry for the huge delay.

 

Here is the modified code so that you can change the scroll direction by just setting the root.targetTimeline.direction property to 1 or -1.

 

Drag is also supported now.

 

var root = this;

root.targetTimeline = this;
root.targetTimeline.loop = true;
root.targetTimeline.force = 2;
root.targetTimeline.friction = 0.8;
root.targetTimeline.direction = -1; // scroll direction
root.targetTimeline.minFrame = 0; // set the start range value here
root.targetTimeline.maxFrame = root.targetTimeline.totalFrames - 1; // set the end range value here
root.targetTimeline.speed = 0;
root.targetTimeline.pressed = false;

root.start = function ()
{
	createjs.Touch.enable(stage);
	root.hit.cursor = "default";
	root.gotoAndStop(root.targetTimeline.minFrame);
	canvas.addEventListener('mousewheel', root.onMouseWheel.bind(root));
	canvas.addEventListener('DOMMouseScroll', root.onMouseWheel.bind(root));
	stage.on("stagemousedown", root.onStageMouseDown.bind(root));
	createjs.Ticker.on("tick", root.tickHandler);
};

root.onMouseWheel = function (e)
{
	e.preventDefault();

	var evt = window.event || e;
	var delta = Math.max(-1, Math.min(1, evt.wheelDelta || -evt.detail));

	root.targetTimeline.speed = delta * root.force * root.direction;
};

root.onStageMouseDown = function (e)
{
	root.targetTimeline.pressedY = e.stageY / stage.scaleY;
	root.targetTimeline.pressed = true;
	root.targetTimeline.stageMouseUp = stage.on("stagemouseup", root.onStageMouseUp.bind(root));
};

root.tickHandler = function (e)
{
	var clamp = root.targetTimeline.loop ? "loopClamp" : "clamp";
	var mouseY = stage.mouseY / stage.scaleY;
	
	if (root.targetTimeline.pressed && mouseY !== root.targetTimeline.pressedY)
	{
		root.targetTimeline.speed = (mouseY > root.targetTimeline.pressedY ? 1 : -1) * root.direction * root.force;
		root.targetTimeline.pressedY = mouseY;
	}
	
	root.targetTimeline.speed *= root.targetTimeline.friction;
	root.targetTimeline.gotoAndStop(root[clamp](root.targetTimeline.currentFrame + root.targetTimeline.speed, root.targetTimeline.minFrame, root.targetTimeline.maxFrame));
};

root.onStageMouseUp = function (e)
{
	root.targetTimeline.pressed = false;
	stage.off("stagemouseup", root.targetTimeline.stageMouseUp);
};

root.loopClamp = function(value, min, max)
{
	if (value < min)
		return min;
	
	if (value > max)
		return max;
		
	return value;
};

root.clamp = function(value, min, max)
{
	if (value < min)
		return max;
	
	if (value > max)
		return min;
		
	return value;
};

if (!root.hasStarted)
{
	root.start();
	root.hasStarted = true;
}

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

 

Please notice that I also did some tweaks so the code is better organized.

 

And here is a live demo:

https://zen-hermann-69d5f7.netlify.com/

 

I hope it helps and please let me know if you still have further questions.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Mar 21, 2020 0
Community Beginner ,
Apr 15, 2020

Copy link to clipboard

Copied

Hi, JC!

 

How is everything there? How are your family, your health. Hugs

Just a few hours ago i was able to see your last reply, thanks a lot, JC. Dude, this solves a lots of this in my mind haha

 

As always, i got some other doubts and i hope that you can help me:

 

FIRST, take a look of this test https://ethbits.000webhostapp.com/ i have made in Edge Animate, an old software from 2015. I have issues with sharpness of the dropdowns and its inside elements, and i want to migrate all this functionality to Animate CC, that is better at rendering. Please feel the responsiveness/interaction of the dropdowns.

 

Here are the questions:

 

1) You gave me this test of Dropdown that helps me a lot:

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

 

- It is possible to change this interaction to be from Open/On when clicking (down) to Open/On when Hovering (over) the icon?

 

A) The buttons that i designed have 3 state changes: Up (#F3F3F3), Over/Hover (#00CC00) and Down (#D327EC). This includes the main icon. I want to open/on the dropdown when the cursor is hovering (Over/Hover) it, and the only way to close/off the dropdown are:

- Out/Leave the dropdown area (black rectangular box with white borders).
- Out/Leave the main icon from top of it.

- Clicking a inside element of the dropdown after it shows the Down(click) state.

 

NOTE: The buttons that i designed have 3 state changes: Up (#F3F3F3), Over/Hover (#00CC00) and Down (#D327EC). So when i click the buttons inside the dropdown they close it, and i need the dropdown to be closed after it shows the " Down (#D327EC)" State.

 

 

D) The third button from the first dropdown (Exchanges) have another dropdown. A sub-dropdown? haha

Hoy can i escalate from one main dropdown, to display another from one of its inside elements.

 

As always, thanks a lot. A a lot of good vibes to you and your loved ones.

 

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
Reply
Loading...
Apr 15, 2020 1
Community Beginner ,
Apr 16, 2020

Copy link to clipboard

Copied

Hi, again.

I copied that sample of dropdown with his respective code, to the stage were i got the "scroll to play the timeline code". When i start to scroll down to begin playing the timeline, all the buttons and dropdown stops functioning, it has something to do with the code of the dropdown, because when i erase that actions it works againg.

 

Is there a way to those two codes can work fine in the same stage?

Thanks again, man.

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
Reply
Loading...
Apr 16, 2020 1
Adobe Community Professional ,
Apr 16, 2020

Copy link to clipboard

Copied

Hi again!

 

We are all fine! Thanks for asking! And your family and you? I hope everybody is doing well!

 

And I'm really glad the samples have been useful. Nice!

 

Please allow me one day or two and I will go back with something related to your issues.

 

All the best!

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Apr 16, 2020 0
Community Beginner ,
Apr 16, 2020

Copy link to clipboard

Copied

Hi, JC!

My parents are "fine" back at my country. Fortunately my brother also lives in another country and we both help them. Thanks for asking too.


Thanks for all the help you are providing me!

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
Reply
Loading...
Apr 16, 2020 0
Community Beginner ,
Apr 19, 2020

Copy link to clipboard

Copied

I hope for your help soon, bro!

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
Reply
Loading...
Apr 19, 2020 0
Adobe Community Professional ,
Apr 21, 2020

Copy link to clipboard

Copied

Hi again!

 

How's things?

 

I've updated the link with the requests you made:

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

 

Well... Kind of...

 

I wasn't able to conciliate these two points:

- Out/Leave the dropdown area (black rectangular box with white borders).

- Clicking a inside element of the dropdown after it shows the Down(click) state.

 

Please have a look and let me know if this is close to what you want.

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

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
Reply
Loading...
Apr 21, 2020 0