またまた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
Thank you very much for writing detailed descriptions of how to create each Flex control in JavaScript! I hope you’ve found the JSON Panel extension useful.