Code Snippets for custom Components

Search
Adobe Animate User Guide
Applies to: Adobe Animate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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.

  1. Code snippet to attach a click handler to a button

    // 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.

  2. Code snippet to get value from any input control

    console.log($("#instance_name_here").val());

  3. Code snippet to be used when the component instance is attached to DOM

    // 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");                          
}
});