Tweenerを使って一枚の画像を超シンプルにボタンにする方法

2009年01月06日 (火)
Tweet

Tweenerを使って一枚の画像を超シンプルにボタンにする方法

たまには簡単な Flash の話題を。初心者向けの内容です。

ActionScript2でも使えるTweenerライブラリを使って、一枚の画像をすっごく簡単に演出をつけてみました。

trick7さんのところにあった、『Tweener を使って「手を抜いて作ってる割にはそれっぽい」かつ「使いまわしがきく」ようなボタン』のようなものです。(参考)

画像クリックでFlashデモページが開きます。

マウスプレス時にも演出が加わっていると気持ちいいですよね。以下、具体的な実装方法です。

こんな感じにフレームアクションを書きます

// Tweenerライブラリをインポート
import caurina.transitions.*
import caurina.transitions.properties.*

// カラーショートカットを登録
ColorShortcuts.init()

// ボタン(btnというインスタンスがある前提)のロールオーバー
btn.onRollOver = function(){
     // _brightness が明るさ。0が基準で±1で設定します。
     // timeで0.5秒を設定してます。
     Tweener.addTween(this,{_brightness:0.4, time:0.5})
}
btn.onRollOut = function(){
	Tweener.addTween(this,{_brightness:0, time:0.5})
}

btn.onPress = function(){
	Tweener.addTween(this,{_brightness:-0.4, time:0.5})
}

btn.onRelease = function(){
	Tweener.addTween(this,{_brightness:0.4, time:0.5})
}