【Flex3】　package ベースで画像をロードするブログパーツを作成する

自分で書いた絵をフェードアウト・フェードインしながら表示するブログパーツですが、
手書きブログにあるやつは、表示する画像が最新で限定されているし、
作れるんだから自分で作ってしまおうと思ってやってみました。

現段階では、URL 決め打ちですが、
XMLまたはテキストを読み込んで順次表示やランダム表示を作成する予定です。


package ベース( Main.as )になっているのは、
mx を使用しないほうがswf が極端に小さくなるのでそれで始めたんですが、
結局 Fade を使うので意味無くなりましたが・・・

ひととおり使えるものが出来たら、mx ベースで焼き直しします。

今、オンラインマニュアル見に行ったら、またなんか変わってた・・・
adobe の対開発者スタンスは良く解らん。

ブラウザでダウンロード


↓これです(IFRAME で埋め込んでいます)
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
1.<IFRAME
2.    src="http://winofsql.jp/flex3/as_tool/Main.htm"
3.    frameborder="no"
4.    scrolling="no"
5.    width="160"
6.    height="240"
7.></IFRAME>

ソースコード
Flex はなんでもかんでも「イベント」です。それを意識してコードを読む
必要があります。今回に関しては、若干タイムラインも意識しないと・・・

URLRequest に関しては、いろいろやってみたんですが
どんな URL でも読み込んでしまいます。
これはちょっと ??? なんですが、通常自分のドメインで実行するはずだから
まあいいかなと思っていますが、とにかく自分の環境はちょっと特殊なので、
気長に他の環境でもテストしようとは思っています。

手書きブログの画像も直接読めました。
考えるだけ無駄っぽいので、情報だけ。

↓手書きブログにはこんなのがあります( Opera では見えないですねぇ・・・ )
http://img02.pipa.jp/crossdomain.xml

※ Flex やってると、たまに必要になるクロスドメインの情報です



デバッグ表示は、ブラウザの表示部分のフラッシュ以外の部分をクリックして、F12 です。
( Firebug )
行番号付きテキストエリアでソースを表示します
このままの表示で印刷しますテキストとしてダウンロードします
001.// *********************************************************
002.// Flex3( mx 無し )
003.//
004.// ◎ 画像表示パーツ
005.// load => onload => time(5秒) => fadeout(0.5秒) => load
006.//         fadein は、1秒なので先に終わる
007.//         5秒後に fadeout が始まり
008.//         fadeout ではいったんタイマー停止して
009.//         fadeout が終わると loadImages へ
010.// *********************************************************
011.package {
012. 
013.import flash.display.*;
014.import flash.events.*;
015.import flash.utils.*;
016.import flash.net.*;
017.import flash.external.*;
018.import mx.effects.*;
019.import mx.events.*;
020. 
021. 
022.// 背景色
023.[SWF(width="160",height="220",backgroundColor="#FFFFFF")]
024. 
025.// 表示用クラス 【Sprite】を継承
026.public class Main extends Sprite {
027. 
028.    [Bindable]
029.    [Embed("mail.png")]
030.    private var imgMail:Class;
031. 
032.    private var myTimer:Timer = new Timer(5000);
033.    private var loader:Loader = new Loader();
034.    private var counter:int = 0;
035. 
036.    private var fadeIn:Fade;
037.    private var fadeOut:Fade;
038. 
039.    // *********************************************************
040.    // コンストラクタ
041.    // *********************************************************
042.    public function Main():void {
043. 
044.        ExternalInterface.call("console.log", "start");
045. 
046.        stage.scaleMode = StageScaleMode.NO_SCALE;
047.        stage.align = StageAlign.TOP_LEFT;
048. 
049.        var myImg:Bitmap = new imgMail();
050.        myImg.x = 0;
051.        myImg.y = 162;
052.        stage.addChild(myImg);
053. 
054.        // 読み込みタイマーを登録
055.        myTimer.addEventListener("timer", fadeOutProc );
056. 
057.        // フェードイン用
058.        fadeIn = new Fade(loader);
059.        fadeIn.duration = 1000;
060.        fadeIn.alphaFrom = 0;
061.        fadeIn.alphaTo = 1;
062. 
063.        // フェードアウト用( フェードアウト終了後、load イベント )
064.        fadeOut = new Fade(loader);
065.        fadeOut.duration = 500;
066.        fadeOut.alphaFrom = 1;
067.        fadeOut.alphaTo = 0;
068.        fadeOut.addEventListener(EffectEvent.EFFECT_END, loadImages);
069. 
070.        // 最初のロード
071.        loader.x = 20;
072.        loader.y = 0;
073.        loader.alpha = 0;
074.        stage.addChild(loader);
075.        // 読み込み完了イベントを登録
076.        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
077.        loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadError);
078.        loader.load(
079.            new URLRequest(
080.                "http://lightbox.matrix.jp/timg/1217433566200507.png_S.jpg"
081.            )
082.        );
083.    }
084. 
085.    // *********************************************************
086.    // 画像をロードして表示
087.    // *********************************************************
088.    private function fadeOutProc(event:TimerEvent):void {
089. 
090.        ExternalInterface.call("console.log", "fadeOutProc");
091. 
092.        // タイマー停止
093.        myTimer.stop();
094. 
095.        // この処理が完了すると、↓の function が開始される
096.        fadeOut.play();
097. 
098.    }
099. 
100.    // *********************************************************
101.    // 画像をロードして表示
102.    // *********************************************************
103.    private function loadImages(event:EffectEvent):void {
104. 
105.        ExternalInterface.call("console.log", "loadImages");
106. 
107.        // ソースコード内での切り替え用カウンタ
108.        counter++;
109.        if ( counter > 4 ) {
110.            counter = 1;
111.        }
112. 
113.        ExternalInterface.call("console.log", "load");
114.        // 読み込み
115.        switch( counter ) {
116.            case 1:
117.                loader.load(
118.                    new URLRequest(
119.                        "http://lightbox.matrix.jp/timg/1225300426141908.png_S.jpg"
120.                    )
121.                );
122.                break;
123.            case 2:
124.                loader.load(
125.                    new URLRequest(
126.                        "http://homepage2.nifty.com/lightbox/timg/1229709460227982.png_S.jpg"
127.                    )
128.                );
129.                break;
130.            case 3:
131.                loader.load(
132.                    new URLRequest(
133.                        "http://lightbox.if.land.to/timg/1224216851694379.png_S.jpg"
134.                    )
135.                );
136.                break;
137.            case 4:
138.                loader.load(
139.                    new URLRequest(
140.                        "http://lightbox.matrix.jp/timg/1217433566200507.png_S.jpg"
141.                    )
142.                );
143.                break;
144.            default:
145.                myTimer.start();
146.                break;
147. 
148.        }
149. 
150.    }
151. 
152.    // *********************************************************
153.    // 読み込み完了イベント
154.    // *********************************************************
155.    private function loadComplete(e:Event):void {
156. 
157.        ExternalInterface.call("console.log", "loadComplete");
158.        fadeIn.play();
159. 
160.        // 5秒後に フェードアウト開始
161.        myTimer.start();
162.    }
163. 
164.    // *********************************************************
165.    // 読み込みエラーイベント
166.    // *********************************************************
167.    private function loadError(e:IOErrorEvent):void {
168. 
169.        ExternalInterface.call("console.log", "load error");
170.        myTimer.start();
171.    }
172. 
173.}}