虫眼鏡

Flashで虫眼鏡効果。複雑な構成のムービークリップも、dynamicクラスでスマートに。

虫眼鏡をご利用ください

引用:古典落語ネタ帳より

作り方

今回のキーポイントは、MovieClipの単位と、dynamic

Flashで作成するMovieClipシンボルは、単一のグラフィックで作るものもあれば、複数のMovieClipシンボルから構成されているものもあります。
ここでは後者の、複雑なMovieClipシンボル、にActionScriptクラスをリンクする方法を説明します。

まず、次のようなMovieClipシンボル「loupeclip」を作成します。構成は3つ。拡大したい落語の文章、虫眼鏡のグラス(レンズ)、虫眼鏡のフレーム。それで、「落語」を「グラス」でマスクしておきます。



「落語」レイヤーに配置している文字は、MovieClipシンボルに変換して「rakugo」というインスタンス名にしておきます。

この「loupeclip」に、次のActionScriptクラスをリンクします。おまじないのdynamicをつけると、MovieClip内にうごめく複数のMovieClipを、1つのクラスで制御できるようになります。


 dynamic class Loupe extends MovieClip{
  var old_x;
  var old_y;
  var rate = 3;
  function onLoad(){
    // rakugoをrate倍に拡大
    this.rakugo._xscale =
    this.rakugo._yscale = 100 * rate;
    old_x = this._x;
    old_y = this._y;
  }
  function onPress(){
    this.startDrag();
  }
  function onRelease(){
    this.stopDrag();
  }
  function onEnterFrame(){
    //ルーペの移動距離のrate倍、「rakugo」を逆方向に動かす。
    this.rakugo._x -= (this._x - old_x)*rate;
    this.rakugo._y -= (this._y - old_y)*rate;
    old_x = this._x;
    old_y = this._y;
  }
 }

あとは、元のサイズの文字とloupeclipを重ねて配置すれば、冒頭のようになります。

オーサリングツールの仕事?ActionScriptの仕事?

どこまでがオーサリングツールの仕事で、どこまでがActionScriptの仕事か?なんてことを考えながら作ってみると、Flashとオブジェクト指向の奥深さがわかります。

ActionScriptクラスは、あくまでも、「再利用できる」ことが重要。そんな風に考えてると、私はこの作り方は今すぐにでも直したい!


コメント
ヤトウゴ
2008/05/29
はじめまして。
素人の私に教えていただきたいのですが、Java ScriptのLoupe.jsを使用し、虫眼鏡の効果をつけたいのですが、
どのようにしたらようのでしょうか?
また、御社のこのソフトでの使用はどのようにするのか。出来れば、無料でダウンロードして使用できるものがあれば教えていただきたいのですが。
何卒、宜しくお願い致します。
武田ソフト
2008/05/29
ヤトウゴさん、はじめまして。
残念ですが、無料ツールはちょっとわからないです。
Loupe.jsおもしろそうですね。後でちょっと触ってみて、もしよろしければメールさせていただきます。

コメントしてください

closed.