ホーム > 2008 > 9月

as3.0:Adobe AIR Galleryに時計を公開しました

以前の記事AS3.0:AIRで時計を作成してみましたで作成したAIRをカスタマイズして
Adobe AIR Galleryに投稿してみました。
air_gallery
カスタマイズはタスクトレイ表示と全画面表示部分です。
よかったらダウンロードしてみてください。
今度は以前にJSで作成した時計をAIRにしてみようと思います。

2009/09/26追記
サーバー移転を行いましたのでAIRファイルの置き場が変更しております。
ダウンロードはこちらのページから行ってください。

Photoshop:カスタムパターン

更新ちょっと間が空いてしまいました。
photoshopでブラシやパターンを作るのは面白いです。
最近作ってみたパターン
photoshopで適度なサイズで新規PSD作成

作ったカスタムシェイプや既存のシェイプを使って規則的に並べていきます
(このときグリッドを10pxぐらいの幅で表示させとくと便利です)

ある程度規則的に並べたら欲しいサイズで微調整
patern_sample01
上メニュー>編集>パターンを定義 でパターン化する

[ Sample ]

patern_sample02.jpg
パターン化するといろいろ便利です。

AS3.0:Bitmap描画サンプル

Bitmap/BitmapDataを使ったスプレーペイント描画サンプル
カラーはランダムで変更

[ Sample ]

[ Source : Sample09.as ]
package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.filters.BlurFilter;
	import flash.filters.DropShadowFilter;
	import flash.text.TextField;

	/**
	* 2008.09
	* SprayPaint
	*/
	public class Sample09 extends Sprite
	{
		private var oyaji:Oyaji;
		private var canvas:BitmapData;
		private var color:uint;
		private var size:Number = 50;
		//密度設定
		private var density:Number = 100;
		private var text:TextField;
		private var _messege:String = "クリックでペイント";

		public function Sample09()
		{
			init();
		}
		private function init():void {
			//new BitmapData(幅:Number,高さ:Number,透明度あり/なし:Boolean,塗色:Number)
			//透明度がtrueの場合32ビットカラーを保持、カラー形式0xAARRGGBB
			//stage.stageWidth, stage.stageHeightでステージサイズ分のインスタンスを作成
			canvas = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0x00000000);
			var bmp:Bitmap = new Bitmap(canvas);
			//new BlurFilter(ぼかしX,ぼかしY,品質)
			bmp.filters =  [new BlurFilter(2, 2, 1)];
			addChild(bmp);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onMousedown);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseup);

			//text
			text = new TextField;
			stage.addChild(text)
			text.x = 10;
			text.y = stage.height-+20;
			text.width = 200;
			text.height = 20;
			text.selectable = false;
			text.textColor = 0x666666;
			text.text = _messege;
		}

		private function onMousedown(event:MouseEvent):void {
			//ランダムなカラーの保持
			//0xffffff で24ビットカラーを計算
			//0xff000000 を加えてアルファチャンネルを不透明に
			color = Math.random() * 0xffffff + 0xff000000;
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onMouseup(event:MouseEvent):void {
			removeEventListener(Event.ENTER_FRAME, onEnterFrame);
		}
		private function onEnterFrame(event:Event):void {
			for (var i:int = 0; i < density; i++){
				var angle:Number = Math.random() * Math.PI * 2;
				var radius:Number = Math.random() * size;
				var xpos:Number = mouseX + Math.cos(angle) * radius;
				var ypos:Number = mouseY + Math.sin(angle) * radius;
				canvas.setPixel32(xpos, ypos, color);
			}
		}

	}

}

AS3.0:AIRで時計を作成してみました

前記事as3.0:デジタル時計を作ってみましたで作った時計をAirにしてみました。
まずAIR の実行環境を整えます。
AdobeからまずAIRをインストール。

私の作成環境はFlash CS3ですのでFlash CS3用のアップデータをインストールします。

Flash CS3を開きAIRにしたいFlaファイルを開きます。
上部「コマンド」メニュー>「AIR – AIRファイルを作成」でFlaファイルをAIRファイルにします。
air_sample01

AIRファイルに変換すると「AIR – アプリケーションとインストーラーの設定」画面が出てきます。
作成物の情報などの基本情報を入力します。またアイコンを作成してある場合はアイコン画像も指定します。
私はpngでアイコンファイルを作成しました。今度もうちょっと凝りたいなぁ。
MacでもpngファイルでOKみたいなのでアイコン作成はほかのGadgetに比べるとらくちん。

できたサンプルは以下です。

[ Sample ]

air_sample04
air_sample03

[ インストーラー ]

MolabClock.air
AIR初期のままだと画面を動かすこともできないのでAIR用にASを足しました。

[ Source : ClockMain_air.as ]
package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.ui.Mouse;

	/**
	* 2008.09
	* lineToメソッド/moveToメソッドを使用した描画APIサンプル
	*/
	public class Sample06DrawApp extends MovieClip
	{
		private var _mc:MovieClip;
		private var color:uint;

		public function Sample06DrawApp()
		{
			init();
		}
		private function init():void {
			//描画呼び出し
			Drawing();

			//ClearBtn
			_mc = clear_mc;
			_mc.buttonMode = true;
			_mc.addEventListener(MouseEvent.MOUSE_DOWN, onClear);
		}
		private function Drawing():void{
			color = Math.random() * 0xffffff;
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
		}
		private function onDown(event:MouseEvent):void{
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
		}
		private function onUp(event:MouseEvent):void{
			color = Math.random() * 0xffffff;
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
		}
		private function onMove(event:MouseEvent):void{
			//1pxのline,color
			graphics.lineStyle(1,color);
			graphics.lineTo(mouseX , mouseY);
		}
		private function onClear(event:MouseEvent) {
			graphics.clear();
			Drawing();
		}

	}

}

あと、右クリックメニューを足したりタスクトレイなんかにも入れたい気持ち・・・
もうちょっと調べて今度アップデートをします。

2008/09/25追記:タスクトレイ表示機能・全画面表示機能を追加してアップデートしました

as3.0:描画サンプル

lineToメソッド/moveToメソッドを使用した描画サンプル
線のカラーはランダムで変更
クリアボタンで描画をクリア

[ Sample ]

[ Source : Sample06DrawApp.as ]
package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.ui.Mouse;

	/**
	* 2008.09
	* lineToメソッド/moveToメソッドを使用した描画APIサンプル
	*/
	public class Sample06DrawApp extends MovieClip
	{
		private var _mc:MovieClip;
		private var color:uint;

		public function Sample06DrawApp()
		{
			init();
		}
		private function init():void {
			//描画呼び出し
			Drawing();

			//ClearBtn
			_mc = clear_mc;
			_mc.buttonMode = true;
			_mc.addEventListener(MouseEvent.MOUSE_DOWN, onClear);
		}
		private function Drawing():void{
			color = Math.random() * 0xffffff;
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
		}
		private function onDown(event:MouseEvent):void{
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);
		}
		private function onUp(event:MouseEvent):void{
			color = Math.random() * 0xffffff;
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
		}
		private function onMove(event:MouseEvent):void{
			//1pxのline,color
			graphics.lineStyle(1,color);
			graphics.lineTo(mouseX , mouseY);
		}
		private function onClear(event:MouseEvent) {
			graphics.clear();
			Drawing();
		}

	}

}

これだと一個欠点あり。
描画スタートがstage 0 ,0 からしか始まらない。。。
今度修正の必要あり。

as3.0:デジタル時計を作ってみました

trick7.com blogさんのエントリ Flashで時計作る時に – 「TeraClock」ライブラリ作りました を拝見。
FLash as3.0で簡単に時計が作れるという記事
おーこれはすごい便利!!と思いこのライブラリを早速使わせてもらいました。
記事通り同フォルダに「src」フォルダを作成TortoiseSVNで「TeraClock.as」をダウンロード。ひとまず記事のサンプル通りに作成

[ Sample ]

[ Source : ClockSample1.as ]
package
{
	import flash.display.Sprite;
	import com.trick7.utils.TeraClock;
	import flash.events.Event;
	import flash.text.TextField;

	/**
	* 2008.09
	*/
	public class ClockSample1 extends Sprite
	{
		private var clock:TeraClock = new TeraClock();
		private var text:TextField;
		private var _messege:String;

		public function ClockSample1()
		{
				clock = new TeraClock();
				clock.addEventListener(TeraClock.SECONDS_CHANGED, secondsListener);

				//text
				text = new TextField;
				stage.addChild(text)
				text.x = stage.width/2;
				text.y = stage.height/2-10;
				text.width = 200;
				text.height = 20;
				text.selectable = false;
				text.textColor = 0xffffff;
			}
			private function secondsListener(event:Event):void {
				_messege = String("現在:" +clock.hours + ":" + clock.minutes + ":" + clock.seconds + " です。");
				text.text = _messege;
			}
		}
}

trick7.com blog さんの記事をみてみると

時・分・秒の各値は、(TeraClockインスタンス名).seconds とかで取得できます。秒の値に応じてオブジェクトのサイズ変形とかするときはこっちですね。
一方、デジタル数字で表示させたい時は、たとえば5秒のときは「05」にしたいですよね。そういうときは2桁モードとして、(TeraClockインスタンス名).seconds2ってやると常に2桁になるようにしてあります。

と書いてありました。
ということは「clock.hours」「clock.minutes」「clock.seconds」に「2」をつけるだけで
わざわざ「0」を足す処理をしなくてもOKということですね。
これもうれしいかぎり。
あとは表現。ということで
早速AS2.0で以前に作成したデジタル時計をAS3.0に直してみました

[ Sample ]

[ Source : ClockMain.as ]
package
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import com.trick7.utils.TeraClock;
	import flash.events.Event;
	import flash.text.TextField;

	/**
	* 2008.09
	* @author Molab.
	* AS3.0 Clock
	*/
	public class ClockMain extends MovieClip
	{
		private var clock:TeraClock = new TeraClock();
		private var text:TextField;
		private var _messege:String;
		private var centerX:Number = stage.stageWidth / 2;
		private var centerY:Number = stage.stageHeight / 2;
		private var _mc:MovieClip;

		public function ClockMain()
		{
			//MC
			var _mc:ClockSample2 = new ClockSample2(mc);
			mc.x = centerX+mc.x/2;
			mc.y = centerY+mc.y/2;

			//Time
			clock = new TeraClock();
			clock.addEventListener(TeraClock.SECONDS_CHANGED, clockListener);

			//TextField
			text = new TextField;
			stage.addChild(text);
			text.x = 10;
			text.y = 10;
			text.width = 200;
			text.height = 20;
			text.selectable = false;
			text.textColor = 0xffffff;
		}

		//Clock
		private function clockListener(event:Event):void {
			_messege = String(clock.hours2 + ":" + clock.minutes2 + ":" + clock.seconds2);
			text.text = _messege;

			var time:String = String(clock.hours2 + clock.minutes2 + clock.seconds2);
			var count:Number;
			var i:Number;
			for (i = 1; i <= 6; i++) {
				count = Number(time.substr(i-1, 1));
				if(count==0) mc["time"+i].gotoAndStop(count);
				else mc["time" + i].gotoAndStop(count + 1);
			}
		}
	}
}

こんな感じになりました。
このASファイルワールドタイムも取得できるのでかなりステキですね。
AS3.0で初の作成物になりました(´∀`*)
別クラスを作ったんだけどいらなかったかな~
ひとまずサンプルなのでよしとします。今度差し替えます。
なれるとAS3.0のほうがエラーを教えてくれるし文系人間の私でも書き方もスマートかも。。
せっかくだから今度はこの時計をAIRにパッケージしてみようと思う。

Page 1 of 212

About

mooco
[mooco]

東京を中心にWebデザイナーとして活動しています。

趣味は愛猫と遊ぶこと。 web周りのあれこれで遊ぶことです。

Search

Categories