NEWS

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

  • Web creators

アニメーション

パネルで切り替わる画像

概要

Flashをプロモーションとして利用する場合、画像を切り替える演出を一工夫するだけで全く違った印象を与えることができます。
四角形のパネルで画像をマスクし、ActionScriptで制御することで徐々に画像が切り替わるように見えます。

サンプル解説

3枚の画像が10秒ごとに切り替わります。
最後の画像が表示されると最初の画像に戻ってループします。
画像が切り替わるときには次の画像がパネルに表示されて順番に埋まっていきます。

作成法

(1)シンボルの作成

・画像をライブラリに登録。

画像の登録

・画像をマスクするシンボル「square_mc」を作成。
・幅100px、高さ100pxの四角形を配置。

マスクするシンボルを作成

・マスク対象となる画像を配置するシンボル「image_mc」を作成。

画像を作成するシンボル

・シンボル「image_mc」のタイムラインそれぞれに画像を配置。

タイムラインに配置

・画像をパネルに切り出すシンボル「cell_mc」を作成。
・シンボル「cell_mc」のプロパティよりリンゲージ識別子を「cell_mc」に設定。

パネルとなるシンボル

・シンボル「cell_mc」を開く。
・レイヤー「mask」を作成。
・レイヤー「mask」にシンボル「square_mc」を配置。
・配置したシンボル「square_mc」の座標を(0,0)に設定。
・配置したシンボル「square_mc」のインスタンス名を「square_mc」に設定。
・レイヤー「image_mc」を作成。
・レイヤー「image_mc」にシンボル「image_mc」を配置。
・配置したシンボル「image_mc」の座標を(0,0)に設定。
・配置したシンボル「image_mc」のインスタンス名を「image_mc」に設定。
・レイヤー「image_mc」をレイヤー「mask」でマスクする。

シンボルの編集

(2)シンボルをステージに配置

・ActionScriptを設定するレイヤー「action」を作成。
・レイヤー01に初期に表示したい画像を配置。
・画像の座標を(0,0)に設定

シンボルをステージに配置

(3)ステージにActionScriptの設定

・レイヤー「action」に以下のActionScriptを設定。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// 任意に設定する項目 ///////////////////////////////////
_root.imgChangeMax = 3;  //切り替える画像数
_root.wideCountMax = 5;  //横方向のパネル数
_root.heightCountMax = 3;  //縦方向のパネル数
// ここまで /////////////////////////////////////////////

_root.imgChange = 2;
_root.panelCount = 0;
_root.heightCount = 0;
_root.viewPanel = 0;
_root.depth = 0;
_root.timer = 0;

setInterval(_root.attachPanel, 88);

_root.panelMax = (_root.wideCountMax * _root.heightCountMax) +1;
function attachPanel() {
 if(_root.viewPanel <= _root.panelMax){
  if(_root.panelCount <= _root.wideCountMax){
   _root.attachMovie ("cell_mc", "cell_mc"+_root.depth, _root.depth);
   _root["cell_mc"+_root.depth].image_mc.gotoAndStop(_root.imgChange);
   _root["cell_mc"+_root.depth].square_mc._x = 100*_root.panelCount;

   if(_root.heightCount > 0){
    _root["cell_mc"+_root.depth].square_mc._y = 100*_root.heightCount;
   }

   _root.panelCount ++;
   _root.depth ++;
   _root.viewPanel ++;
  }else{
   if(_root.heightCount < _root.heightCountMax){
    _root.heightCount ++;
    _root.panelCount = 0;
   }
  }
 }
}

onEnterFrame = function() {
 _root.setTimer = getTimer();
 _root.count = _root.setTimer - _root.timer;

 if(_root.count > 10000){
  _root.timer = _root.setTimer;
  _root.imgChange ++;
  _root.panelCount = 0;
  _root.heightCount = 0;
  _root.viewPanel = 0;
  if(_root.imgChange > _root.imgChangeMax){
   _root.imgChange = 1;
  }
 }
}

解説

ステージ上には最初に表示される画像を配置しておき、その上に画像をマスクしたパネルがActionScriptで順番に表示されます。
ActionScriptで01〜03までは使用する画像枚数や、画像の幅・高さからパネルの大きさを割った数値を設定します。
それぞれの画像の幅・高さはできるだけ合わせます。
ここでは画像の大きさ幅500px、高さ300pxとしているため、パネルの大きさも100px×100pxにしています。
14行目の「setInterval」で一定間隔ごとにパネルを表示するようにしています。
20行目でパネルを呼び出し、21行目で次の画像の指定、22行目で画像をマスクする位置をずらすことで画像をパネルで切り出したような処理を行うことができます。
28行目などところどころで数値をカウントアップさせていますが、これは横方向に表示させたパネルを管理し、一定数表示したところで縦方向にずらすように処理をしています。
40〜54行目はタイマー処理を行っており、10秒ごとにパネル表示するようになっています。

ページ上部へ