Adobe Flash 分解の使い分け

Adobe Falshの「分解」というコマンドがありますが、文字の分解、つまり一文字に分解することにしか使ってなかったけど、対象によっていろいろな使い方があるのでその覚書。

  • グループ → グループを解除
  • インスタンス → シンボルとの関係を解除
  • テキスト(1回目) → 1文字に分解
  • テキスト(2回目) → アウトライン化

ショートカットは「Ctrl」+「B」

文字を分解するのにしか使っていなかったけど、こんなに使い道があるとは知らなかった。

flashでランダムに画像を表示させる方法

環境
OS : Windows7
使用ソフト : Adobe Flash CS6

準備

ランダムに表示させる画像を用意します。
今回は以下のような6枚の画像を用意しました。それをflashでランダムに表示させます。

radom

flashを起動して、ファイル→新規→一般タブとクリック。
「ActionScript 2.0」を選択して、幅と高さを今回は画像に合わせ
幅を320px、高さを240pxに設定して「OK」をクリック。

WS01

ランダム表示させるためのシンボルを作成します。
挿入→新規シンボルとクリック。

WS02_2

「新規シンボル作成ウインドウ」が開くので「名前」に任意の名前を入力。今回は「random01」とします。「種類」に「ムービークリップ」を選択して「OK」をクリック。

WS04_2

左下のタイムラインにデフォルトで生成された「レイヤー1」をダブルクリックして「photo」に名称変更。

WS05_2

一番左下の「新規レイヤー」ボタンをクリックして、先ほど同様レイヤー名を「action」に変更する。

WS06_2

もしくは「挿入」→「タイムライン」→「レイヤー」としてもレイヤーを追加できます。

WS06_3

「photo」レイヤーの2フレームをクリックして、「ファイル」→「タイムライン」→「キーフレーム」、

WS06_4

もしくは「photo」レイヤーの2フレームを右クリックして、「キーフレームの挿入」をクリックして2フレームをキーフレームにします。

WS06_5

「ファイル」→「読み込み」→「ステージに読み込み」をクリック。

WS07_2

「読み込み」ウインドウが開くので読み込みする画像を選択して「開く」をクリックします。

WS10_2

ファイル名が連番になっていると下記のような表示が出ます。今回は「いいえ」をクリックします。すると画像が読み込まれます。

WS09_2

読み込まれた画像をクリックして、画像が選択されていることを確認してから、「修正」→「シンボルに変換」をクリック。

WS12_2

「シンボルに変換」ウインドウが開くので、任意の名前を入力します。今回は「p01」とします。種類に「ムービークリップ」を選択して「OK」をクリック。

WS13_2

3フレーム以降も2フレームと同じ手順で進めるのですが、キーフレームを挿入すると、2フレームのインスタンス(読み込ませた画像)がコピーされた形となるので、必ず削除してから新しい画像を読み込みします。このあたりで間違うと後述する不具合に関係してくるかもしれませんので要注意です。

WS12_4

シンボルに変換をランダムに表示させたい画像の数だけくりかえします。今回は6枚の画像を用意したので6回繰り返します。

WS14_2

2から7フレームに一個ずつ違う画像を配置しました。

「action」レイヤーの1フレームをクリックして選択し、「ウインドウ」→「アクション」をクリック。

WS15_2

ActionScriptを記述するための「アクションパネル」が開きます。右の空欄部分に今回の肝であるActionScript記述します。うへぇっ!やっぱりそうなのかよ!?と思われた方もいるかもしれませんが、自分もHTMLを扱っているくせにプログラム系の言語となると動悸、息切れ、めまい、吐き気が襲ってくるタイプなので、面倒なことはごめんです。簡単に済ませてしまうのでご心配には及びません。

WS16

下記をまずコピペします。

ransuu=Math.floor(Math.random()*7)+2;
gotoAndStop(ransuu);

だけです。

WS17

説明します。「ransuu」は乱数を入れるための入れ物です。変数ですね。変数を使うための宣言がなかったり、前に記号がつかなかったり見分けづらいところもありますが、プログラムが苦手な自分としては逆にあれこれ縛られずに使いやすかったりします。

「=」の右側はおまじないです。一つだけ修正しなければならないところが、今回の場合でいうと「7」のところです。察しのいい方はお気付きでしょうが、これがランダムに表示させたい画像の枚数と同じにします。上記は「7」となっていますが、今回は6枚の画像を用意して、それをランダムに表示させるので「6」とします。

もう少し説明すると、「rannsuu」に2から7までのランダムに発生させた数字を入れなさいという命令です。

次の行はカッコ内のフレームに行って止まれという命令です。カッコ内は「ransuu」となっているので、ランダムに発生する2から7までのフレームに行って止まりなさいという命令です。面倒なところはここだけです。でも、コピペして数字の「7」を「6」にするだけなので簡単ですよね。

これで画像をランダムに表示させるカラクリは完成です。「表示」→「移動」→「最初」でステージに戻ります。ちなみに同じように「表示」→「移動」→「random01」とクリックすると「random01」の編集画面に移動することができます。

WS18_2

「photo」レイヤーの1フレームを右クリック→「キーフレームの挿入」

WS19_2

「ライブラリ」タブをクリックして、ライブラリを表示させ、先ほど作った「radom01」をステージのドラッグします。

WS20_3

「ウインドウ」→「整列」をクリックして「整列」パネルを表示させます。

WS21_2

「ステージを基準」にチェックを入れて縦、横、それぞれ中央寄せをクリックします。

WS21_4

とりあえず、画像をランダムに表示させるだけならこれで完成です。「ファイル」→「パブリッシュプレビュー」→「デフォルト」、もしくはショートカットキーの「F12」を押すとブラウザでプレビューができます。起動するたび、もしくは更新ボタンを押す度にランダムに画像が切り替わります。

WS22_2

おまけ : モーショントゥイーンをつけてみる

2~30フレームをドラッグして選択し、右クリックで「フレームの挿入」をクリック。

WS23_2

1フレームをクリックして「モーショントゥイーンを作成」をクリック。

WS24_2

30フレームを右クリックして「キーフレームの挿入」→「全て」をクリック。

WS25_2

このとき選択しようとしているフレームに再生ヘッドがクリックしようとしているフレームにあると思うようにクリックできなくてモニターに滅昇竜拳を食らわしたくなります。そういうときは再生ヘッドを他のフレームへ移動するとクリックしやすくなります。

WS26_3

1フレームをクリックして、ステージ上の「random01」をクリックして、「プロパティ」をクリックします。プロパティタブの「カラー効果」→「スタイル」の「なし」を「アルファ」に設定します。

WS27_3

アルファの調整スライダーが表示されるので「0%」に設定します。ちなみに、透明度0ということで表示されないということです。

WS28_2

WS29_2

同じ手順で30フレームをクリックして、ステージ上の「random01」をクリックして、「プロパティ」をクリックします。プロパティタブの「カラー効果」→「アルファ」を「100%」設定します。に設定します。

WS30_3

「action」レイヤーの30フレームを右クリックして、「キーフレームの挿入」とクリック。

WS31_2

「action」レイヤーの30フレームをクリックして、「ウインドウ」→「アクション」とクリック。

WS32_2

「アクションパネル」が開くので「stop();」と入力して、ウインドウを閉じます。

WS34

これで完成です。「ファイル」→「パブリッシュプレビュー」→「デフォルト」、もしくはショートカットキーの「F12」を押すとブラウザでプレビューができます。ブラウザの更新ボタンをクリックする度にふわーっと画像がランダムに表示されます。

※不具合

原因不明で検証していないのですが、おそらく、フレームを追加する際に、前のフレームのインスタンスを削除しないでその上に画像を読み込むと透明度が低いときに画像が重なって表示されるようです。また、画像だからとシンボルに変換する際に「ムービークリップ」ではなく、無意識に「グラフィック」を選択していたりすると表示されなかったり、思っている動作をしなかったりするようです。

また、そのような状況に陥った場合は手順に気を付けながら再度作り直した方が早いということを自分用覚書として書き留めておきます。きっとまた同じところではまると思うので・・。

サンプル

モーショントゥイーンなし

モーショントゥイーンあり

モーショントゥイーンあり2回表示

付録

動作確認済みの完成ファイル、素材一式を自分用に置いておきます。こんなものでよければ参考にしてみてください。ダウンロード、改変はご自由にどうぞ。

ダウンロード用ファイル「flashRandom.zip