Fireworksのパネルをjsonでサクっと作った

またまたjohndunning.comのひとがやってくれました。
jsonでFireworksのflashパネルをつくれますよ！
JSON Panel

以前紹介したコマンド時のパネルとほとんど変わりません。
んでレイヤー操作のコマンドをパネルにをまとめてみました。

使いたい、改造したい方はファイルをダウンロードしていじってみてください。
LayerPanel.zip

ダウンロードしたらfireworksのインストールパス\Configuration\Command Panelsに解凍したLayerPanel.js、LayerPanel.swfを入れてFwを再起動、で動くはずです。

以下、パネルに挿入できる要素の例を示します。
参考/キャプチャ元：Flex3 Component Explorer、Flex3 Style Explorer (beta)

* Box

{ Box: {
style:{paddingLeft: 5,paddingRight: 5,paddingTop: 5,paddingBottom: 5,borderStyle:"solid"},
direction:"vertical",
	children: []
}},

* Button

{ Button: {
    label: "All",
    toolTip:"すべてのレイヤーを表示",
    events: {
	            click:function(e)
	            {
	            fw.getDocumentDOM().setLayerVisible(-1, -1, true, true);
	            }
            }
        }
},

* CheckBox

{ CheckBox: {
	name: "Constrained",
	label: "Constrain proportions",
	style: {
		paddingLeft: 30
	}
} },

* ColorPicker

{ ColorPicker: {
selectedColor:"0xCCFFFF",
showTextField:"true"
}},

* ComboBox

{ ComboBox: {
	dataProvider:["aaa","bbb","ccc"]
}},

* ControlBar

パネル内の白いエリアの下の部分

{ Panel: {
percentWidth: 100,
percentHeight: 100,
title:"Panel Container Example",
children: [
	{ Image: {
	source:"sample.png",
	toolTip: "image",
	} },
	{ ControlBar: {
	children: [
			{ ComboBox: {
			dataProvider:["aaa","bbb","ccc"]
			}},
	]
	}},
]
}},

* DateChooser

{ DateChooser: {
}},

* DateField

{ DateField: {
}},

* DividedBox

{ DividedBox: {
	percentWidth: 100,
	percentHeight: 100,
	direction:"horizontal",
	children: [
		{ Panel: {
		percentWidth: 100,
		percentHeight: 100,
		title:"Panel Container Example"
		}},
		{ Panel: {
		percentWidth: 100,
		percentHeight: 100,
		title:"Panel Container Example"
		}},
	]
 }},
 

* Form
* FormHeading
* FormItem

{ Form: {
	width: 105,
	children: [
		{ FormItem: {
			label: "W:",
			children: [
				numericStepper("Width", "Width of selection in pixels")
			]
		} },
		{ FormItem: {
			label: "H:",
			children: [
				numericStepper("Height", "Height of selection in pixels")
			]
		} }
	]
} },

* HBox

{ HBox: {
style:{paddingLeft: 5,paddingRight: 5,paddingTop: 5,paddingBottom: 5,borderStyle:"solid"},
	children: []
}},

* HDividedBox

{ HDividedBox: {
	percentWidth: 100,
	percentHeight: 100,
	children: [
		{ Box: {
		percentWidth: 100,
		percentHeight: 100,
		children: [],
		}},
		{ Box: {
		percentWidth: 100,
		percentHeight: 100,
		children: [],
		}},
	]
}},

* HRule

{ HRule: {
	percentWidth: 100
} },

* HSlider

{ HSlider: {
	labels:['0%','100%'],
	style:{dataTipPlacement:"top", tickColor:"0xffffff", },
	snapInterval:"1",
	tickInterval:"10",
	allowTrackClick:"true",
	liveDragging:"true",
}},

* Image

gif,jpeg,png,swfなど

{ Image: {
source:"top.swf",
toolTip: "image",
height:20
} },

* Label

{ Label: {
	text:"Click the Button control to see panel properties."
}},

* List

{ List: {
	percentWidth: 100,
	height:150,
	dataProvider:[{label:"aaa", data:"aaa"},{label:"bbb", data:"bbb"}],
}},

* NumericStepper

{ NumericStepper: {
	name: inName,
	width: 70,
	value: 0,
	stepSize: .1,
	maximum: 100000,
	minimum: -100000,
	toolTip: inTooltip,
	events: {
			// 値の変化するものは onChange を使う
		change: onChange
	}
}},

* Panel

{ Panel: {
percentWidth: 100,
percentHeight: 100,
title:"Panel Container Example",
children: []
}},

* RadioButton

	{ RadioButton: { groupName:"year", label:"1942"}},
	{ RadioButton: { groupName:"year", label:"1952"}},

* Spacer

{ Spacer: {
	//	percentHeight: 10,percentWidth: 100, width: 10,
	height: 10
}},

* TabNavigator

{ TabNavigator: {
	percentWidth: 100,
children: [
			 {Box: { label: "tab1",	children: [
						 	{ Label: {
							text:"tab1"
							} },
						]}},
			 {Box: { label: "tab2",	children: [
						 	{ Label: {
							text:"tab2"
							} },
						]}},
			{Box: { label: "tab3",	children: [
						 	{ Label: {
							text:"tab3"
							} },
						]}}
		]
		}},

* Text

{ Text: {
	percentWidth: 100,
	htmlText:'This is <font color="#FF0000">HTML text</font> in a <b>Text component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">Text component</font> you can use basic HTML markup.'
}},

* TextArea

{ TextArea: {
	percentWidth: 100,
	percentHeight: 100,
	text:"test"
}},

* TextInput

{ TextInput: {
	percentWidth: 100,
	percentHeight: 100,
	text:"test"
}},

* TileList

{ TileList: {
	percentWidth: 100,
	percentHeight: 100,
	rowHeight:25,
	columnWidth:25,
	dataProvider: [
//現在　iconの画像は未対応だそうです。
	{label:"aaa",icon:"top.png"},
	{label:"bbb",icon:"top.png"},
	{label:"ccc",icon:"top.png"}
	]
}},

* ToggleButtonBar

{ ToggleButtonBar: {
	 dataProvider:["aaa","bbb","ccc"]
 }},

* VBox

{ VBox: {
style:{paddingLeft: 5,paddingRight: 5,paddingTop: 5,paddingBottom: 5,borderStyle:"solid"},
	children: []
}},

* VDividedBox

{ VDividedBox: {
	percentWidth: 100,
	percentHeight: 100,
	children: [
		{ Box: {
		percentWidth: 100,
		percentHeight: 100,
		children: [],
		}},
		{ Box: {
		percentWidth: 100,
		percentHeight: 100,
		children: [],
		}},
	]
}},

* VRule

{ VRule: {
	percentWidth: 100
}},

* VSlider

{ VSlider: {
	labels:['0%','100%'],
	style:{dataTipPlacement:"top", tickColor:"0xffffff", },
	snapInterval:"1",
	tickInterval:"10",
	allowTrackClick:"true",
	liveDragging:"true",
}},

詳しくはリファレンスを。
AdobeFlex3.4LanguageReference

関連する記事:

• fireworksのUIパネル（コマンド実行時のswfパネル）をjsonで構築
• as3で簡単なお絵描きアプリの実験
• Flash Builder上で単純な縦書きどうやるん？
• Flash Builderでタグのプロパティ名を置換
• 【Windowsストアアプリ】 Xbox360コントローラーとCreateJSを連携させる(3)