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

verticalScrollPosition

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

スクリプトを使った自動スクロール関連した記事

• Flexのスクロールバーをデザインする
• Flex3のScrollbarのコントロール
• ラジオボタンでハマった
• [Flex3]Flexのプリローダーをカスタマイズしてみた
• Flexのビジュアルデザインをskinで変更する

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

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

downArrowDisabledSkin=”NumericStepperDownSkin”
downArrowDownSkin=”NumericStepperDownSkin”
downArrowOverSkin=”NumericStepperDownSkin”
downArrowUpSkin=”NumericStepperDownSkin”

NumericStepperの上矢印のCSSプロパティupArrowDisabledSkin=”NumericStepperUpSkin”
upArrowDownSkin=”NumericStepperUpSkin”
upArrowOverSkin=”NumericStepperUpSkin”
upArrowUpSkin=”NumericStepperUpSkin”

参考したページ
http://livedocs.adobe.com/flex/3_jp/langref/mx/controls/NumericStepper.html関連した記事

• [Flex3]HSliderのつまみのカスタマイズ
• Clipプロパティ
• [Flex3]Flexのプリローダーをカスタマイズしてみた
• Flexのスクロールバーをデザインする
• Flexのビジュアルデザインをskinで変更する

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

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

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

参考ソースコード

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="600" height="200">
<mx:Style>
HSlider{
thumbUpSkin: Embed(source="/assets/sliderThumb.png");
thumbOverSkin: Embed(source="/assets/sliderThumb_over.png");
thumbDownSkin: Embed(source="/assets/sliderThumb_down.png");
thumb-disabled-skin: Embed(source="/assets/sliderThumb_disable.png");
}
</mx:Style>
<mx:HSlider width="100%" height="100%" sliderThumbClass="FixedSliderThumb"/>
</mx:Application>

HSliderにクラス変数をセットする。

package{
import mx.controls.sliderClasses.SliderThumb;
import mx.core.mx_internal;
 use namespace mx_internal;

public class FixedSliderThumb extends SliderThumb
{
override protected function measure():void{
super.measure();
measuredWidth = currentSkin.measuredWidth;
measuredHeight = currentSkin.measuredHeight;
}
}
}

これでつまみのカスタマイズができるようだ。
今作っているもので試してみようと思う。

関連した記事

• Flexのビジュアルデザインをskinで変更する
• Flexのスクロールバーをデザインする
• [flex3]NumericStepperのカスタマイズ
• [Flex3]Flexのプリローダーをカスタマイズしてみた
• [AS3]オブジェクトの重なり順制御するには・・・

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

「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のビジュアルデザインをskinで変更する
• [Flex3]HSliderのつまみのカスタマイズ
• [flex3]NumericStepperのカスタマイズ
• Flexのスクローバーをコントロール
• [Flex3]Flexのプリローダーをカスタマイズしてみた

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

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

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

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

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

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

• twitter APIを使ったFlashコンテンツ（twitter ant）
• 失敗作:FilmGenerator
• コミュニティサイト「すきなばしょ」プレリリース
• Flexのスクローバーをコントロール
• Flexのスクロールバーをデザインする

<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

関連した記事

• Flexのビジュアルデザインをskinで変更する
• Flex3を触ってみて
• Flexとflickr APIで遊んでみた
• [Flex3]HSliderのつまみのカスタマイズ
• [Flex3]Flexのプリローダーをカスタマイズしてみた