NEWS

2017.10.21 「バージョンごとの機能比較」を更新しました。

  • Web creators

アニメーション

収束するアニメーション

概要

横に伸びた画像が左から収束するアニメーションです。

サンプル解説

一定時間で画像が変化します。

作成法

(1) シンボルの作成
  ・配意する画像をライブラリに保存(01.jpg)します。
  ・シンボル「img」を作成した、画像を配置します。
配置する画像
  ・マスク処理するためにキャンパスサイズと同じ大きさの四角形をシンボルとして作成します。
マスクシンボルの作成
  ・シンボル「img_mask」を作成
  ・「mask」レイヤーにシンボル「mask」を設置します。
  ・「img」レイヤーにシンボル「img」を設置します。
  ・設置したシンボル「img」のインスタンス名を「image」と設定します。
  ・シンボル「img」と「mask」を配置する座標をX:0、Y:0としてズレないように設置します。
  ・「mask」レイヤーで「img」レイヤーをマスクします。
マスクの設定
(2) シンボルをステージに配置
  ・ActionScriptを設定する「Action」レイヤーを作成。
  ・「MC_mask」レイヤーを作成してシンボル「img_mask」を設置します。
  ・設置したシンボル「img_mask」のインスタンス名を「mask」と設定します。
  ・「MC_img」レイヤーを作成してシンボル「img」を設置します。
  ・設置したシンボルを配置する座標をX:0、Y:0としてズレないように設置します。
ステージに配置
(3) ステージにActionScriptの設定
 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
maskimgx = 500000;
mask._width = maskimgx;
move = 8;
moveb = 0;
onEnterFrame = function() {
 moveb += move;
 mask._x = moveb;
 mask.image._x = -moveb;
 mask._xscale = (maskimgx/moveb);
 if (mask._x>=400) {
  this.onEnterFrame = null;
 }
}
stop();

解説

最終的に表示させたい画像の上に、マスクの効果を加えた画像を乗せて動作させることで画像が収束して表示されるように見えます。
ActionScriptの01で効果を加えた画像を横に引き伸ばし、05〜13で収束させています。
03の値が大きいほど、収束するスピードが速くなります。

ページ上部へ