読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

MovieClipアクション

イラストを作成

  • イラストはIllustratorで描画し、ステージに読み込みます(同一バージョンでは、コピー&ペースト)

(1)新規ドキュメント[Web]で、イラストを描画する


(2)コピーをして、Flash(ステージ上)でペースト


MovieClipシンボルを作成


シンボルとインスタンス

  • 「ライブラリ」に格納してあるオブジェクトを「シンボル」と呼ぶ

シンボルの特徴
  1. ムービークリップシンボル:ActionScriptを扱うことができる
  2. ボタンシンボル:ロールオーバーなどの演出ができる(AS3では、ボタンの定義ができない)
  3. グラフィックシンボル:タイムラインアニメーションのときのみ使う

ムービークリップ・アクション


(1)レイヤーを追加し、レイヤー名を「Action」にする


(2)スクリプトペインに記述する

  • Actionレイヤーの「1フレーム」を選択して記述する
横に移動する
  • 初期値を入力する
var moveX:Number = 5;
  • 再生ヘッドがフレームを読むたびに実行される処理を無名関数として記述する
this.onEnterFrame = function() {
	
}
  • 無名関数の中に、実行される処理を記述する
this.onEnterFrame = function() {
	kuma_mc._x += moveX;
}
  • [Ctrl + Enter]でムービープレビューで動くことを確認する
ムービークリップが右端から左端に瞬間移動
var rightEdge:Number = 550;
var w:Number = kuma_mc._width/2;
  if( kuma_mc._x > rightEdge + w ) {
		
  }
    kuma_mc._x = leftEdge - w;


まとめると

var moveX:Number = 5;
var rightEdge:Number = 550;
var leftEdge:Number = 0;
var w:Number = kuma_mc._width/2;

this.onEnterFrame = function() {
  if( kuma_mc._x > rightEdge + w ) {
    kuma_mc._x = leftEdge - w;
  }
  kuma_mc._x += moveX;
}
X軸を移動し、端にぶつかったら逆に移動する
  • 動き続けるムービーのため代入は「+=」で実行します
  • ただし、反転(マイナスの値が代入)するために「-1」を掛けます
  • moveX = moveX × (-1);
var moveX:Number = 5;
var rightEdge:Number = 550;
var leftEdge:Number = 0;
var w:Number = kuma_mc._width/2;

this.onEnterFrame = function() {
  if( kuma_mc._x > rightEdge - w ) {
    moveX *= -1;
  }
  f( kuma_mc._x < leftEdge + w ) {
    moveX *= -1;
  }
  kuma_mc._x += moveX;
}


2つの条件の実行処理が同じなので、まとめます。

var moveX:Number = 5;
var rightEdge:Number = 550;
var leftEdge:Number = 0;
var w:Number = kuma_mc._width/2;

this.onEnterFrame = function() {
  if( kuma_mc._x > rightEdge - w || kuma_mc._x < leftEdge + w ) {
    moveX *= -1;
  }
  kuma_mc._x += moveX;
}
縦の動きを加える
var moveX:Number = 5;
var moveY:Number = 5;
var rightEdge:Number = 550;
var leftEdge:Number = 0;
var topEdge:Number = 0;
var bottomEdge:Number = 400;
var w:Number = kuma_mc._width/2;
var h:Number = kuma_mc._height/2;

this.onEnterFrame = function() {
  if( kuma_mc._x > rightEdge - w || kuma_mc._x < leftEdge + w ) {
    moveX *= -1;
  }
  kuma_mc._x += moveX;
	
  if( kuma_mc._y > bottomEdge - h || kuma_mc._y < topEdge + h ) {
    moveY *= -1;
  }
  kuma_mc._y += moveY;
}