2010年02月16日 03:50

ActionScript3.0 [練習] XMLとナビゲーション

| http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/524

すっかり忘れかかってるActionScript3.0。FlashDevelop.jpのおかげでちょっとやる気が復活。

とはいえまた一から本読むのもあれなんで、いろいろ作りながら覚えていこうかと思います。

ナビゲーションとXML

まずはナビゲーションを作ってみる。 ActionScript3.0はXMLのパースが簡単という噂なのでXMLから設定読み込んで やってみたんですがホントXMLが扱いやすい。

まぁ取得するまでが、ちと面倒ですが。ってかPHPのfile_get_contents()があまりに便利すぎ。

実行結果

globalnavi.xml


<?xml version="1.0" encoding="utf-8" ?>
<data>

    <config>
        <width>120</width>
        <height>50</height>
        <fontColor>0xFFFFFF</fontColor>
        <backgroundColorUp>0x000000</backgroundColorUp>
        <backgroundColorOver>0x660099</backgroundColorOver>
        <backgroundColorDown>0xCC0000</backgroundColorDown>
        <backgroundColorHit>0xCCFF00</backgroundColorHit>
    </config>

    <lists>
        <list>
            <name>HOME</name>
            <url>/</url>
        </list>

        <list>
            <name>pg</name>
            <url>/pg/</url>
        </list>
        
        <list>
            <name>info</name>
            <url>/info/</url>
        </list>
        
        <list>
            <name>アプリ</name>
            <url>/app/</url>
        </list>
        
        <list>
            <name>サービス</name>
            <url>/service/</url>
        </list>
    </lists>
</data>

Main.as

flash.xmlパッケージは互換のためのクラス。 ActionScript3.0ではグローバルXMLってグローバルにXMLクラスXML関数が存在してるのでそちらを利用する。

関数とクラスどちらを使えば良いのか迷った。 URLLoader使ってデータ読み込む場合、基本的にどっちでも良さそう。XML関数は 


public function XML(expression:Object):XML

となっていてオブジェクトを受け取ってXMLオブジェクトを返すんだけど URLLoader.dataが返すのってStringオブジェクトなので関数使っても同じ結果になる。

ただサンプルとか見てもnewしてあるので倣ったほうがいいのかも。


package com.kantenna.globalnavi
{

    import flash.display.Sprite;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    
    import com.kantenna.display.DispalyBox;
    import com.kantenna.display.LinkButton;

    public class Main extends Sprite
    {
        
        private var conf_file:String = 'globalnavi.xml';

        /**
         * コンストラクタ
         * @return void
         */
        public function Main():void 
        {
            addChild(function():DispalyBox {
                var gn:DispalyBox = createGlobalnavi();
                gn.x = 0;
                gn.y = 0;
                return gn;
            }());
        }

        /**
         * グローバルナビゲーションを作成
         * 各メニューはグローバルナビゲーション用の
         * SpriteにaddChildされる
         * 
         * @return Sprite
         */
        private function createGlobalnavi():Sprite
        {
            // メニュー格納用
            var global_navi:DispalyBox = new DispalyBox();
            
            // 設定ファイル読み込み
            var loader:URLLoader = new URLLoader();
            var request:URLRequest = new URLRequest(conf_file);
            loader.load(request);
            
            // 読み込み成功時の処理
            loader.addEventListener(Event.COMPLETE, function(e:Event):void {
                
                var xml:XML = new XML(e.target.data);
                
                // メニューの情報
                var navies:XMLList = xml.lists.list;
                
                // ボタンの設定情報
                var conf:XMLList = xml.config;
                
                var button:LinkButton;
                
                for each (var navi:XML in navies) {
                    button = new LinkButton();
                    button.name = navi.name;
                    button.setRequest(navi.url);
                    
                    button.setState('up', navi.name, conf.child('fontColor'), conf.child('width'), conf.child('height'), conf.child('backgroundColorUp'));
                    button.setState('over', navi.name, conf.child('fontColor'), conf.child('width'), conf.child('height'), conf.child('backgroundColorOver'));
                    button.setState('down', navi.name, conf.child('fontColor'), conf.child('width'), conf.child('height'), conf.child('backgroundColorDown'));
                    button.setState('hit', navi.name, conf.child('fontColor'), conf.child('width'), conf.child('height'), conf.child('backgroundColorHit'));
                    
                    button.setEL();
                    global_navi.add(button);
                }
                global_navi.build();
            });
            
            return global_navi;
        }
    }
}

DispalyBox.as

Array.forEachの第二引数にオブジェクトを渡すと、コールバック関数内でthisで参照できる。 のちのち使えそうな気がするので忘れないようにメモ。 


package  com.kantenna.display
{
    import flash.display.Sprite;
    import flash.display.DisplayObject;
    
    public class DispalyBox extends Sprite
    {
        public static const LINE:String = 'line';
        public static const VERTICAL:String = 'vertical';
        
        /**
         * 縦に配置するか横に配置するかの設定
         * 
         * 縦配置 : line
         * 横配置 : vertical
         */
        private var _row:String;

        /**
         * 並べるアイテム
         * 中身はDisplayObject
         * 
         */
        private var _items:Array;
        
        /**
         * 並べた時の間隔
         */
        private var _margin:int = 0;
        
        /**
         * コンストラクタ
         * 
         * @param   items Array or DisplayObject
         * @param   row   String line|vertical
         */
        public function DispalyBox(items:* = null, row:String = LINE):void 
        {
            _row = row;
            _items = new Array();

            if (items !== null) {
                add(items);
            }
        }
        
        public function add(objects:Object):void
        {
            if (objects is Array) {
                objects.forEach(function(object:DisplayObject):void {
                    _items.push(objects);
                });
            } else if (objects is DisplayObject) {
                _items.push(objects);
            } else {
                throw new Error("Display Objectを入れてください。");
            }
        }
        
        public function build():void
        {
            var margin:int = _margin;
            var position:int = 0;
            _items.forEach(function(item:DisplayObject, index:int, array:Array):void {
                if (_row === LINE) {
                    item.x = position;
                    addChild(item);
                    position += item.width + _margin;
                } else {
                    item.y = position;
                    addChild(item);
                    position += item.height + _margin;
                }
            });
        }
        
        public function get row():String {
            return _row;
        }
        
        public function set row(str:String):void {
            _row = str;
        }
        
        public function get margin():int {
            return _margin;
        }
        
        public function set margin(px:int):void {
            _margin = px;
        }   
    }
}

LinkButton.as


package  com.kantenna.display
{
    import flash.display.DisplayObject;
    import flash.display.SimpleButton;
    import flash.net.URLRequest;
    import flash.net.navigateToURL;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.text.TextField;
    
    public class LinkButton extends SimpleButton
    {
        
        private var _request:URLRequest;
        private var _trigger:String;
        
        /**
         * コンストラクタ
         * 
         * @param   upState       DisplayObject or NULL
         * @param   overState     DisplayObject or NULL
         * @param   downState     DisplayObject or NULL
         * @param   hitTestState  DisplayObject or NULL
         */
        public function LinkButton(upState:DisplayObject = null, overState:DisplayObject = null, downState:DisplayObject = null, hitTestState:DisplayObject = null) 
        {
            _request = new URLRequest();
            _trigger = MouseEvent.CLICK;
            super(upState, overState, downState, hitTestState);
        }
        
        /**
         * ボタンの機能
         * _requestに設定されてあるURLへ移動
         * 
         */
        public function execute():void
        {
            navigateToURL(getRequest());
        }

        /**
         * リンク先の設定
         */
        public function setRequest(url:String):void
        {
            _request.url = url;
        }

        /**
         * リンク先の取得
         */
        public function getRequest():URLRequest
        {
            return _request;
        }
        
        /**
         * ボタンのイベントリスナー設定
         */
        public function setEL():void
        {
            addEventListener(_trigger, handler);
        }
        
        /**
         * ボタンのイベントリスナー削除
         */
        public function removeEL():void
        {
            if (hasEventListener(_trigger)) {
                removeEventListener(_trigger, handler);
            }
        }

        /**
         * イベントハンドラ
         */
        public function handler(e:Event):void
        {
            execute();
        }
        
        public function set trigger(str:String):void
        {
            _trigger = str;
        }
        
        public function get trigger():String
        {
            return _trigger;
        }
        
        /**
         * up|over|down|hit のグラフィックを設定
         *
         * @param   str    String up|over|down|hit
         * @param   text   String
         * @param   color  String
         * @param   width  String
         * @param   height String
         * @param   bg     String
         */
        public function setState(str:String, text:String, color:String, width:String, height:String, bg:String):void {
            
            var tf:TextField = createTextField(text, color, width, height, bg);
            switch (str) {
                case 'up':
                    upState = tf;
                    break;
                
                case 'over':
                    overState = tf;
                    break;
                
                case 'down':
                    downState = tf;
                
                case 'hit':
                    hitTestState = tf;
                    break;
            }
        }
        
        /**
         * テキストフィールドを作成
         * 
         * @param   text   String
         * @param   color  String
         * @param   width  String
         * @param   height String
         * @param   bg     String
         * @return  TextField
         */
        private function createTextField(text:String, color:String, width:String, height:String, bg:String):TextField
        {
            var txt:TextField = new TextField();
            txt.text = text;
            txt.textColor = uint(color);
            txt.width = int(width);
            txt.height = int(height);
            txt.background = true;
            txt.backgroundColor = uint(bg);
            return txt;
        }       
    }
}

あとはURL取得してディレクトリ判定して該当のボタンをUP状態にしたいなー。

参照サイト
.fla 2 ―Idea of Flash Creation―

著者 : 新藤愛大 / 金額 : ￥ 3,990

ActionScript3.0 [練習] XMLとナビゲーションタグ:

トラックバック

  • http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/524
[WEBプログラム覚書]2010年02月24日 05:02
ActionScript3.0 [基礎] Tweenとeasing
ActionScript3.0で最も簡単にアニメーションをさせることができるTweenと加速と減速が簡単に設定できるeasingを使ってみる。
コメント (0)
コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)





この情報を登録しますか?


先月アクセスが多かったページ