이 문서에서 사용자 정의 구성 요소의 코드 조각에 대해 알아보십시오.

사용자 정의 구성 요소에 코드 조각을 추가하여 좀 더 쉽게 구성 요소와 상호 작용할 수 있습니다. Animate CC에 있는 두 가지 예제를 살펴보겠습니다. 새로운 코드 조각은 [HTML5 캔버스] -> [구성 요소] 섹션 아래에 추가됩니다.

  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 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책