Lecture -2- MovieClipLoader & FullScreenImage

web

第1回目を書き終えた後に、自分の中にある穴を発見し、アイデアも浮かんだので、今日も作業終了の目処がついたところで技術的な知識のエクスポートをしていこうと思う。今回は技術評論社の下記のリファレンスを参考にした。

ActionScript ポケットリファレンス ［Flash MX 2004/MX/5対応］

ActionScript ポケットリファレンス ［Flash MX 2004/MX/5対応］

第2回目は、外部swf/jpeg を読み込み元からプログレスバーを持ってローディング制御できる MovieClipLoaderオブジェクト、序に背景イメージの全画面表示方法のご紹介。

サンプル例では、"./image/" ディレクトリ下にある6種類の "flower*.jpg" をランダムにローディングしている。ActionScript 1.0 では、読み込み先のファイル全てにローディングスクリプトやプログレスバーを仕込まなければならなかったが、ActionScript 2.0 からは読み込み元に下記のコードを記述するだけで、外部ファイルのローディング状況の監視とローディングが可能になった。

num = Math.floor(Math.random()*6)+1;
　 loadObj = "./image/flower"+num+".jpg";
　 imageLoader(loadObj);
　 function imageLoader(url) {
　　mcl = new MovieClipLoader();
　　loadingmcl._alpha = 100;
　　oListener = new Object();
　　oListener.onLoadProgress = function(bgimage, bytesLoaded, bytesTotal) {
　　　par = Math.floor((bytesLoaded/bytesTotal)*100);
　　　loadingmcl.txt.par = par;
　　　loadingmcl.bar._xscale += (par-loadingmcl.bar._xscale);
　};
　mcl.addListener(oListener);
　function getMyProgress() {
　　var prog = mcl.getProgress(bgimage);
　　if (prog.bytesLoaded>100 && prog.bytesLoaded == prog.bytesTotal) {
　　　gradation = true;
　　　image = true;
　　　if (loadingmcl._alpha<0) {
　　　　clearInterval(nID);
　　　} else {
　　　　loadingmcl._alpha -= 30;
　　　}
　　}
　}
　nID = setInterval(getMyProgress, 100);
　mcl.loadClip(url, bgimage);
　}

script:
　-> http://www.atziluth.jp/lecture/2/script/imageLoader.as

こちらの例では setInterval関数を使って100ミリ秒毎に読み込み状況を監視しているが、MovieClip.onEnterFrameイベントハンドラメソッドを使っても実現可能。

背景画像は、第1回目でご紹介したグラデーションの描画スクリプトを利用して、上約半分を透かし、上のレイヤーに描画したグラデーションを重ねている。

グラデーション描画スクリプトは下記に修正した。4行目の色幅と、5行目のアルファ値を改変している。

gradFill();
　 function gradFill() {
　　this.createEmptyMovieClip("grad", 1);
　　colors = [0x000000, 0x000000];
　　alphas = [100, 0];
　　ratios = [0, 255];
　　matrix = {matrixType:"box", x:0, y:0, w:Stage.width, h:Stage.height/1.618, r:(-90/180)*Math.PI};
　　grad.beginGradientFill("linear", colors, alphas, ratios, matrix);
　　grad.moveTo(0, 0);
　　grad.lineTo(Stage.width, 0);
　　grad.lineTo(Stage.width, Stage.height);
　　grad.lineTo(0, Stage.height);
　　grad.lineTo(0, 0);
　　grad.endFill();
　}

背景画像の全画面表示化は、下記のコードで実現可能。onResizeListenerでユーザーがウィンドウサイズを変更した場合に対応している。

resizeListener = new Object();
　 resizeListener.onResize = function() {
　　bgimage._width = Stage.width;
　　bgimage._height = Stage.height;
　};
　Stage.addListener(resizeListener);
　resizeListener.onResize();
　stop();

　// 本来は下記のように記述するのがベストだが、MovieClipLoaderとの絡みでシンプルな方法を選んだ
　// bgimage._xscale = (Stage.width/3072)*100; // オリジナルの横幅を指定
　// bgimage._yscale = (Stage.height/2480)*100; // オリジナルの縦幅を指定

写真を補正する過程で、もしプロのフォトグラファーさんやガチガチのシステム屋さんなど、各々の専門家がいればなあと思ってしまった。特に高解像度のビットマップ画像は、16bit に一旦変更してトーンジャンプを防いだりぼかしたり、色々と手を尽くしても腕が及ばずどうしてもジャギってしまうので、ここはぜひグラビアにかなり詳しい id:takamackyさんにご降臨いただきたい。

サンプル下部分のフッターには、Realmotion Books(http://moura.jp/scoop-e/seigen/flash/20060830/)に搭載したページ毎のブックマーク機能やクッキー機能(SharedObject)、その他全ての機能を追加したいと思う。今日、作業に行き詰まりリサーチがてら本屋へ行き、WebDesignning で秀でたサイトの紹介を読んでいると、ページ毎のブックマーク機能を搭載したサイトが稀なものとして掲載されていたので、これはぜひナビゲーション・機能的にプラスαして盛り込みたい。Flash with Named Anchors も併用すれば利便性が増すだろう。それらの紹介も守秘義務を破らないようにしていきたい(もし問題がありましたら言って下さい)。ちなみに、音楽を流せるようにするかどうかは会議で徹夜しながら話し合いたいと思う。―エピソードIII につづく―

e.x.

現時点では機械的な作業ばかりでデザイン的に殆ど着手していないので、健忘防止ログ的な目的と他の開発者の方の参考になればと思い書いているが、自分の見落としていた点や次に繋がるアイデアが浮かび、楽しんで作業できている。サイト構築前から常々思っていたが、今年の春にこれまでのいきさつを住職の方(id:jyoukouji)にお話し、自分にとって這い上がるのを助けていただく形で、こういった機会を与えられたことには本当に感謝の意が絶えない。ページを早めに早めての出会いだった。もちろん、作業の過程ではクリエーターとしての好奇心が強く、無心に集中して取り掛かれているから、仕事としてはとても恵まれているし作業中はそれだけしか考えない。あとは、見えない部分であるソースを美しく書くことや、画面によいエネルギーを注ぎ込んでいくように心掛けていきたい。