2010年3月17日水曜日

Flash CS4  ActionScript3.0 でスクラッチカード的なマスクオブジェクトを作ってみる

ActionScript3.0 でマウスを動かすと、円が動いてその部分が透明になり背景が見える、というスクラッチカード的な動作をするサンプルを作ってみました。



マスクオブジェクトを動かしているだけですが、初心者の人には設定方法が分かりにくいのではないでしょうか。



【サンプル】

クリックすると、スクラッチ開始。マウスを動かすと透明な範囲が増えます。もう一度クリックすると、マスクオブジェクトがクリアされます。





前準備として

①Flash CS4 のライブラリに背景用画像データを読み込みます。



②ライブラリの画像アイコンを右クリックして「プロパティ」を選んで「ビットマッププロパティ」を開き、「リンゲージ」項目の 


・ActionScript用に書き出し

・1フレーム目に書き出し


にチェックを入れます。


また、「クラス」の部分に適当な名前を入れます。

このサンプルでは下図のように「TullyBustShot」としました。

ActionScriptでこのクラス名を使ってビットマップデータのインスタンスを作ります。


【サンプルのコード】
FlashCS4のタイムライン記述用

// ライブラリで画像データのプロパティを開き、TullyBustShot クラスを記述しておく。
var bmp_data : BitmapData = new TullyBustShot(0,0);//ダミーの引数2つ(0,0)が必要

// ビットマップインスタンスを作成し、表示リストに登録
var bmp_obj : Bitmap = new Bitmap( bmp_data , PixelSnapping.AUTO , true);
//背景を描画
var canvas:Sprite = new Sprite();
canvas.graphics.beginBitmapFill(bmp_data);
canvas.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
canvas.graphics.endFill();
canvas.width = stage.stageWidth;
canvas.height = stage.stageHeight;
addChild( canvas );

//ステージクリックでマスクオブジェクト描画(スクラッチ)開始
stage.addEventListener(MouseEvent.MOUSE_DOWN, drawing);
var myMC= new MovieClip();
canvas.mask = myMC;


function drawing( event:MouseEvent ):void {
myMC.graphics.beginFill(0xff0000);
myMC.graphics.drawCircle(mouseX, mouseY, 15 );
addChild(myMC);
stage.addEventListener( MouseEvent.MOUSE_MOVE , drawingHandler);
//ひとつMCを作成したら、それ以上ステージをクリックしても反応しないように
//イベントリスナ削除
stage.removeEventListener(MouseEvent.MOUSE_DOWN, drawing);

}

//mask描画モードでマウスが動いたら、マスク用の円を追加で描く
function drawingHandler( event:MouseEvent ):void {

myMC.graphics.drawCircle(mouseX, mouseY, 15 );
//ステージでマウスの左ボタンが押されたら、リセット用の関数clearDrawingを呼び出す。
stage.addEventListener(MouseEvent.MOUSE_DOWN, clearDrawing);
//フレームレートにかかわらず、マウスが動くイベントが発生したら画面を更新する。
//遅いフレームレートでも画面をタイムラグがなくなる。
event.updateAfterEvent();

}


//mask描画中にステージをクリックしたら呼び出され、リセットを行う
function clearDrawing( event:MouseEvent ):void {
myMC.graphics.clear();
stage.removeEventListener( MouseEvent.MOUSE_MOVE , drawingHandler);
stage.removeEventListener(MouseEvent.MOUSE_DOWN, clearDrawing);
stage.addEventListener(MouseEvent.MOUSE_DOWN, drawing);
}

2010年3月16日火曜日

Flash CS4  Sliderコンポーネントを使った回転表示

FlashCS4 のスライダーコンポーネントを使ったサンプル。
簡単にサンプルのようなガジェットが作れてしまいます。

ModelはいつものごとくShadeのTullyさん(笑)。
スライダを動かすと、回転します。
正確には被写体の周りをカメラが回って写した画像を表示しているのですが。



サンプル作成手順
①被写体の周りを回って写した連番画像を用意。
今回のサンプルは3DCG作成ソフトのShade10.5で作成しました。
3DCGソフトでの作り方はこのブログの範囲外なのでここでは省略します。

興味のある方は3DCG関連の姉妹サイトで記事を書きましたのでそちらを見てください。

関連記事(姉妹サイト)
(Shade10.5)被写体の周りを公転させながら撮影する

②FlashCS4のメニューで
 ファイル>読み込み>ステージに読み込み
より連番画像を読み込んでステージ上に配置。

③コンポーネントパネルから、Sliderをドラッグしてステージに配置。
スライダのインスタンス名を設定します。
今回はインスタンス名を「OrbitingSlider」としました。このインスタンス名を使ってAS3.0スクリプトで操作します。


④ステージに配置したスライダを選択し、コンポーネントインスペクタパネルを開いて、各種パラメータを設定します。

今回は、以下のように設定しました。
liveDragging true
(スライダのドラッグをスクリプトで検出するか)
maximum 72
(読み込んだ画像が72フレーム分なので最大値を72にセット)
minimum 1
(Flashのタイムラインのスタートフレームが1なので最小値をセット)
snapInterval 1
(スライダを動かしたときvalueが変化する間隔、今回はフレームを増やすので1ずつ変化させる)
value 1 
(スライダの初期値)


③Flash CS4のタイムライン上に(出来ればActionScript用のレイヤーを用意して)以下のスクリプトを記述します。

//Flashムービーの開始時、再生を始めず、ストップさせる。
//動きはスライダでコントロール
stop();
//スライダを操作するためのクラスファイルをimport
import fl.controls.Slider;
import fl.events.SliderEvent;

//スライダの位置やサイズをセット
OrbitingSlider.setSize(200,0);
OrbitingSlider.x=60;
OrbitingSlider.y=420;
//スライダのノブが動いたら検出するイベントリスナーの登録
OrbitingSlider.addEventListener(SliderEvent.CHANGE,onSliderChanged);


function onSliderChanged(event:SliderEvent) {
//スライダの値のフレームへ移動する。
gotoAndStop(OrbitingSlider.value);
}

2010年3月13日土曜日

Flash CS4  ライブラリのビットマップを背景色に設定する。

Flash CS4 では、カラーパネルの背景色(バケツアイコン部分で設定)にライブラリに読み込んだビットマップを使用できる。下図は楕円、星型、ブラシの塗り、矩形それぞれの背景色をライブラリに読み込んだTully(タリー)バストショットにした結果。

①たとえば、下のような画像をFlashのライブラリに読み込む。


②次にカラーパネルでバケツアイコンをクリック、右上の「種類」ドロップダウンリストで「ビットマップ」を選ぶとライブラリに読み込んだビットマップの一覧が、カラーパネル下部に表示される。表示されたビットマップにマウスカーソルを合わせると、カーソルがスポイト形状になるのでクリックして選択。
→バケツアイコン右側に選択されたビットマップの縮小画像が表示される。


③ツールバーから楕円や矩形を選んでステージに配置したり、ブラシで塗ると、選択されたビットマップが背景色として表示される。下図のように楕円ツールを選んだとき、プロパティパネルの背景色(バケツアイコン)部分がビットマップになっている。

Flash CS4  ActionScript3.0 で複数のマスクオブジェクトを動かしてみる。

(FlashCS4)複数のアニメーションマスクが適用できない

で記したようにFlashのタイムラインに複数のマスクオブジェクトを配置してアニメーションさせた場合、ひとつしかマスクオブジェクトとして有効にならない。

だもんで、やっぱActionScriptで記述するしかないよな、と作ってみたのが下のサンプル。
楕円部分をドラッグすると、動いて向こう側が見えます。

だだし、以下のような問題が発生したので、マウスイベントを検出するダミーの楕円movieクリップを間にかますという、ちょっと遠回りな手法をとった。
そのため、動作はするけど、若干見苦しい挙動をする。
(実験用ならいいけど、売り物にはならない)
もう少し、研究する必要がありますね。

問題は
①マスクオブジェクトは(少なくとも単純な方法では)イベントリスナが効かない?
②ただし、座標のセットは出来る模様

ということ。

また、マスクオブジェクトはFlashの仕様でどうもマスク用フレームには1オブジェクトしか置けない模様。

この点については、複数のオブジェクト(下のサンプルなら2つの楕円ムービークリップ)をFlashのステージ上で複数選択して、(一つの)シンボルに変換してから、ActionScriptで個別の楕円MovieClipへのターゲットパスを指定してやれば回避できた。


2010年3月12日金曜日

Flash CS4  ProgressBarコンポーネントで読み込み状況が表示できる。

どれだけデータを読み込んだかを示す、いわゆるNow Loading(読み込み中)ロードバーはよく見かけますが、Flash CS4 だとコンポーネントを利用して簡単に設置できることが判明した、というか私が知らなかっただけですが。

いや、今まで(勉強も兼ねて)ActionScriptだけで作ってたから、こういう便利機能ってあんまり使う機会と言うか時間が無かったのであります。

結論から言うと、結構楽かな? ただ、今全体のうち何バイト、ダウンロードしたか、っていうデータをコンポーネントからは取得できない?

(追記)できるかもしれない、が調査中。 ソースはadobeのドキュメント。


う~む、別途ActionScriptで実装すると、せっかく楽しようと思ってもそんなに楽できないか?
ま、その点は自分への宿題にして、コンポーネントの使い方自体はメモしておく。



①コンポーネントパネルから、ProgressBarを選んでステージへドラッグ&ドロップ。ついでに外部ムービーファイルのUILoaderコンポーネントも同様にステージに配置した。




(下)ステージに配置したコンポーネント
ILoaderコンポーネントのインスタンス名を仮に「movieLoader」とした。

キャプチャ画像を小さくするため、ステージの左上に集めたが、位置やサイズはプロパティパネル等で設定する。
また、画像やムービーの読み込みが完了したときにプログレスバーを見えなくするには、UILoadarコンポーネントが、ProgressBarコンポーネントの上になるよう重なり順を設定する。(別のレイヤーに配置しても良い)





.②選択ツールでProgressBarコンポーネントを選んで、コンポーネントインスペクタの「パラメータ」タブでパラメータを設定する。この時、下図のように「source」部分には読み込みを行うUILoaderコンポーネントのインスタンス名「movieLoader」をいれ、ProgressBarコンポーネントとUILoaderコンポーネントを関係付ける。




他のパラメータは、
・「direction」 がロードにつれてprogressbarが伸びていく方向
・「enabled」はユーザが操作できるかどうか
・「visible」はコンポーネントを表示するか(見えるようにするかどうか)
・「mode」は 現時点では私が細かいところまで把握できていないので省略。
→ Adobeのドキュメントに参考資料があったので、
(少し前の資料だけど)必要な人はそちらを見てください。

③ローカルのPCでテストする場合、ファイルの読み込みがすぐ終わってしまい、ProgressBarが伸びて行く様子が確認できないので、ダウンロード(回線速度)のシミュレート設定を行う。

  1. FlashCS4のメニューで「制御」>「ムービープレビュー」を選ぶと、FlashPlayerが立ち上がる。
  2. FlashPlayerの上部メニューで「表示」>「ダウンロード設定」から、ダウンロード速度を選ぶ。(下図)
  3.  FlashPlayerの上部メニューで「表示」>「ダウンロードのシミュレート」を選ぶと、設定したダウンロード速度でシミュレートを行い、ローディングバーが伸びて行く様子が確認できる。

FlashCS4ではテキストが分解できて、個別に操作できるらしい

FlashCS4ではテキストが分解できて、個別に操作できるらしい。

①テキストフィールドを選択した状態で右クリック、分解を選ぶ。



②そうすると下図のようにテキストフィールドが文字単位に分割される。




③アニメーションは1つのレイヤーに一種類しか配置できないので、文字を個別にアニメーションさせる場合は、②のように全ての文字のテキストフィールドが選択された状態で右クリック→「レイヤーに配分」を選択すると、下図のように各文字が新しく作られたレイヤーに配置される。

(Flash CS4)複数のアニメーションマスクが適用できない。

「Flash cs4 複数のマスクをかけるには」などのキーワードで検索かけたり、Flash関連の本をあたったけれど、複数のマスクオブジェクトをモーションさせて適用する方法が、分からない。

問題は、
①マスクオブジェクトは、マスクをかけるムービークリップやグラフィックのひとつ上のレイヤーに配置する必要がある。
②ひとつのレイヤーには、ひとつのオブジェクトのトゥイーンしか配置できない。
という2点を両立させて複数のマスクオブジェクトを作成、配置できない事だ。

だから上図では青色の楕円二つともトゥイーンモーションを設定しているが、レイヤー構成は
・下の大きな横長楕円
・右上の小さい縦長楕円
・下の画像(Tullyさん)
となっており、マスクオブジェクトに変換した場合、
右上の楕円画像のみが、Tully画像に対するマスクとして機能することになる。

何かいい方法があるのかもしれないが、現状問題解決できていない旨、覚書として記しておく。