Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[Flash]④MovieClipクラス、図形描画、ボタンイベント、マスク、オブジェクトの移動

Flash

MovieClip

  • MovieClipはそれぞれ自分のタイムラインをもつ
  • それぞれが別のタイムラインとして独立して再生される
  • メソッド、プロパティ、イベントハンドラの種類は非常に豊富、以下代表的なものを記述
メソッド：フレーム関連
  • MovieClip.stop()
  • MovieClip.play()
  • MovieClip.nextFrame()
  • MovieClip.prevFrame()
  • MovieClip.gotoAndPlay()
  • MovieClip.gotoAndStop()
メソッド：インスタンス関連
メソッド：読み込み関連
  • MovieClip.loadMovie()
  • MovieClip.unloadMovie() ▶ loadMovieで読み込んだswfファイルを削除
  • MovieClip.getBytesLoaded() ▶ 読み込み済みのサイズを取得
  • MovieClip.getBytesTotal() ▶ 全体のサイズを取得
メソッド：深度関連
  • MovieClip.getDepth() ▶ 深度を取得
  • MovieClip.getNextHighestDepth() ▶ 利用できる一番手前の深度を取得
  • MovieClip.swapDepths() ▶ ２つのムービークリップの深度を入れ替える
メソッド：その他
  • MovieClip.startDrag() ▶ ドラッグ可能にする
  • MovieClip.stopDrag()
  • MovieClip.hitTest() ▶ 他のムービと接触しているか真偽で返す
  • MovieClip.setMask() ▶ マスクを設定
  • MovieClip.getURL() ▶ URLのドキュメントをブラウザに表示
プロパティ
  • MovieClip._name
  • MovieClip._visible
プロパティ：表示関連
  • MovieClip._alpha
  • MovieClip._width
  • MovieClip._height
  • MovieClip._x
  • MovieClip._y
  • MovieClip._xscale
  • MovieClip._yscale
  • MovieClip._rotation
プロパティ：座標関連
プロパティ：フレーム関連
  • MovieClip._currentframe ▶　現在のフレーム番号
  • MovieClip._toralframes ▶ 全体のフレーム数
イベントハンドラ

MovieClip.onEnterFrame　▶　フレームレートで設定した時間が経過 MovieClip.onLoad　▶　インスタンスが読み込まれた MovieClip.onUnload　▶　インスタンスが削除された MovieClip.onMouseDown　▶　マウスボタンが押された MovieClip.onMouseUp　▶　マウスボタンが離された MovieClip.onMouseMove　▶　マウスが移動した

MovieClipでボタンを作る

  • ボタンのように機能させることができる
  • ムービークリップでボタンを作ると、フェードアウトなど演出効果を組み合わせることができる
  • フレームラベル up over downをつけてボタンとして動作させることができる
プロパティ：ボタン
  • MovieClip.useHandCursor ▶ ボタン上で指差しマークを表示(true/false)
  • MovieClip.hitArea ▶ ヒット領域
  • MovieClip.enabled ▶ ボタンとして動作させるか(true/false)
イベントハンドラ：ボタン
  • MovieClip.onPress ▶ ボタン上でマウスが押された
  • MovieClip.onRelease
  • MovieClip.onReleaseOutside ▶ ボタン押下後外側でマウスが離された
  • MovieClip.onRollOver ▶ マウスポインタがボタン上にきた
  • MovieClip.onRollOut
  • MovieClip.onDragOut
  • MovieClip.onDragOver

ボタンをクリックするとブラウザに表示する

f:id:akatonbo_web:20150519020025p:plain

  • ボタンイベント「Button.onRelease」
  • ムービークリップのメソッド「MovieClip.getURL()」
  • htmlフォルダに表示したいhtmlファイルを置く
  • 「this.parent」は rootをさす
  • _rootのメソッド「getURL」を呼び出す
var photo1Button: Button;
var photo2Button: Button;

//ボタンイベントに関数を割り当て
photo1Button.onRelease = openPhoto1; 
photo2Button.onRelease = openPhoto2;

function openPhoto1():Void
{
     this._parent.getURL("html/box1.html","photoWindow");
}
function openPhoto2():Void
{
     this._parent.getURL("html/box2.html");    
}

スクリプトで図形を描く

メソッド:描画
  • MovieClip.lineStyle() ▶ 線の太さ、色変更
  • MovieClip.moveTo() ▶ ペン位置変更
  • MovieClip.lineTo() ▶ 現在のペン位置から線を引く
  • MovieClip.curveTo() ▶ 現在のペン位置から曲線を引く
  • MovieClip.beginFill() ▶ 塗りを開始
  • MovieClip.beginGradientFill() ▶ グラデーション塗りを開始
  • MovieClip.endFill() ▶ 塗りを終了
  • MovieClip.clear() ▶ スクリプト描画を消去
スクリプトだけで図形描画
  • lineStyle(線の太さ, １６進数の色, アルファ値)
var canvas: MovieClip;
canvas = this.createEmptyMovieClip( "canvas", 1 );
//空のムービークリップをインスタンス名canvas、深度１で作り、作られたインスタンスへの参照をcanvasにセット

var startX:Number = 125;     //基準X座標
var startY:Number = 50;          //基準Y座標

canvas.moveTo(startX, startY);     //ペンの移動

canvas.lineStyle(5, 0x333333, 100);     //線の太さと色    

canvas.lineTo( startX + 25, startY - 25 );     //直線描画
canvas.lineTo( startX + 50, startY );
canvas.lineTo( startX + 50, startY + 50 );    
canvas.lineTo( startX, startY + 50 );
canvas.lineTo( startX, startY );
canvas.lineTo( startX + 50, startY);

canvas.lineStyle( 1, 0x666666, 100);

canvas.moveTo( startX + 15, startY + 15);     //ペンの移動

canvas.beginFill( 0xaaaaaa, 100);     //塗りの開始

canvas.lineTo( startX + 35, startY + 15);
canvas.lineTo( startX + 35, startY + 35);
canvas.curveTo( startX + 25, startY + 45, startX + 15, startY + 35);     //曲線を描画
canvas.lineTo( startX + 15, startY + 15);

canvas.endFill();     //塗りを終了

画像と文字にマスクを設定する

  • メソッド：MovieClip.setMask()▶MovieClipが、()内に指定されたインスタンスによってマスクされる
  • プロパティ：TextField.text
  • イベント：Button.onRelease
var photoMaskButton: Button;
var textMaskButton: Button;
var mask1:MovieClip;
var mask2:MovieClip;
var targetPhoto:MovieClip;
var targetText:MovieClip;
targetText.sampleText.text = “TextFieldクラスのプロパティ「text」に表示するテキストをセットする";
photoMaskButton.onRelease = setPhotoMask;
textMaskButton.onRelease = setTextMask;
function setPhotoMask():Void{
     targetPhoto.setMask(mask1);
}
function setTextMask():Void{
     targetText.setMask(mask2);
}

ボタンを押すとスクリプトでオブジェクトを移動

f:id:akatonbo_web:20150519020208p:plain

  • プロパティ：MovieClip._x
  • プロパティ：MovieClip._y
  • イベント：Button.onPress
  • イベント：Button.onRelease
  • イベント：MovieClip.onEnterFrame▶フレームレートで設定された早さで定期的に発生し続けるイベント
  • ボタンを押している最中、onEnterFrameで座標がフレームごとに変化し動いているように見える
var btn:Button;
var obj:MovieClip;

btn.onPress = startMove;
btn.onRelease = stopMove;

function startMove():Void{
     this._parent.onEnterFrame = moveBox;
}

function stopMove():Void{
     delete this._parent.onEnterFrame;
}

function moveBox():Void{
     obj._x += 2;
     obj._y += 1;
}