Mailform should tricker my canvas animation

[shasimo]

Hello experts!

I made a small rather childish HTML5 animation of a spaceship, that should work on my contact page, so when the user presses the submit button on the mail form, something happens in the animation. If the contact form javascript, used for validating the form, returns success, the spaceship should go of, and If error is returned, the fuse burns out and the spaceship just stays on the ground. You can use a substitute for the form submitbutton, by pressing the hatch on the spaceship.
I think I have the animation under control, but I need help activating the 2 Animate-functions (success or error) from my contact form javascript file which I have put a prettyfied version of on this link.

Can someone tell me how it's done? Many thanks in advance

[kglad · Accepted solution]

if(success){

spaceship.play();  /* assuming your spaceship animation is timeline based.  otherwise, use code to start the loop to animate your spaceship. */

}

[shasimo]

Thanks for the answer. So from the external contact_me.js I should just put my Animate function call in this function?

success: function() {
                    // Success message
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Din besked er sendt! </strong>");
                    $('#success > .alert-success')
                        .append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", det ser desværre ud som om mail serveren er ude af drift. Prøv venligst igen, eller send en alm. mail på info@makemedia.dk");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },

[shasimo]

I need further help, please...

I can't get a call back to my animation script in rocket.js from contact_me2.js where the mail form is handled.

I have 2 simple functions in my animation located in frame 1, and all I want is to call the right function depending on the criteria of success/error from my contact_me2.js (part of script shown above).
Is that not possible?

[kglad]

it's doable.

add the function (in animate) to receive a "success" (or not )parameter and then add a call to rocket.js - assuming you have an include (eg, <script src="rocket.js"/> in your animate published js file.

[shasimo]

Thanks a lot kglad.

I don't think I know how to write a function like that, but nice to know it's possible if I should ever try to get my originaly plan for the animation working.

For now I have downgraded my ambitions and simply just stopped the timeline at a point, waiting for the success criteria to happen and then start the playhead again, ignition and lauching the spaceship and so on. Almost like you surgested in your first reply.

I declared 'window.parent.canvasTimeline = this; ' in frame 1, and from the success function in contact_me.js just wrote 'canvasTimeline.play();' 

If you want, you can try it out here. The only way I could make it work

[kglad]

you're welcome.