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

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 をフォルダ内のシンボルにも使えるように


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

FLVPlaybackコンポーネント、いわゆるFlash内でムービーを再生させる際のプレイヤーのカスタマイズについてです。

今まではFlashにデフォルトで用意されているスキンを複製し、
デザインをちまちま変えて対応してきましたが、
ボタンやバーの位置などを大幅に変える必要が出てきました。

ので、別々に用意したスキンを読み込む方法ではなく、
ムービーを読み込むFlashに直接パーツを配置する方法で作成しました。


作成にあたって参考にした記事はこちらの「翻訳記事」、No:26です。

http://www.himco.jp/articles/pdf/customFLVcompo.swf


英語が読めない自分にはとても助かります。。笑

かなり細かい手順で書かれているので
ここでは大まかな説明のみにします。

FlashにはもともとFLVPlaybackコンポーネントのパーツ（再生ボタン、バーなど）が用意されていて、それを好きなように配置したあと、読み込んだムービーと関連づけることができます。
それだけで各種パーツとして正しく機能するようになるので、あとは普段ムービークリップを編集するのと同じようにデザインや位置を変更するだけ。

こんなに簡単だったとは・・

使い回しの点では若干不便ですが、ちょっと凝ったデザインのスキンでも
工夫次第で再現できると思います。