グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

ボタンクリック時などのイベントハンドラの中で、
イベントが発生したムービークリップ自身を扱う書き方。


_btn.addEventListener(MouseEvent.CLICK, xClick);

function xClick(evt:MouseEvent):void {
var target_mc:MovieClip = evt.target as MovieClip;
}

上記のように書くことで、
_btn（クリックしたボタン）を「target_mc」として扱うことができます。

AS2からの移行で結構悩んだとこだったりします。

addChild()で作成した表示オブジェクトに名前を付ける方法。

AS2.0では作成時に当たり前に付けていましたが、AS3.0では後から付けるようです。
インスタンス名の設定は .nameプロパティで設定できます。

var mc:MovieClip = new MovieClip();
mc.name = "sample";


また、インスタンス名を使って表示オブジェクトにアクセスするには、
getChildByName("インスタンス名") を使用します。

var mc:MovieClip = new MovieClip();
mc.name = "sample";
mc.x = 30;

trace(getChildByName("sample").x); //出力結果：30


参考にしたサイトは以下。
■ActionScript3.0でインスタンス名を調べたり設定する方法 | creator note http://creator.cotapon.org/articles/flash/actionscript3-0/actionscript3-0...


基本的なことなのに結構面倒な手順だなと思いましたが、
そもそもインスタンス名を使ってのやりとりはAS3.0では
あまり利点がないそうです。

AS3.0の入門書を読んでも上記のような手順は紹介されてませんでしたし、
根本的な頭の切り替えが必要そうです！


【おまけ】
配列アクセス演算子を使えば文字列で変数名を付けられます。
インスタンス名の利点がないのは、変数名で同じことができる、ということかも。

var mcName:String = "sample";
this[mcName] = new MovieClip();
this[mcName].x = 30;

trace(this.sample.x); //出力結果：30

先日Flashでムービー制作を行ったのですが、
最後の工程で引っかかってしまったのでメモ。

Flashには「ムービーの書き出し」機能があってMOVやAVIで書き出せます。
が、現時点（CS6）ではどちらもイマイチでした。

■MOV形式
fpsが正しい数値になりません。

今回はフレームレートを30fpsで作成したので
書き出しも30fpsに設定したのですが、実際に書き出されたデータは30.3fps。
大差がないようでも正確な再生時間が求められる場合はNGです。。

対策としては、Flash8からビデオ書き出しをすれば問題ないそうなので
環境がある方はお試しください。


■AVI形式
_rootにあるムービークリップしか書き出せません。

なので初めから想定して制作していれば問題ありませんが、
入れ子にしてしまっていた場合は一部が抜けた動画になってしまいます。


AVIならfpsは問題ないようなので、MCを入れ子にしないように制作するか、
MOVで書きだしてからfpsを変更するか、
SWFで書きだして形式を変換する、などで回避するしかなさそうです。

■ClockMaker Labs
http://clockmaker.jp/labs/

Flash Stage3Dを使用したサンプルを多数紹介されているサイトです。

サイトそのものがかなり素敵で、こういう動かしてるだけで
気持ちいいようなサイトを久々に見たような気がします。
（といっても最近できたサイトではありませんが）

紹介されているサンプルもどれもクオリティが高く、
どちらかというとギャラリーサイトみたいな感覚で眺められます。

実際、内容は全然理解できていないですが・・
見ているだけでもインスピレーションが刺激されると思いますので是非。

以前書いた、
Flash：ブラウザのスクロール状態を取得
という記事のスクリプトを修正したものになります。

JSとFlashでやり取りして、ブラウザのスクロールやサイズの情報をFlashに渡す、というもの。

修正と言いつつも、問題があったデータ取得の部分以外にも
データの受け渡し方などを変更しているため、
実際はほぼ作り直しになっています。

・デモ
・ダウンロード

取得したデータを使って、情報ウインドウが中央になるようにしています。
ブラウザ幅が広くても狭くても、情報ウインドウが見えるはず。

Flashでのシェアボタンの設置方法です。
HTMLで<a>タグにパラメーターを与えるのと同じように、
getURLのアドレスにパラメーターを加えることで作成できます。

■twitter
------------------------------------------------------------------------------
getURL( "http://twitter.com/share?url=//www.gravity-works.jp/&text=twitterテキスト" , "_blank" );
------------------------------------------------------------------------------

■Facebook
------------------------------------------------------------------------------
getURL( "http://www.facebook.com/sharer.php?u=http://www.google.co.jp/" );
------------------------------------------------------------------------------

ただし、上記のように日本語を使う場合は
そのままではエラーが出てしまうので、UTF-8でURLエンコードをする必要があります。

escape() を使い、日本語を含むテキストを変換します。
※System.useCodepage が true になっている場合は false にします
------------------------------------------------------------------------------
getURL( "http://twitter.com/share?url=//www.gravity-works.jp/&text=twitterテキスト" , "_blank" );
　↓
getURL( "http://twitter.com/share?url=http://www.google.co.jp/&text="+ escape("twitterテスト") , "_blank" );
------------------------------------------------------------------------------

これでFlashにもシェアボタンを設置することができます。

今まであまり外部クラスには触れずにきたのですが、
やっぱり便利なものは使わないと、というのと、
AS3.0を始める前に慣れておけるようにということで、
良さそうなところを見つけてちまちま外部クラス化したりしています。

そこで気になったのがonEnterFrameの扱い。

読み込んだ先でonEnterFrameを上書きしてしまっても困るし、
かといって空mcを作ってその中で動かすにしても、
そのmcからまた外部クラス内の処理を呼び出す方法がわからなかったりで
（こっちは調べればちゃんとした方法がありそうですが）
上手く使いこなせていませんでした。

なにかいい方法がないかと探していたところ、
AS2の外部クラス内で簡潔にonEnterFrameを有効にする という
まさにぴったりの記事が！

OnEnterFrameBeaconクラスというクラスを使うことで、
外部クラス内でonEnterFrameを使えるんですね・・
これは今後も（自分の中で）活躍しそうです。

Flashの初めにローディングバーを設置すると、
Flashを表示させてしばらくは白い画面が続き、
バーが表示されたときにはすでに途中までローディングが終わっている、
ということがあると思います。

ひどい時には60％くらいから始まるときも。。
これではせっかくのローディングもあまり意味がなくなってしまいます。


この原因ですが、1フレーム目の容量が多いことが問題だそうです。

Flashは1フレーム目に配置した要素を読み込み終わるまで何も表示しません。
そのため1フレーム目にはローディング関連しか置かないようにするのですが、
attachMovie用にリンケージ設定をしたMCも1フレーム目で読み込まれます。

MCのプロパティからリンケージの項目を見ると、
「1フレーム目に書き出し」にチェックが入っていると思います。

自分の場合はほぼこれが原因です。


ではどうするかというと、
まず「1フレーム目に書き出し」のチェックを外します。

このままではattachMovieで呼び出せないので、
次に2フレーム目あたりに専用のフレームを用意し、
attachMovieで呼び出したいMCをすべて設置します。

以上です。

これで1フレーム目にMCが置かれるのを極力回避することができます。

ただし、リンケージ設定の書き出しと違い、
実際にMCを設置するということはMC内のスクリプトも動くということで、
そこでエラーが出ないように注意しましょう。

AS3.0でハマったこと、thisについて。

匿名関数内でthisを使ったら、予想外の動作をしたのでメモしておきます。

「MC」というムービークリップ内に「btn」というボタンを配置し、
フレームには以下のように書きました。

■AS3.0

btn.addEventListener( MouseEvent.MOUSE_UP, function(){
trace(this.x);
});

匿名関数内で this を使用しています。

ここで、this は「MC」を参照するだろうと勝手に考えていたのですが・・
出力結果は undefined 。

「MC」でも「btn」でもありませんでした。


じゃあこの this は何を指しているのかというと、
こちらのサイトでまとめられていました。

AS3のクロージャ

・・はい、AS3.0学びたての自分では、この概念は難しすぎます。

それでも辛うじてわかったことは、

1.この関数はメソッド内で定義されているため「関数クロージャ」に分類され、
2.その関数クロージャは呼び出し方によって参照先が変わり、
3.匿名関数の場合はどのインスタンスにも関連づけられていないためアクティベーションオブジェクトを参照してしまう

ということです。（正直、これすら間違っているかもしれませんが・・）

ですので、this を使ったとしても「MC」を参照できないのでした。


これで困ったのは配列アクセス演算子を使って
this["mc_"+ i].stop();
というような指示をしようとしたとき。

thisを書くとアクティベーションオブジェクトを参照してしまうし、
かといって代わりに書くオブジェクトもない・・

今まで当たり前に使ってきた手法が使えなくなってしまい
かなり混乱しております＾＾；


何か良い代替方法を見つけたら、また追記しようと思います。

現在、AS3.0とAIRの勉強を少しずつ進めています。
その中で、AIRでのみできることがいくつか出てきたので書いておこうと思います。
（まだまだ、ホントに簡単なもののみですが；）

■常に前面に表示

・常に前面に表示する
NativeApplication.nativeApplication.alwaysInFront = true;

・元に戻す
NativeApplication.nativeApplication.alwaysInFront = false;


■ウィンドウ操作系
ウィンドウ操作ボタンを自分で用意する場合、それぞれのボタンに設定します。

・ウィンドウの移動
MC_1.addEventListener(MouseEvent.MOUSE_DOWN, moveWindow);
function moveWindow(evt:MouseEvent) {
stage.nativeWindow.startMove();
}

・ウィンドウを閉じる
button_1.addEventListener(MouseEvent.CLICK, closeWindow);
function closeWindow(evt:MouseEvent) {
stage.nativeWindow.close();
}

・ウィンドウの最大化
button_2.addEventListener(MouseEvent.CLICK, maximizeWindow);
function maximizeWindow(evt:MouseEvent) {
stage.nativeWindow.maximize();
}

・ウィンドウの最小化
button_3.addEventListener(MouseEvent.CLICK, minimizeWindow);
function minimizeWindow(evt:MouseEvent) {
stage.nativeWindow.minimize();
}


■ウィンドウの設定
スクリプトではないですが、関係する部分でしたので。
ファイル＞adobe AIR 2 設定 を開きます。

・デフォルトウィンドウの非表示
↑でオリジナルのボタンを用意した場合、もともとあるウィンドウのフレームは
いらないので隠しましょう。
「一般」タブより、ウィンドウスタイルを「カスタムクローム」に設定します。
「不透明」はFlashの背景色を表示、「透明」は背景が透けます。

・ウィンドウの最大化／最小化／リサイズの制限
「詳細」タブより、ウィンドウの最大化、最小化、リサイズの有効／無効が
設定できます。


今回試したのは以上です。
またそのうちまとめたいと思います！

Flashの作業の中で、自分の中でとくに手間がかかる部類だと思うものに
「アニメーションをつけているインスタンスの全置き換え」があります。

レイヤー内にフレームをいくつも用意して複雑なアニメーションを付けているときに、
その動かしているインスタンスを置き換える必要がでてきたとき、です。

普通は、1つ1つフレームを選択して、インスタンスを置き換えていくことになるんですが・・　場合によっては何十回とこの作業をすることになるので、時間的にも精神的にも辛くなってきます。


つい先日もこの作業をしたんですが、「不便に感じたらまずは検索」の結果とても素晴らしいJSFLを見つけることができました。

[JSFL] swap symbols in the same layer

これを使うことで、レイヤー内のインスタンスをまとめて置き換えることができます！
※ちなみにJSFLというのはFlash用プラグインのようなもので、マクロや自作ツールを追加できるのだとか

使い方も簡単、
インストール後、置き換え前のインスタンスがあるレイヤーを編集中にし、
置き換え後のシンボルをライブラリー内で選択します。
メニューの「コマンド」に「swap symbols in the same layer」が追加されているので実行するだけです。

また、フォルダ内のシンボルを対象にしようとするとエラーが出てしまいますが、
それもこちらで対処法が紹介されています。

swap symbols in the same layer をフォルダ内のシンボルにも使えるように


必要となる場面は実はそこまで多くないんですが、
そのいざというときの負担をかなり軽減してくれるステキなツールだと思います。

こそっとAdobe AIRを使ってみようと思い、
AIRランタイムをダウンロードしてみました。

で、インストールしたはいいものの、.airファイルが関連付けされず、
いわゆる「不明なファイル」になってしまう。。

これはどうやらVistaの問題らしく、Adobeのサポートに載ってました。

Windows Vista で「.air」のファイル拡張子が登録されない（Adobe AIR）

といっても、コメントにあるように解決には至らなかったんですが・・


大人しく手動でプログラムを指定することにします。

以下の場所にあるので、.airファイルをダブルクリックして
「インストールされたプログラムの一覧からプログラムを選択する」を選び、
「参照」から
Program Files／Common Files／Adobe AIR／Versions／1.0／Adobe AIR Application Installer.exe
を選択すればOKです。

それにしても、この段階から引っ掛かるって、
この先が非常に心配になってきました（笑）

この辺り、何故かいつも忘れてしまうのでメモです。

Flashのメニューで、ファイル＞読み込み＞ビデオの読み込み　からFLVファイルを読み込んで配置した場合に、スクリプトでいろいろ操作する方法。


■メタ情報の取得

以下のように書くことで、メタ情報を取得できます。

※ムービーオブジェクトのインスタンス名は「myMovie」
-------------------------------------------------------------------------------
import mx.video.*;
var listener_Obj:Object = new Object();

listener_Obj.metadataReceived = function(eventObject:Object):Void {
trace("総時間 : " + myMovie.metadata.duration + "秒");
trace("幅 : " + myMovie.metadata.width);
trace("高さ : " + myMovie.metadata.height);
trace("ビデオレート : " + myMovie.metadata.videodatarate + "kb");
trace("フレームレート : " + myMovie.metadata.framerate + "fps");
trace("コーデックＩＤ : " + myMovie.metadata.videocodecid);
};

myMovie.addEventListener("metadataReceived", listener_Obj);
-------------------------------------------------------------------------------

主に総時間を表示させるのに使いました。
ホントはスキン側だけで完結できれば使い回せるんですが・・


■再生など

インスタンス名を指定して再生などもできるので、
中央に大きなPlayボタンを置いたりすることもできます。

ムービーに重ねるようにMCを作り、MC内に
-------------------------------------------------------------------------------
onRelease = function(){
_parent.myMovie.play();
}
-------------------------------------------------------------------------------

この指定でも、ちゃんとスキン側も連動して動いてくれます。



また新しく使ったものがあれば追加しよう。

FlashのgetURL()で日本語ドメインを指定したところ、
何故か指定した通りのアドレスに飛んでくれませんでした。

（例）http://www.日本語ドメイン例.co.jp/

少し調べてみたところ、そもそも日本語ドメインが使えるのは
ブラウザが国際化ドメイン名（IDN）に対応しているからだそうで、
英数字とハイフンの文字列に変換してくれるからだとか。

で、Flashはその変換ができないと。。


ですので、Flashで日本語ドメインを使用する場合は
自分で変換しなければなりません。

変換を行えるサイトはいろいろあります。
今回は以下のサイトを利用してみました。

■日本語URL変換ツール
http://n7.com/japanese/

目的のURLを入力し、詳細設定で文字コードをUTF-8にします。

あとは変換結果に出てくるアドレスをFlashで使用すればOKです。

そんなに頻繁に使うものではないでしょうが、
Flash側で対応してくれると助かるんですけどね～。

Pretty Loaded
http://www.prettyloaded.com/

Flashのローディングムービーのみをたくさん集めたサイトです。

とにかく凝った演出のものが多く、次々と流れるので見ていて飽きません。

ローディングの演出を考えているときに見ることがありますが、
凝りすぎていてあまり参考にならないことも・・

が、ローディング以外にも動きの参考になりますし、
眺めているだけでも楽しいのでオススメです。

便利そうなスクリプトを見かけたので覚え書きです。

■ #initclipディレクティブ
#initclip ～ #endinitclip の間に書かれたスクリプトは、
コンポーネントがロードされた後1度だけ実行されます。

タイムラインの1フレーム目にしか書けないそうなので要注意ですが、
わざわざ2回目以降通らないように処理する必要がないので便利ですね～
（↑やってました）
ちなみにまだ試してないので、メモということで。

#initclip
var testNum = 0;
#endinitclip

SWF内に記述するパスは、デフォルトの状態だと
そのSWFを貼りつけるHTMLからのパスにしなければなりません。
始めた頃はこれに相当悩まされました。。

もうすっかり慣れてしまったのですが、
SWFからの相対パスにするのは
とても簡単だということを今更知りました＾＾；

タイトルの通り、ブラウザのスクロールバーの位置を取得するだけのスクリプトです。
あんまり使い道がなさそうですが、フル画面 Flash にできず、かつ縦長の Flash で、Lightboxっぽい動きをさせたいときとかにあると便利かもしれません。。

JavaScript でブラウザの情報を取得して、その情報を Flash で受け取ります。

【！】FireFoxで上手く動かないようなので、スクリプトを修正しました。
新しい記事にまとめていますので↓こちらをご覧ください。

Flash：ブラウザのスクロール状態を取得（修正版）

loadMovie でファイルを読み込むとき、
this.loadMovie("abc.xml?"+ Math.random());
というふうに、
ファイル名の後ろに"?"と"乱数"を付けることで
キャッシュを読むのを防ぐことができます。
（毎回違うファイルだと判断されます。）
キャッシュしないわけではないのでデータは溜まってしまいますが・・
常に最新のデータを読めるようになります。

swf に別の swf を読み込むような Flash で、attachMovie() を実行するとします。
その場合、attachMovie() で生成する MC は、ターゲットにする swf 内になければならないようです。

例えば、swf A を対象に attachMovie() する場合は、生成したい MC は swf A 内に用意しておかないといけません。

swf B を対象に attachMovie() する場合は、swf B 内に用意しておかないといけません。
ちなみに swf A 内から、swf B を対象に attachMovie() する場合は、swf B 内に用意しておきます。


なんだかわかりにくくなってしまいましたが、
「リンケージを設定した MC が配置できるのはその swf 内だけ」
ということらしいです。