2008年12月24日

MacのDockみたいな

ActionScriptで何となく作ったMacのDockのようなもの(動きのみ)。

FlashPlayer9以上が必要です。

実際のDocは横移動(拡大されたものの両隣付近のアイコンが少しずれる)もあるけど、 移動量を表す関数(数学的な意味で)が思いつかなかったので、今回はパス。 各オブジェクトのクリックイベントにリンクを持たせればサイトのメニュー代わりに使えるかもしれない。

実用っぽく書き直しました。こちら

ソースコードが見たい奇特な方は続きをどうぞ。

package {
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.utils.*;
	
	public class Main extends Sprite {
		const ICON_NUM:int = 6;
		const MEASURE = 100;
		
		public function Main() {
			var iconList:Array = new Array();
			
			// 台座
			var base:MovieClip = new MovieClip();
			base.graphics.beginFill(0x555555);
			base.graphics.drawRect(10, 85, 380, 30);
			base.graphics.endFill();
			stage.addChild(base);
			
			// アイコンのインスタンス化
			// アイコンを表すクラスはfla内で定義
			for(var i:int = 0; i < ICON_NUM; i++) {
				var classRef = getDefinitionByName('Icon' + i);
				var icon:MovieClip = new classRef();
				iconList.push(icon);
			}
			
			// アイコンの配置
			for(var i:int = 0; i < ICON_NUM; i++) {
				var icon:MovieClip = iconList[i];
				icon.x = i * 60 + 50;
				icon.y = 75;
				icon.addEventListener(Event.ENTER_FRAME, function(evt:Event) :void {
					// カーソルとアイコンの距離に応じて倍率を変える
					var scale:Number = (2 * MEASURE - Math.abs(evt.target.x - stage.mouseX)) / MEASURE;
					if(scale < 1.0) scale = 1.0;
					evt.target.scaleX = scale;
					evt.target.scaleY = scale;
					evt.target.y = 75 + (evt.target.height / 4) * (1.0 - scale);
				});
				stage.addChild(icon);
			}
		}
	}
}



同じカテゴリー(プログラミング)の記事画像
GoogleReaderを3ペイン表示にするスクリプトのα版
文字サイズを拡大縮小するスクリプト
電卓を表示するブックマークレット
Twitterで費やした時間を表示するスクリプト
ニコニコのタグをプレビューするスクリプト
ニコニコで広告を消すスクリプト
同じカテゴリー(プログラミング)の記事
 GoogleReaderを3ペイン表示にするスクリプトのα版 (2009-07-26 22:00)
 クリック動作を無効にするジョークブックマークレット (2009-07-19 23:52)
 文字サイズを拡大縮小するスクリプト (2009-07-12 18:09)
 ダブルクリックでスクロールするスクリプト (2009-07-05 14:22)
 電卓を表示するブックマークレット (2009-06-27 21:40)
 ごくごく一部の顔文字を絵文字に置き換えるスクリプト (2009-05-21 23:06)
Posted by Handle at 01:21│Comments(2)プログラミング
この記事へのコメント
こんにちは。
ちょうどAS3でのDocボタンを探してたらこちらにたどり着きました。
ソースも簡潔していて、早速参考にさせていただきました。
そこで、1つお伺いしたいのですが、この各ボタンにイベントリスナーなどで命令を与えたいときは、どうしたらよいでしょうか?
Posted by me at 2009年02月06日 18:22
> me さん

実用できるよう、手を加えてみました。
ちょっとコード量が増えてしまいましたが・・・。
よろしければ本文中の追記にあるリンクから辿ってください。
Posted by HandleHandle at 2009年02月07日 12:55
コメントフォーム
上の画像に書かれている文字を入力して下さい
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。