ボタンカスタマイズ編の続きです。
今回ちょっと困ったのがチェックボックスとラジオボタン。
どちらも以下が条件です。
- ラベルが可変なので、配置するmxmlでサイズ指定をする
- ラベルの文字だけではなくて背景ごとマウスに反応させる
- 選択／未選択が判別できるように表示を変化させる
↓こんなのを作りたい
条件1を実現するためには、Flash Catalystで作ったオリジナルのチェックボックス／ラジオボタンは使えません。
ラベルの文字ごと1つのスキンになってしまうのと、背景画像の幅と高さでサイズが固定されるからです。
角丸にしたかったので、サイズを変更すると角がいびつになってしまいます。
また、Flash Builderのチェックボックス／ラジオボタンコントロールを使うと、マウスに反応するのがラベルの文字上だけなので、条件2を実現できません。
うーん… と考えて、とりあえず前記事の「アイコン／画像をラベルにしたボタンの場合」と同じくスキンを編集してみることにしました。
Read All »
Posted by sponge design on 3/10, 2011 :: Categories
仕事Tags ::
Flex
レイアウト編の続きです。
ボタンのデザインカスタマイズについて。
アイコン／画像をラベルにしたボタンの場合
前回のプロジェクトの際、「好きなデザインでボタン作りたいけどわからん」と訴えたらプログラマ氏が以下のサイトからソースを収集して「参考に」と送ってくれました。
Source of Sample-Flex4-Skinning-ButtonWithIcon
※ソースはマウス右クリック→「View Sourse」でダウンロードできます。
src/skins/にあるスキンを眺めて、「CloseButtonSkin.mxml」を編集してみました。
↓ノーマルだとこんなボタンを
↓こんなのにしたい
もちろん、ステート（マウスアップ／マウスオーバー など）で背景色・ボーター色も変更されるように。→ボタンのデモ
Read All »
Posted by sponge design on 3/8, 2011 :: Categories
仕事Tags ::
Flex
Flash Builder4が出てからのコーディング方法をまとめようと思っているうちに月日は流れ…。
先日からまたFlex4／Flash Builder4でコーディングしているので、忘れないうちに現在の方法をまとめます。
実は、最初は試しにFlash Catalystでちょっと画面遷移の効果も入れて制作してみたのですが、プログラマにダメ出しされてしまいました。
確かに、ソース見ても全てのステートがMain.mxmlにごちゃっと入っていて整理されていない…。
また、Flash Catalystに読み込んだPhotoshopのレイヤ名に日本語を使っていたらソースにそのまま入っているし… こらーやりにくいやろうな、とは思いました。
Catalyst→Builder4へスムーズに渡せるデータを作る知識がないこともあって、やっぱりFlash Builder4でコーディングし直すことにしました。
Flex3（Flex Builder3）で制作していたときに一番時間がかかった「コントロールごとにcssで変更出来る要素を探すこと」は、「Adobe® Flash® Platform 用 ActionScript® 3.0 リファレンスガイド」で検索できるようになってだいぶ効率アップ。（2011-06-27 ページタイトル／リンク先が変更されていたのに合わせ修正）
ただし、外部cssファイルに書いて反映されるかどうかは、相変わらずやってみないとわかりませんが…。
以下、前回と同じく全くの自己流ですので、間違い・勘違いの部分やもっと効率的な方法をご存知の方はご指摘いただければ幸いです。
Read All »
Posted by sponge design on 3/4, 2011 :: Categories
仕事Tags ::
Flex
