![[PukiWiki]](image/sandbox.gif "[PukiWiki]")
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- WebデザイナーにもわかるFlex画面デザイン（1） へ行く。
- 1 (2008-08-01 (金) 15:00:08)
- 2 (2008-08-01 (金) 17:17:46)
- 3 (2008-09-02 (火) 12:49:18)
- 4 (2008-09-04 (木) 16:42:57)
WebデザイナーにもわかるFlex画面デザイン(1) †
はじめに †
せつめいするひと： Webデザイナー。女。Flashは5で止まっている。 HTMLは手打ち。FireWorks派。Windows。 AS、JSはコピペで奮闘。がよくわかってない。プログラム入門の本でいつも挫折。だれか教えてください。
そんなWebデザイナーがFlexをやってみたよ！
Flexとは？ †
- いわゆるRIA（Rich Internet Application）統合開発環境。
- Flash上、AIR上で動作する
- 「タイムラインのないFlash」？
- コンポーネントと呼ばれるパーツがあらかじめ用意されている
- デザイン…mxml(Flex用のXML)
- プログラム…ActionScript?
に分かれている。
つくりかた †
開発環境 †
- FlexBuilder?
- ドリみたいなもん？Javaの人にはいいらしい？？
- Flex SDK（無償）
- 黒い画面で使えるコンパイラとデバッガ
必要なファイル †
- mxml
- as
- css
- 画像（gif/jpg/png）、swf
これだけ。
なので、Flex SDKを使えば、秀丸とFireworks（Photoshop）でいますぐFlexアプリがつくれます。
これらのファイルをコンパイルすると、swfのできあがり。
rascutが便利 †
コンパイルには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。
あとは勝手に更新を察知して自動コンパイルしてくれます。
中身をみてみる †
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>
これを黒い画面でコンパイルすると
（まだ書き途中）
