Author Archives: zonow - Page 2

FlashBuilder4でAIR開発するとき

Posted by on 2010年5月12日 1 comment

FlashBuilder4でAIRアプリを作ってますが、Sparkコンポーネントで今までと
使い勝手が違うところが沢山ありました。

たいていの事は、try&errorでなんとか解決してきましたが
ウィンドウの透過でちと問題が出てきました

mxだけの時は　[WindowedApplication] -> [Application]にして背景透過

1
2

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="400" height="300" backgroundAlpha="0.0">

と
app.xmlの以下の編集

1
2
3

<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>

以上で透過できたが、今回ちょっと違う

だと背景透過の backgroundAlphaが効かない。。。
調べてみると、そもそも　s|Applicationには backgroundAlphaがプロパティとして用意されていない？
デザインモードにしてプロパティを見ると、はっきりと背景の透過設定があるが、FlashBuilder4のヘルプサイトを見ると同s|Applicationには無いみたい。。。　？

もうちょっと調べる必要がある。。。　なんか見落としてるのかな〜　だれか教えて

画面解像度の取得

Posted by on 2010年5月7日 No comments

AdobeAIRアプリを作るとき、起動時にNativeWindowをモニタの中央に表示したいと気がある
で、NativeWindowのWidth,Heightとモニタの解像度があれば動的にレイアウト出来る

モニタの解像度を取得するスクリプトは以下

1
2
3

import flash.system.Capability;
var w:int = Capabilities.screenResolutionX; //モニタの横幅
var h:int = Capabilities.screenResolutionY; //モニタの縦幅

問い合わせ頂いたユーザ様各位

Posted by on 2010年4月12日 No comments

日頃より当サイトをご利用頂きありがとうございます。

私の覚書のために始めたサイトではありますが、最近では技術的な質問や講習会に招かれることも多くなり、このサイトの役目が変化してきていることを感じています。

で、ここ数カ月の間に、有料で良いから講習会をして欲しいとの要望が5件立て続けにあり試しに先週末行って来ました。ただし今回は無料で（交通費など実費は頂く方向で）。。

今後もそこいらの本に書いてある程度のことは実費意外は無料でおこない、本に書いてないことなんかは有料で受けつることにしました。問い合わせはこちら

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

FlashDevelopでAIRインストーラを作成する方法

Posted by on 2010年3月23日 No comments

FlashDevelopのインストール　・・・　省略
FlashDevelopの基本的な使い方　・・・　省略
FlashDevelopでAIRインストーラ書き出し

FlashDevelopでAIRアプリを開発する場合に、以下の２種類のプロジェクトのどちらかをとりあえず選びます。
まあ、ここまで

  • FlashCS3,4ベースで開発されてきた人はAIR AS3 Project
  • FlexBuilder3で開発されてきた人はAIR Flex 3 Project

ぐらいでざっくり選びます。あくまで開発完了後のAIRファイル書き出しが目的ですから。。

で、開発完了後にプロジェクトのファイルを見てみるとFlexやCS4ではみられない

  • CreateCertificate.bat
  • PackageApplication.bat

というファイルがありますので、これを順番にDoubleClickします。

CreateCertificate.batをクリックするとプロンプト立ち上がります。
すると「With password:fd」ってのが２行目あたりに出てくるので テスト用の証明書のパスワードは「fd」って分かります。
別の証明書を作る方法もありますが、ここはこのまま

続いてPackageApplication.batをクリックするとパスワードもとめられるので行儀よく「fd」と入力して キーボードのEnterを

これでプロジェクト内に「air」というフォルダが追加されてフォルダ内にAIRインストーラが入っていれば書き出し成功

そんな感じで

OS判定

Posted by on 2010年3月17日 No comments

OSによって処理を変えたい事ってたまにあると思います。
私は、AIRでよくある。。

で、覚書

1
2
3
4
5
6
7

import flash.system.Capabilities;
 
if (Capabilities.os.substring(0,3)=="Mac"){
	//ここにMacOSだった場合の処理
}else if(Capabilities.os.substring(0,3)=="Win"){
	//ここにWinだった場合の処理
}

そんな感じで

ドキュメントプロパティ設定

Posted by on 2010年3月12日 No comments

FlashCS3, CS4で開発していた人にとってStage周りの表示を定義する時は

プロパティの[サイズ]にある[ドキュメントプロパティ]でステージの大きさ

や色を決めていたはず。。これ、以下のようにドキュメントプロパティ設定ができます。

［SWF(width=”160″,height=”300″,frameRate=”30″,backgroundColor=”#FFFFFF”)］

DataGridの表示設定

Posted by on 2010年3月9日 No comments

DataGridコンポーネントを初めて使ったとき、dataProviderにArrayCollection突っ込みゃいいのね。。とおもって
Publishすると、FlashCS4の場合はなんだかカラムの並びが変だったり。。　で、プロパティ調べると色々便利なプロパティ
あったのでした。

//データグリッドのサイズ（他のコンポーネントにもありますよ）
dg.setSize(400, 300);
 
//ラベルの並び順指定
dg.columns = ["Name", "Bats", "Throws", "Year", "Home"];
 
//各カラムの幅指定(これって、autoSizeってないのかな？知ってたら誰かおしえてw)
dg.columns[0].width = 100;
dg.columns[1].width = 50;
dg.columns[2].width = 50;
dg.columns[3].width = 40;
dg.columns[4].width = 100;
 
//DataGridの複数選択は「allowMultipleSelection」を「true」にする
//Shift[win][mac]
dg.allowMultipleSelection = true;
 
//連続していない複数選択
ctrl[win] command+A[mac]
//ダブルクリックを有効
dg.doubleClickEnabled = true;

FileFilter

Posted by on 2010年3月8日 No comments

browseメソッドの引数にFileFilterという配列をわたすと、指定した拡張子以外のファイルの選択が不可に。
以下は、[png,jpg,gif,jpeg]以外は選択できないFileFilter

Read more »

AdobeAIRのファイル操作

Posted by on 2010年3月8日 1 comment

AdobeAIR1.5では、制限はありますが任意のディレクトリへのデータ保存、
任意のディレクトリからのデータ読み込みが可能です。（AdobeAIR2.0では
AIR1.5で制限されていた部分のアクセスが可能となります。）

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

 File.applicationStorageDirectory 	//データ保存用ディレクトリ
 File.applicationDirectory  	 	//インストールが行われたディレクトリ
 File.desktopDirectory 		 	//デスクトップのディレクトリ
 File.documentsDirectory 	 	//マイドキュメントディレクトリ
 File.userDirectory 	 	 	//ユーザーごとのホームディレクトリ
 
 
//Fileオブジェクトの以下のメソッドが使えます。
 [対象ファイル].moveTo() 	 	//移動
 [対象ファイル].copyTo() 	 	//コピー
 [対象ファイル].deleteDirectory() 	//ディレクトリ削除
 [対象ファイル].deleteFile()   		//ファイル削除
 [対象ファイル].moveToTrash()          　//ごみ箱に移動
 [対象ファイル].exists                  //ファイルが存在するか確認
 [対象ファイル].getDirectoryListing()   //ファイル一覧の取得