このところ毎回登場している「1ランク上の技を身につけるFlashの強化書」でも同じようなFlashが紹介されていますが、機能的にはこちらの方が断然実用的なのでweb creators 2007年1月〜2月の「Flash Creative Technique」に掲載されていたFlashを紹介してみます。
今回は「Weather Hacks - livedoor 天気情報」のAPIから天気情報をXMLデータとして受け取り解析することになります。
しかし、Flashはセキュリティ対策上、異なるドメイン間でのデータをやり取りするコトができません。
そこで、間にphpファイルを入れ、データのやり取りを行う対象を同じドメインに属すという構成にしてしまいます。
※この時点でほとんど僕のキャパをオーバーしているのですが…。
詳しくは、web creators 2007年1月〜2月号をじっくり読んで理解して下さい。

百聞は一見に如かず、サンプルです。

↑このサンプルはこちらからダウンロードできます。

・PHP4が実行できる環境が必要です。

・フォルダ階層はそのままでご使用ください。

・lwws_xml.phpはPHPファイルとして実行できるパーミッションを設定してください。（通常、705）

・flaファイルの１フレーム目８行
  System.security.loadPolicyFile("http://実際に運用するドメイン/crossdomain.xml");
を実際に運用するドメインのURLに書き換えてください。

・flaファイルの１フレーム目１７行
  _global.phpFile = "http://実際に運用するドメイン/lwws_xml.php";
  を実際に運用するドメインのURLに書き換えてください。

・crossdomain.xmlの３行目と４行目
<allow-access-from domain="www.実際に運用するドメイン" />
<allow-access-from domain="実際に運用するドメイン" />
を実際に運用するドメインのURLに書き換えてください。

実際、スクリプトを手打ちしていましたが、まだまだ仕組みを理解できてはいませんね。（打ち間違いも多かったですし…）
やっぱり、修行あるのみ！なのか。

前回紹介した「1ランク上の技を身につけるFlashの強化書」でも紹介されていますが、端折られている部分もあるので、Flashにあまり明るくない方は、web creators 2006年6月の「Flash Creative Technique」に掲載されている方が理解できるかもしれません。興味があれば購入して読んでみても良いかと思います。
さて、今回は「XMLで管理するFlashのフォトギャラリー」です。XMLでデータを管理するので、更新は各xmlファイルを修正するだけです。つまり、swfはインターフェイスのみ担当するので、一度作ってしまえば触る必要がなくなります。

まずは、サンプルです。（コンボボックスからタイトルを選択して下さい）

↑このサンプルはこちらからダウンロードできます。
※ダウンロード版は、サイズが少し大きくなります。

スクリプトにも細かくコメントが付いていますが、詳しく知りたい方は、「1ランク上の技を身につけるFlashの強化書」か「web creators 2006年6月」を買っていただくのが良いと思います。

やっぱり自分でスクリプトを手打ちすると、ボンヤリながらも分かってくるんだなぁと思ったり、思わなかったり…。まあ、一歩ずつでも前進していきたいモンです。

仕事で結構Flashを作って来ましたが、実際に使っているスクリプトはAS1.0に毛の生えたようなモノで、効率的なプログラムとはほど遠く、もう１度はじめから勉強しなければ…と、常々思っています。
その度に配列やら関数やらオブジェクトやらリスナーやらなんやらかんやらの壁に阻まれ、なかなかに向上しないのですが…。
だいたい参考書を読んでいても何故だか急に難しくなりませんか？
どこかごっそり見落としたんじゃないだろうかと思う程、聞き慣れない言葉や書式がいきなりドカッと出てきてしまう。
正直お手上げである。
しかし、こんなんじゃAS3.0時代にとてもじゃないけど着いていける訳がないので、何度目かの悪あがき（？）を始めています。

さて、今回紹介するのは「１ランク上の技術を身につけるFlashの強化書」出てくるサンプルですが、いままで手作業でやっていたモーションタイポグラフィをスクリプトだけで制御してしまおうという代物です。

まずは、サンプルです。（startを押して下さい）

↑このサンプルはこちらからダウンロードできます。
※ダウンロード版では、｢start｣ボタンと｢replay｣ボタンは省いています。

あとは、9行目から17行目、23行目から33行目、36行目から40行目なども好みに合わせて変えてみると良いと思います。

あるデザイナーさんからFlashで更新が簡単な画像のスライドショーができないかと訊かれ、右の本に載っていたサンプルを参考に試作品を作ってみました。
XMLファイルからデータを読み込むので、ほとんど更新の手間が要りません。
しかし、小手先だけのFlashじゃもう全然ダメですね。やはりもっとプログラム的なコトを勉強しなきゃ、これからは厳しいとつくづく思います。サイトがどんどんインタラクティブになってきてますからね。

そんなこんなでサンプルはこちら。

↑このFlashデータはこちらからダウンロードできます。

仕事先からFlashで商品のカスタマイズをシミュレーションしながら注文がとれる仕組みができないモノか？と訪ねられ、少し考えてみました。
原理としては、Flash側でラジオボタンやMC（ムービークリップ）を使い、選択肢を設ける→そこで選択された値によって、商品画面を変更→選択された値はCGIを使って、サーバーに送信。（FlashからCGIへの連動はgetURL()を使用します）

…と、何となく仕組み自体は分かっていたんですが、実際に出来るかどうかはやってみないと分かりません。また、思いもしないトコロで不具合があって使い物にならない可能性もありますし。
確証が持てないコトに対して出来るとは言えない（営業マンには向いていない）性分なので、とりあえずサンプルを作ってみました。
インターフェイスもスクリプトも実際に使用するにはもっと改良しなければいけませんが、試作第１号としては、なんとか形になったのではないでしょうか。

そのサンプルがこちら。

輪郭・目・口を選んでもらい、それぞれプレビューボタンで画像が変化します。最後にお名前・電話番号・メールアドレスを入れてもらうとＯＫです。

↑このFlashデータ（html、CGIは含みません）はこちらからダウンロードできます。

今回も例によって１月号のWeb creatorsからの使えそうなテクニックを…。
AdobeのCreative Suite 3のサイトようにコンテンツにカーソルをロールオーバーすると、フォーカスされて拡大率・不透明度・ぼかし等が変更するといったFlashです。
本をパラパラ見ていた時は「すぐ作れそう」と思っていましたが、実際やってみると少しはまりましたね。初期設定で拡大率・不透明度・ぼかしを設定するんですが、どうやって設定するかで試行錯誤してしまいました。（Webデザイナーとして恥ずかしい話ですが…）

さて、サンプルです。

↑このFlashデータはこちらからダウンロードできます。

また、各mcの中に透明なボタンを作って、ここにrollOver時とrollOut時の拡大率・不透明度・ぼかしを設定をします。…詳しくはデータを見てください。
使いようによっては、かなりのクオリティのモノができると思います。

また今月のWeb creatorsからの使えそうなテクニックを…。
今度は、auのオフィシャルサイトで使われているようなFlashを使ったアコーディオンメニューが簡単に作れるモーションライブラリを紹介してみます。
Flashコンテンツ制作者なら、一度は作ってみようと思ったり、クライアントから要望された経験があるのではないでしょうか？でも実は、矛盾のでないようにスクリプトを組むのが思いの外難しかったりします。…僕も凝った仕組みは作れません。
しかし、Google codeの「Tweener」というライブラリを使えば、あら不思議？！　簡単に作れてしまいます。

サンプルはこんな感じです。

↑このFlashデータはこちらからダウンロードできます。

/*ライブラリ読込*/
import mx.utils.Delegate;
import caurina.transitions.Tweener;

/*トゥイーンをさせる関数*/
function tw(_x1:Number,_x2:Number,_x3:Number,_mc1:MovieClip,_mc2:MovieClip,_mc3:MovieClip):Void{
    Tweener.addTween (_mc1,{_x:_x1,_y:0,time:1,transition:"easelnOutCubic"});
    Tweener.addTween (_mc2,{_x:_x2,_y:0,time:1,transition:"easelnOutCubic"});
    Tweener.addTween (_mc3,{_x:_x3,_y:0,time:1,transition:"easelnOutCubic"});
}

/*パネルごとの動作*/
// パネル01
panel01_mc.onRollOver = Delegate.create (this,function():Void{
    tw (0,300,320,panel01_mc,panel02_mc,panel03_mc);   
});
// パネル02
panel02_mc.onRollOver = Delegate.create (this,function():Void{
    tw (0,10,320,panel01_mc,panel02_mc,panel03_mc);   
});
// パネル03
panel03_mc.onRollOver = Delegate.create (this,function():Void{
    tw (0,10,30,panel01_mc,panel02_mc,panel03_mc);   
});

上のスクリプトは例ですので、データを参考にカスタマイズして下さい。
ActionScriptに詳しい方なら、タイマーを設置して、時間が来ると自動的に次のパネルを表示するコトもできると思います。

さて、前置きが長くなってしまいましたが、今回はブラウザのサイズに合わせて背景画像は拡大縮小、しかし、その他の要素は各ポジションを保つというサンプルです。htmlの方でもエラスティックレイアウトという手法が出てきているけれど、ディスプレイ解像度がドンドン高くなっている現在、知ってて損はないスキルだと思います。

［仕様］ブラウザに合わせて背景画像が拡大縮小。メイン画像は常に中央に配置。同様に上下の黒いラインと右下隅のロゴも位置をキープする。
→サンプルを新規ウィンドウで開く
→このFlashデータをダウンロードする

〜実際のActionScript（_root 1フレーム目）〜

/*初期設定*/
Stage.scaleMode = "noScale";
Stage.align = "TL";
resizeListener = new Object();
resizeListener.onResize = function() {
fixMenu();
};

/*各MCの読込*/
Stage.addListener(resizeListener);
this.attachMovie("backImage", "backImage", 1);
this.attachMovie("mainImage", "mainImage", 2);
this.attachMovie("topLine", "topLine", 3);
this.attachMovie("btmLine", "btmLine", 4);
this.attachMovie("copyright", "copyright", 5);

/*ステージサイズの設定*/
var backWidth = 1000;
var backHeight = 800;

/*fixMenu関数実行*/
function fixMenu() {
if (Stage.width/backWidth > Stage.height/backHeight) {
scale = Stage.width/backWidth;
} else {
scale = Stage.height/backHeight;
}
/*背景の設定*/
_root.backImage._xscale = _root.backImage._yscale = 100*scale;
/*メインイメージの設定*/
_root.mainImage._x = Stage.width * 0.5 - 300;
_root.mainImage._y = Stage.height * 0.5 - 150;
/*上の帯の設定*/
_root.topLine._xscale = 100*scale;
/*下の帯の設定*/
_root.btmLine._xscale = 100*scale;
_root.btmLine._y = Stage.height -20;
/*右下rロゴの設定*/
_root.copyright._x = Stage.width - 200;
_root.copyright._y = Stage.height -20;
}
fixMenu();

［参考サイト］
FLASH-JP.COM - フォーラム｜背景は画面サイズで可変、メニューは固定にするには

百聞は一見に如かず。こんな感じです。

→このhtmlデータをダウンロードする

しかし、このlightwindowは便利です。画像イメージだけでなく、Quicktime Movies、Flash、PDFなどもリンクタグだけでスライド表示にするコトができます。動画やFlashと融合するコトで、いろいろと面白い使い方ができそうです。

［仕様］画像は外部から読み込み、ページの遷移はフレームアクションで行います。ダイナミックテキストを使いページ数も表示させます。

→このFlashデータをダウンロードする

［仕様］１０問の中から５問ランダムに出題されます。回答後、何問正解したか結果を発表してくれます。

→このFlashデータをダウンロードする(Flash 8 以上が必要です)

［仕様］メインメニューのプルダウンメニューＡ・プルダウンメニューＢ・プルダウンメニューＣにロールオーバーすると、下にそれぞれのサブメニューが出ます。その時、選択されたメインメニューのタイトルは赤くなり、選択されていないタイトルはトーンを落とします。

→このFlashデータをダウンロードする

［仕様］プルダウンメニューＡ・プルダウンメニューＢにロールオーバーすると、右側にそれぞれのサブメニューが出ます。メニューＣは普通のメニューです。縦型ですが、プルダウンメニューの基本的な作りになっています。

→このFlashデータをダウンロードする