WebデザイナーにもわかるFlex画面デザイン(1) http://www.ark-web.jp/sandbox/design/wiki/280.html

[edit]

はじめに

せつめいするひと:
Webデザイナー。女。Flashは5で止まっている。
HTMLは手打ち。FireWorks派。Windows。
AS、JSはコピペで奮闘。がよくわかってない。プログラム入門の本でいつも挫折。だれか教えてください。

そんなWebデザイナーがFlexをやってみたよ!

[edit]

Flexとは?

[edit]

つくりかた

[edit]

開発環境

[edit]

必要なファイル

これだけ。
なので、Flex SDKを使えば、秀丸とFireworks(Photoshop)でいますぐFlexアプリがつくれます。

これらのファイルをコンパイルすると、swfのできあがり。

[edit]

rascutが便利

コンパイルにはSDKのコンパイラより rascutが早いし自動コンパイルしてくれるので便利!
rascutのインストールについては、こちらで。
http://www.ark-web.jp/sandbox/wiki/?Flex%2Frascut

デザイナーでも黒い画面でやってみよう。rascutをインストールできたら、
SSHの使用できるアプリ(winならputty、macならターミナルでOK)を起動して、

cd public_html/flex(mxmlのあるディレクトリまで移動)
rascut sample.mxml(ファイル名を指定してrascut実行)

これでOK。
あとは勝手に更新を察知して自動コンパイルしてくれます。

[edit]

中身をみてみる

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>

これを黒い画面でコンパイルすると、こうなる

[edit]

コンポーネントの種類

などビジュアル系のコンポーネントのほか、エフェクトやバリデータなどのコンポーネントもある。

代表的なコンポーネント

<mx:DataGrid  width="100%" height="100%"
	dataProvider="{services}">
	<mx:columns>
		<mx:DataGridColumn dataField="name" headerText="サービス名"/>
		<mx:DataGridColumn dataField="URL" headerText="URL"/>
		<mx:DataGridColumn dataField="description" headerText="説明"/>
	</mx:columns>
</mx:DataGrid>

<mx:XMLList id="services">
	<service>
		<name>ecoったー</name>
		<URL>http://eco.tter.jp/</URL>
		<description>eco*Twitter</description>
	</service>
	<service>
		<name>necoったー</name>
		<URL>http://neco.tter.jp/</URL>
		<description>=^..^=</description>
	</service>
	<service>
		<name>miqqle</name>
		<URL>http://miqqle.jp/</URL>
		<description>これは便利!</description>
	</service>
</mx:XMLList>

などなど、HTMLならjsなどでいろいろ記述しないといけところを、
たったこれだけの記述でできちゃいます!
コンポーネント化されているって便利。

[edit]

その他のコンポーネント

[edit]

スタイルの設定

デザインの調整はどうするの?
スタイルシートを使います。

(→WebデザイナーにもわかるFlex画面デザイン(2)につづきます)

投稿者小森? | パーマリンク

| append.gif

tag: Flex?


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-10-16 (木) 14:07:28 (3964d)

アークウェブのサービスやソリューションはこちら