またまた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.