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 の体験版をダウンロードするには、以下の方法で可能です。
- AdobeID を取得(無料)
- ログインしてから一旦ここに訪問(これでDLに必要なクッキーを取得するらしい。クッキー取得が目的なのでダウンロード&インストールする必要はありません)
- ●Adobe Flash CS5.5 (体験版)をダウンロード(Win版|Mac版)
●Adobe CS6 Master Collection (体験版)をダウンロード
(FlashCS6 の他 色々トータルに入っています)
( Win版 | Mac版 )※この記事を書いた2015年4月現在の情報です。これ以降入手手段が変更になったり リンク切れになったりする可能性もありますが ご了承下さい。体験版の使用期間は30日間です。
Illustratorのデータからシンボルに変換、その設定と調整 | TOP
図6)
すると、以下のようにステージの中心に Illustratorから持ってきたオブジェクト(図形)が貼りつけられます。
※ オブジェクトに青い枠が付いている表示は 「それが選択された状態」 を示しています。 「選択を解除」 する必要が無い場合はそのまま説明が続きますので、 これ以降、選択された状態のままの作業の場合は 選択解除にならないよう意識します。 選択解除してしまった場合は 「Ctrl + V」(1回戻る) または 「選択ツール(V)」で選択します。
図8)
すると、以下のウィンドウが出ます。
プルダウンメニューの『グラフィック』を選択
(ムービークリップ・ボタン・グラフィックの中から)
『名前』は、分かりやすく 『くるま』など適当に。
(後から追加するボタン、『START』『STOP』『BACK』 との区別ができればOK)
図12)
画面の右側にある、『プロパティ』タブがアクティブになっていたのを、 『ライブラリ』タブをクリックして見ます。
図の下の方が以下のようになっています。
・1個のアイテム
・名前
・くるま
『シンボルに変換』をする時に付けた名前がここに表示されています。
この状態で、『くるま』が選択されているので、上に 車のイラストが表示されています。
今『くるま』だけですが、このリストにシンボル化したオブジェクトや、最初からシンボルになっているオブジェクトが並んでいきます。
図14)
オブジェクト(車)を囲っている四角の四隅の一つをドラッグして 適当な大きさにします
(Photoshop や Illustrator と同じく、Shiftキー を押しながらドラッグすると 縦横比を固定したまま拡大縮小が出来ます)。
図17)
この後、画面下の 『タイムライン』の編集になるので、分かりやすくするため、ここまでで作ったオブジェクトが置いてあるレイヤーの名前を変更しておきます。
画面一番左下の辺りの『レイヤー1』となっている所をダブルクリックすると、レイヤー名を変更できます。
作業中に分かりやすいよう、『くるま』(例)と。
(後から追加する 『ボタン』『ActionScript』と区別できればOK)
※くるまのシンボルデータをダウンロードした場合はここからスタートになります。
オブジェクトを動かす(クラシックトゥイーン) | TOP
ActionScript2.0 で動作するボタンシンボルを作成 | TOP
図36)
すると、画面がいろいろ変わりましたが、変わったと言うより、新しい画面が開いた、という表現の方が近いような気がする画面です。
大きな変化がある所に3ヵ所を囲ってみました。
操作する必要のある所は順に説明していきます。
図37)
画面右側を見ます。
『ライブラリ』タブが選ばれていた状態から、『プロパティ』タブを選択します。
文字を打っていくので、『テキストツール』を選択します。
すると、下図のような、『テキストツール』のプロパティ表示に変わります。
囲いをしている部分が、上の画像と同じになるように設定して下さい。
□テキストツール
・静止テキスト
▽文字
・サイズ:30.0pt(好みで構いません)
・フォント:Arial Black(好みで構いません)
▽段落(最初は閉じているのでクリックして開く)
・行揃え:中央揃え
図40)
基準点(画面中央にある 「+」)を、文字の中央に持ってくるため、文字をカット&ペースト(Ctrl + X → Ctrl + V)します。
すると文字が中央になり、それによって、基準点が文字の中央に来る事になります。
図41)
CSSで言うところの、hover や active、display:block に相当する設定をしていきます。
まず、画面下のタイムラインの『アップ』という所でコンテクストメニュー(右クリック) 『キーフレームの挿入』を選ぶと、『オーバー』の所にコマが増えます
(上記の動作『キーフレームの挿入』は『F6』キーでできる事を覚えておく)。
同じ事を合計3回します(『キーフレームの挿入』を3回、又は F6キーを3回押す)。
図42)
すると、画面左下のタイムラインが、このようになります。
アップ:マウスがボタンの上から外れている時(link)
オーバー:マウスがボタンに乗っている時(hover)
ダウン:マウスが押された瞬間(active)
ヒット:マウスの反応をうける面積(display:block)
※()内は CSSでの場合の表現
最初に『アップ』の所に 『START』 のテキストを打った状態にし、『キーフレームの挿入』をした事で、テキストの『START』が、『オーバー』『ダウン』『ヒット』の所にコピーされたような状態になっています。
図43)
link、active、hover で色が変わるように、Flashでも 『アップ』『オーバー』『ダウン』の所の文字の色をそれぞれ別の色に変更します。
まず、この画像では 『アップ』を選択しました。
すると、画面右が 『ライブラリ』タブに変更されてしまうので、また『プロパティ』タブをクリックし、更に『テキストツール(T)』もクリックして選択します。
テキストボタンにマウスを乗せた時に反応する『面』を敷く | TOP
図51)
ドラッグから手を放した状態。
この画像では枠内の色と枠線色を設定してしまったのですが、ここではそれは全く意味がなかったので、普通に透明の長方形ができればOKです。
Illustrator などと違って、この矩形ツールは、ドラッグ始めとドラッグ終わりの支点が ちょっと違うようで、「あれれ?」となりますが、失敗したら 『Ctrl』+『Z』キーでやり直します。
『ヒット』にこの『面』を敷く事で、Display:block のような役割をしてくれます。
作ったボタンを複製し、ボタンの役割に合わせてテキストを変更 | TOP
図52)
さっき作ったボタンのシンボルを複製します。
(図51)までで作ったのは『STARTボタン』なので、これを後2つ複製して『STOPボタン』『BACKボタン』を作ります。
画面右が『プロパティ』タブが表示されていたのを、『ライブラリ』タブを選んで表示し、アイテムリストの『ボタン』が選択されているのを確認してから、そのオプションメニューをクリックして表示します(下図の右側の囲い)。
オプションメニューの中の『複製』を選択。
図56)
画面右のアイテムリストに並ぶシンボルがこのように増えました。
この画像は、最初に作った『ボタン』をコンテクストメニュー(右クリック)から『名前を変更』を選び、『STARTボタン』に変更した所です(任意)。
図57)
この図ではシンボルの『STOPボタン』が選択されていますが、実際のステージ上のボタンには『START』になっていますので、ボタン名に合わせる変更を加えます。
下の画像を参考に 『シンボルの編集』をクリックし、『STOPボタン』を選択します。
図58)
すると、下の画像の左上の囲いの部分のシンボル名が代わり、『STOPボタン』になりました。
画面一番右のツールメニューから『テキストツール(T)』を選択し、更に、画面下の『タイムライン』から『アップ』を選択。
ステージ上の『START』をダブルクリックして、『STOP』と書き換えます。
図59)
画面下の『タイムライン』上の『アップ』が済んだので、『オーバー』を選んで、同じようにステージ上のテキストをダブルクリックして『STOP』に書き換えます。
同じように『ダウン』『ヒット』も書き換えます。
同様に『シンボルの編集』から 『BACKボタン』を選んで、『アップ』『オーバー』『ダウン』『ヒット』を全て『BACK』に書き換えます。
(図57)の『シンボルの編集』を選択
ボタンをオブジェクトと同じステージに置く | TOP
ActionScript2.0 を記述して オブジェクトの動きを制御する | TOP
図66)
これまでに作った3つのボタンを ActionScript の記述と関連付けるために、それぞれのボタンに『インスタンス名』 を付けます。
『選択ツール(V)』を使い、インスタンス名を付けるボタンを選択します。
ここでは『START』ボタンを選択しました。
画面右側の上部に 『プロパティ』タブが表示されています。
(表示されていない場合は、プロパティタブをクリックしてください)
図67)
下図はプロパティ上部です。
『START』ボタンなので、インスタンス名に “start_btn” と入力しました。
『STOP』ボタン → “stop_btn”、『BACK』ボタン → “back_btn”
と 後の2にも、ボタン選択 → インスタンス名入力をします。
※半角英数字で記述
図68)
ActionScript を記述するレイヤーを 新規レイヤーとして作成します。
画面左下のちっこい書類アイコンをクリックしてレイヤー作成。
新規レイヤー名をダブルクリックしてレイヤー名を 『ActionScript』に変更しました。
図70)
するとこのウィンドウが出ます。
ここに ActionScript を記述します。
この画像では すでに記述された状態です。
(テキストは画像の下にあります)
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
参考リンク
- スタートボタンでアニメーションを再生させよう
- 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 * シンボルの操作
この記事内リンク
- 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で作る演出~
- 作者: 石川修一,岡村健一
- 出版社/メーカー: ソフトバンククリエイティブ
- 発売日: 2005/03/29
- メディア: 単行本
- 購入: 1人 クリック: 7回
- この商品を含むブログ (7件) を見る
スラスラわかるJavaScript (Beginner's Best Guide to Programmin)
- 作者: 生形可奈子
- 出版社/メーカー: 翔泳社
- 発売日: 2013/03/16
- メディア: 単行本(ソフトカバー)
- クリック: 2回
- この商品を含むブログ (4件) を見る
3ステップでしっかり学ぶ JavaScript入門 (今すぐ使えるかんたんプラス)
- 作者: 大津真
- 出版社/メーカー: 技術評論社
- 発売日: 2010/06/04
- メディア: 大型本
- クリック: 3回
- この商品を含むブログ (2件) を見る