MovieClipシンボルとプロパティ
- ステージ上に配置したMovieClipシンボル
- 様々な「性質」を持つ
- 個々のMovieClipが保持してる性質を、「プロパティ」と呼ぶ
- MovieClipのプロパティを操作することで、様々な表現が可能となる
MovieClipシンボルのプロパティ
- MovieClipシンボルは非常に多くのプロパティを持つ
- 表現の部分に関係する代表的なプロパティを抜粋
- x : 親 DisplayObjectContainer のローカル座標を基準にした DisplayObject インスタンスの x 座標を示します
- y : 親 DisplayObjectContainer のローカル座標を基準にした DisplayObject インスタンスの y 座標を示します
- width：表示オブジェクトの幅を示します（ピクセル単位）
- height：表示オブジェクトの高さを示します（ピクセル単位）
- scaleX：基準点から適用されるオブジェクトの水平スケール（パーセンテージ）を示します。
- scaleY：オブジェクトの基準点から適用されるオブジェクトの垂直スケール（percentage）を示します。
- rotation：DisplayObject インスタンスの元の位置からの回転角を度単位で示します。
- alpha：指定されたオブジェクトのアルファ透明度値を示します
- blendMode : 使用するブレンドモードを指定する BlendMode クラスの値です
MovieClipのプロパティの操作1 – 位置(x, y)
- 1フレーム目のステージに以下の要素を配置
- MovieClip：インスタンス名「mc」
- ボタン：インスタンス名「top」
- ボタン：インスタンス名「bottom」
- ボタン：インスタンス名「left」
- ボタン：インスタンス名「right」
- 1フレーム目に以下のスクリプトを記述
this.left.addEventListener(MouseEvent.CLICK, leftClickHandler);
this.right.addEventListener(MouseEvent.CLICK, rightClickHandler);
this.top.addEventListener(MouseEvent.CLICK, topClickHandler);
this.bottom.addEventListener(MouseEvent.CLICK, bottomClickHandler);
function leftClickHandler(e:MouseEvent):void
{
this.mc.x -= 5;
}
function rightClickHandler(e:MouseEvent):void
{
this.mc.x += 5;
}
function topClickHandler(e:MouseEvent):void
{
this.mc.y -= 5;
}
function bottomClickHandler(e:MouseEvent):void
{
this.mc.y += 5;
}
MovieClipのプロパティの操作2 – 大きさ(scaleX, scaleY)
- 1フレーム目のステージに以下の要素を配置
- MovieClip：インスタンス名「mc」
- ボタン：インスタンス名「zoomInX」
- ボタン：インスタンス名「zoomOutX」
- ボタン：インスタンス名「zoomInY」
- ボタン：インスタンス名「zoomOutY」
- 1フレーム目に以下のスクリプトを記述
this.zoomInX.addEventListener(MouseEvent.CLICK, zoomInXHandler);
this.zoomOutX.addEventListener(MouseEvent.CLICK, zoomOutXHandler);
this.zoomInY.addEventListener(MouseEvent.CLICK, zoomInYHandler);
this.zoomOutY.addEventListener(MouseEvent.CLICK, zoomOutYHandler);
function zoomInXHandler(e:MouseEvent):void
{
this.mc.scaleX *= 1.1;
}
function zoomOutXHandler(e:MouseEvent):void
{
this.mc.scaleX /= 1.1;
}
function zoomInYHandler(e:MouseEvent):void
{
this.mc.scaleY *= 1.1;
}
function zoomOutYHandler(e:MouseEvent):void
{
this.mc.scaleY /= 1.1;
}
MovieClipをアニメーションする1：位置を移動(x, y)
- EnterFrameイベントを使用する
- フレームが更新するたびに呼び出されるイベント
- processingで言うところの、draw()関数
- 1フレーム目のステージに以下の要素を配置
- MovieClip：インスタンス名「mc」
- ボタン：インスタンス名「top」
- ボタン：インスタンス名「bottom」
- ボタン：インスタンス名「left」
- ボタン：インスタンス名「right」
- 1フレーム目に以下のスクリプトを記述
var speedX:Number=0;
var speedY:Number=0;
this.left.addEventListener(MouseEvent.CLICK, leftClickHandler);
this.right.addEventListener(MouseEvent.CLICK, rightClickHandler);
this.top.addEventListener(MouseEvent.CLICK, topClickHandler);
this.bottom.addEventListener(MouseEvent.CLICK, bottomClickHandler);
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
function leftClickHandler(e:MouseEvent):void {
speedX-=1;
}
function rightClickHandler(e:MouseEvent):void {
speedX+=1;
}
function topClickHandler(e:MouseEvent):void {
speedY-=1;
}
function bottomClickHandler(e:MouseEvent):void {
speedY+=1;
}
function enterFrameHandler(e:Event):void {
this.mc.x += speedX;
this.mc.y += speedY;
if(this.mc.x < 0 || this.mc.x > stage.stageWidth){
speedX *= -1;
}
if(this.mc.y < 0 || this.mc.y > stage.stageHeight){
speedY *= -1;
}
}
MovieClipをアニメーションする2：回転(rotation)
- 1フレーム目のステージに以下の要素を配置
- MovieClip：インスタンス名「mc」
- ボタン：インスタンス名「speedUp」
- ボタン：インスタンス名「speedDown」
- 1フレーム目に以下のスクリプトを記述
var speed:Number=0;
this.speedUp.addEventListener(MouseEvent.CLICK, speedUpHandler);
this.speedDown.addEventListener(MouseEvent.CLICK, speedDownHandler);
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
function speedUpHandler(e:MouseEvent):void {
speed += 1;
}
function speedDownHandler(e:MouseEvent):void {
speed -= 1;
}
function enterFrameHandler(e:Event):void {
this.mc.rotation += speed;
}
MovieClipをアニメーションする3：ダブル回転(rotation)
- ムービークリップを入れ子状に配置してみる
- 1フレーム目のステージに以下の要素を配置
- MovieClip：インスタンス名「mc」
- MovieClip：インスタンス名「mc」の中にさらにMovieClip「mc2」を貼る
- ボタン：インスタンス名「speedUp」
- ボタン：インスタンス名「speedDown」
- ボタン：インスタンス名「speedUp2」
- ボタン：インスタンス名「speedDown2」
- 1フレーム目に以下のスクリプトを記述
var speed:Number=0;
var speed2:Number=0;
this.speedUp.addEventListener(MouseEvent.CLICK, speedUpHandler);
this.speedDown.addEventListener(MouseEvent.CLICK, speedDownHandler);
this.speedUp2.addEventListener(MouseEvent.CLICK, speedUpHandler2);
this.speedDown2.addEventListener(MouseEvent.CLICK, speedDownHandler2);
this.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
function speedUpHandler(e:MouseEvent):void {
speed += 1;
}
function speedDownHandler(e:MouseEvent):void {
speed -= 1;
}
function speedUpHandler2(e:MouseEvent):void {
speed2 += 1;
}
function speedDownHandler2(e:MouseEvent):void {
speed2 -= 1;
}
function enterFrameHandler(e:Event):void {
this.mc.rotation += speed;
this.mc.mc2.rotation += speed2;
}
本日の内容
- ActionScript3.0へ移行する
- 前回やったインタラクションのサンプル
- ActionScript2で作成されていた
- 1世代前の書式
- 現在の最新のバージョンである、ActionScript3.0で、簡単なインタラクティブなムービーを作成してみる
ボタンアクションからイベントリスナーへ
- ActionScript2では、ボタンの中にActionScrpitを記述する方法が一般的だった
- ActionScript3.0では、ボタンにアクション(プログラム)を埋めこむことができない！
- ではどうすればいいのか?
- イベントリスナーを用いた、イベント処理という手法を使う
- イベントリスナーとは：あらかじめ想定される予定を受付に登録しておくようなイメージ
- 「Aさんが訪ねてきたら、私に電話してください」
- 受付係：イベントリスナー
- 「Aさんが訪ねてきたら」：イベント (きっかけ)
- 「私に電話してください」：イベントハンドラーメソッド (動作)
- マウスによるインタラクションをイベントリスナーを使って作成してみる
例1：ムービクリップのクリック
- ムービークリップをクリックすると、メッセージを表示する
- 作成手順
- ステージ上に、クリックするためのオブジェクトを配置
- ムービクリップシンボルとして、シンボル化する
- インスタンス名をつける、インスタンス名 = "hello"
- レイヤーを追加して、1フレーム目にスクリプトを記述
//イベントリスナーの追加
this.helloMc.addEventListener(MouseEvent.CLICK, onClick);
//イベントハンドラメソッドの定義
function onClick(event:MouseEvent):void
{
trace("Hello!");
}
例2：フレーム再生のナビゲーション
- ボタンをクリックすると、シーンのフレームの特定位置に移動する
- 作成手順
- ステージ上に2つボタンを配置
- それぞれにインスタンス名をつける："blueButton" "redButton"
- 10フレームまでフレームを挿入
- レイヤーを追加して、6フレーム目にキーフレームを追加。2つの領域に分ける
- 前半のブロックに青い丸、後半のブロックに赤い丸を描く
- さらにレイヤーを追加
- フレームのプロパティーから、ラベルを追加する：1フレーム目に"blue"、6フレーム目に"red"
- レイヤーを追加して、1フレーム目にスクリプトを追加
//メインのタイムラインの再生を停止
stop();
//イベントリスナーの追加
this.blueButton.addEventListener(MouseEvent.CLICK, onClickBlue);
this.redButton.addEventListener(MouseEvent.CLICK, onClickRed);
//blurButtonをクリックした際の、イベントハンドラ
function onClickBlue(event:MouseEvent):void
{
gotoAndStop("blue");
}
//redButtonをクリックした際の、イベントハンドラ
function onClickRed(event:MouseEvent):void
{
gotoAndStop("red");
}
例3： ムービークリップの再生と停止
- ステージに配置したムービクリップシンボルを再生・停止する
- 作成手順
- ステージ上にムービクリップシンボルを作成
- ムービクリップをダブルクリックして、ムービクリップ内のタイムラインへ移行
- ムービークリップ内でアニメーションを作成
- 作成したムービクリップにインスタンス名を付ける："ball"
- レイヤーを追加して、ボタンを2つ追加
- 追加したボタンにインスタンス名を付ける："startButton", "stopButton"
- レイヤーを追加して、1フレーム目に以下のスクリプトを記述する
this.ball.stop();
this.startButton.addEventListener(MouseEvent.CLICK, onClickStart);
this.stopButton.addEventListener(MouseEvent.CLICK, onClickStop);
function onClickStart(event:MouseEvent):void
{
this.ball.play();
}
function onClickStop(event:MouseEvent):void
{
this.ball.stop();
}
例4：複数のムービークリップの制御
- ステージ上に複数のムービークリップを配置して、それぞれの再生・停止をボタンからコントロールする
- 作成方法
- 例3で作成したムービークリップとボタンの組を、コピーする
- コピーしたムービークリップとボタンを、オリジナルの横にペースト
- 2つのムービークリップとボタンの組に、それぞれインスタンス名をつけていく
- "ball1", "startButton1", "stopButton1"
- "ball2", "startButton2", "stopButton2"
- レイヤーを追加して、1フレーム目に以下のスクリプトを記述する
this.ball1.stop();
this.ball2.stop();
this.startButton1.addEventListener(MouseEvent.CLICK, onClickStart1);
this.stopButton1.addEventListener(MouseEvent.CLICK, onClickStop1);
this.startButton2.addEventListener(MouseEvent.CLICK, onClickStart2);
this.stopButton2.addEventListener(MouseEvent.CLICK, onClickStop2);
function onClickStart1(event:MouseEvent):void
{
this.ball1.play();
}
function onClickStop1(event:MouseEvent):void
{
this.ball1.stop();
}
function onClickStart2(event:MouseEvent):void
{
this.ball2.play();
}
function onClickStop2(event:MouseEvent):void
{
this.ball2.stop();
}
授業スライド
スライドをダウンロード (PDF形式)
制作テンプレート
授業内で解説していく際の制作テンプレートです。
サンプルファイル
授業内で取り上げたプログラムのソースコードは、下記からダウンロードしてください。
これまで学んできたFlashのアニメーションは、時間に沿って決まった動きを繰りかえすという「伝統的な」アニメーションの枠内に留まるものでした。
Fhashでは、こうしたアニメーションの要素に加えて、ユーザの何らかの動作に反応してアニメーションを行うようにプログラミングしていくとが可能です。これはFlashを用いてユーザインタフェイスを作成したり、インタラクティブな作品を作る際の基本となります。
今日の授業では、簡単なインタラクティブなムービーの作成を通して、Flashでのプログラミングの基本を学びます。
リアクティブ・グラフィックス：ユーザの動作に反応する画像
先週までFlashでアニメーションを作る基礎を(駆け足で)学んできました。コンピュータの画面上で物体を動かすことができるようになりました。しかしながら、まだこの状態では高度な「紙芝居」に過ぎません。どんなに作りこんだとしても、それはひとつの決った時間の流れのなかで、あらかじめ決定された動きをするだけです。このままでは表現できる情報には限界があり、あまり多くのことを伝えることができません。
MITメデイアラボの教授である前田ジョンは、デザインに関する考察のなかで「リアクティブ(reactive)」という概念をキーワードにその可能性について述べています。
科学の先生に「生物とは、刺激に反応するものである」と覚えさせられた。知性をひけらかすのに大げさな表現が効果的だと考える年頃だった私は、すぐさまそれを大切に頭にしまい込んでおいた。何年もの後、私が学問としてデザインのありかたを理解しようとしていた時のことである。従来対立していた二つの陣営が、従来のデザイン手法や主張はもはや通用しないのではないかという点で知らないうちに共通の認識に達しているらしいことがわかってきた。研究者のグループは、カップやスプーンをデザインするのと同じ感覚では、現在の情報量の豊かなまのに取り組むことはできないと言う。現場のデザイナーは、物の機能が何千と挙げられる時代には「形態は機能に従う」原則など適合しないと主張する。デザインの境界領域からのアプローチが登場し、さらに「インタラクション」デザインというものも生まれてきた。デザインの対象が複雑になるだけでなく、デザインのプロセスも同様に複雑になる。このような中で途方に暮れているとき、先生の言葉が突如よみがえった。どんな生物も「反応する」。コンピュータもだ。
John Maeda MAEDA @ MEDIA 株式会社デジタローグ 2000 p81より引用
ここでいう「リアクテイブ」という概念は「インタラクティブ」という言葉に置き換えてもよいでしょう。ユーザの動作にコンピュータが「反応(リアクティブ)」することで、デザインの可能性は飛躍的に向上します。今回は、Flashで「リアクティブ」なグラフィックを作る実験をします。
参考リンク
「反応」する四角形
まず始めに、最もシンプルな「反応」の例をみてみましょう。
製作テンプレートのダウンロード
20071126-sample0528_pre.fla.zip
このフラッシュムービーは、3つの状態から成り立っています。その状態の切り替えは、「Action!」ボタンとマウスポインタの関係によって変化します。それは次の3つの関係です。
- ボタンとマウスポインタとの接触がない状態
→ 四角形は静止
- マウスポインタがボタンに重なった状態
→ 四角形ブルブル
マウスポインタがボタンから離れた状態
→ 四角形静止に戻る
- マウスポインタがボタンをクリックした状態
→ 四角形は爆発(!)
この3つの状態を模式化すると以下の図のようにまとめられます。
ここでムービをコントロールするために、いくつかの命令が出てきました。(「止まれ」「○○へ行け」など)
Flashでは、ムービーを希望通りのルールに従って動作させるために使用するために、ActionScriptという独自のスクリプト言語を用います。スクリプトを習得することで、Flashムービーの中で複雑な処理を実行することが可能となります。
このムービーの例では、多きく分けて2種類のスクリプト群からなりたっています。１つは、ムービーの制御に関するもの、もう１つはマウスの操作に関する命令です。それぞれを列挙すると以下に分類されます。
-
ムービーの時間制御に関する命令
-
ボタンの操作に関する命令
- マウスがボタンに接触したら、○○へ行け
- マウスがボタンをクリックしたら、○○へ行け
以下でそれぞれの命令をActionScriptで表現してみます。
ムービーの時間制御に関する命令
この例では、ムービーの時間制御に関する命令をフレームに割りあてています。フレームに割当てられたスクリプトをフレームスクリプトと呼びます。フレームスクリプトは再生ヘッドがそのフレームに達っしたときに実行されます。このサンプルで使用されているフレームスクリプトは以下の2つです。
止まれ：ムービーの停止
ムービーの停止をするには、stop()という命令を用います。この命令をムービにあてはめるには以下の手順で行ないます。
- アクションを割り当てるフレーム、ボタンインスタンス、またはムービークリップインスタンスを選択します。
- [アクション] パネルが表示されていない場合は、[ウィンドウ]-[アクション] を選択して表示します。[アクション] パネルがノーマルモードでない場合は、[表示オプション] ポップアップメニューからノーマルモードを選択します。
- [アクション] ツールボックスで、[アクション] カテゴリ、[ムービーコントロール] カテゴリの順にクリックして、stop アクションをダブルクリックします。
アクションがフレームに割り当てられている場合、次のコードがスクリプトペインに表示されます。
○○へ行け(戻れ)：フレームのジャンプ
ムービーで特定のフレームやシーンにジャンプするには、goto アクションを使います。ムービーがフレームにジャンプしたときに、ジャンプ先のフレームからムービーを再生する (デフォルト) か、またはそのフレームで停止するかを指定するパラメータを選択できます。エキスパートモードでは、goto アクションはgotoAndPlay および gotoAndStop の 2 つのアクションとして [アクション] ツールボックスに表示されます。また、ムービーは、シーンにジャンプして、指定されたフレーム、または次のシーンか前のシーンの最初のフレームを再生できます。
フレームまたはシーンへジャンプするには :
- アクションを割り当てるフレーム、ボタンインスタンス、またはムービークリップインスタンスを選択します。
- [アクション] パネルが表示されていない場合は、[ウィンドウ]-[アクション] を選択して表示します。[アクション] パネルがノーマルモードでない場合は、[表示オプション] ポップアップメニューからノーマルモードを選択します。
- [アクション] ツールボックスで、[アクション] カテゴリ、[ムービーコントロール] カテゴリの順にクリックして、goto アクションをダブルクリックします。
スクリプトペインに gotoAndPlay アクションが自動的に挿入されます。
- ジャンプの後もムービーの再生を続けるには、パラメータペインで、デフォルトで選択されている [Go To and Play] オプションを選択したままにしておきます。ジャンプ後ムービーを停止するには、[Go to and Stop] オプションを選択します。
- パラメータ領域の [シーン] ポップアップメニューで、ジャンプ先のシーンを指定します。
[次へ] または [戻る] を選択した場合、再生ヘッドは次または前のシーン内の最初のフレームにジャンプします。カレントシーンまたは名前を付けたシーンを選択した場合は、ジャンプ先の再生ヘッドにフレームを用意する必要があります。
- パラメータ領域の [タイプ] ポップアップメニューで、ジャンプ先のフレームを選択します。
- [次のフレーム] または [前のフレーム] で、次または前のフレームへのジャンプ先フレームを設定します。
- [フレーム番号]、[フレームラベル]、または [式] でフレームを指定できます。式は、1 + 1 のような、値が生じるステートメントの任意の部分です。
- 手順 6 のフレームパラメータボックスで [フレーム番号]、[フレームラベル]、または [式] を選択した場合は、フレーム番号、フレームラベル、またはフレーム番号やフレームラベルの値を求める式をフレームパラメータに入力します。
次のアクションでは、再生ヘッドがフレーム 50 にジャンプします。そこで、再生が続行します。
次のアクションでは、再生ヘッドはアクションが含まれるフレームの 5 つ先のフレームにジャンプします。
gotoAndStop(_currentframe + 5);
ボタンの操作に関する命令
ボタンをクリックしたときやボタンの上にマウスポインタを重ねたときに、ムービーが実行されるようにするには、ボタンにアクションを割り当てます。アクションは、ボタンのインスタンスに割り当ててください。こうすると、シンボルのその他のインスタンスに影響しません。
ボタンにアクションを割り当てる場合、on ハンドラ内にアクションをネストし、アクションを実行するマウスイベントまたはキーボードイベントを指定する必要があります。ノーマルモードでボタンにアクションを割り当てる場合、on ハンドラが自動的に挿入され、リストからイベントを選択できます。
ボタンにアクションを割り当てるには :
- ボタンを選択し、[アクション］ パネルが開いていない場合は、[ウィンドウ]-[アクション] を選択して [アクション] パネルを開きます。または、[アクション］ パネルのジャンプメニューから、ボタンまたはムービークリップのインスタンスを選択することもできます。
- アクションを割り当てるには、次のいずれかの操作を行います。
- [アクション] パネルの左側の [アクション] ツールボックス内のフォルダをクリックします。アクションをダブルクリックして、パネルの右側のスクリプトペインに追加します。
- [アクション] ツールボックスからスクリプトペインにアクションをドラッグします。
- [+] ボタンをクリックして、ポップアップメニューからアクションを選択します。
- [+] ボタンのポップアップメニューのアクションの横に表示されているキーボードショートカットを使用します。
- パネルの最上部にあるパラメータテキストボックスで、必要に応じてアクションのパラメータを入力します。
パラメータは、選択するアクションによって異なります。各アクションの必須パラメータの詳細については、[ヘルプ] メニュー内のオンライン ActionScript 辞書を参照してください。ムービークリップのターゲットパスをパラメータテキストボックスに挿入するには、スクリプトペインの上にある [ターゲットパスの挿入] ボタンをクリックします。詳細については、ムービークリップとボタンの処理を参照してください。
- 必要に応じて、手順 2 と手順 3 を繰り返し、追加のアクションを割り当てます。
サンプルムービにスクリプトを割りあてる
では実際にサンプルムービーにスクリプトをあてはめていきましょう。下に図示したように、このサンプルではタイムラインの各所に、フレームスクリプト、ボタンスクリプト合わせて5箇所にスクリプトを記入していきます。
それぞれのスクリプトは以下のようになります。
スクリプト1、 スクリプト3(フレームスクリプト)
「止まれ」
スクリプト2(フレームスクリプト)
「フレーム2に戻れ」
スクリプト4(ボタンスクリプト)
「ボタンにマウスが重なったら、ムービーを再生せよ」
on (rollOver) {
play();
}
スクリプト5(ボタンスクリプト)
「ボタンをマウスクリックしたら、フレーム7へ行け」
「ボタンからマウスが離れたら、フレーム1へ戻れ」
on (rollOut) {
gotoAndStop(1);
}
on (release) {
gotoAndPlay(7);
}
完成ファイルのダウンロード
20071126-sample0528_fin.fla.zip
授業スライド
スライドをダウンロード (PDF形式)
サンプルファイル
授業内で取り上げたプログラムのソースコードは、下記からダウンロードしてください。
講義スライド
今日の内容
- 課題「映像のカノン」の講評会
- 「映像のカノン」別の作成方法の紹介
- ムービクリップシンボルを用いた作成方法
- ムービクリップシンボルの使い方
「映像のカノン」講評会
- 作品をWebサーバにアップロードする
- ムービーをパブリッシュ
- htmlファイル名：index.html
- swfファイル名：canon.swf
- アップロード場所
- public web server → webmov(無ければ新規作成)→ kadai1 → index.html・canon.swf
- 出席番号順に作品をみていきます
「映像のカノン」別の作成方法
- ムービークリップシンボルを活用することで、より簡単に「映像のカノン」を作成可能
- ムービークリップシンボルとは？
- グラフィックやボタンシンボルと異なり、メインのタイムラインとは異なる、シンボル固有のタイムラインを持つムービの中の「子ムービー」のようなもの
- ムービクリップシンボル作成方法
- ライブラリウィンドウの左下にある「新規シンボルの作成」ボタンを押す
- タイプをムービクリップでシンボルを作成する
- 「OK」ボタンを押すと、ムービクリップ内のタイムラインに移動している
- タイムライン表示の左上に注目！
- move01のタイムラインに、「カノン」のための動きを１種類作成する（16秒）
- タイムライン表示の左上の「シーンⅠ」ボタンを押して、メインのタイムラインに戻る
- ８秒ずつずらしながら、16秒間のフレーム領域をキーブレームを挿入して確保する。
- 確保した16秒のフレーム内に、先ほど作成したムービクリップシンボルを貼付ける
- これだけで「カノン」の完成！
様々な変奏
- ムービクリップのプロパティで「着色」を選んで、それぞれのムービクリップに別の色を塗る
- ムービークリップの場所をずらす
- ムービクリップを回転する
- …etc
サンプル１（基本形）
サンプル２（色の変奏）
サンプル３（色の変奏＋回転）
