2010年02月16日 03:50
パーマリンク | http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/524
すっかり忘れかかってるActionScript3.0。FlashDevelop.jpのおかげでちょっとやる気が復活。
とはいえまた一から本読むのもあれなんで、いろいろ作りながら覚えていこうかと思います。
まずはナビゲーションを作ってみる。 ActionScript3.0はXMLのパースが簡単という噂なのでXMLから設定読み込んで やってみたんですがホントXMLが扱いやすい。
まぁ取得するまでが、ちと面倒ですが。ってかPHPのfile_get_contents()があまりに便利すぎ。
<?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>
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;
}
}
}
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;
}
}
}
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状態にしたいなー。
/ 金額 : ¥ 3,990
1-5
6-10
/ 金額 : ¥ 3,465
/ 金額 : ¥ 3,150
/ 金額 : ¥ 2,699
/ 金額 : ¥ 3,497
/ 金額 : ¥ 3,675