Home > Flash/Flex > [Flex][ActionScript]くるくる回るローディング(読み込み中)画像をFlexで

[Flex][ActionScript]くるくる回るローディング(読み込み中)画像をFlexで

Flexアプリケーションから画像やその他の少し大きなファイルを読み込んだり、もしくはサーバに少し時間のかかるリクエストを送るとき、よくあるアニメーションGIFのローディング画像を使おうと思った。 だけど、どうやらFlex標準のImageコンポーネントはアニメーションGIFに対応していないらしい。 対応しているライブラリもどこかが提供しているようだが、ローディング画像のためだけに他のライブラリをダウンロードさせるのも嬉しくない。

ということで、くるくる画像を生成・表示するActionScriptクラスを作った。 以下のように呼び出せば簡単にできる。

//ローディング画像オブジェクト生成
var loading:LoadingPicture = new LoadingPicture(画像サイズ, バーの数, バーの太さ, バーの長さ, 開始色, 終了色, バーのスタイル);
//ローディング画像表示
loading.show(親オブジェクト, X座標, Y座標);
//ローディング画像の回転開始
loading.start();

ローディング画像オブジェクト生成時のパラメータにどのような値を入れればどうなるのか、それは下のサンプルを色々いじってもらえばわかると思います。

ソースはこちら。

パッケージやクラス名など適当にいじって使ってもらって構いません。

気が向いたらアニメーションGIFにしてダウンロードできるようにしてみます。

package
{
    import flash.display.CapsStyle;
    import flash.display.DisplayObjectContainer;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.geom.Point;

    public class LoadingPicture extends Sprite{

        //図形の数(円周上にいくつ表示するか)
        private var _num:Number;

        //図形1つ分の幅を表す数値
        private var _aWidth:Number;
        //図形1つ分の長さ
        private var _barLength:Number;

        //図形の半径
        private var _radius:Number;

        //フレームごとの回転速度
        private var _rotationPerFrame:Number;

        //線のスタイル
        private var _capsStyle:String;

        //開始色
        private var _startColor:uint;
        //終了色
        private var _endColor:uint;

        public function set num(value:Number):void{
            _num = value;
        }
        public function set aWidth(value:Number):void{
            _aWidth = value;
        }
        public function set barLength(value:Number):void{
            _barLength = value;
        }
        public function set radius(value:Number):void{
            _radius = value;
        }
        public function set capsStyle(value:String):void{
            _capsStyle = value;
        }
        public function set startColor(value:uint):void{
            _startColor = value;
        }
        public function set endColor(value:uint):void{
            _endColor = value;
        }
        public function set rotationPerFrame(value:Number):void{
            _rotationPerFrame = value;
        }

        public function LoadingPicture(
        radius:Number = 70, num:Number = 12, aWidth:Number = 6, length:Number = 20, 
        startColor:uint = 0x444444, endColor:uint = 0xdddddd, capsStyle:String=null){

            _radius = radius;
            _num = num;
            _aWidth = aWidth;
            _barLength = length;
            _capsStyle = capsStyle;
            _startColor = startColor;
            _endColor = endColor;

            redraw();
        }

        /**
         * 描画処理
         */
        public function redraw():void{
            var color:uint = _startColor;
            var differenceBig:Number;
            var differenceMiddle:Number;
            var differenceMin:Number;

            //開始色と終了職のRGBごとの値を取得
            var sb:Number = _startColor % 256;
            var sg:Number = (_startColor >> 8) % 256;
            var sr:Number = (_startColor >> 16) % 256;
            var eb:Number = _endColor % 256;
            var eg:Number = (_endColor >> 8) % 256;
            var er:Number = (_endColor >> 16) % 256;

            //開始色と終了色の差をRGBごとに計算
            differenceBig = int((er - sr) / _num) * 256 * 256;
            differenceMiddle = int((eg - sg) / _num) * 256;
            differenceMin = int((eb - sb) / _num);

            //現在の表示の消去
            graphics.clear();

            //円形にバーを描画する処理
            for(var i:Number = 0; i<=_num; i++){
                var angle:Number = -(i * 360 / _num) - 90;//真上から始めるために90度引く

                var sin:Number = Math.sin(angle * Math.PI / 180);
                var cos:Number = Math.cos(angle * Math.PI / 180);

                //バーの開始点と終了点を計算
                var point1:Point = new Point(cos * _radius, sin * _radius);
                var point2:Point = new Point(cos * (_radius - _barLength), sin * (_radius - _barLength));

                //バーの描画
                graphics.lineStyle(_aWidth, color, 1, false, null, _capsStyle);
                graphics.moveTo(point1.x, point1.y);
                graphics.lineTo(point2.x, point2.y);

                //色を1段階終了色に近づける
                color += differenceBig;
                color += differenceMiddle;
                color += differenceMin;
            }
        }

        public function show(aParent:DisplayObjectContainer, x:Number=0, y:Number=0):void{
            this.x = x;
            this.y = y;
            aParent.addChild(this);
        }

        public function start(rotationPerFrame:Number=10):void{
            this._rotationPerFrame = rotationPerFrame;
            this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }

        public function stop():void{
            this.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
        }

        public function remove():void{
            this.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
            parent.removeChild(this);
        }

        private function onEnterFrame(event:Event):void{
            this.rotation += this._rotationPerFrame;
        }

    }
}

関連するエントリー [Flex][ActionScript] くるくる回るローディング (読み込み中)

Comments:6

Taichiro Yoshida 2010-11-16 (Tue) 11:28

ありがとうございます。
大変参考になりました!

obanetty 2010-11-16 (Tue) 11:37

お役に立ててよかったです。
コメントどうもありがとう:hahaha:

TAROKICHI 2011-12-27 (Tue) 17:39

ありがとうございます。探していたクルクルをやっと見つけたと感動しつつ実際に使ってみようと試したのですが四苦八苦して3日程たってしまいました。
Error: Error #2136: SWF ファイル ・・・・には無効なデータが含まれています。
と返されてしまうのは私が素人だからですね・・・。
トホホ。

obanetty 2011-12-28 (Wed) 09:33

TAROKICHIさん

うまくいかないですか?以下の状況を教えてください。

・LoadingPictureとそれに関連する部分を全て削除しても正常に動作するか(つまり原因が他のところにあるかどうかの確認)
・LoadingPictureのコンパイルができているか
・ドキュメントクラスの指定が正しくされているか

3点目のドキュメントクラスというのがわからなければ、何で開発しているか教えてください。(Flash Builderなど、そのバージョンも)

TAROKICHI 2012-01-13 (Fri) 14:52

ありがとうございます。

記述を全て削除して最初からやり直してみましたが以下のエラーが出てコンパイルできません。

シーン 1, レイヤー 'AS', フレーム 1、行 2 1046: 型が見つからないか、コンパイル時定数ではありません : LoadingPicture。

開発ソフトは Flash Professional CS5 となります。

obanetty 2012-01-14 (Sat) 02:13

import文は書いているでしょうか?
そのエラーはimport文がないときによく発生するようです。
エラーメッセージの一部を抜粋して検索してみるといいですよ。





プレビュー

トラックバック:2 Trackbacks

トラックバック URL
http://blog.garden-place.jp/action.php?action=plugin&name=TrackBack&tb_id=198
Listed below are links to weblogs that reference
[Flex][ActionScript]くるくる回るローディング(読み込み中)画像をFlexで from Web 酒 肴
RIA Service
Adobe Flex 関連まとめリンク: 自分用のFlex関連まとめリンク
2009/11/11 21:09
RIA Service
RomEx (簡易2chブラウザ)の開発の参考にしたサイト: RomEx (簡易2chブラウザ)を開発するのに参考にしたサイトを紹介します。 2chの仕様など。 2ちゃんねる monazilla.org とかげの尻尾切り・バーボンハウス 今日もスクラップ 落穂拾い。 Flexのloadingアニメーション。 Web 酒 肴 [Flex][ActionScript]くるくる回るローディング(読み込み中)画像をFlexで その他、FlexやAmazon EC2、CentOS、Wordpress関連、正規表現で色々なサイトを参考にさせて貰い...
2009/06/16 20:08
このトラックバックURLを使ってこの記事にトラックバックを送ることができます。 もしあなたのブログがトラックバック送信に対応していない場合にはこちらのフォームからトラックバックを送信することができます。.

Home > Flash/Flex > [Flex][ActionScript]くるくる回るローディング(読み込み中)画像をFlexで

Search
Feeds

Page Top