泡沫webディレクター お仕事日記
大阪と神戸でwebディレクター・デザイナー・その他色々やっている「Sponge Design スポンジデザイン」のブログです。

デザイナーのFlex画面デザイン・コーディング vol.2 Flash Builder 4の場合(3)チェックボックス/ラジオボタンカスタマイズ

comments: 0

ボタンカスタマイズ編の続きです。
今回ちょっと困ったのがチェックボックスとラジオボタン。
どちらも以下が条件です。

  1. ラベルが可変なので、配置するmxmlでサイズ指定をする
  2. ラベルの文字だけではなくて背景ごとマウスに反応させる
  3. 選択/未選択が判別できるように表示を変化させる

 ↓こんなのを作りたい
カスタムチェックボックス

条件1を実現するためには、Flash Catalystで作ったオリジナルのチェックボックス/ラジオボタンは使えません。
ラベルの文字ごと1つのスキンになってしまうのと、背景画像の幅と高さでサイズが固定されるからです。
角丸にしたかったので、サイズを変更すると角がいびつになってしまいます。

また、Flash Builderのチェックボックス/ラジオボタンコントロールを使うと、マウスに反応するのがラベルの文字上だけなので、条件2を実現できません。

うーん… と考えて、とりあえず前記事の「アイコン/画像をラベルにしたボタンの場合」と同じくスキンを編集してみることにしました。

Read All »


Posted by sponge design on 3/10, 2011 :: Categories 仕事
Tags ::


デザイナーのFlex画面デザイン・コーディング vol.2 Flash Builder 4の場合(2)ボタンカスタマイズ

comments: 0

レイアウト編の続きです。
ボタンのデザインカスタマイズについて。

アイコン/画像をラベルにしたボタンの場合

前回のプロジェクトの際、「好きなデザインでボタン作りたいけどわからん」と訴えたらプログラマ氏が以下のサイトからソースを収集して「参考に」と送ってくれました。
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画面デザイン・コーディング vol.2 Flash Builder 4の場合(1)レイアウト

comments: 0

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ファイルに書いて反映されるかどうかは、相変わらずやってみないとわかりませんが…。

以下、前回と同じく全くの自己流ですので、間違い・勘違いの部分やもっと効率的な方法をご存知の方はご指摘いただければ幸いです。


Posted by sponge design on 3/4, 2011 :: Categories 仕事
Tags ::


デザイナーのFlex画面デザイン・コーディング vol.1 Flex Builder 3の場合

comments: 0

アクセス解析を見ると、Flexの画面デザインに関連したキーワードで検索されている方がいらっしゃるようなので、まとめてみました。
ただし、自己流です。エレガントじゃないです。

クライアントから画面デザインを依頼された後に、mxmlとcssでコーディングするところまでしてほしい、とのご依頼をいただいたのは今年の2月頃。
私はFlash使うことすら苦手で写真流すぐらいの簡単なムービーしか作れません。自分でASは書けません。のレベルです。

htmlに似た書式のmxmlという言語にcssでデザインする、というぐらいはちょっと調べればわかりましたが、オリジナルデザインの画面を具体的にどうやってコーディングしたらいいのか、ネットで何時間も探しました。
ボタンひとつを変更、とかじゃなくて、ほぼ全てのパーツをデフォルトスキンのhaloとは違うデザインに変えたかったのです。

当時のことはこの辺りに書いていますが、プログラマ向けの情報はそれなりに見つかるのですが、デザイナー向けの情報ってほんとに見つからないのです。
Adobeのデベロッパーセンターの内容は素人にはさっぱりわからんし。

で、結局、力技でやりました。


Posted by sponge design on 10/6, 2010 :: Categories 仕事
Tags ::


Flash Builder4で初仕事

comments: 0

今日から重い腰をあげて、ようやくFlash Builder4でのデザイン案件に取りかかった。

以前Flex3で納品した分の開発が、まだクライアント側では続いていて、納品した以外の全画面をこちらで手を入れさせていただくことになった。

ある程度動くようになっているプロジェクトを一式もらってきたのだが、もー何がどこにあるやら。
ファイル構造を確認するだけで小1時間。

とりあえず掲載コンテンツが少なそうなページから着手することにした。
4から新しくできたコンポーネントはレイアウト要素のプロパティの資料等がほとんど見つからないので、試行錯誤。
書いてみて確認して反映されなかったら消去、の繰り返し。

そして…… 背景出るはずなのにどーしても出ない。なぜ? と思ったら、cssファイルの汎用性を考えて書いていた部分がまるごと削除されていた…。
バックアップがあって良かった。


Posted by sponge design on 6/15, 2010 :: Categories 仕事
Tags ::


Flexの画面デザイン・コーディング

comments: 0

2月に、Flexの画面デザイン案件をいただいた。
当初、指定された画面のデザイン画像2枚分と、サイト全体のデザインルールのドキュメントを納品する予定だったのが、画面デザインにOKいただくと同時に、「やっぱりコーディングまでお願いしたい」とご依頼がありまして。

案件発生時にちょこちょこネットで調べてみていたときは、mxmlは書いたことないけれどxhtmlに近い感じだし、コード入力はある程度アプリが補完してくれるし、cssだし、でなんとかなるやろ、と思い、Flex Builder3の体験版をインストールしてトライ〜。

しかし甘かった。


Posted by sponge design on 4/14, 2010 :: Categories 仕事
Tags ::