この記事では、カスタムコンポーネントのコードスニペットについて説明します。

カスタムコンポーネントとのやり取りを容易にするために、コードスニペットを追加することができます。Animate CC での 2 つの例を見てみましょう。新しいコードスニペットは HTML5 Canvas/コンポーネントから追加します。

  1. ボタンにクリックハンドラーを追加するコードスニペット

    // 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 の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー