*WebデザイナーにもわかるFlex画面デザイン(1) [#r2982611]
**はじめに [#t4b85a13]
せつめいするひと：
Webデザイナー。女。Flashは5で止まっている。
HTMLは手打ち。FireWorks派。Windows。
AS、JSはコピペで奮闘。がよくわかってない。プログラム入門の本でいつも挫折。だれか教えてください。
そんなWebデザイナーがFlexをやってみたよ！
//-----------------------------------------
**Flexとは？ [#g4d021e1]
- いわゆるRIA（Rich Internet Application）統合開発環境。
- Flash上、AIR上で動作する
-「タイムラインのないFlash」？
-コンポーネントと呼ばれるパーツがあらかじめ用意されている
- デザイン…mxml(Flex用のXML)
- プログラム…ActionScript
に分かれている。
**つくりかた [#z5b739f6]
***開発環境 [#rd76da63]
-FlexBuilder
--ドリみたいなもん？Javaの人にはいいらしい？？
-Flex SDK（無償）
--黒い画面で使えるコンパイラとデバッガ
***必要なファイル [#a163d096]
- mxml
- as
- css
- 画像（gif/jpg/png）、swf
これだけ。
なので、Flex SDKを使えば、秀丸とFireworks（Photoshop）でいますぐFlexアプリがつくれます。
これらのファイルをコンパイルすると、swfのできあがり。
***rascutが便利 [#y2f122bc]
コンパイルにはSDKのコンパイラより rascutが早いし自動コンパイルしてくれるので便利！
rascutのインストールについては、こちらで。
http://www.ark-web.jp/sandbox/wiki/?Flex%2Frascut
デザイナーでも黒い画面でやってみよう。
SSHの使用できるアプリ（winならputty、macならターミナルでOK）を起動して、
cd public_html/flex（mxmlのあるディレクトリまで移動）
rascut sample.mxml（ファイル名を指定してrascut実行）
これでOK。
あとは勝手に更新を察知して自動コンパイルしてくれます。
//-----------------------------------------
**中身をみてみる [#qbd50e73]
MXMLの中身
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Style source="stylesheets/sample.css" />
<mx:Button label="Hello World!" width="150" height="18" />
</mx:Application>
これを黒い画面でコンパイルすると
（まだ書き途中）
![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
