Branberyheag!! Lab

Adobe AIRでツールを作りたくなったので、せっかくなのでFlex4で作ってみることにした。概念がFlex3と異なるということだったので、資料がないか探してみた。Adobeのサイトに行くと丁寧に解説されていたので、メモ。

http://www.macromediaflash.com/jp/devnet/flex/articles/flex4_tutorials_no11.html

http://www.macromediaflash.com/jp/devnet/flex/articles/flex4_sparkintro.html

http://www.macromediaflash.com/jp/devnet/flex/articles/flex4_skinning.html

Flashでスクローバーってだいたい自分で作らないといけなかったり、Libraryとか使ったりするんだろうけど、Flexだと最初からコンポーネントされている。

なんとなくだけど、これってスクリプト上で動かしたりできないのかな～と思った。いろいろと調べてみると案外簡単にスクロールバーのコントロールできるようだ。

verticalScrollPosition

みたいなメソッドを使うと簡単にそうさできるみたい。

スクリプトを使った自動スクロール

NumericStepperのカスタマイズ方法についてもメモ。

styleで定義できる。時間ないので、殴り書きです。あしからず

NumericStepperの下矢印のCSSプロパティ
More

今、Hsliderのつまみをもう少し大きいものにしたいなと思って、調べていたらスキンでなんとかなるみたいだったので、メモ。

参考になった記事
[Flex2][AS3]SliderのThumbが言うことを聞かない件

要約するとスキンでHSliderのつまみは、変更できるけど定義されているMXMLがサイズが固定されていて、大きさが変更できない。クラスファイルで拡張してつまみの大きさを調整したということらしい。

つまみの大きさの固定は、あまり変更をしないであろうという想定だったのかもしれない。それに全体のデザインを考えて小さいほうがいいと考えたのことも考えられる。

参考ソースコード More

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/

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