先週の復習

今日の授業はいよいよActionScriptを利用したFlashコンテンツの作成について学んでいきますが、その前にまず先週のタイムラインベースのアニメーションについておさらいしてみましょう。

フレームベースのアニメーションの制作方法のおさらい

• Flashファイル (AS 3.0) で新規に書類作成
• 図形を描いて、シンボル化
• モーショントゥイーンを作成
• 図形をマウスでドラッグして移動する
• キーフレームとキーフレームの間がスムースに補完される
• モーションパスを操作して曲線にすることも
• キーフレームを後から追加して複雑な動きに
• 複数の物体を動かすには、レイヤーを追加

ActionScriptとは

ActionScriptは、アドビシステムズ社の製品であるFlashに使用されるプログラミング言語です。ActionScriptを用いることにより、動画や音声のプレイヤーの作成など、コンテンツに複雑な処理や双方向性を持たせたFlashを作成することが可能になります。

この教室にインストールされている Adobe Flash CS4 では、ActionScript 3.0、またはActionScript 2.0 を使
用することができます。ActionScript 3.0はクラスベースのオブジェクト指向言語で、大規模な開発が可能となっています。

スクリプトでシンボルを操作する

まずは、簡単な例でActionScriptによるプログラミングを体験してみましょう。

以下の手順でステージ上に配置したムービクリップシンボルを、ActionScriptを使用して大きさや場所などを操作してみます。

• Flashファイル (AS 3.0) で新規に書類作成
• 図形を描いて「ムービクリップ」としてシンボル化
• シンボルをステージ上に配置する
• インスタンス名をつける、例：rect
• レイヤーを追加して、アクションを開く
• タイムラインの1フレームを選択し、右クリックして「アクション」を選択
• スクリプトを入力
• ActionScriptでシンボルの場所を変化させる – rext.x, rext.y
• 大きさを変化させる – rect.width, rect.height, rect.scaleX, rect.scaleY
• 角度を変化させる – rect.rotation

ムービークリップとしてシンボルに変換

インスタンス名の設定

空白のキーフレームからアクションを開く

アクションが追加された状態

[sourcecode language=”actionscript3″]
//位置を指定
rect.x = 320;
rect.y = 480;

//大きさを変化
rect.width = 200;
rect.height = 50;

//角度を変化
rect.rotation = 30;
[/sourcecode]

フレームに記入するActionScript

この例のようにActionScriptはキーフレームの中に記入することが可能です。(キーフレームにではなく、独立したファイルとしてActionScriptを記入する方法もあります)。キーフレームに記入したActionScriptは、そのフレームを再生する際に実行されます。

ムービクリップシンボルとプロパティ(Property)

この例ではいったい何をしているのか、考えてみましょう。

今回はステージ上に図形を描いてシンボル化する際に、「グラフィック」ではなく「ムービークリップ」という種類を選択しました。ムービークリップでシンボル化すると、自分自身に関する様々な性質をシンボル内に保持することが可能となります。この自分自身に関する性質のことをプロパティ(Property)と呼びます。

ActionScriptからこのプロパティを操作することで、ステージ上に配置した際の性質を後から変更することが可能となります。例えば、位置(X座標とY座標)、大きさ(幅、高さ)、角度などが変更可能です。

このプロパティの操作を使用することで、ActionScriptを利用したアニメーションやインタラクティブなオブジェクトの生成が可能となります。これからActionScriptを使用したコンテンツを制作していく基本となります。

ステージへの配置もスクリプトで行う

ムービークリップなどのシンボルは、シンボル化した時点で「ライブラリ」に登録されます。ActionScriptを使用することで、ライブラリからステージ上に配置する操作自体を行うことも可能です。

以下の手順で、ActionScriptを使用してムービクリップシンボルをライブラリからステージ上に配置して、様々な属性(プロパィ)を操作してみましょう。

• Flashファイル (AS 3.0) で新規に書類作成
• 図形を描いて「ムービクリップ」としてシンボル化
• 作成したシンボルを「ライブラリパネル」から選択し、プロパティを開く
• 詳細メニューを表示する
• クラス名を指定する 例：Rect
• 基本クラスは、flash.display.MovieClip のままで
• シンボルはステージには配置しない
• スクリプトを入力

ライブラリに追加された四角形

シンボルにクラスを適用

[sourcecode language=”actionscript3″]
//新規に四角形を生成
var r:Rect = new Rect();

//表示する場所を指定
r.x = 320;
r.y = 240;

//ステージ上に追加する
this.addChild(r);
[/sourcecode]

フレームに記入するActionScript

今日のまとめ

ActionScriptを使用したFlashコンテンツの制作の導入として、ステージ上に配置したムービクリップの性質(プロパティ)を、ActionScriptを使用して操作しました。この方法は今後スクリプトを用いてアニメーションやインタラクションを作成していく際にとても重要となってきますので、しっかりと理解するようにしましょう。