까마귀에서도 아는 Animate로 만드는 Canvas 1.5 날개

16554 단어 캔버스Animate

오사라이



첫날에서는 무비 클립 심볼에 비트맵 심볼을 중첩하지 않고 비트맵 심볼에 직접 코드 스니펫을 적용할 수 있는지 여부를 확인했습니다.
결과적으로 할 수 있지만 복잡해지면 아무래도 거동이 어색하다.
(코드는 생각했던 대로 움직이는 것이 아니라, 쓴 대로 움직이는 것이다.)
거기서, 다른 방법을 사용해 이번은 실현해 갑니다.

우선 코드 읽기



가르친 대로 해 간다.
  • 비트 맵 1을 "고양이"기호로 변환
  • '고양이' 심볼에 '고양이' 심볼을 배치하고 '고양이' 인스턴스로 한다.
  • “코코네코”에 “클릭하면 특정 프레임으로 이동해, 정지”액션을 코드 스니펫으로부터 적용. 이번, 특정의 프레임은 「네코 기모치」(메인 타임 라인의 2 프레임째)입니다.
  • 「하코」를 메인 타임 라인의 1 프레임째에 배치.
  • 메인 타임 라인의 1,2 프레임째에 this.stop()

  • 내보낸 js 파일을 읽습니다.

    비트맵 1



    비트맵 1의 객체입니다. 바삭바삭 읽으십시오.
    
    (lib.ビットマップ1 = function() {
        this.initialize(img.ビットマップ1);
    }).prototype = p = new cjs.Bitmap();
    p.nominalBounds = new cjs.Rectangle(0,0,1620,1080);
    

    고양이



    네이 오브젝트.
    
    (lib.ねこ = function(mode,startPosition,loop) {
        this.initialize(mode,startPosition,loop,{});
    
        // レイヤー1
        // インスタンスを生成(ん?)
        this.instance = new lib.ビットマップ1();
        // 初期位置
        this.instance.setTransform(-810,-540);
        // タイムラインを持っているシンボルはaddTweenで配置される
        this.timeline.addTween(cjs.Tween.get(this.instance).wait(1));
    
    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-810,-540,1620,1080);
    

    조금 신경이 쓰이는 것은 this.instance = new lib.ビットマップ1(); 의 부분.
    비트맵에서도 인스턴스 이름이 아닌가.
    setTransform 라든가는 바삭바삭 읽습니다.

    하코



    이 개체.
    
    (lib.はこ = function(mode,startPosition,loop) {
        this.initialize(mode,startPosition,loop,{});
    
        // timeline functions:
        this.frame_0 = function() {
    
            /* クリックして特定のフレーム("ねこのきもち")に移動し、停止 */
            this.ハコネコ.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));
    
            function fl_ClickToGoToAndStopAtFrame()
            {
                exportRoot.gotoAndStop("ねこのきもち"); 
            }
        }
    
        // actions tween:
        this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1));
    
    
        // レイヤー1
        // 「ハコネコ」インスタンスを生成。中身は「ねこ」シンボル。
        this.ハコネコ = new lib.ねこ();
        // 初期位置
        this.ハコネコ.setTransform(-2,0,1,1,0,0,0,101.1,105.2);
        this.timeline.addTween(cjs.Tween.get(this.ハコネコ).wait(1));
    
    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(-812,-540,1620,1080);
    

    "고양이 고양이"인스턴스를 생성하고 "고양이 고양이"를 클릭하면 fl_ClickToGoToAndStopAtFrame.bind(this)fl_ClickToGoToAndStopAtFrame.bind(this) 의 내용은, 「고양이 기모치」라고 하는 프레임으로 이동해 정지.

    메인 프레임


    
    // stage content:
    (lib.hakoneko = function(mode,startPosition,loop) {
        this.initialize(mode,startPosition,loop,{});
    
        // timeline functions:
        this.frame_0 = function() {
            /* このフレームで停止 */
            this.stop();
        }
    
        this.frame_1 = function() {
            /* このフレームで停止 */
            this.stop();
        }
    
        // actions tween:
        this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(1).call(this.frame_1).wait(1));
    
        // レイヤー 1
        this.instance = new lib.はこ();
        this.instance.setTransform(958.2,540);
    
        this.timeline.addTween(cjs.Tween.get(this.instance).wait(2));
    
    }).prototype = p = new cjs.MovieClip();
    p.nominalBounds = new cjs.Rectangle(1108.2,540,1620,1080);
    

    메인 프레임은 이번에는 방치.
    아무래도 좋지만, 코드 안에 일본고 있는데 움직이는거야, 굉장히 기분이 좋다.

    다시



    심볼에 심볼을 중첩하지 않고 (무비 클립 심볼을 인스턴스화해야 함) 코드 스 니펫을 적용 할 수 있는지의 문제를 해결합니다.

    깔끔한 개요



    "고양이"심볼은 비트맵이므로 속성은 다음과 같습니다.


    무비 클립의 경우는 이렇게 됩니다.


    비트맵이라면 인스턴스명을 주지 못한다.

    하지만 방금 코드를 읽은 것처럼,
    비트 맵 1에는 "instance"라는 인스턴스 이름이있었습니다.

    실제 코드(일부)



    코드 스니펫에서는 적용할 수 없기 때문에, 「고양이」에 Actions 레이어를 만들어, 1 프레임째에 액션 윈도우로부터 직접 써 갑니다.
    
    this.instance.addEventListener("click", fl_ClickToGoToAndStopAtFrame.bind(this));
    
            function fl_ClickToGoToAndStopAtFrame()
            {
                exportRoot.gotoAndStop("ねこのきもち");
            }
    

    보충



    비트맵을 같은 심볼에 추가했다고 가정합니다. (가령 비트맵 2)
    이 때 비트 맵 1은 "instance_1"이되고 새로 추가 된 비트 맵 2가 "instance"가되므로 요주의. (뭔가 바뀌면 바뀔지도 모른다)
    다른 심볼을 준비하고 비트맵을 배치하면 인스턴스 이름은 "instance"입니다.

    의문



    인스턴스명이 중복하는 것으로 무엇인가 불편은 일어나지 않는 것인가.
    말해, 어려운 사람!

    좋은 웹페이지 즐겨찾기