help controlling nla animation from button html

18 September 2015 04:35 #3904
hello am new excuse my bad English my language is Spanish , congratulations for this great job in blend4web , I searched the forum looking for something related to control an animation material made ​​nodes blender not use the NLA logic, because I want run the animation from an HTML button , I'm no expert in javascript so I write in this forum with the hope of finding the way to do it .

the material contains 2 different textures

I appreciate your help
18 September 2015 09:47 #3905
Gersin, take a look at this app:

The buttons are not inside the player but rather they are part of the HTML page. You can find this project inside you SDK folder and look at all the code. The location inside your SDK is: blend4web/deploy/tutorials/examples/cartoon_interior/cartoon_interior.html

Hopefully this addresses at least part of your question.
Blend4Web Videos
18 September 2015 16:14 #3921
hi thanks for the reply, with this example that I have sent my project advance but in this instance I do not find a way to play as an animation from the javascript
18 September 2015 18:58 #3924
Hello and welcome to the forum,

I've created a simple example for you. If you click the button, Suzanne will start playing animation. Feel free to ask questions about the code.

Good look in learning Blend4Web!
Blend4Web developer
19 September 2015 03:25 #3929
Hello thank you very much Evgeny Rodygin for this example has been of great help.

But want when you click the button the animation actually run and stop at the frame 6 from another button and run another animation from frame 6-10

could be…

function button_click(e) {
    var cabina = m_scenes.get_object_by_name("cube");
    m_anim.get_frame_range(cube, SLOT_0);;
21 September 2015 11:54 #3968

But want when you click the button the animation actually run and stop at the frame 6 from another button and run another animation from frame 6-10

This can be solved in several ways. For example, you can create a continuous sensor manifold which will deal with animation frames basing on the last clicked button.
Here is another example I've made quickly.
Blend4Web developer
24 September 2015 20:34 #4067
Hi, thank you very much helped me a lot , I have a problem in the Ipad, I have three html each load buttons an animation of three colors, the 1 button loads the white frame 1 , the button 2 loads red color of the frame 1- 6 , the button 3 loads blue color from frame 7 - 12. I have this code that works for me , does not work very well but changes color. this is my code buttons . JS

	var button1_elem = document.getElementById("blanco");
    button1_elem.addEventListener("mousedown", button_1_click, false);

    var button2_elem = document.getElementById("rojo");
    button2_elem.addEventListener("mousedown", button_2_click, false);
    var button3_elem = document.getElementById("azul");
    button3_elem.addEventListener("mousedown", button_3_click, false);

function load_cb(data_id) {

    var cabina = m_scenes.get_object_by_name("cabina");
    var sensor = m_ctl.create_elapsed_sensor();

    var callback = function(obj) {
        var frame = m_anim.get_frame(obj);
        if (_last_button_clicked == 1 && frame >= 10)

    m_ctl.create_sensor_manifold(cabina, "ANIM", m_ctl.CT_CONTINUOUS, [sensor],
                                 function(s){return s[0]}, callback);


function button_1_click(e) {
    var cabina = m_scenes.get_object_by_name("cabina");
    _last_button_clicked = 1;

function button_2_click(e) {
    var cabina = m_scenes.get_object_by_name("cabina");
    m_anim.set_frame(cabina, 6);;
    _last_button_clicked = 1;

function button_3_click(e) {
    var cabina = m_scenes.get_object_by_name("cabina");
    m_anim.set_frame(cabina, 7);;
    _last_button_clicked = -2;

My problem IPAD frame animation 1- 6 is the red , this animation does not load

Thank you.
30 September 2015 15:58 #4156

You are using the mousedown event listener, which doesn't work for touch devices. In order to support them, you need to implement touch events plus to what you already have.

In your case it should like this:
var button1_elem = document.getElementById("blanco");
button1_elem.addEventListener("touchstart", button_1_click,a  false);

Blend4Web developer
18 October 2015 04:39 #4474
Hello, don't know if anyone will look at this older post. If I download the example zip file and extract the folder, I can open the html file and see the two buttons but clicking them does nothing. Is there a protocol on how to open a functioning version of these examples? (Sorry if this is a basic question but I'm still just learning)

Thanks in advance!
18 October 2015 04:47 #4475
Please disregard last message. I just watched Will W tutorial and he explained it in the first 5 minutes! Thanks Will if you're out there.
Please register or log in to leave a reply.