Branberyheag Lab » MXML

Flexのスクローバーをコントロール

isao — Fri, 25 Dec 2009 09:10:40 +0000

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

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

verticalScrollPosition

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

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

[flex3]NumericStepperのカスタマイズ

isao — Wed, 16 Sep 2009 05:06:36 +0000

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

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のつまみのカスタマイズ

isao — Wed, 16 Sep 2009 04:51:39 +0000

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

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

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

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

参考ソースコード




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");
}

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;
}
}
}

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

http://d.hatena.ne.jp/c9katayama/20080604/1212563971http://d.hatena.ne.jp/c9katayama/20080604/1212563971

関連した記事

Flexのビジュアルデザインをskinで変更する

isao — Mon, 07 Sep 2009 02:27:38 +0000

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

スキンを適用する方法として２つ方法がある。

グラフィカルスキン
埋め込みアセットを指定

Button {
overSkin: Embed("../assets/images/orb_over_skin.gif");
upSkin: Embed("../assets/images/orb_up_skin.gif");
downSkin: Embed("../assets/images/orb_down_skin.gif");
}

プログラムスキン
描画クラスを指定し、指定はClass Referenceを利用。

Button {
upSkin:ClassReference('MySkin');
downSkin:ClassReference('MySkin');
overSkin:ClassReference('MySkin');
disabledSkin:ClassReference('MySkin');
}

という風にしてすると使える。
プログラムスキンの利点として描画内容はすべてスクリプトで記述する、画像リソースが含まれないのでコンパイル後の容量が大きくならないらしい。

ボタンに独自のデザインを適用する場合

TabNavigator に画像を使用する方法も見つけたのでメモ。
画像を指定するにはStyleを使用し、外部CSSを設定して TabNavigator の Style を設定する。

CSSの記述

タブのスタイル

tabBt – タブのスタイル
last-tab-style-name – タブボタンの左端のスタイル
first-tab-style-name – タブボタンの右端のスタイル

ボタンのスタイル

up-skin – 通常状態の画像を指定(ボタン)
over-skin – マウスオーバーの画像を指定(ボタン)
down-skin – マウスダウンの画像を指定(ボタン)
selected-up-skin – 通常状態の画像を指定(ボタン選択状態)
selected-over-skin – マウスオーバーの画像を指定(ボタン選択状態)
selected-down-skin – マウスダウンの画像を指定(ボタン選択状態)

 .tab{
 tab-width:150;
 tab-height:30;
 tab-style-name:"tabBt";
 last-tab-style-name:"tabBtLeft";
 first-tab-style-name:"tabBtRight";
 }
 .tabBt{
 up-skin: Embed("./assets/tab_up.png");
 over-skin: Embed("./assets/tab_over.png");
 down-skin: Embed("./assets/tab_down.png");

 selected-up-skin: Embed("./assets/tab_selected_up.png");
 selected-over-skin: Embed("./assets/tab_selected_over.png");
 selected-down-skin: Embed("./assets/tab_selected_down.png");

 }
 .tabBtLeft{
 up-skin: Embed("./assets/tab_up_left.png");
 over-skin: Embed("./assets/tab_over_left.png");
 down-skin: Embed("./assets/tab_down_left.png");

 selected-up-skin: Embed("./assets/tab_selected_up_left.png");
 selected-over-skin: Embed("./assets/tab_selected_over_left.png");
 selected-down-skin: Embed("./assets/tab_selected_down_left.png");

 }
 .tabBtRight{
 up-skin: Embed("./assets/tab_up_right.png");
 over-skin: Embed("./assets/tab_over_right.png");
 down-skin: Embed("./assets/tab_down_right.png");
 selected-up-skin: Embed("./assets/tab_selected_up_right.png");
 selected-over-skin: Embed("./assets/tab_

selected_over_right.png");
 selected-down-skin: Embed("./assets/tab_selected_down_right.png");
 }

MXML

これでtabnavigatorのカスタマイズができるらしい。
comboxのカスタマイズもどこかで見つけたけど、見当たらなくなってしまった（汗）

スキンは、CSSファイルで管理したほうがいいのか、ASファイルで管理したほうが良いのか、迷っている。
いろいろと調べていたら、「Flex, 画像skinなどをCSSで一元管理する」で解説してくれている。

今、作っているものでどのくらいビジュアルデザインがカスタマイズできるか試してみようと思う。関連した記事

Flexのスクロールバーをデザインする

isao — Sun, 09 Aug 2009 15:48:27 +0000

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");
}

今度試してみようと思う。関連した記事

[Flex3]Flexのプリローダーをカスタマイズしてみた

isao — Wed, 29 Jul 2009 02:58:58 +0000

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

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

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

package
{
 import mx.preloaders.DownloadProgressBar;
 import flash.text.TextField;
 import flash.display.Sprite;
 import mx.events.*;
 import flash.events.Event;
 import flash.events.ProgressEvent;
 import flash.utils.Timer;
 import flash.utils.Timer;
 import flash.events.TimerEvent;
 import mx.preloaders.IPreloaderDisplay;

 public class PreloaderDisplay extends Sprite implements IPreloaderDisplay{
 private var txt:TextField = new TextField();
 //角度
 private var degree:Number=0;
 //半径
 private var r:Number = 100;
 private var centerx:Number = 350;
 private var centery:Number = 200;

 public function MyPreloader4(){
 txt.visible = false;
 txt.htmlText = "loading... ";
 addChild(txt);
 }

 public function set preloader( preloader:Sprite ):void{
 preloader.addEventListener( ProgressEvent.PROGRESS , SWFDownloadProgress );
 preloader.addEventListener( Event.COMPLETE , SWFDownloadComplete );
 preloader.addEventListener( FlexEvent.INIT_PROGRESS , FlexInitProgress );
 preloader.addEventListener( FlexEvent.INIT_COMPLETE , FlexInitComplete );
 }

 private function SWFDownloadProgress( event:ProgressEvent ):void {}

 private function SWFDownloadComplete( event:Event ):void {}

 private function FlexInitProgress( event:Event ):void {}

 private function FlexInitComplete( event:Event ):void
 {
 var myTimer:Timer = new Timer(10000,1);
 myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
 myTimer.start();

 addEventListener(Event.ENTER_FRAME, drawHandler);
 txt.visible = true;
 }

 public function timerHandler(event:TimerEvent):void {
 dispatchEvent( new Event( Event.COMPLETE ));
 }

 public function drawHandler(event:Event):void {
 //ラジアン
 var radian:Number = Math.PI/180*degree;
 txt.x = centerx+r*Math.cos(radian);
 txt.y = centery+r*Math.sin(radian)/2;
 txt.scaleX = txt.y/200;
 txt.scaleY = txt.y/200;
 txt.alpha = txt.y/200;
 degree += 5;
 }

 public function initialize():void
 {
 }

 public function get backgroundImage():Object
 {
 return null;
 }

 public function set backgroundImage(value:Object):void
 {
 }

 public function get stageHeight():Number
 {
 return 0;
 }

 public function set stageHeight(value:Number):void
 {
 }

 public function get stageWidth():Number
 {
 return 0;
 }

 public function set stageWidth(value:Number):void
 {
 }

 public function get backgroundSize():String
 {
 return null;
 }

 public function set backgroundSize(value:String):void
 {
 }

 public function get backgroundAlpha():Number
 {
 return 0;
 }

 public function set backgroundAlpha(value:Number):void
 {
 }

 public function get backgroundColor():uint
 {
 return 0;
 }

 public function set backgroundColor(value:uint):void
 {
 }

 }
}

例えば、上に書いているようなクラスファイルを作るとプリロード時にこのファイルを読み込む。あとは、Flashで作っているようなプリローダーを記述するだけ。
意外と簡単だった。

参考情報
Flex User Group
ひこにゃんが Flex アプリケーションにカスタムプリローダーをお勧めする3つの理由
関連した記事

[AS3.0][Flex3]Portfolio Visualizer

isao — Tue, 28 Jul 2009 16:07:57 +0000

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

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

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

Portfolio Visualizer
http://lab.branberyheag.com/portfolio/関連した記事

SpringGraph Flex Component

isao — Wed, 15 Jul 2009 07:15:41 +0000

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

SpringGraph Flex Component関連した記事

Flexとflickr APIで遊んでみた

isao — Mon, 13 Jul 2009 03:42:09 +0000

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/

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

ラジオボタンでハマった

isao — Thu, 02 Jul 2009 02:33:10 +0000

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

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

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

choiceSearchType.selectedValue="keyword";

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

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

//obj.selectedValue
choiceSearchType.selectedValue

関連した記事