デベロッパーとデザイナーの協業を考える。というテーマでした。
デザイナーの人は少ないだろうなーと思ってたのですが、20人弱の方が参加していらっしゃいました。自分はAIRでHTML->AIRでFlashの部分はFlex3を触ってみないとよく分からない->flex でFlexを勉強し始めて間もないので当日までリファレンス読んでましたけど何とかついていけました。
ディスカッションでは会場の人が、アンケートに答えて結果を元に進行しました。
印象に残ったのはパネラーの方が「昔ディベロッパーが当たり前にUIを作っていたのにHTMLが出てきたらそうでなくなって失われた10年みたいなのがある。とAbobeの人が言っていた」といってたことです。
専門でUIデザイナーをやっている例があまり無いのかデザイナーと兼任、営業と兼任という話が出ました。自分もWebサイトのUIを作ってるのですけど、クライアントと毎日打ち合わせしてレイアウトの検討をしています。昔はディレクターがエクセルでセルを方眼にしてフレームを作っていました。
デザイナーの方でFlexでデザインどうしてる？というアンケートで
A.PhotoShop、Illustratorでデザイン
B.Flashでオーサリング
C.MXMLでデザイン
D.AS3で
AとCが0人。
Flashをやってた人がFlexに入って行ってるようでした。
デザイナーの人でFlexBuilderは使いやすいと思っている人は会場にはいなかったようです。
c.のMXMLでデザインだけどビルダーがDwのようにビューとコードが同時に表示できれば割といけるのかもと思いました。Fw CS3ではレイアウトを作ってMXMLで吐き出せます。共有ライブラリにFlexのコンポーネントが入っているのでちょっと全パーツをレイアウトして吐き出すとどうなるかやってみました。
exportされたMXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="440" layout="absolute" backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Style>
Accordion {
textSelectedColor:#000000;
textRollOverColor:#2B333C;
disabledColor:#AAB3B3;
color:#0B333C;
}
Button {
textSelectedColor:#000000;
textRollOverColor:#2B333C;
disabledColor:#AAB3B3;
color:#0B333C;
}
CheckBox {
textSelectedColor:#000000;
textRollOverColor:#2B333C;
disabledColor:#AAB3B3;
color:#0B333C;
}
ComboBox {
textSelectedColor:#2B333C;
textRollOverColor:#2B333C;
disabledColor:#AAB3B3;
color:#0B333C;
}
NumericStepper {
disabledColor:#AAB3B3;
color:#0B333C;
}
Panel {
disabledColor:#AAB3B3;
color:#0B333C;
}
PopUpButton {
textSelectedColor:#000000;
textRollOverColor:#2B333C;
disabledColor:#AAB3B3;
color:#0B333C;
}
RadioButton {
textSelectedColor:#000000;
textRollOverColor:#2B333C;
disabledColor:#AAB3B3;
color:#0B333C;
}
TextArea {
disabledColor:#AAB3B3;
color:#0B333C;
}
TextInput {
disabledColor:#AAB3B3;
color:#0B333C;
}
</mx:Style>
<mx:Accordion id="accordion" x="17" y="12" width="152" height="136" enabled="true">
<mx:Canvas width="100%" height="100%" label="Label"/>
</mx:Accordion>
<mx:Button id="button" x="17" y="155" width="82" height="22" label="Button" enabled="true"/>
<mx:CheckBox id="checkBox" x="18" y="193" height="14" selected="false" label="Checkbox" enabled="true"/>
<mx:ComboBox id="comboBox" x="16" y="218" width="88" height="22" enabled="true" editable="false">
<mx:dataProvider>
<mx:Array>
<mx:String>Text</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<mx:NumericStepper id="numericStepper" x="19" y="285" width="58" height="22" value="0" enabled="true"/>
<mx:Panel id="panel" x="190" y="12" width="250" height="201" layout="absolute" title="Title" enabled="true"/>
<mx:PopUpButton id="popUpButton" x="19" y="323" width="148" height="22" label="PopUpButton" enabled="true"/>
<mx:RadioButton id="radioButton" x="14" y="356" height="14" selected="false" label="Radio" enabled="true"/>
<mx:TextArea id="textArea" x="192" y="239" width="160" height="44" enabled="true" text="Text"/>
<mx:TextInput id="textInput" x="196" y="294" width="160" height="22" enabled="true" text="Text"/>
</mx:Application>
このMXMLファイルのほかに全体のJPGイメージファイルができます。ツールチップやタブなどは何故かコードが無いので 全体のJPGイメージとつき合わせてねということなのでしょうか。
共有ライブラリを配置すると下図のようにシンボルプロパティからMXMLコードをコピーすることも出来ます。いずれにしろ現状、動きを含めた全体の設計はFwでは難しいのかなと思います。
追記：
より詳しい説明は本家を探すとありました。
Designing Flex applications with Fireworks CS3
Creating rich symbols for MXML and Images export in Fireworks CS3
あとココのまとめが参考になるかもしれません。
Alan Musselman: Geek Glue, Flex and Fireworks:Geek Glue, Flex and Fireworks