基礎から学ぶActionScript 3.0

アニメーションのパラメータを変数で指定する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
変数の宣言の仕方と、スクリプトでの使い方を学びます。そして、パラメータとして用いた変数で、アニメーションの動きを調整します。
講師:
10:41

字幕

Flash は タイムラインに 複数のフレームがあると そのフレームをループして再生する という特質があります それを利用して フレームアクションを 何度もループで実行させ インスタンスを アニメーションさせてみたいと思います また そのアニメーションのスピードを 変数という機能を使って パラメータのように 調整できるようにしたいと思います 今この Flash ムービーは アニメーションの設定にはなっていません まず スクリプトから確認しましょう スクリプトレイヤーのキーフレームを 右クリックして アクションパネルを開きます まず car_mc というのは メインタイムラインに置いてある 車のシンボルのインスタンスです その x 座標を 100 ピクセル加算して 右に動かすということです そして車のシンボルには ボディのほか タイヤのインスタンスが含まれています タイヤは 2 つありますので それぞれ 前輪が tire0_mc 後輪が tire1_mc です それらのインスタンスの rotation 回転角を 90 度加算して つまり 90 度回転するようになっています まず 今のスクリプトの動きを 確認しておきます アクションパネルは一旦閉じて ムービープレビューです 制御メニューから ムービープレビューを見ます 今タイムラインには フレームが1つしかありませんので スクリプトは 1 回しか実行されません 車が 100 ピクセル右に移動し 車の中に入っている タイヤのインスタンス 前輪はちょっと見えませんけど 後輪 90 度回転していますね これを タイムラインに複数フレーム 1 フレーム追加して 繰り返しスクリプトを 実行するようにして 車が右に走っているように 変えたいと思います まずタイムラインの この 車のインスタンスがあるフレームを 1 フレーム増やします 都合 2 フレームですね 右クリックで フレームを挿入です 2 フレームになりましたので これで Flash は このタイムラインを ループ再生します ではスクリプトの方を変えましょう 右クリックで アクションパネルを開きます 2 フレームで 1 フレームおきに このスクリプト実行されますので 数字はもうちょっと 小さめに調整しましょう ではここは 5 ピクセル 回転角は そうですね 5 の倍の 10 ピクセルにしておきましょう 後輪も同じ速さにします では アクションパネルは一旦閉じて ムービープレビューで アニメーションを確かめてみましょう 制御メニューから ムービープレビューです 確かに車が移動し タイヤも回転しています SWF のウィンドウは閉じて スクリプトをもう一回確認しましょう キーフレームを右クリックして アクションです このアニメーションの速さを 調整したくなったとしましょう 例えば スピードを 3 倍したい ということになったら car_mc の水平の移動ピクセル これを 3 倍の 15 rotation も同じように 3 倍するとすれば 30 こちらも 30 と変えます やっぱり 2 倍で良かったかな ということになると こちらの移動ピクセルを 10 にして 回転角 rotation を 20 にすると 3 箇所を毎回毎回 変えなければいけません 前輪と後輪の速度は 必ず一致しないとおかしいでしょう それから 移動するピクセル数と 回転角の関係は 2 倍になるようにしたいと もしその方針が決まっているのであれば 1 個数字を変えれば 全部変わってくれると便利ですね そのときに使うのが変数です 変数というのは 値のメモリーで そのメモリーに入れた値を変更すれば その変数を使った処理が 全部自動的に書き換わると まあ数字が自動的に変わると そういう機能です では変数について どのように書くのか ご説明しましょう 変数を作ることは 変数の宣言と言います 変数宣言は var というキーワード 変数の英語名 variable の略でしょう そのキーワードの後に 変数名を決めます これは プログラムで コントロールする名前ですから 識別子 つまり原則として 英数半角文字です そしてその後 コロンを付けて データ型と言うんですが この変数に どういう種類の データを入れるのか そういうキーワードを定めます 今回は数値ですので Number というのが キーワードになります そして そこに値を入れる メモリするのは プロパティに値を設定するときと同じ イコールで値を書きます 変数を とりあえず宣言しておいて 値は後から入れるということも可能です その場合には 変数宣言の左辺ですね イコールの左側だけ var キーワードの後に 変数名の識別子を書いて そして コロンの後にデータ型です ここで セミコロンで一旦 ステートメントは切ってしまいます そして後で必要になったら 今度は var 付けません var は最初に一回だけ付けまして 後は変数の名前 そのまま使って 値を入れたければ イコールで値です 何度でも値は入れることができて 後に入れたものが 前の値を上書きしますので それの一番新しいものが有効です あとちなみに スラッシュ 2 つというのは スクリプトの中では 無視をされます ですから メモ書きのときなどに 使うことができ このスラッシュ 2 つは 実際 アクションパネルに書いても構いません このスラッシュ 2 つの後は コメントと言いますけれども ActionScript としては 無視してください という意味になります このフレームアクションに 変数を宣言して その変数を使って スクリプトを書いてみます まず 変数宣言は 先頭で行いましょう var で識別子 名前は nSpeed としておきます これは自由に決められます そして 値は 数値を入れますので Number とします コードヒントと言いますけれども 途中までタイプすると そこで指定できる いろいろなキーワードが リストで表示されます そして今私が Num と打ったら Number 入れたいものが ハイライトしていますね この場合には 全部打たなくても キーボードから Enter キーを押せば 今ハイライトしているものが 選ばれます そして 値は 5 という風にします そして car_mc の x プロパティに この値を入れたいという場合ですね この値は nSpeed に入っています ですから これをちょっと コピーしますけれども コピーして この右辺の代入の この代わりに 入れてしまえば結構です 同様に 今度は タイヤの rotation プロパティ ここもペーストをして ただし 2 倍ですよね 掛け算です 掛けるはアスタリスク そして 2 ということです じゃあこれはカットしてしまって 削除して 同じ式を入れますので コピーをします 結果を確かめてみましょう ムービープレビューをします 制御メニューから ムービープレビューです 動きは 数値が入れてあったときと 変わりません というのは メモリした 変数の値が5ですから 関係が変わりませんので スピードは変わりません では一旦 SWF のウィンドウは閉じて この 5 を 分かりやすいように 1 にしてみましょう スピードが遅くなります あらためて ムービープレビューです 制御メニューから ムービープレビューを実行します スピードがだいぶ遅くなりました けれど 車の水平に移動する速さと タイヤの回転する速さの関係は 変わっていません つまり 水平の移動 1 に対して 回転の角度が 2 倍になっているからです このように変数を使えば パラメータとして 調整係数に利用することができますね 1 つ変数を決めて それとの関係に基づいた式を ステートメントで書いておけば その数値 1 箇所直せば その関連した値は全て 同時に変わって 変数の間の関係は そのまま維持される ということになるわけです SWF のパネルは閉じましょう 変数についておさらいです 変数はキーワード var でスタートし 識別子で名前を定めます そして コロンの後に その変数にどんなデータを入れるのか という指定になります 今回は数値なので Number という指定になりました そして値を入れる場合には イコールで 代入と言いますけれども 数値を代入します 一旦変数に値を入れたら その変数を 数値そのものと 同じように使うことができます 変数を指定すると その変数の中に入っている 値が取り出されて この場合は代入ですけれども その値が代入されます こちらも同じように 変数を使っていますが 掛け算をしています ですから 変数の 2 倍ということで その値が 回転角に入ります こちらも同様ですね このような式を立てると 車の動く水平のピクセル数と それから 回転する角度の関係が変わらずに パラメータの調整ができるということです 以上が 複数フレームを使ったアニメーションと 変数によるパラメータの設定の仕方でした

基礎から学ぶActionScript 3.0

このコースではFlashのActionScript 3.0を初めて学ぶ方を対象に、ActionScriptの基礎から実際にプログラミングをするところまで学習していきます。簡単なスクリプトによるオブジェクトの操作の仕方から始まり、変数や関数といったプログラミングの基礎、そしてインタラクティブなコンテンツの作成まで詳しく解説いたします。

6時間30分 (49 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2014年01月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。