今回はFlexの基礎、Canvasを使って自由なオブジェクトの配置と、CSSと、外部
ActionScriptファイルの読み込みについて。
Flash野郎なら常識らしい、Canvasというものがありまして、Java野郎にも懐かしい響きかもしれませんけども、Flex的にはこのCanvasでかこってあげると位置の指定ができるようになります。
x="0"とか、y="10"とかでCanvas内なら位置が指定できますので、自由な場所にボタンとかフォームとかを配置することができます。
ActionScriptで制御すっときは、buta1.x=10; とかね、そんな感じ、簡単だねぇ。
MXML
style.css
背景の色とかはスタイルシートで決めますのです。
これで文字の色とか、大きさとか、いろいろ指定すれば多い日も安心です。
MXML
script.as
script.asを外部ファイルとして読み込んだ場合です。
ボタンを押す度に、cntがインクリメントされてどんどん増えていきます。
bar.text = cnt.toString();
としているのは、barはLabelでString型なもんで、int型のcntをString型に変換してやる必要があるんですねぇ。
これならActionScriptが膨大になっても、スッキリちんちろりんでございます。
てな感じで簡単でした。アホみたいに簡単でした。
これでFlexの基本は大丈夫かもしれまん、知りません。
ググれば配列とかfor文とかいろいろでてくるんで、これでしばらくは遊べそうです。
次回は画像の表示と描画とキー入力についていろいろと、ゲーム作りの第一歩でございます。
ActionScriptファイルの読み込みについて。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="350" height="250">
<mx:Canvas height="100%" width="100%">
<mx:Button id="buta1" label="click me!" x="0" y="0" />
<mx:Button id="buta2" label="click me!" x="10" y="10" />
<mx:Button id="buta3" label="click me!" x="20" y="20" />
<mx:Button id="buta4" label="click me!" x="30" y="30" />
<mx:Button id="buta5" label="click me!" x="40" y="40" />
<mx:Button id="buta6" label="click me!" x="50" y="50" />
<mx:Button id="buta7" label="click me!" x="60" y="60" />
</mx:Canvas>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="350" height="250">
<mx:Canvas height="100%" width="100%">
<mx:Button id="buta1" label="click me!" x="0" y="0" />
<mx:Button id="buta2" label="click me!" x="10" y="10" />
<mx:Button id="buta3" label="click me!" x="20" y="20" />
<mx:Button id="buta4" label="click me!" x="30" y="30" />
<mx:Button id="buta5" label="click me!" x="40" y="40" />
<mx:Button id="buta6" label="click me!" x="50" y="50" />
<mx:Button id="buta7" label="click me!" x="60" y="60" />
</mx:Canvas>
</mx:Application>
Flash野郎なら常識らしい、Canvasというものがありまして、Java野郎にも懐かしい響きかもしれませんけども、Flex的にはこのCanvasでかこってあげると位置の指定ができるようになります。
x="0"とか、y="10"とかでCanvas内なら位置が指定できますので、自由な場所にボタンとかフォームとかを配置することができます。
ActionScriptで制御すっときは、buta1.x=10; とかね、そんな感じ、簡単だねぇ。
MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="350" height="250" styleName="kusobuta">
<mx:Style source="style.css" />
<mx:Button id="buta" label="click me!" />
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="350" height="250" styleName="kusobuta">
<mx:Style source="style.css" />
<mx:Button id="buta" label="click me!" />
</mx:Application>
style.css
.kusobuta
{
background-color : #ff0000;
}
{
background-color : #ff0000;
}
背景の色とかはスタイルシートで決めますのです。
これで文字の色とか、大きさとか、いろいろ指定すれば多い日も安心です。
MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/EmbeddingImages/index.html" layout="horizontal" width="350" height="250" styleName="kusobuta">
<mx:Style source="style.css" />
<mx:Script source="script.as" />
<mx:Button label="連打しまくり" click="counter();"/>
<mx:Label id="bar" text="0"/>
</mx:Application>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/EmbeddingImages/index.html" layout="horizontal" width="350" height="250" styleName="kusobuta">
<mx:Style source="style.css" />
<mx:Script source="script.as" />
<mx:Button label="連打しまくり" click="counter();"/>
<mx:Label id="bar" text="0"/>
</mx:Application>
script.as
private var cnt:int = 0;
private function counter():void {
cnt++;
bar.text = cnt.toString();
}
private function counter():void {
cnt++;
bar.text = cnt.toString();
}
script.asを外部ファイルとして読み込んだ場合です。
ボタンを押す度に、cntがインクリメントされてどんどん増えていきます。
bar.text = cnt.toString();
としているのは、barはLabelでString型なもんで、int型のcntをString型に変換してやる必要があるんですねぇ。
これならActionScriptが膨大になっても、スッキリちんちろりんでございます。
てな感じで簡単でした。アホみたいに簡単でした。
これでFlexの基本は大丈夫かもしれまん、知りません。
ググれば配列とかfor文とかいろいろでてくるんで、これでしばらくは遊べそうです。
次回は画像の表示と描画とキー入力についていろいろと、ゲーム作りの第一歩でございます。
Comment投稿
