Use this article to understand the code snippets for custom components
You can add code snippets to your custom components to ease your interaction with the component. Lets evaluate two examples present in Animate CC. The new code snippets are added under HTML5 Canvas -> Components section.
-
// Disable multiple handlers, as these may be used in frame scripts if(!this.instance_name_here_click_cbk) { function instance_name_here_click(evt) { // Start your custom code console.log("Button clicked"); // End your custom code } // Attach an event handler on the parent with the filter as the // Component instance’s id $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this)); this.instance_name_here_click_cbk = true; }Please note that the handler is attached to the parent (dom_overlay_container) with the filter set for the component instance. This is important as the component instance may not be present when you are trying to attach the handler. This ensures that the event handlers are fired properly.
You can similarly provide the event handlers for your custom components.
-
// Listen to the attached event, fired by component runtime $("#dom_overlay_container").on("attached", function(evt, param) { // Check the id of the instance if(param && param.id == 'movieClip_1') { $("#movieClip_1").text("My Button"); } });
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.