オンライン勉強会 Online.sg #8「Flex (with AdobeAIR)」

3回目の参加になりました。

第8回 テーマ「Flex (with AdobeAIR)」 - Online.sg

今回はFlex。Flashの類はMacromedia Flash4を買ってろくに触らずに放置して以来です。

Online.sgが始まる直前にFlexBuilder3の体験版を落とし始めたけどこれが全然落ちてこない。438MBとかでかいし。

ようやくインストールが終わったのは1つめの実習が終わるころでした。

実習その１　計算プログラム

一つ目の実習は、２つのテキストボックスに入れた数値の四則演算と剰余を求めるプログラム。

既に実習の時間は終わっていたのでid:kabiyがgithubに上げたコードをコピペして動かした。

githubが次々と更新されていく手早さは流石。デジタルネイティブ恐るべし。

calcプログラム

source:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Script>
		<![CDATA[
			private function calc():void{
				var ans:Number;
				switch(kigo.text){
					case "+":ans = Number(arg1.text) + Number(arg2.text); break;
					case "-":ans = Number(arg1.text) - Number(arg2.text); break;
					case "*":ans = Number(arg1.text) * Number(arg2.text); break;
					case "/":ans = Number(arg1.text) / Number(arg2.text); break;
					case "%":ans = Number(arg1.text) % Number(arg2.text); break;
				}
				answer.text = ans.toString()
			}
			]]>
	</mx:Script>
 
 
	<mx:TextInput id="arg1" x="150" y="50" width="40"/>
	<mx:TextInput id="arg2" x="250" y="50" width="40"/>
	<mx:Text text="=" x="300" y="50"/>
	<mx:Text id="answer" text="=" x="320" y="50"/>
	<mx:Button label="submit!" x="400" y="50" click="calc()"/>
 
 
	<mx:ComboBox id="kigo" x="200" y="50" width="50">
	<mx:ArrayCollection>
		<mx:String>+</mx:String>
		<mx:String>-</mx:String>
		<mx:String>*</mx:String>
		<mx:String>/</mx:String>
		<mx:String>%</mx:String>
	</mx:ArrayCollection>
	</mx:ComboBox>
	</mx:WindowedApplication>

実習その２　タイマープログラム

2つ目の実習はタイマー。

値をセットしてスタートするとカウントダウンするプログラム。



講師のid:itsuki_kosenの説明を聞きつつustの画面を見つつ書き写していく。

初めは動かなかったんだけど onTimerTick(event:TimerEvent) の event:TimerEvent を書き忘れていた。

id:kabiyのコードと見比べて付け足した。

ustから目コピーするのは解像度とスクロールの都合でなかなか難しい。

timerプログラム

source:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	horizontalAlign="center"
	verticalAlign="middle"
	creationComplete="onCreationComplete()">
	
	
	<mx:Script>
		<![CDATA[
			import mx.formatters.Formatter;
			import flash.utils.getTimer;
			
			private var timer:Timer;
			private var startTime:int;
			private var setTime:int;
			private const TIMER_INTERVAL:int = 10;
			
			private function onCreationComplete():void{
				timer = new Timer(TIMER_INTERVAL);
				timer.addEventListener(TimerEvent.TIMER, onTimerTick);
				time_label.text = "00:00";
			}
			private function onTimerTick(event:TimerEvent):void {
				var elasedTime:int = (getTimer() - startTime) / 1000;
				var dispTime:int = 60*setTime - elasedTime;
				
				var min:int = dispTime / 60;
				var sec:int = dispTime - 60*min;
					
				if(dispTime >= 60) {
					time_label.text = formatTime(min, sec);
				} else if(dispTime >= 0) {
					min = 0;
					time_label.text = formatTime(min, sec);
				} else {
					time_label.text = "00:00";
					timer.stop();
				}
			}
			
			private function formatTime(min:int, sec:int):String {
				var minString:String = "";
				var secString:String = "";
				
				if (min<10) {
					minString = "0"+String(min);
				} else {
					minString = String(min);
				}
				
				if (sec<10) {
					secString = "0"+String(sec);
				} else {
					secString = String(sec);
				}
				
				return minString.concat(":").concat(secString);
			}
			
			private function onStartButtonClick():void {
				startTime = getTimer();
				timer.start();
			}
			private function onStopButtonClick():void {
				timer.stop();
			}
			private function onResetButtonClick():void {
				timer.stop();
				time_label.text = "00:00";
			}
			private function onSetButtonClick():void {
				timer.stop();
				if(int(times.text) < 10) {
					times.text = "0" + times.text;
				} else;
				
				time_label.text = times.text.concat(":").concat("00");
				//分単位の値を格納しておく
				setTime = int(times.text);
			}
		]]>
	</mx:Script>
	<mx:Label text="00:00" id="time_label" fontSize="100"/>
	
	
	<mx:ApplicationControlBar width="640" dock="true">
		<mx:Button label="start" id="start" width="100" click="onStartButtonClick()" />
		<mx:Button label="stop" id="stop" width="100" click="onStopButtonClick()"/>
		<mx:Button label="reset" id="reset" width="100" click="onResetButtonClick()"/>
		<mx:TextInput width="50" id="times" />
		<mx:Button label="set" width="100" click="onSetButtonClick()"/>
	</mx:ApplicationControlBar>
	
</mx:WindowedApplication>

まとめ

• 初めてのActionScript
• EcripseベースのIDEでコード補完もガンガン効くので意外と書けるかも
• でもFlexBuilderって無くなっちゃうの？
• オフライン組はまったりしてた
• まったり進んだ分実習の時間が楽しめた

元々オンライン発でLingrメインでやってることもあって、Online.sg初のオフライン＋オンラインになった今回もLingrと同期して進められたのは良かったんじゃないでしょうか。

講師のid:itsuki_kosen、オンライン／オフラインで参加された皆様おつかれさまでした。