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

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Trackback URL: