Branberyheag!! Lab

Flexは、そのままでも十分すぎるほどデザインの完成度が高い。
だけど、ボタンやタブ・Comboxなど、CSSで変更してもルックアンドフィールが合わないときがある。そんなときにスキンを使う。スクロールバーのカスタマイズ方法やプリロードのカスタマイズ方法は書いてきたけど、ボタンやら他のパーツも変更する方法まとめて書いておこうと思う。

More

Flexで作っているといつもスクロールバーのデザインがものすごく気になる。かっこ悪いので、カスタマイズしたいんだけど、なかなかできなかった。

たまたま調べ物をしていたら、カスタマイズの方法が掲載されていたので、紹介する。

「Designer ScrollBars in Flex 3」という記事に掲載されている。
CSS上でパーツを画像で用意してそれをCSSで読み込むという方法。これがてっとり早い。
あと、Flex ビルダでphotoshopやFlashで作ったスキンを読み込む方法がある。これは、ツールを持っている人だったら問題ないと思う。俺みたいに遊び程度で作るにはちょっと投資が大きくなるので、CSSを利用する方法を選ぶかな。

ScrollBar {
up-arrow-skin: ClassReference(null);
down-arrow-skin: ClassReference(null);trackSkin: Embed(source="skins/ScrollBarTrack.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbUpSkin: Embed(source="skins/ScrollBarThumb_up.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbOverSkin: Embed(source="skins/ScrollBarThumb_over.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
thumbDownSkin: Embed(source="skins/ScrollBarThumb_down.png", scaleGridLeft="1", scaleGridTop="4", scaleGridRight="5", scaleGridBottom="16");
}

今度試してみようと思う。

Flexでいろいろと遊んでいるとflexを呼び出している最初のプリロード画面があまり好きではない。この画面を見るとFlexで作られているっていうのがハッキリわかってしまう。これを自分のデザインしたプリローダーにしてみようと思っていろいろと調べていた。当然だけど、カスタマイズはできるということで、調べながらやってみた。

カスタマイズするには、IPreloaderDisplay を使って、プリローダー用のクラスファイルを作って、それをMXMLと関連付けするだけ。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fc="http://www.adobe.com/2006/fc"
 layout="absolute" preloader="PreloaderDisplay">

mx:Applicationのpreloader属性にクラスファイルを指定する。

More

前に紹介した「SpringGraph Flex Component」を使って、自分の職務経歴書をビジュアライズしてみた。きちんと関わったプロジェクトを入れるとすごくリッチな感じになると思う。ただ、公開しているのでプロジェクト名は、ふせてある。
会社のロゴをダブルクリックすると関わったプロジェクトが出てくる。

今回、Flex独特のPreloaderを使わずに自分で作ったものに切り替えている。
これは、MXML上でクラスを定義しておくとよいみたい。この辺は、そのうちメモしようと思っている。

Flexだけでここまでのビジュアライズができると楽しいと思う。

Portfolio Visualizer
http://lab.branberyheag.com/portfolio/

「SpringGraph Flex Component」っていうライブラリを発見。
気軽に情報のノードのようなものを作れるのはいいかもしれない。これで自分のポートフォリオを作ってみようと思う。

SpringGraph Flex Component

FlexとAction script3.0を触り始めて、作りたいものを作ってやろうと思っていきなりflickr APIを使って作ったのが「Drop flickr」っていうコンテンツ。

構想は結構前からあったんだけど、Flash CS3で最初作ろうと思ったんだけど結局作りたいものを作れる知識がなかったために断念。それから１年くらい経ってまたリベンジした。今回はFlexということもあってUI周りはこれで作って、スクリプトは関数の組み合わせで作った。本当は、クラスファイルで作るのが一番なんだけど、今回はリハビリと最初ということもあって関数で作った。

Hello Wolrd的なところもあって細かい部分が適当になってしまっている。
技術的には、BOX2D flashというライブラリーとflickr APIが使えるライブラリーをのふたつを使っている。

サーバにあげて気づいたんだけど、クロスドメイン用のスクリプト入れないといけないことに気づいた。かなり焦ったけど、調べたらすぐに事例があってよかった。あと、ダブルクリックでflickrサイトに画面遷移させたかったけど、メソッドを見つけられなかった。それとBOX2Dではなぜか正方形の生成ができなかった。なので、今回は丸のみで作った。結構、ライブラリーって理解していないと難しいもんだね。

とにかく、いろいろといじって遊んでください。
やっとリリースできたので、次のコンテンツを作ろうと思う。

Drop flickr
http://flickr.branberyheag.com/dropflickr/

–
追記
検索後、もう一度検索する場合は、右上のボタンをクリックすると検索窓が表示されます。
再検索用のボタンの配置がイマイチだと思う。

ラジオボタンではまった部分のソース（MXML）

<mx:RadioButtonGroup id="choiceSearchType" />
<mx:RadioButton groupName="choiceSearchType" enabled="true" id="cst1" value="keyword" label="Keyword" width="75" />
<mx:RadioButton groupName="choiceSearchType" id="cst2" value="tag" label="Tag" width="50" />

MXMLで画面表示系を作っていたんだけど、ラジオボタンでデフォルトでの選択しているようにする場合は、MXML上でコントロールできないみたい。ActionScript3上でコントロールするしかないみたい。

ラジオボタンのデフォルトで項目させるには
（keywordを選択）

choiceSearchType.selectedValue="keyword";

あと、ラジオボタンで選択したValueを取得する場合は、意外と簡単だった。
変数で持たせたかったけど、変数の型でエラーが出る。いろいろと試してみたけど結局原因が分からなかった。今回は、直接記述した。

ラジオボタンで選択したValuleを取得

//obj.selectedValue
choiceSearchType.selectedValue

最近、ちゃんとActionScript3の勉強がしたくてFlex3を触り始めた。

MXMLとAS3との関係は、すごくHTMLとJavascritptの関係近いと思う。関数のみでウェブアプリを作れるし、ちょっとクセはあるけどそれほど難しくもない。入力系とインタラクティブなコンテンツがある場合は便利だと思う。
ある程度、AS3で制御しなくてもMXMLのみで制御できるところが面白いと思う。あとオープンソースの開発環境のFlashDevelopがすばらしい。Flex3　SDKとの関連付けライブラリー（SWC）との関連付けが簡単。

Flex4がベータ版で出ているけど、これはFlex3と全く別物にみたい。まぁ、正式版出たら試してみようと思う。