KANTENNA.COM

Solarized

HOME > WEBプログラム覚書 > ActionScript3.0 [練習] XMLとナビゲーション

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

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

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

ナビゲーションとXML

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

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

実行結果

globalnavi.xml
  1.  <?xml version="1.0" encoding="utf-8" ?>
  2.  <data>
  3.  
  4.   <config>
  5.   <width>120</width>
  6.   <height>50</height>
  7.   <fontColor>0xFFFFFF</fontColor>
  8.   <backgroundColorUp>0x000000</backgroundColorUp>
  9.   <backgroundColorOver>0x660099</backgroundColorOver>
  10.   <backgroundColorDown>0xCC0000</backgroundColorDown>
  11.   <backgroundColorHit>0xCCFF00</backgroundColorHit>
  12.   </config>
  13.  
  14.   <lists>
  15.   <list>
  16.   <name>HOME</name>
  17.   <url>/</url>
  18.   </list>
  19.  
  20.   <list>
  21.   <name>pg</name>
  22.   <url>/pg/</url>
  23.   </list>
  24.  
  25.   <list>
  26.   <name>info</name>
  27.   <url>/info/</url>
  28.   </list>
  29.  
  30.   <list>
  31.   <name>アプリ</name>
  32.   <url>/app/</url>
  33.   </list>
  34.  
  35.   <list>
  36.   <name>サービス</name>
  37.   <url>/service/</url>
  38.   </list>
  39.   </lists>
  40.  </data>

Main.as

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

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

XML関数
  1.  public function XML(expression:Object):XML

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

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

ActionScript3.0
  1.  package com.kantenna.globalnavi
  2.  {
  3.  
  4.   import flash.display.Sprite;
  5.   import flash.events.Event;
  6.   import flash.net.URLLoader;
  7.   import flash.net.URLRequest;
  8.  
  9.   import com.kantenna.display.DispalyBox;
  10.   import com.kantenna.display.LinkButton;
  11.  
  12.   public class Main extends Sprite
  13.   {
  14.  
  15.   private var conf_file:String = 'globalnavi.xml';
  16.  
  17.   /**
  18.   * コンストラクタ
  19.   * @return void
  20.   */
  21.   public function Main():void
  22.   {
  23.   addChild(function():DispalyBox {
  24.   var gn:DispalyBox = createGlobalnavi();
  25.   gn.x = 0;
  26.   gn.y = 0;
  27.   return gn;
  28.   }());
  29.   }
  30.  
  31.   /**
  32.   * グローバルナビゲーションを作成
  33.   * 各メニューはグローバルナビゲーション用の
  34.   * SpriteにaddChildされる
  35.   *
  36.   * @return Sprite
  37.   */
  38.   private function createGlobalnavi():Sprite
  39.   {
  40.   // メニュー格納用
  41.   var global_navi:DispalyBox = new DispalyBox();
  42.  
  43.   // 設定ファイル読み込み
  44.   var loader:URLLoader = new URLLoader();
  45.   var request:URLRequest = new URLRequest(conf_file);
  46.   loader.load(request);
  47.  
  48.   // 読み込み成功時の処理
  49.   loader.addEventListener(Event.COMPLETE, function(e:Event):void {
  50.  
  51.   var xml:XML = new XML(e.target.data);
  52.  
  53.   // メニューの情報
  54.   var navies:XMLList = xml.lists.list;
  55.  
  56.   // ボタンの設定情報
  57.   var conf:XMLList = xml.config;
  58.  
  59.   var button:LinkButton;
  60.  
  61.   for each (var navi:XML in navies) {
  62.   button = new LinkButton();
  63.   button.name = navi.name;
  64.   button.setRequest(navi.url);
  65.  
  66.   button.setState('up', navi.name, conf.child('fontColor'), conf.child('width'), conf.child('height'), conf.child('backgroundColorUp'));
  67.   button.setState('over', navi.name, conf.child('fontColor'), conf.child('width'), conf.child('height'), conf.child('backgroundColorOver'));
  68.   button.setState('down', navi.name, conf.child('fontColor'), conf.child('width'), conf.child('height'), conf.child('backgroundColorDown'));
  69.   button.setState('hit', navi.name, conf.child('fontColor'), conf.child('width'), conf.child('height'), conf.child('backgroundColorHit'));
  70.  
  71.   button.setEL();
  72.   global_navi.add(button);
  73.   }
  74.   global_navi.build();
  75.   });
  76.  
  77.   return global_navi;
  78.   }
  79.   }
  80.  }

DispalyBox.as

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

ActionScript3.0
  1.  package com.kantenna.display
  2.  {
  3.   import flash.display.Sprite;
  4.   import flash.display.DisplayObject;
  5.  
  6.   public class DispalyBox extends Sprite
  7.   {
  8.   public static const LINE:String = 'line';
  9.   public static const VERTICAL:String = 'vertical';
  10.  
  11.   /**
  12.   * 縦に配置するか横に配置するかの設定
  13.   *
  14.   * 縦配置 : line
  15.   * 横配置 : vertical
  16.   */
  17.   private var _row:String;
  18.  
  19.   /**
  20.   * 並べるアイテム
  21.   * 中身はDisplayObject
  22.   *
  23.   */
  24.   private var _items:Array;
  25.  
  26.   /**
  27.   * 並べた時の間隔
  28.   */
  29.   private var _margin:int = 0;
  30.  
  31.   /**
  32.   * コンストラクタ
  33.   *
  34.   * @param items Array or DisplayObject
  35.   * @param row String line|vertical
  36.   */
  37.   public function DispalyBox(items:* = null, row:String = LINE):void
  38.   {
  39.   _row = row;
  40.   _items = new Array();
  41.  
  42.   if (items !== null) {
  43.   add(items);
  44.   }
  45.   }
  46.  
  47.   public function add(objects:Object):void
  48.   {
  49.   if (objects is Array) {
  50.   objects.forEach(function(object:DisplayObject):void {
  51.   _items.push(objects);
  52.   });
  53.   } else if (objects is DisplayObject) {
  54.   _items.push(objects);
  55.   } else {
  56.   throw new Error("Display Objectを入れてください。");
  57.   }
  58.   }
  59.  
  60.   public function build():void
  61.   {
  62.   var margin:int = _margin;
  63.   var position:int = 0;
  64.   _items.forEach(function(item:DisplayObject, index:int, array:Array):void {
  65.   if (_row === LINE) {
  66.   item.x = position;
  67.   addChild(item);
  68.   position += item.width + _margin;
  69.   } else {
  70.   item.y = position;
  71.   addChild(item);
  72.   position += item.height + _margin;
  73.   }
  74.   });
  75.   }
  76.  
  77.   public function get row():String {
  78.   return _row;
  79.   }
  80.  
  81.   public function set row(str:String):void {
  82.   _row = str;
  83.   }
  84.  
  85.   public function get margin():int {
  86.   return _margin;
  87.   }
  88.  
  89.   public function set margin(px:int):void {
  90.   _margin = px;
  91.   }
  92.   }
  93.  }

LinkButton.as

ActionScript3.0
  1.  package com.kantenna.display
  2.  {
  3.   import flash.display.DisplayObject;
  4.   import flash.display.SimpleButton;
  5.   import flash.net.URLRequest;
  6.   import flash.net.navigateToURL;
  7.   import flash.events.Event;
  8.   import flash.events.MouseEvent;
  9.   import flash.text.TextField;
  10.  
  11.   public class LinkButton extends SimpleButton
  12.   {
  13.  
  14.   private var _request:URLRequest;
  15.   private var _trigger:String;
  16.  
  17.   /**
  18.   * コンストラクタ
  19.   *
  20.   * @param upState DisplayObject or NULL
  21.   * @param overState DisplayObject or NULL
  22.   * @param downState DisplayObject or NULL
  23.   * @param hitTestState DisplayObject or NULL
  24.   */
  25.   public function LinkButton(upState:DisplayObject = null, overState:DisplayObject = null, downState:DisplayObject = null, hitTestState:DisplayObject = null)
  26.   {
  27.   _request = new URLRequest();
  28.   _trigger = MouseEvent.CLICK;
  29.   super(upState, overState, downState, hitTestState);
  30.   }
  31.  
  32.   /**
  33.   * ボタンの機能
  34.   * _requestに設定されてあるURLへ移動
  35.   *
  36.   */
  37.   public function execute():void
  38.   {
  39.   navigateToURL(getRequest());
  40.   }
  41.  
  42.   /**
  43.   * リンク先の設定
  44.   */
  45.   public function setRequest(url:String):void
  46.   {
  47.   _request.url = url;
  48.   }
  49.  
  50.   /**
  51.   * リンク先の取得
  52.   */
  53.   public function getRequest():URLRequest
  54.   {
  55.   return _request;
  56.   }
  57.  
  58.   /**
  59.   * ボタンのイベントリスナー設定
  60.   */
  61.   public function setEL():void
  62.   {
  63.   addEventListener(_trigger, handler);
  64.   }
  65.  
  66.   /**
  67.   * ボタンのイベントリスナー削除
  68.   */
  69.   public function removeEL():void
  70.   {
  71.   if (hasEventListener(_trigger)) {
  72.   removeEventListener(_trigger, handler);
  73.   }
  74.   }
  75.  
  76.   /**
  77.   * イベントハンドラ
  78.   */
  79.   public function handler(e:Event):void
  80.   {
  81.   execute();
  82.   }
  83.  
  84.   public function set trigger(str:String):void
  85.   {
  86.   _trigger = str;
  87.   }
  88.  
  89.   public function get trigger():String
  90.   {
  91.   return _trigger;
  92.   }
  93.  
  94.   /**
  95.   * up|over|down|hit のグラフィックを設定
  96.   *
  97.   * @param str String up|over|down|hit
  98.   * @param text String
  99.   * @param color String
  100.   * @param width String
  101.   * @param height String
  102.   * @param bg String
  103.   */
  104.   public function setState(str:String, text:String, color:String, width:String, height:String, bg:String):void {
  105.  
  106.   var tf:TextField = createTextField(text, color, width, height, bg);
  107.   switch (str) {
  108.   case 'up':
  109.   upState = tf;
  110.   break;
  111.  
  112.   case 'over':
  113.   overState = tf;
  114.   break;
  115.  
  116.   case 'down':
  117.   downState = tf;
  118.  
  119.   case 'hit':
  120.   hitTestState = tf;
  121.   break;
  122.   }
  123.   }
  124.  
  125.   /**
  126.   * テキストフィールドを作成
  127.   *
  128.   * @param text String
  129.   * @param color String
  130.   * @param width String
  131.   * @param height String
  132.   * @param bg String
  133.   * @return TextField
  134.   */
  135.   private function createTextField(text:String, color:String, width:String, height:String, bg:String):TextField
  136.   {
  137.   var txt:TextField = new TextField();
  138.   txt.text = text;
  139.   txt.textColor = uint(color);
  140.   txt.width = int(width);
  141.   txt.height = int(height);
  142.   txt.background = true;
  143.   txt.backgroundColor = uint(bg);
  144.   return txt;
  145.   }
  146.   }
  147.  }

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

参照サイト
Papervision(ヘ゜ーハ゜ーウ゛ィシ゛ョン)3D入門 (XK BOOKS for developers)
作者:池田 泰延 | 価格:￥ 3,675
投稿日 2010年2月16日 03:50
カテゴリ ActionScript
タグ サンプルコード | テストコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1189

トラックバック(1)

2010年2月24日 05:02

ActionScript3.0 [基礎] TweenとeasingWEBプログラム覚書

ActionScript3.0で最も簡単にアニメーションをさせることができるTweenと加速と減速が簡単に設定できるeasingを使ってみる。続きを読む

コメント

コメントする
Name
Email Address
URL
PAGE RANK
TIME LINE
2012
02.08

[Ubuntu11.10]Winows XPユーザーがUbuntuを使ってみて

Windows XPとUbuntuのデュアルブート環境にしてみておもったこと。

2012
02.03

[jQuery]closest()とparents()

今から16年前Netscapeブラウザのソースコードの公開方法の会議の中で、初めてオープンソースという言葉が使われた今日、 みなさんいかがお過ごしでしょうか。

今回の投稿はそれとは関係のないjQueryのparents()とclosest()が 似てたので何が違うのか試した時のメモです。

2012
02.01

[jQuery Mobile]初期化イベントメモ

jQuery Mobileは読み込まれてから

mobileinit -> pagebeforecreate -> pagecreate -> pageinit

の順番でイベントが発生する。

2012
02.01

[WordPress]管理画面のフッタのフィルタとアクション。

時間も時間なので、あまり使用頻度の高くない微妙なネタを。

会員制サイトなどで不特定多数の人にログインさせる場合、フッタのバージョン情報は隠しておきたかったり、 こじゃれたメッセージを表示したいときとか使うアクションとフィルタ。

2012
01.28

[WordPress] ブログの情報を取得する方法とノーキャッシュ疑惑

ブログのget_bloginfo()で取れないデータが必要な場合に使うもの。

2012
01.27

検索エンジンにやさしいパンくずリストのコーディング

ってなんだ。

2012
01.26

[jQuery Mobile]ダイアログ

jQuery Mobileにおけるダイアログの扱いはウインドウではなくページ。 なので通常のページと同様に扱える。ダイアログウインドウを出す。じゃなくダイアログページに遷移する。的な。

2012
01.25

[Ubuntu11.10]Ubuntuのインストール後の設定

インストール完了後の環境構築。PC起動時いちいちBIOSからブートドライブ選んで ブートするのかと思ってたら起動時にOS選択画面が出てくる。

すばらしいですね。

2012
01.24

[Ubuntu11.10]Windows XPとUbuntuのデュアルブート環境

いろいろあってUbuntuをインストールすることに。

2012
01.23

MinGW+Mintty+Git

MinGW+Mintty+Gitをやろうとして失敗に終わった。このエントリーには収穫できるものはありません。

Tags