Lecture -1- Layout Positioning

web

常光寺(id:jyoukouji)サイトを構築するに当たって、組み込んでいくシステムやギミックなどの技術的な要素が溢れてきたため、汎用性のあるものをこちらに制作ノートとして書いていくことにした。デザイン的なものを後回しにして、今年これまで培った知識に加え、手元にあるリファレンスで使えそうな技術を応用し、太陽系最強を目指して全てを注ぎ込んでいく流れになっている。

第1回目は、巷で偶にみかけるのに検索しても意外と出てこない、Flash 単体での ActionScript によるレイアウト・ポジショニング。背景イメージの全画面化スクリプトの応用で、JavaScript を介さずとも実現可能。因みに配色やデザインはサンプルとしてアテに置き換えている。

画面をリサイズした際に onResizeリスナーが呼び出され、画面上の各ムービークリップを再配置する。HTMLのパブリッシュ設定で "サイズ" をパーセント単位で設定、および "伸縮" を「拡大・縮小なし」に設定している時のみ有効。カレントフレームには下記のコードを記述する。

Stage.scaleMode = "noScale"; // important
　 Stage.align = "TL";
　 resizeListener = new Object();
　 resizeListener.onResize = function() {
　　margin = 16;
　　header.bg._width = Stage.width;
　　footer.bg._width = Stage.width;
　　footer._y = Stage.height-footer._height;
　　footer.copyright._x = margin;
　　footer.subnavigation._x = Stage.width-footer.subnavigation._width-margin;
　　contents._x = Math.floor(Stage.width/2-contents._width/2);
　　contents._y = Math.floor((Stage.height/2-contents._height/2)-footer._height/2);
　　navigator._x = Math.floor(Stage.width/2-navigator._width/2);
　　navigator._y = header._height+contents._y+contents._height+margin;
　　// grad.gradFill();
　};
　Stage.addListener(resizeListener);
　resizeListener.onResize();
　stop();

サンプルということで配色やデザインはアテであるが、背景のグラデーションは質感と更新の利便性、また追々付加する動きを考慮しスクリプトで記述している。あまり有用性はないが念のためコードは下記の通り。

gradFill();
　 function gradFill() {
　　this.createEmptyMovieClip("grad", 1);
　　colors = [0x000000, 0x555555]; // 色指定
　　alphas = [100, 100];
　　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();
　}

中央の "contents" のサイズは黄金率(1:1.618)に基づき横:768px*縦:475pxに設定している。中に含まれている "navigation" のサイズは "contents" と比較して、1:1.618*2に設定。サンプルでは判らないが "header":"footer" の比率や、その他にも適応している。

作業が進行したら、Flash版クッキーの SharedObjectや、XMLデータの取り扱い、RSSフィードについても健忘防止ログとして書いていきたいと思う。

e.x.

これらはレイアウトであり、デザインにはまだ着手していない。この割と理詰めでシステマチックな土台作りの作業にはもう何日か費やすだろう。その間に手元にあるリファレンス・辞書や、これまでに作成したソースからどれだけ有用な知識を引き出してこれるか、しばらくは割り切ってこういったことに時間を費やした方が、後々の苦労が少なく肉付けや魂の吹込みの作業にも楽しんで取り掛かれると判断した。デザートを最後に食べる女子高生のように楽しみにしている。―エピソードII につづく―。