アークウェブWebデザインSandBox

• バックアップ一覧
• 現在との差分 を表示
• ソース を表示
• バックアップ を表示
• 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) [#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>
 
 これを黒い画面でコンパイルすると
 
 
 （まだ書き途中）