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>
  41.  

Main.as

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

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

XML関数

  1. public function XML(expression:Object):XML
  2.  

となっていてオブジェクトを受け取って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. }
  81.  

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. }
  94.  

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. }
  148.  

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

参照サイト
投稿日 2010年2月16日 03:50
カテゴリ ActionScript
タグ サンプルコード | テストコード
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1189

コメント

コメントする
Name
Email Address
URL

KANTENNA.COM

Solarized

PAGE RANK

384 PV約 68 秒/1PV

[Ubuntu]動画ダウンロードと検索が簡単にできるGMediaFinder | 情報備忘録

814 PV約 68 秒/1PV

[PHP]MySQLを利用した画像の保存と出力 | WEBプログラム覚書

173 PV約 66 秒/1PV

jQuery PageSlide.js | KANTENNA.COM

630 PV約 61 秒/1PV

表示内容の切り替え(JavaScript) | WEBプログラム覚書

166 PV約 52 秒/1PV

[WordPress]投稿タイプ、タクソノミー、タームについて | WEBプログラム覚書

170 PV約 52 秒/1PV

jQuery slider | KANTENNA.COM

207 PV約 45 秒/1PV

[WordPress]XML-RPCを利用して外部から投稿したりする。 | WEBプログラム覚書

1045 PV約 37 秒/1PV

[jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書

1055 PV約 35 秒/1PV

jQueryによる表示、非表示切り替え | WEBプログラム覚書

161 PV約 35 秒/1PV

[jQuery]closest()とparents() | WEBプログラム覚書

404 PV約 28 秒/1PV

[jQuery]デザイン系の人は、$(function(){})よりwindow.onloadを使ったほうがいいかも。 | WEBプログラム覚書

132 PV約 28 秒/1PV

基本的な光の作り方2 | KANTENNA.COM

584 PV約 25 秒/1PV

Dreamweaverで文字コードを変換する手順 | 情報備忘録

398 PV約 25 秒/1PV

Excel VBA の改行コード | WEBプログラム覚書

248 PV約 25 秒/1PV

javascript 子要素取得のメモ | WEBプログラム覚書

131 PV約 23 秒/1PV

コマンドプロンプト(cmd.exe)が芸術的すぎる件 | 情報備忘録

161 PV約 23 秒/1PV

渦っぽい光が美しいPhotoshop効果 | KANTENNA.COM

144 PV約 11 秒/1PV

ウェブデザイン・ホームページ制作 KANTENA.COM

394 PV約 9 秒/1PV

MySQLエラー「Column 'カラム名' in field list is ambiguous」 | WEBプログラム覚書

TIME LINE

2018 11.15

webpack、babelでreactのビルド環境構築

node.jsはインストール済でとにかくreactをJSXでかいてES5にトランスコンパイルして既存のページにscriptタグをぺちっとしたい人向け。

2018 06.05

[CakePHP3.7]LayoutでCellを使ったら memory size エラー出る場合

layoutファイルの中でcellをrender()するとViewでmemory size エラー出る場合がある。

どうやらViewでsetLayout()とか使ってると無限ループのようになってメモリエラーになるっぽい？？ 下手なlayout設定は命取りになる模様。

Tag