Dropdown menu in Adobe Animate HTML5 Canvas
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.
AdChoices