Flash ひっかき絵

クレヨン塗りかさねて、クギでカリカリ削って絵を描く、アレ。ActionScriptで作ってみました。ペンツールの作り方、マスクの使い方など。

ひっかき絵

クギを持って、黒いところをカリカリ削ってみてください。子供のころ、よくやりましたよねー。


ペンツール


まず、マウスの動きに合わせて描画するペンツール(クレヨン)の作り方から。クレヨンのムービークリップにリンクしているクラスは、こんな風な型です。


 dynamic class Pen extends MovieClip{
  var onDrawing = false;//描画中かどうか
  var onGet = false;//ペンを持っているかどうか
  function onPress(){
    if( onPencase() )//ペンケース内なら
      getOrPutPen();//拾うか置くか
    else//ペンケースの外なら
      startDraw();//描きはじめる
  }
  function onRelease(){//マウスを放したとき、
    if( onDrawing )//描いてる途中なら
      stopDraw();//描くをやめる
  }
  function onEnterFrame(){
    if( onGet )//ペンを持ってたら
      chaseMouse();//マウスを追う
    if( onDrawing )//描いてる途中なら
      draw();//描きつづける
  }
 }

プログラムを書くときは、最初は、日本語と、それを英訳したメソッド名で、大枠を組んでみるといいでしょう。こうしてみると、構造化やオブジェクト指向の理解が早くなるように思います。各内部メソッドの中身の実装は、末尾に掲載します。

ActionScriptでマスク操作

絵が描けるようになったら、あとは、マスクの使い方を覚えるだけです。

冒頭のFlashのレイヤー構造と、それを実現するコードは、次のようになってます。実世界のソレとは重ねる順番が違うところに注意してください。



  attachMovie('blacklayer','blacklayer',1);
  attachMovie('colorlayer','colorlayer',2);
  createEmptyMovieClip("mask", 3);
  colorlayer.setMask(mask);

ここまで準備できたら、前に紹介したペンツールで、maskレイヤーに対して描画してやれば、冒頭のようになります(ペンツールとほとんど同じなので、ソースは載せません)。


付録 - ペンツールの全ソース

 dynamic class Pen extends MovieClip{
  var onDrawing = false;//描画中かどうか
  var onGet = false;//ペンを持っているかどうか
  function onPress(){
    if( onPencase() )//ペンケース内なら
      getOrPutPen();//拾うか置くか
    else//ペンケースの外なら
      startDraw();//描きはじめる
  }
  function onRelease(){//マウスを放したとき、
    if( onDrawing )//描いてる途中なら
      stopDraw();//描くをやめる
  }
  function onEnterFrame(){
    if( onGet )//ペンを持ってたら
      chaseMouse();//マウスを追う
    if( onDrawing )//描いてる途中なら
      draw();//描きつづける
  }

  /** 以下、内部関数 **/
  var _prev_x;
  var _prev_y;
  var line;
  var linecolor;
  function setColor(color){
    this.linecolor = color;
  }
  function chaseMouse(){
    _x = _root._xmouse;
    _y = _root._ymouse;
  }
  function onPencase(){
    return hitTest(_root.pencase);
  }
  function getOrPutPen(){
    onDrawing = false;
    if( !onGet ){
      _rotation = -30;
      _x = _root._xmouse;
      _y = _root._ymouse;
    }else{
      _rotation = 0;
      this.stopDrag();
    }
    onGet = !onGet;
  }
  function startDraw(){
    _rotation = -60;
    onDrawing = true;
    line = _root.createEmptyMovieClip("line_mc",
          _root.getNextHighestDepth());
    line.lineStyle(5,linecolor,100)
    _prev_x = _root._xmouse;
    _prev_y = _root._ymouse;
    this.startDrag();
  }
  function draw(){
    chaseMouse();
    line.moveTo(_prev_x,_prev_y);
    _prev_x = _root._xmouse;
    _prev_y = _root._ymouse;
    line.lineTo(_prev_x,_prev_y);
  }
  function stopDraw(){
    _rotation = -30;
    onDrawing = false;
  }
 }

コメント

コメントしてください

closed.