阅读本文可对自定义组件的代码片段有所了解

可以向自定义组件添加代码片段以方便与组件的交互。我们来看一下 Animate CC 中提供的两个示例。新代码片段添加到了“HTML5 Canvas”->“组件”段下。

  1. 用于对按钮附加 click(单击)处理函数的代码片段

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

    请注意,此处理函数附加到父级 (dom_overlay_container) 时,对组件实例设置了过滤条件。这一点很重要,因为在您试图附加处理函数时,组件实例可能并不存在。这可以确保正确触发事件处理函数。

    同样,您可以为自己的自定义组件提供事件处理函数。

  2. 用于从任一输入控件获取值的代码片段

    console.log($("#instance_name_here").val());
  3. 将组件实例附加到 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");                          
    }
    });
    

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略