基礎から学ぶActionScript 3.0

ムービークリップシンボル内に入れ子にしたインスタンスをコントロール

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Flashには、シンボルを入れ子にできるという便利な機能があります。車のムービークリップシンボルの中にタイヤのインスタンスを入れ子にしてしまえば、車と一緒にふたつのタイヤも移動します。ただし、ターゲットパスが変わります。
講師:
09:02

字幕

シンボルのインスタンスを タイムラインに複数置いて それを ActionScript で コントロールしてみます ただし ここでは Flash の特徴である シンボルの入れ子構造を作ります そして その入れ子のインスタンスを ActionScript から どのように コントロールするか ということが課題です 今はまだ シンボルのインスタンスが 直接メインタイムラインに置いてあって 入れ子構造にはなっていません シンボル Car のインスタンスが1つ 車のボディとして置いてあります それから Tire のインスタンスが 2 つ 置いてあります インスタンス名を確認しておきましょう まず ボディの方は car_mc です タイヤ前輪は tire0_mc 後輪が tire1_mc です 今 スクリプトのレイヤーのフレームに 書かれているスクリプト フレームアクション という言い方をしますが それを確認してみましょう フレームをクリックして 右クリックで アクションパネルです まず 車のボディのインスタンス car_mc の x 座標を 100 ピクセル プラスイコールは 加算の演算子です つまり 右に 100 ピクセル動きます 次に タイヤの前輪ですね それは rotation 回転角を やはり加算です 90 度回します 後輪のスクリプトはありませんので 後輪は動きません 今のスクリプトの動作を 確認してみます 一度シンタックスチェックをしたうえで 問題がありませんので 一旦パネルを閉じまして ムービープレビューをします 制御メニューから ムービープレビュー Ctrl+Enter または Mac は Command+Return です 当然のことながら ボディとタイヤは別々に動きます ボディはボディだけ 右に 100 ピクセル動き タイヤはその場で 90 度回転します 先ほどのスクリプト フレームアクションでは このような結果になります コンパイルエラーのパネルは 切り替えて タイムラインを表示します タイヤとボディを一緒に動かすには どうしたらいいか というと タイヤにも 100 ピクセル右に動くという スクリプトを書き加える という方法が 1 つあります けれども Flash の場合には シンボルを入れ子にできるという 特徴がありました ですから 車のボディの中に タイヤ 2 つを シンボルの中に入れてしまえば ボディが動けば ボディごと タイヤも 2 つ動くはずです では タイヤのインスタンス 2 つを ボディのシンボルの中に移動します 選択ツールで タイヤを 2 つを選択し カットですね カットします そして ステージ上で ボディのインスタンスを ダブルクリックすると ボディのシンボルが開きます 左上に Car というシンボルの名前が 表示されましたので 今 Car のシンボルが開いている状態です ではここに ペーストしましょう ペーストです 位置がちょっと良くないので 少し下にずらします これで良いでしょう シーン 1 をクリックして 車のシンボル Car の編集状態から メインタイムラインに戻ります 車とタイヤ 2 つが 同じ境界ボックス ブルーの線で囲まれています これは タイヤ 2 つとボディが 同じシンボルの中にあるからです タイヤのインスタンス 2 つが 車の Car のボディのシンボルと 一体化しました タイヤのインスタンスが ボディのシンボルの中に入りましたので 一体で動くはずですね では スクリプトを確認してみましょう 制御メニューから ムービープレビューです コンパイルエラーのパネルに エラーが表示されました そして このエラーのために スクリプトは動作していないので ボディが全く動いていません このコンパイルエラーの意味なんですが 未定義のプロパティ tire0_mc へのアクセスです と 日本語の意味がよく分かりません 翻訳をしますと tire0_mc なんてありません ということです これが 入れ子になった シンボルの中に入ったインスタンスを コントロールする場合の ポイントになります では SWF のウィンドウは閉じて タイムラインの方に戻り スクリプトを確認してみましょう スクリプトのレイヤーの キーフレームを右クリックして アクションパネルを あらためて開きます まず car_mc に対するステートメント これは問題がありません 先ほどのエラーは tire0_mc これが ありません 見つかりません と言っているのです 何が変わったかというと 先ほどまで メインタイムラインに 置いてあった tire0_mc あと スクリプトに書いていませんが 後輪ですね を車のシンボルの中に 入れ子にしてしまいました シンボル Car インスタンス名で言うと car_mc です この中に入ってしまいました スクリプトを書くときに 単純にインスタンス名を書くと 今スクリプトを書いているタイムライン 今メインタイムラインです の上を探します car_mc はあります けれど car_mc 以外に メインタイムラインには無いんですね tire0_mc は car_mc のインスタンスの 中に入っています なので この書き方ではいけないと どうすればいいかというと メインタイムラインにあるのは car_mc ですから まずここからスタートします そして その中にあるというのは ドットで続けて tire0_mc と こういう書き方にします アクションパネルを閉じて ムービープレビューで確かめてみましょう 制御メニューから ムービープレビューです 今度は エラーが出ることなく ボディとタイヤが 一緒に移動しています 前輪が隠れてしまっていますので 回転しているかどうか 分かりませんね では 後輪の方のスクリプトも 追加しましょう SWF のウィンドウは閉じて スクリプトを書いたキーフレームを 右クリックして アクションパネルを出します 後輪も 前輪と同じように 動かすことにしましょう ではこれ コピーしてしまいましょう コピーをして そして ペーストします 後輪は tire1 でした アクションパネルは閉じて ムービープレビューで確認しましょう 制御メニューから ムービープレビューです 後輪も一緒に動いて 後輪が 90 度回転しました これで シンボルに 入れ子になったインスタンスの コントロールができたということです では SWF ウィンドウは閉じて アクションパネルを もう一度確認しましょう 右クリックで アクションです 入れ子になった ムービークリップインスタンスを どのようにコントロールしたらよいのか おさらいをしましょう まず インスタンス名を普通に書くと ActionScript は 今スクリプトを書いているフレームを持つ タイムラインの上を探すわけです ですから car_mc は 確かに メインタイムラインの上に ありますから 見つかります けれど car_mc の インスタンスの中にあるタイヤ tire0_mc と tire1_mc を 指定したい場合には car_mc からスタートして そしてドットで インスタンス名を指定し プロパティを設定する という書き方になるわけです これは HTML ドキュメントで 画像をリンクしたり 埋め込んだりするときの パスと考え方が似ていますね HTML ドキュメントと同じ階層に 画像がある場合 そのリンクを張っておいて 後で画像を フォルダの中に入れてしまうと リンクが切れますね その場合 どうしたらいいかというと その入れたフォルダを ちゃんと パスとして 指定しなければいけないわけです ですから 同じように car_mc の中に タイヤを入れたのであれば car_mc をちゃんと介して その中にあるインスタンスを 指定しなければいけないということです 以上 ご説明しましたのが 入れ子になったインスタンスを どのようにスクリプトで指定して コントロールするかということでした

基礎から学ぶActionScript 3.0

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

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

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

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

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