Tag Archives: FlexBuilder3

Flex + CSS

Posted by on 2010年3月25日 1 comment

Flex+CSSで、デザインの自由度ってどの程度ある？

以前は、覚えるの面倒っていうのと 全部ActionScriptでコーディングすることにこだわっていたので実際使ったことはなかった。

が、自チームで人が増えたこともあり 高価なソフトウェアよりもFlashDevelopでいいんじゃない？的な声も上がり。。　どの程度使えるかを検証。　まだまだ途中ですが。。　　結構つかえるんでないかい？

ということで、まとめ書き
Flex + CSSということで、デザイン面はすべてCSSで行うルール

main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" viewSourceURL="srcview/index.html" width="800" height="400">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>
    <mx:Style source="main.css" />
    <mx:Panel title="ボタン色々 スタイルシートでモゴモゴ" layout="vertical" height="100">
        <mx:HBox horizontalGap="10" verticalAlign="middle">
            <mx:Button id="defaultButton" color="0x323232" label="普通のボタン" click="{Alert.show('普通のボタン　もごもご');}"  />
            <mx:Button styleName="icon" id="iconButton" label="アイコン付きボタン" click="{Alert.show('アイコン付きボタン　もごもご');}" />
            <mx:Button styleName="skinned" id="skinnedButton" label="スキンボタン" click="{Alert.show('スキンボタン　もごもご');}"  />
            <mx:Button styleName="customBTN" id="customButton" label="グラデ角丸ボタン" click="{Alert.show('グラデ角丸ボタン　もごもご');}"/>
            <mx:Button styleName="customBTN" id="customButton2" label="恭平" click="{Alert.show('こずえちゃんに　もごもご');}"/>
        </mx:HBox>
    </mx:Panel>
</mx:WindowedApplication>

main.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

/* CSS file */
 
WindowedApplication {
	verticalAlign: middle;
	horizontalAlign: center;
	layout: horizontal;
	backgroundColor: #000000;
}
 
Panel {
	color: #ffffff;
	borderAlpha: 0.15;
    paddingTop: 10;
    paddingRight: 10;
    paddingBottom: 10;
    paddingLeft: 10;
    horizontalAlign: center;	
}
 
Button {
	color: #000000;
	fontWeight: normal;
	cornerRadius: 2;
}
 
.sample1 {
	fillColors: #FFFFFF,#666666;
	fillAlphas: 1.0,0.5;
	highlightAlphas: 1.0,0.1;
	focusAlpha: 0.2;
	textSelectedColor: #000000;
}
 
.icon {
	icon: Embed(source='assets/flex_icon.png');
	downIcon: Embed(source='assets/flex_icon_dwn.png');
	color: #323232; 
}
 
 
.skinned {
	upSkin: Embed(source='assets/btn_up.png');
	overSkin: Embed(source='assets/btn_over.png');
	downSkin: Embed(source='assets/btn_down.png');
	focusSkin: Embed(source='assets/btn_focus.png');
	disabledSkin: Embed(source='assets/btn_disabled.png');
	color: 0x323232;
	textRollOverColor: #ffffff;
	textSelectedColor: #ffffff;
	paddingLeft: 20;
	color: #323232;
}
 
.customBTN {
	fontStyle:italic;
	fontWeight:normal;
	cornerRadius: 12;
	color: #ffffff;
	fillColors: #55C0FF,#0050AA;
	fillAlphas: 1.0,1.0;
	highlightAlphas: 1.0,0.2;
	focusAlpha: 0.2;
	textRollOverColor: #ffffff;
	textSelectedColor: #55C0FF;
	top: 100;
}

とここまで出来る。。。　すばらしい　Flex