2015年 04月30日（33日目）のWEB制作の勉強メモ Flash ActionScript2.0

Adobe Flash CS5.5 と ActionScript2.0 を使って 車のイラストを動かし 車の動きをボタンでコントロールする

この記事内のリンクです↓ (長い記事になってしまったため；)

• この記事について
• Flash CS5.5、CS6 のダウンロードの方法
• Adobe Flash CS5.5 と ActionScript2.0 を使って 車のイラストを動かし 車の動きをボタンでコントロールする
• Illustratorのデータからシンボルに変換、その設定と調整
• オブジェクトを動かす（クラシックトゥイーン）
• ActionScript2.0 で動作するボタンシンボルを作成
• テキストボタンにマウスを乗せた時に反応する『面』を敷く
• 作ったボタンを複製し、ボタンの役割に合わせてテキストを変更
• ボタンをオブジェクトと同じステージに置く
• ActionScript2.0 を記述して オブジェクトの動きを制御する
• 参考にさせていただいたサイト・ブログ
• 本の紹介 (記事最下部)

この記事について

授業ではまず、Illustrator の復習を兼ねて 車のイラストを作成する所からスタートしました。
この記事ではその部分の説明を省いて、出来上がったイラストをコピーする所から説明しています。
また、この記事の説明は、授業の内容の手順を思い出せる限り記載し、それに対して、授業だけでは分からなかったり、聞き逃したり、聞いてる（はず…）なのにスルースキルが発動してしまったりした部分を “脳が猫サイズの自分” にも分かるよう調べて補足を足した内容になっています。
このような意図なので、他の方法があるような手順や 「違うんじゃね？」 という部分があるかも知れません。

以下の練習は、自宅でも可能ですが、IllustratorCC からコピーしたオブジェクトデータを Flash CS5.5 へペーストするのが、バージョン差による互換性の問題で出来ないため、既に出来上がった車のオブジェクトを使用するなどして下さい。
その場合は、ここから車のイラストデータをダウンロードし、 （図17） からの説明を見て進めて下さい。

このブログでは 解像度が大き目の画像を表示する場合、Hatenaのフォトライフ（HatenaBlog内のアルバム）では画像がかなり小さくなってしまうので、Flickr を利用する事にしています。
ブログ内のスクリーンショット画像はサムネイルになるので、小さくて見づらい部分があるかと思うので その場合は画像をクリックして 大きな画像を見てみて下さい。
拡大する必要が無い小さな画像は Hatenaフォトライフにアップロードし その画像へのリンク（拡大表示）は外して います。

Adobe Flash CS5.5、CS6 のダウンロード

この記事の内容は Adobe Flash CS5.5 を使ったFlashの練習です。
（授業では CS6を使っていますので それに合わせる場合は CS6を）
Adobe Flash CS5.5、CS6 の体験版をダウンロードするには、以下の方法で可能です。

1. AdobeID を取得（無料）
   
   
2. ログインしてから一旦ここに訪問（これでＤＬに必要なクッキーを取得するらしい。クッキー取得が目的なのでダウンロード＆インストールする必要はありません）
   
   
3. ●Adobe Flash CS5.5 （体験版）をダウンロード（Win版｜Mac版）
   
   ●Adobe CS6 Master Collection （体験版）をダウンロード
   (FlashCS6 の他 色々トータルに入っています)
   （ Win版 ｜ Mac版 ）

※この記事を書いた2015年4月現在の情報です。これ以降入手手段が変更になったり リンク切れになったりする可能性もありますが ご了承下さい。体験版の使用期間は30日間です。

Illustratorのデータからシンボルに変換、その設定と調整　｜ TOP

図１）

Illstrator の画面から オブジェクト（図形）を全て選択した状態にし、コピー。

図２）

Flash の画面に移り、
メニューの『ファイル(F)』＞『新規(N)』を選択。

図３）

すると、以下のようなウィンドウが出ます。
上から２番目の 『 ActionScript 2.0 』 を選択し、 『ＯＫ』をクリックします。
（ここでは右側の設定はそのまま触らずに続けます）

図４）

すると、以下のように新規ファイルの画面になります。

（※これ以降、任意で保存して下さい）

図５）

この新規ファイルに、Illustrator からコピーした図形をペースト（Ctrl ＋ V）をすると、以下のウィンドウが出ます。
このまま 『ＯＫ』 をクリック。

図６）

すると、以下のようにステージの中心に Illustratorから持ってきたオブジェクト（図形）が貼りつけられます。
※ オブジェクトに青い枠が付いている表示は 「それが選択された状態」 を示しています。 「選択を解除」 する必要が無い場合はそのまま説明が続きますので、　これ以降、選択された状態のままの作業の場合は 選択解除にならないよう意識します。 選択解除してしまった場合は 「Ctrl + V」（１回戻る） または 「選択ツール(V)」で選択します。

図７）

メニューの『修正』＞ 『シンボルに変換』 を選択。

図８）

すると、以下のウィンドウが出ます。
プルダウンメニューの『グラフィック』を選択
（ムービークリップ・ボタン・グラフィックの中から）
『名前』は、分かりやすく 『くるま』など適当に。
（後から追加するボタン、『START』『STOP』『BACK』 との区別ができればＯＫ）

図９）

以下のように入力・選択したら 『ＯＫ』 をクリック。

図10）

ずると、車のイラストに付いている 青い枠が以下の様な複数ある状態から、

図11）

『シンボルに変換』 された事で 青い枠が一つになり、車を一つの枠で囲っている状態になります。

図12）

画面の右側にある、『プロパティ』タブがアクティブになっていたのを、 『ライブラリ』タブをクリックして見ます。
図の下の方が以下のようになっています。
・1個のアイテム
・名前
・くるま
『シンボルに変換』をする時に付けた名前がここに表示されています。
この状態で、『くるま』が選択されているので、上に 車のイラストが表示されています。
今『くるま』だけですが、このリストにシンボル化したオブジェクトや、最初からシンボルになっているオブジェクトが並んでいきます。

図13）

ステージの白い範囲の中で車を走らせるので、適当に拡大・縮小させます（任意）。
画面右端に並んでいるツールメニューの上から３つ目、『自由変形ツール(Q)』を選び、

図14）

オブジェクト（車）を囲っている四角の四隅の一つをドラッグして 適当な大きさにします
（Photoshop や Illustrator と同じく、Shiftキー を押しながらドラッグすると 縦横比を固定したまま拡大縮小が出来ます）。

図15）

車のイラストを縮小して このようになりました。

図16）

終わったら、『選択ツール』（矢印の形のツール）にもどしておきます。
（画面一番右のツールメニューの一番上）

図17）

この後、画面下の 『タイムライン』の編集になるので、分かりやすくするため、ここまでで作ったオブジェクトが置いてあるレイヤーの名前を変更しておきます。
画面一番左下の辺りの『レイヤー１』となっている所をダブルクリックすると、レイヤー名を変更できます。
作業中に分かりやすいよう、『くるま』（例）と。
（後から追加する 『ボタン』『ActionScript』と区別できればＯＫ）
※くるまのシンボルデータをダウンロードした場合はここからスタートになります。

オブジェクトを動かす（クラシックトゥイーン） ｜ TOP

図18）

オブジェクト（くるま）の位置をドラッグして、ムービーにする時のスタート地点に移動させます。

図19）

オブジェクトをスタート地点にドラッグして移動させた状態。
（位置は この画像に厳密に合わせる必要はありません）

図20）

画面下の『タイムライン』上で、80の辺りをクリックして選択し、その80の所で、コンテクストメニュー（右クリック）を出して、メニューから 『キーフレームの挿入』を選択。

図21）

すると、タイムラインがこのようになります。

図22）

タイムラインの80の所を選んだ状態で、オブジェクト（くるま）を画面の右端（移動の最終地点）に移動させます。
（Shiftキーを押しながらドラッグすると 同じ高さのまま横に移動できます）

図23）

ドラッグして移動した後の図。

図24）

その後、１～80の間のどこでもいいので（図では中間辺り）、選択し、
そこでコンテクストメニュー（右クリック）を出し、『クラシックトゥイーンを作成』を選択。

図25）

すると、画面下の『タイムライン』とオブジェクトの位置がこのようになりました。

図26）

そのまま 『Enter』キーを押してみます。
動けば くるまの動きは成功です。
もう一度 『Enter』キーを押すと、最初の地点（画面左端）から動く所を見る事ができます。

ActionScript2.0 で動作するボタンシンボルを作成　｜ TOP

図27）

ボタンを作成するための新規レイヤーを作ります。
画面の一番左下の、ちっこい書類アイコンをクリックすると、新規レイヤーができます。

図28）

画面左下のアップです。

図29）

ちっこい書類アイコンをクリックして、新規レイヤーができました。

図30）

分かりやすくするため、新しくできたレイヤーに名前を付けましょう。
『レイヤー2』の所をダブルクリックします。

図31）

ボタンを作成するレイヤーなので『ボタン』としました。

図32）

もう一度 『ボタン』レイヤーをクリックすると選択した状態になります。

図33）

『挿入(I)』メニューから 『新規シンボル(N)』を選択します。

図34）

するとこのウィンドウが出るので、種類(T)のプルダウンメニューから『ボタン』を選択。

図35）

種類：『ボタン』を選び、名前にも『ボタン』と入力をして 『ＯＫ』をクリック。
（後で『STARTボタン』と書き換えるので 『STARTボタン』でもＯＫ）

図36）

すると、画面がいろいろ変わりましたが、変わったと言うより、新しい画面が開いた、という表現の方が近いような気がする画面です。
大きな変化がある所に３ヵ所を囲ってみました。
操作する必要のある所は順に説明していきます。

図37）

画面右側を見ます。
『ライブラリ』タブが選ばれていた状態から、『プロパティ』タブを選択します。
文字を打っていくので、『テキストツール』を選択します。
すると、下図のような、『テキストツール』のプロパティ表示に変わります。

囲いをしている部分が、上の画像と同じになるように設定して下さい。
□テキストツール
・静止テキスト
▽文字
・サイズ：30.0pt（好みで構いません）
・フォント：Arial Black（好みで構いません）
▽段落（最初は閉じているのでクリックして開く）
・行揃え：中央揃え

図38）

『テキストツール』で ステージをクリック。
（これで文字の入力ができるようになります）

図39）

「START」 と入力します。これが後に 『スタートボタン』として機能します。

図40）

基準点（画面中央にある 「＋」）を、文字の中央に持ってくるため、文字をカット＆ペースト（Ctrl + X → Ctrl + V）します。
すると文字が中央になり、それによって、基準点が文字の中央に来る事になります。

図41）

CSSで言うところの、hover や active、display:block に相当する設定をしていきます。
まず、画面下のタイムラインの『アップ』という所でコンテクストメニュー（右クリック） 『キーフレームの挿入』を選ぶと、『オーバー』の所にコマが増えます
（上記の動作『キーフレームの挿入』は『Ｆ６』キーでできる事を覚えておく）。
同じ事を合計３回します（『キーフレームの挿入』を３回、又は Ｆ６キーを３回押す）。

図42）

すると、画面左下のタイムラインが、このようになります。

アップ：マウスがボタンの上から外れている時（link）
オーバー：マウスがボタンに乗っている時（hover）
ダウン：マウスが押された瞬間（active）
ヒット：マウスの反応をうける面積（display:block）
※（）内は CSSでの場合の表現

最初に『アップ』の所に 『START』 のテキストを打った状態にし、『キーフレームの挿入』をした事で、テキストの『START』が、『オーバー』『ダウン』『ヒット』の所にコピーされたような状態になっています。

図43）

link、active、hover で色が変わるように、Flashでも 『アップ』『オーバー』『ダウン』の所の文字の色をそれぞれ別の色に変更します。
まず、この画像では 『アップ』を選択しました。
すると、画面右が 『ライブラリ』タブに変更されてしまうので、また『プロパティ』タブをクリックし、更に『テキストツール(T)』もクリックして選択します。

図44）

テキスト『START』の上でダブルクリックすると、そのテキストが選択された状態になります。
画面右の ▽文字 → カラー の所をクリックして、任意の色に変更します。

図45）

『オーバー』『ダウン』の所も同様のやり方で、他の色に変更します。
画面下の『タイムライン』上で、『オーバー（オー…）』を選択。
すると、なぜかまた画面右側の『プロパティ』の画面が変わってしまうので（※↓追記）、一番右のツールメニューのどれかを選択して、テキストツールのプロパティを表示させます。
※タイムライン上で選択した後、ステージ上の変更を適用したいオブジェクト（シンボル）をクリックして選択するとプロパティ表示が目的の表示になるようです。
（図44）の時と同様、テキストの文字をダブルクリックして、カラー変更。

図46）

更に『ダウン』を選択して、同様の手順で、文字の色を変更します。
今更気付きましたが、『プロパティ』タブが、『テキストツール』になっていなくても、更に文字をダブルクリックしなくても、画面右端・ツールメニューの下の方にある 『塗りのカラーツール』で文字色変更が出来る事が分かりました…。
ま、こうやって、ソフトの仕様に慣れていく…という事で(-_-;)

テキストボタンにマウスを乗せた時に反応する『面』を敷く　｜ TOP

図47）

同じく『タイムライン』上の 『ヒット』を選択し、画面一番右のツールメニュー一番上の 『選択ツール(V)』を選択します。

図48）

ステージの上、文字の上以外で、クリックし、文字の選択（青枠）を解除します。

図49）

画面一番右のツールメニューから 『矩形ツール(R)』を選択。
（画像では色と角の丸みを設定していますが、全く必要ありません）

図50）

『矩形ツール(R)』で、『START』の文字を囲むようにドラッグします。

図51）

ドラッグから手を放した状態。
この画像では枠内の色と枠線色を設定してしまったのですが、ここではそれは全く意味がなかったので、普通に透明の長方形ができればＯＫです。
Illustrator などと違って、この矩形ツールは、ドラッグ始めとドラッグ終わりの支点が ちょっと違うようで、「あれれ？」となりますが、失敗したら 『Ctrl』＋『Z』キーでやり直します。

『ヒット』にこの『面』を敷く事で、Display:block のような役割をしてくれます。

作ったボタンを複製し、ボタンの役割に合わせてテキストを変更　｜ TOP

図52）

さっき作ったボタンのシンボルを複製します。
（図51）までで作ったのは『STARTボタン』なので、これを後２つ複製して『STOPボタン』『BACKボタン』を作ります。
画面右が『プロパティ』タブが表示されていたのを、『ライブラリ』タブを選んで表示し、アイテムリストの『ボタン』が選択されているのを確認してから、そのオプションメニューをクリックして表示します（下図の右側の囲い）。
オプションメニューの中の『複製』を選択。

図53）

すると、このようなウィンドウが出ます。

図54）

種類はボタンのままで、名前を『STOPボタン』とします。

図55）

同じようにボタンの複製をもう一度行い（（図52） を参照）、名前を『BACKボタン』とします。

図56）

画面右のアイテムリストに並ぶシンボルがこのように増えました。
この画像は、最初に作った『ボタン』をコンテクストメニュー（右クリック）から『名前を変更』を選び、『STARTボタン』に変更した所です（任意）。

図57）

この図ではシンボルの『STOPボタン』が選択されていますが、実際のステージ上のボタンには『START』になっていますので、ボタン名に合わせる変更を加えます。
下の画像を参考に 『シンボルの編集』をクリックし、『STOPボタン』を選択します。

図58）

すると、下の画像の左上の囲いの部分のシンボル名が代わり、『STOPボタン』になりました。
画面一番右のツールメニューから『テキストツール(T)』を選択し、更に、画面下の『タイムライン』から『アップ』を選択。
ステージ上の『START』をダブルクリックして、『STOP』と書き換えます。

図59）

画面下の『タイムライン』上の『アップ』が済んだので、『オーバー』を選んで、同じようにステージ上のテキストをダブルクリックして『STOP』に書き換えます。
同じように『ダウン』『ヒット』も書き換えます。

同様に『シンボルの編集』から 『BACKボタン』を選んで、『アップ』『オーバー』『ダウン』『ヒット』を全て『BACK』に書き換えます。
（図57）の『シンボルの編集』を選択

ボタンをオブジェクトと同じステージに置く　｜ TOP

図60）

画面上部の『シーンの編集』をクリックすると『シーン１』という項目があります。
これが、動くくるまを作ったステージです。『シーン１』をクリックします。

図61）

すると、初めに作成した動く車の画面になりました。
画面左下のレイヤーから、『ボタン』のレイヤーを選びます。

図62）

画面右のシンボルのリストから、シンボルのボタンをドラッグしてステージ上に置きます（『選択ツール(V)』を使います）。
タイムラインの『ボタン』レイヤーにボタンが出来た状態になります。

図63）

これまでに作ったシンボルのボタンを３つステージに配置した状態。
左から 『START』 『STOP』 『BACK』。
下の画像は ボタンが３つとも選択された状態です。

図64）

配置したボタンを『整列ツール』で位置を整えます。
下図の場所を参考に 『整列ツール』を選択すると パレットが出ます。

図65）

『選択ツール(V)』で ボタンを３つとも選択した状態にしてから、『整列ツール』の、『中央揃え（垂直方向）』『均等配置（水平方向）』など使ってボタンの位置を整えます。

ActionScript2.0 を記述して オブジェクトの動きを制御する　｜ TOP

図66）

これまでに作った３つのボタンを ActionScript の記述と関連付けるために、それぞれのボタンに『インスタンス名』 を付けます。
『選択ツール(V)』を使い、インスタンス名を付けるボタンを選択します。
ここでは『START』ボタンを選択しました。
画面右側の上部に 『プロパティ』タブが表示されています。
（表示されていない場合は、プロパティタブをクリックしてください）

図67）

下図はプロパティ上部です。
『START』ボタンなので、インスタンス名に “start_btn” と入力しました。
『STOP』ボタン → “stop_btn”、『BACK』ボタン → “back_btn”
と 後の２にも、ボタン選択 → インスタンス名入力をします。
※半角英数字で記述

図68）

ActionScript を記述するレイヤーを 新規レイヤーとして作成します。
画面左下のちっこい書類アイコンをクリックしてレイヤー作成。
新規レイヤー名をダブルクリックしてレイヤー名を 『ActionScript』に変更しました。

図69）

『選択ツール(V)』で『ActionScriptレイヤー』を選択し、メインメニューの『ウィンドウ』から『アクション(A)』を選択。
（ショートカットキーは F9キー）

図70）

するとこのウィンドウが出ます。
ここに ActionScript を記述します。
この画像では すでに記述された状態です。
（テキストは画像の下にあります）

this.stop();
// このストップの命令は、Flash が、ムービーを読み込まれたら すぐ再生が始まる仕様なので、１フレーム目にストップの命令を記述しています。

this.start_btn.onRelease = function() {
	play();
}
// 『start_btn』がクリックされた時に 『play』の命令をする記述

this.stop_btn.onRelease = function() {
	stop();
}
// 『stop_btn』がクリックされた時に 『stop』の命令をする記述

this.back_btn.onRelease = function() {
	gotoAndStop(1);
}
// 『back_btn』 クリックされた時に 『go to and stop』の命令をする記述。「行ってストップ」を (1) で示されている「１フレーム目で」という命令。つまり、「１フレーム目に行ってそこでストップ」という命令。 (2) であれば、「２フレーム目で」 という具合。

インスタンス名を付けずに作成する方法は↓こちら

最初は師匠にこのリンク先の方法を説明された後で、上記の記述に直すよう指示されたので、ActionScript2.0の記述法として 一応目を通しておく事をお勧めします。
スタートボタンでアニメーションを再生させよう

図71）

Ctrl + Enter を押して、プレビュー再生します。
３つのボタンで命令通りに動けば成功。
成功したらここでFlash作成が終わりです。

いつもは自分にしか分からないようなメモ書きですが、今回は分からなかった所を調べて理解する目的と復習を兼ねて 「他の人が見ても分かるように」を心掛けて記事を書きました。
参考になれば幸いです。　｜ TOP

d.hatena.ne.jp

参考リンク

• スタートボタンでアニメーションを再生させよう
• Flashでやってしまいがちな16個の間違った使い方 | ClockMaker Blog
• Flash操作を17倍豊かにする90のショートカット - yama-ko.net blog
• ActionScript（アクションスクリプト）2.0と3.0の違い | m-School
• Adobe CS6 体験版（Adobe Creative Suite 6 体験版）をダウンロード
• Adobe CS5.5 体験版（Adobe Creative Suite 5.5 体験版）をダウンロード
• Flash Professional入門 第6回：ActionScriptでアニメーションを制御する | Adobe Pinch In
• Adobe Flash Professional * シンボルの操作

www.adobe.com

この記事内リンク

• Adobe Flash CS5.5 と ActionScript2.0 を使って 車のイラストを動かし 車の動きをボタンでコントロールする | TOP
• この記事について
• Flash CS5.5、CS6 のダウンロードの方法


• Illustratorのデータからシンボルに変換、その設定と調整
  図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


• ActionScript2.0 で動作するボタンシンボルを作成
  図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 図55 図56 図57 図58 図59


• ボタンをオブジェクトと同じステージに置く
  図60 図61 図62 図63 図64 図65


• ActionScript2.0 を記述して オブジェクトの動きを制御する
  図66 図67 図68 図69 図70 図71


• 参考にさせていただいたサイト・ブログ
• 本の紹介
• TOP

授業中・師匠のお話の中に出て来た本

（受講生の「おすすめの本は？」という質問に対して「理解し始めた人に良いかも？」という返答の中で出て来た本）

Design BIBLE FLASH制作工房~ActionScriptで作る演出~

スラスラわかるJavaScript (Beginner's Best Guide to Programmin)

3ステップでしっかり学ぶ JavaScript入門 (今すぐ使えるかんたんプラス)