NEWS

2016.09.02 「Photoshopとpapervision3dでテクスチャ付3Dを作成する(4)」を更新しました。

  • Web creators

ActionScript

シンボルの自由変形

概要

FLASHではActionScriptでシンボルの拡大・縮小や回転は関数化されているので簡単に利用できますが、傾斜や歪曲といった複雑な変形には対応していませんでした。
しかし、外部のクラスファイルを用いることで傾斜や歪曲などより高度な動きをシンボルに与えることができます。

サンプル解説

右下にデフォルトの画像が表示され、それを自由変形したものが右上に表示されます。

作成法

(1) クラスファイルの取得
  配布元である"Sandy 3D ENGINE"にアクセス。
Sandy 3D ENGINE
 
  「Download」の画面で"Sandy 2.0"と"Sandy 1.2"の「download sources」をクリックしてファイルをダウンロード。
ダウンロードファイル
 
  今回は「Sandy_1_1_04-07-06.zip」と「sandy_2_0_sources.zip」を利用。
ダウンロードしたファイルは圧縮されているので、解凍ソフトで利用可能な状態にする。
利用ファイル
 
(2) クラスファイルの設置
  解凍した「sandy_2_0_sources」の中には「com」フォルダと「sandy」フォルダがあるので、それらをそのままクラスファイルとして設定する場所に設置する。
クラスファイルの設置場所と設定は「クラスファイルの設置とクラスパス」を参照。
ファイルの設置
 
  また、「Sandy_1_1_04-07-06」(解凍後は"src"というフォルダ名になる)の中にあるファイル「/sandy/util/DistortImage.as」を先ほどクラスファイルとして設置した場所「C:/fla_class/sandy/util/」に設置する。(fla_classは任意)
設置先
 
(3) シンボルの準備
  ・自由変形させるシンボルを用意。
  ※下図では、PNGファイルを利用してシンボル「サンプル」を作成。
シンボルの作成
 
(4) ステージへ配置
  ・ActionScriptのレイヤー「Action」を用意する。
  ・配置したシンボル「サンプル」にインスタンス名を「MC」と設定する。
ステージに配置
 
(5) ステージへのActionScript設定
  ・レイヤー「Action」にActionScriptを設定する
 
01
02
03
04
05
06
import flash.display.BitmapData;
import sandy.util.DistortImage;
 
var clip:MovieClip = createEmptyMovieClip("holder",100);
var di:DistortImage = new DistortImage(clip, _root.MC, 4, 4);
di.setTransform(80,40,180,105,105,210,35,110);

解説

はじめに"sandy"と呼ばれるクラスファイル郡を設置しました。
これにより、デフォルトで用意されていない関数を利用することができ、より複雑な動きや設定を行うことができます。
(5)のActionScriptの内、1行目2行目でクラスの読み込みを行っています。
1行目はFlashに用意されているデフォルトのクラスですが、2行目は新たに設置したクラスを表しています。
4行目ではステージ上に新たなムービークリップを作成し、5行目で自分で設置したシンボル"MC"を入れて複製を作っています。
6行目の「setTransform」でシンボルの座標4点を任意の場所に指定しています。
数値の左から1番目と2番目はシンボルの左上の頂点座標を表し、あとはシンボルの時計回りの順に座標を指定しています。

ページ上部へ