HYPEを触ってみた-MouseFollow

12月 6th, 2010 § 0 comments

昨日のFITC Tokyoのジョシュア・デイビス氏のセッションに触発されて、HYPE frameworkを触ってみました。
http://www.hypeframework.org/

あらかじめ用意しておいたRectクラス。

package {
	import flash.display.Sprite;
	
	public class Rect extends Sprite {
		public function Rect() {
			graphics.beginFill(0xddeeff);
			graphics.drawRect(-10, -10, 20, 20);
			graphics.endFill();
		}
	}
}

まずはマウスを追随させるMouseFollowクラスを試してみました。

This movie requires Flash Player 9

package  {
	import flash.display.Sprite;
	import hype.extended.behavior.MouseFollow;
	
	public class Hype extends Sprite {
		private var rect:Rect;
		
		public function Hype() {
			rect = new Rect();
			addChild(rect);
			
			//第1引数:ターゲットオブジェクト
			var behavior:MouseFollow = new MouseFollow(rect);
			behavior.start();
		}
		
	}
}

とっても簡単!

続いて、遅延のあるMouseFollowEaseクラス。

This movie requires Flash Player 9

package  {
	import flash.display.Sprite;
	import hype.extended.behavior.MouseFollowEase;
	
	public class Hype extends Sprite {
		private var rect:Rect;
		
		public function Hype() {
			rect = new Rect();
			addChild(rect);
			
			//第1引数:ターゲットオブジェクト
			//第2引数:イージングの値
			var behavior:MouseFollowEase = new MouseFollowEase(rect,0.2);
			behavior.start();
		}
		
	}
}

イージングの係数は0〜1の間で設定します。
0だと追随せず、1だと遅延しません。

続いてマウスを追い越すMouseFollowSpringクラス。

This movie requires Flash Player 9

package  {
	import flash.display.Sprite;
	import hype.extended.behavior.MouseFollowSpring;
	
	public class Hype extends Sprite {
		private var rect:Rect;
		
		public function Hype() {
			rect = new Rect();
			addChild(rect);
			
			//第1引数:ターゲットオブジェクト
			//第2引数:バネの係数
			//第3引数:イージングの係数
			var behavior:MouseFollowSpring = new MouseFollowSpring(rect,0.8,0.4);
			behavior.start();
		}
		
	}
}

バネの係数は0〜1の間で設定します。
0だと追い越さず、1だと振幅が縮まりません。

いずれの効果も2行で実現できちゃいます。
これだけでもちょっと楽ができますね。
デザイナーとしては嬉しいです。

Tagged ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


What's this?

You are currently reading HYPEを触ってみた-MouseFollow at msdf.

meta