/* Google Analytics ▽ */ /* Google Analytics △ */

WEB制作の勉強メモ / 猫脳人間

HTML CSS JavaScript ActionScript jQuery WordPress PHP Illustrator Photoshop Flash … 猫サイズの脳でも覚えるぞ と…

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

Adobe Flash CS5.5 と 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. ログインしてから一旦ここに訪問(これでDLに必要なクッキーを取得するらしい。クッキー取得が目的なのでダウンロード&インストールする必要はありません)

  3. Adobe Flash CS5.5 (体験版)をダウンロード(Win版Mac版

    Adobe CS6 Master Collection (体験版)をダウンロード
    (FlashCS6 の他 色々トータルに入っています)
    Win版Mac版

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


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


図1)

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

Illustrator から 図形をコピー


図2)

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

Flash の メニュー『ファイル(F)』から『新規(N)』を選択


図3)

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

Flash:ActionScript のバージョンを選択するウィンドウ


図4)

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

Flash: 新規ファイル画面

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

図5)

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

Flash の画面に Illustrator のオブジェクトをペーストした瞬間に出るウィンドウ。


図6)

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

Flash の画面に Illustrator のオブジェクト(図形)をペーストした直後の状態


図7)

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

Flash: 『修正(M)』メニュー から 『シンボルに変換(F8)』 を選択


図8)

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

Flash:『シンボルに変換』 の設定


図9)

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

20150502145324


図10)

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

Flash:Illustratorからコピー&ペーストしたオブジェクトを 『シンボルに変換』


図11)

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

Flash:シンボルに変換した直後の状態


図12)

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

Flash:シンボルに変換したオブジェクト


図13)

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

Flash:『自由変形ツール(Q)』を選択する

図14)

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

Flash:『自由変形ツール(Q)』で 拡大縮小中

図15)

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

Flash:シンボルを縮小した状態

図16)

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

Flash:ツールメニューの 『選択ツール(V)』

図17)

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

Flash:レイヤー名を変更する


オブジェクトを動かす(クラシックトゥイーン) | TOP


図18)

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

Flash:シンボルをドラッグして移動


図19)

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

Flash:オブジェクトをドラッグして移動

図20)

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

Flash:『キーフレームの挿入』を選択

図21)

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

Flash:『キーフレームの挿入』洗濯後の タイムラインの変化

図22)

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

Flash:オブジェクトをドラッグして到着地点まで移動

図23)

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

Flash:オブジェクトをドラッグして 到着地点まで移動しました


図24)

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

Flash:『クラシックトゥイーン』を選択


図25)

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

Flash:『クラシックトゥイーン』を選択後の画面


図26)

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



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

図27)

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

Flash:新規レイヤーを作る


図28)

画面左下のアップです。

Flash:新規レイヤーを作成


図29)

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

Flash:新規レイヤーができました


図30)

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

Flash:ダブルクリックでレイヤーの名前を変更


図31)

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

Flash:レイヤー名を変更しました

図32)

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

Flash:レイヤーの名前を変更しました

図33)

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

Flash:新規シンボルの作成

図34)

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

Flash:新規シンボル作成の種類選択

図35)

種類:『ボタン』を選び、名前にも『ボタン』と入力をして 『OK』をクリック。
(後で『STARTボタン』と書き換えるので 『STARTボタン』でもOK)

Flash:新規シンボル作成の名前と種類の設定

図36)

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

Flash:ボタンシンボルを作成した直後の画面

図37)

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

Flash:『テキストツール』のプロパティ


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

図38)

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

Flash:テキストツールで ステージをクリック

図39)

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

Flash:テキストツールで 文字を入力

図40)

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

Flash:中央にある基準点に 文字の中心を合わせる

図41)

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

Flash:ボタンシンボルで キーフレームの挿入

図42)

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

Flash:ボタンシンボルに アップ・オーバー・ダウン・ヒットのキーフレームができました


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

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

図43)

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

Flash:テキストの色を変更する準備



図44)

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

Flash:テキストの選択と その色の選択

図45)

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

Flash:オーバーを選択して ボタンテキストの色変更


図46)

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

Flash:ボタンシンボル『ダウン』の文字色変更


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


図47)

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

Flash:タイムラインの 『ヒット』と ツールメニューの『選択ツール(V)』を選択


図48)

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

Flash:画面をクリックして オブジェクトの選択を解除

図49)

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

Flash:矩形ツールを選択

図50)

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

Flash:『矩形ツール(R)』でドラッグ

図51)

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

Flash:『矩形ツール(R)』でドラッグしてからリリース

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

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


図52)

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

Flash:『ライブラリ』タブを選択→『オプションメニュー』をクリック→『複製』を選択

図53)

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

Flash:ボタンシンボルの複製・コピー

図54)

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

Flash:ボタンシンボルを複製し、名前を変更

図55)

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

Flash:ボタンシンボルを複製し、名前を変更

図56)

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

Flash:アイテムリストのシンボル名を変更


図57)

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

Flash:『シンボルの編集』→ 編集するシンボルを変更

図58)

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

Flash:シンボル名に合わせて ステージ上のボタン名を変更

図59)

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

Flash:ボタンのタイムラインの全てのボタンのテキストを修正


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

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


図60)

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

Flash:『シーンの編集』から『シーン1』を選択


図61)

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

Flash:シーン1の画面

図62)

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

Flash:ボタンシンボルをステージにドラッグ

図63)

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

Flash:シンボルのボタンを3つ配置しました


図64)

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

Flash:配置したシンボルの位置を『整列ツール』で整える

図65)

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

Flash:配置したシンボルを 『整列ツール』で整える



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

図66)

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

2015-04-30-flash-66

図67)

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

20150503230610

図68)

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

Flash:ActionScript用に新規レイヤーを作成

図69)

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

Flash:ウィンドウメニューから『アクション(A)』(F9)を選択

図70)

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

20150503235031

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

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) で示されている「1フレーム目で」という命令。つまり、「1フレーム目に行ってそこでストップ」という命令。 (2) であれば、「2フレーム目で」 という具合。
インスタンス名を付けずに作成する方法は↓こちら

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

図71)

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


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


d.hatena.ne.jp

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

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

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

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

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

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

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

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

広告を非表示にする