Flash Builder4.5でやる少しデザイン寄りの事

■スキンについて

スキンを活用しないとみんな同じようなインターフェイスになります。

デザインをするためにはスキンを使いましょう（以上 flexbuilder4ガイドより）

 

■..でスキンって何か

MXMLで作成でき、読み書きが簡単であると共に、ツールによるアクセスも容易なもの

デザイン

 

■どうやってつくるのか？

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_02.html

FXGというマークアップ言語を使う

 

流れ的には（ボタンの場合）：

 ① 単純なボタンスキン作成

 ② ボタングラフィックスのボタンスキンへの変換

 ③ Buttonコンポーネントに関連付ける

 

① 単純なボタンスキン作成

Sample1.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark">

    <s:Group verticalCenter="0" horizontalCenter="0">

        <s:Rect id="rect" radiusX="4" radiusY="4" top="0" 

           right="0" bottom="0" left="0">

           <s:fill>

               <s:SolidColor color="0x77CC22" />

           </s:fill>

           <s:stroke>

               <s:SolidColorStroke color="0x131313" weight="2"/>

           </s:stroke>

        </s:Rect>

 

        <s:SimpleText text="Button!" color="0x131313" 

                textAlign="center" verticalAlign="middle"

                horizontalCenter="0" verticalCenter="1"

                left="12" right="12" top="6" bottom="6"

        />

    </s:Group>

</s:Application>

 

② ボタングラフィックスのボタンスキンへの変換

ButtonSkin1.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">

 

    <!-- states -->

    <s:states>

        <s:State name="up" />

        <s:State name="over" />

        <s:State name="down" />

        <s:State name="disabled" />

    </s:states>

 

    <!-- border and fill -->

    <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">

        <s:fill>

           <s:SolidColor color="0x77CC22" />

        </s:fill>

        <s:stroke>

           <s:SolidColorStroke color="0x131313" weight="2"/>

        </s:stroke>

    </s:Rect>

 

    <!-- text -->

    <s:SimpleText text="Button!" color="0x131313" 

            textAlign="center" verticalAlign="middle"

            horizontalCenter="0" verticalCenter="1"

            left="12" right="12" top="6" bottom="6"

    />

</s:Skin>

 

 ③ Buttonコンポーネントに関連付ける

これは2つ方法あり。skinClassというCSSスタイルを指定するか mxmlでインラインに設定次の例は mxmlへのインライン指定

Sample2.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">

    <s:Button verticalCenter="0" horizontalCenter="0" skinClass="ButtonSkin1" 

             click="trace('I\'ve been clicked!')" focusIn="trace('focus...on me?')" />

</s:Application>

 

■スキンステート

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_03.html

 

例えば、Buttonコンポーネントには、up、over、down、disabledの4つの基本的スキンステートがあります。

各ステートごとに異なるデザインを設定できます。

 

ButtonSkin2.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5">

 

    <!-- states -->

    <s:states>

        <s:State name="up" />

        <s:State name="over" />

        <s:State name="down" />

        <s:State name="disabled" />

    </s:states>

 

    <!-- dropshadow for the down state only -->

    <s:Rect radiusX="4" radiusY="4" top="0" right="0" bottom="0" 

        left="0" includeIn="down">

        <s:fill>

           <s:SolidColor color="0"/>

        </s:fill>

        <s:filters>

           <s:DropShadowFilter knockout="true" blurX="5" blurY="5" 

           alpha="0.32" distance="2" />   

        </s:filters>

    </s:Rect>

 

    <!-- border and fill -->

    <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" 

         bottom="0" left="0">

        <s:fill>

           <s:SolidColor color="0x77CC22" color.over="0x92D64E" 

           color.down="0x67A41D"/>

        </s:fill>

        <s:stroke>

           <s:SolidColorStroke color="0x131313" weight="2"/>

        </s:stroke>

    </s:Rect>

 

    <!-- highlight on top -->

    <s:Rect radiusX="4" radiusY="4" top="2" right="2" left="2" 

        height="50%">

        <s:fill>

           <s:LinearGradient rotation="90">

               <s:GradientEntry color="0xFFFFFF" alpha=".5"/>

               <s:GradientEntry color="0xFFFFFF" alpha=".1"/>

           </s:LinearGradient>

        </s:fill>

    </s:Rect>

 

    <!-- text -->

    <s:SimpleText text="Button!" color="0x131313" 

            textAlign="center"

            verticalAlign="middle"

            horizontalCenter="0" verticalCenter="1"

            left="12" right="12" top="6" bottom="6" 

     />

</s:Skin>

 

■スキンパーツ

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_04.html

 

Sparkのスキン可能コンポーネントには、コンポーネントの定義に使用できるスキンパーツのセットがあります。スクロールバーの場合、加算ボタン、減算ボタン、トラック、サムの4つのスキンパーツがあります。ボタンの場合、スキンパーツはlabelElementの1つだけです。

 

■スキン可能コンポーネントの作成

http://www.adobe.com/jp/devnet/flex/articles/flex4_skinning_05.html

 

------

ネタ元：Adobeのサイト↓

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

 

Posted via email from cohiro's posterous

Flash Builder4.5でできる事を調べる

■できる事

Google AndroidとApple iOSの両方のデバイスをサポートするアプリ開発。

 

■Adobeの想定しているワークフロー

Flash Builder(開発）→　Flash Catalyst（インタラクションデザイナー）→　Photoshop/Illustrator（ビジュアルデザイナー）

 

手順：

①　Flash Builderでスキン適用可能なコンンポーネントの作成

②　Flash Catalystでスキンを変更してデザイン

 

開発とデザインを兼務する人向けには：

Flash Builderでプロジェクトを選択して「Edit in Flash Catalyst（Flash Catalystで編集）」を選択し、Flash Catalystで必要なデザインの変更できる。

 

■パッケージ、クラス、forループ、whileループ、switchブロックの定義など、すぐに使用できる100種類を超える組み込みテンプレートが提供。

カスタマイズもでき他のマシンにエクスポートもできるので、メンバー全員がプロジェクト用に統一されたテンプレートのセットを使って作業できる。

 

■サーバーサイド開発との連携

FlexとPHPを使ったWebアプリケーションやモバイルアプリケーションを構築する開発プロセスを合理化

------------------------------

元ネタはAdobeのサイトです↓

http://www.adobe.com/jp/devnet/flashbuilder/articles/whatsnew-flashbuilder-45...

Posted via email from cohiro's posterous

仕事モードオン！

この年から、そして子育て中のこの状況の中で、新たに技術を習得するつもりの自分が好きで嫌いだ。

 

Posted via email from cohiro's posterous

暑くてエスニックな気分で、ランチはタイ料理とする。

RAKU THAI PHENG ROI というお店。隣が４人の女子グループ！
なんか羨ましいなぁ。

それにしても辛っ

Posted via email from cohiro's posterous

浪江のショッピングセンターサンプラザとハンバーグとおじいちゃん

私の大好きなおじいちゃんは、津島という福島の山の上の方に住んでいました。
おじいちゃんは、お酒が好きで陽気で昔話の上手な子供にとっては最高の人でした。

先ほど寝るときに息子が「暑いから何もかけないで寝る」と言うので「お腹だけでいいからかけて寝なさい」と自分で言ってその津島のおじいちゃんを思い出しました。

おじいちゃんは、いつもなんだかいい方法を思いついて私に教えてくれたのですが、その内の一つが「寝しなが暑くても、冷えてきた時の為お腹だけには布団をかけておく」というものでした。
兎に角布団をかけて寝ろ、という母親や叔母に「嫌だ」と言いつづける言うことを聞かない困った子供に「こんなもんでいいんじゃない」と悪戯っぽく笑って隣に居てくれるような人でした。

私の小学生の頃の夏休みと言うと、お盆の頃から夏休みの終わりまでの結構長い間中津島で過ごしていました。
今思えば、うちは商売をしていて両親共忙しかったので、体よく預けられていただけかもしれません。
最初の内は裏山でキツネを見つけたり、トンボをおいかけたりして田舎を楽しんでいるのですが、その内そんなものにも飽きて「つまんないなぁー」となってきはじめ、その絶妙なタイミングでおじいちゃんは「おい、ハンパーク食べにいくか？」とさそってくるのです。（おじいちゃんはいくら違うと言っても、ハンバーグをハンパークと呼んでいました）

津島の周りにはハンバーグなんて洒落たものを出すお店はないので、バスで一時間以上グルグルと山道を下って、浪江駅の辺りまでおりて行き、店舗がいくつか集まっているショッピングモールの中のレストランに連れて行ってくれました。

小さかったし、30年も前の話です。よく連れて行ってくれたあのショッピングモールが具体的にどこで、なんていう名前だったのか、わかりませんでしたが、ただ行き帰りに使った浪江駅のそばだって事だけはわかっていました。

浪江駅ってもっと海沿いだったよね。あのショッピングモールはどこでなんていう名前だったんだろう、とgoogle mapで探してみました。

「ショッピングセンター　サンプラザ」

このお店のページを検索し、会社の設立をみたら私の生まれる前からやってる。ここだ間違いない。
また、近所でお店を再オープンさせ、仮設住宅に物資を納品したりしているようだ。

どうか、福島で暮らす人たちにこれ以上悪いことがおこりませんように。
福島で事業をしている会社と従業員が希望を持って、存続していけますように。
どうか、おじいちゃん、守ってください。

Posted via email from cohiro's posterous