help controlling nla animation from button html

18 September 2015 04:35
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
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.
18 September 2015 16:14
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
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!
19 September 2015 03:25
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

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.
24 September 2015 20:34
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

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);

18 October 2015 04:39
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
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.