devlog [naru design]

プログラミングやテクニカルな内容の覚え書き。

feathersはStarlingフレームワーク用のオープンソースのUIコンポーネントです。

feathers

http://feathersui.com/

ボタン、リスト、タブ、プログレスバー、スライダー、他のUIコンポーネントが用意されています。
独自の画像を用意する事で見た目をカスタマイズできます。

Starlingフレームワークのwikiにあったサンプル(Getting Started with Feathers)を参考に、試してみました。

1. プロジェクトの作成

Action Script プロジェクトを作成します。

プロジェクト名を設定して「次へ」をクリックします。

ソースパスを設定します。
Starling, Feather, as3-signalsの3つのフォルダを追加します。
※ feathersでは、as3-signalsを使用します。あらかじめダウンロードして、一緒に使えるようにしておきます。
「終了」をクリックしてプロジェクトの作成を終了します。

2. Starlingのお約束

Stage3Dをブラウザ上のFlashプラグインで表示するには「wmode」パラメータを「direct」に設定する必要があります。

html-templateフォルダのindex.template.htmlファイルを編集します。

12行目 wmodeをdirectにします。

3. 画像を用意

buttonDown.png


buttonDown.png


プロジェクトにフォルダを作成して、画像ファイルを追加します。

4. コーディング

5. 実行結果

This movie requires Flash Player 11

状態によって画像の入れ替わるボタンができました。
マウスのイベントを意識せず、画像を用意するだけでボタンができるのは便利だと思いました。

他のUIコンポーネントも試してみたいと思います。

Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Trackback URL: