Tweenでカスタムeasing
簡単なアニメーションなら、手軽なTweenコンポーネントが便利。easingのカスタマイズ方法も交えて。
Tweenコンポーネント
例えば↑こんな感じのメニューを作る場合。
onEnterFrameを使ってアニメーションを作りこむよりも、Tweenコンポーネントを使うとラクです。
サンプルのメニューバーのMovieClipにリンクしたクラスは、
↓たったコレだけ。
import mx.transitions.Tween;
import mx.transitions.easing.*;
dynamic class Menu extends MovieClip{
var twn:Tween;
function Menu(){
var _menuObj = this;//わかりやすいように・・
//_menuObj._x を -160から-30に、30フレームで移動する。
//ただし、イージングに Bounce.easeOutを使いなさい。
twn = new Tween(_menuObj, "_x", Bounce.easeOut,
-160, -30, 30, false);
twn.stop();
twn.onMotionStarted=function(){//１回クリックしたあと、
_menuObj.onRelease=function(){//onReleaseを入れ替える。
_menuObj.twn.yoyo(); //逆再生を繰り返す。
}
}
_menuObj.onRelease=function(){ //一番最初だけstart()をコールする。
twn.start();
}
}
}
import mx.transitions.easing.*;
dynamic class Menu extends MovieClip{
var twn:Tween;
function Menu(){
var _menuObj = this;//わかりやすいように・・
//_menuObj._x を -160から-30に、30フレームで移動する。
//ただし、イージングに Bounce.easeOutを使いなさい。
twn = new Tween(_menuObj, "_x", Bounce.easeOut,
-160, -30, 30, false);
twn.stop();
twn.onMotionStarted=function(){//１回クリックしたあと、
_menuObj.onRelease=function(){//onReleaseを入れ替える。
_menuObj.twn.yoyo(); //逆再生を繰り返す。
}
}
_menuObj.onRelease=function(){ //一番最初だけstart()をコールする。
twn.start();
}
}
}
_x の代わりに、_xscaleや_alphaなど全てのプロパティを指定できるので、フェードインなどの効果もかなり簡単に実現できます。
※02/01追記：こちらでもう少し複雑なデモをやってます。
ここでは、Bounceイージングを利用しました。
デフォルトで６種類のイージングが用意されています（「コンポーネントリファレンスガイド」を参照）。Tweenの利用方法から考えれば十分だとは思いますが、イージングを自作することもできます。
イージングをカスタマイズする
イージングメソッドのルールは以下のとおり。
funtion easing( dt //現在のフレーム
,begin //開始値
,finish //終了値
,duration）//総フレーム数
,begin //開始値
,finish //終了値
,duration）//総フレーム数
このメソッドを 0 <= dt <= duration の間、繰り返しコールするので、
begin = easing[dt=0];
begin+finish = easing[dt=duration];
begin+finish = easing[dt=duration];
の条件を満たすように、メソッドを実装します。例えば、等速のイージング（Noneと同じ）は、次のようになります。
function easeIn (dt, begin, finish, duration){
return begin + dt/duration * finish;
}
return begin + dt/duration * finish;
}
あとは好きに実装すればOK。適当にこんなイージングを作って、
class CustomEasing {
static function easeIn (dt, begin, finish, duration){
return begin+Math.abs(Math.sin(dt/duration*Math.PI*3/2))*finish;
}
}
static function easeIn (dt, begin, finish, duration){
return begin+Math.abs(Math.sin(dt/duration*Math.PI*3/2))*finish;
}
}
Tweenコンポーネントに適用してみると、
twn = new Tween(_menuObj,"_x",CustomEasing.easeIn,
-160,-30,30,false);
-160,-30,30,false);
こんな動きになりました。
同じカテゴリのエントリ
wonderflやっちゃいなよ / 写メ＋Flash / 万華鏡 その２ / 万華鏡作ってみた / できるもん / Flashでプレゼンスライド / 音楽とアクションを同期する / 風流タイポ / スティックメェン！ / 手書きチャット・リプレイ / 手書きチャット / ドッキリドキドキ / マウスホイールでズーム / ○○いまいち / ダッシュボードを作る / 初めてのAS3 / CS3へ / ペジエ＋Tween / WireEngine3D / FlashInterfaceでAS連携 / ExternalInterfaceでJS連携 / Tweenでカスタムeasing / 獅子舞 / タイポグラフィ その２ / X'masツリー / ASで紐 - その２ / 球の衝突でグラスハープ / ActionScriptで紐 / TTSで山形弁講座 / 簡単タイポグラフィ / シシ神さまのあしあと / Flashダンス / 星のピエロ / Flashで振り子 / ばね人形・・・ / Lightbox風スライドショー / おきあがりこぼし / 赤とんぼ / 銀杏 舞い散る / 虫眼鏡 / Flash 線香花火 / Flash ひっかき絵 / あかべこ ふらぁっしゅ / 球体の花火 / ActionScriptで弾力シート / ActionScriptで描画 / 回転するメニュー 改良版 / 回転するメニュー / インスタンス間連携 / onEnterFrameで時間積分 / onEnterFrameと他イベント連携 / MovieClip.onEnterFrame /
コメント
はじめまして。Tweenコンポーネントのサンプルをみると、動ききらないうちにクリックしたときにちゃんと動かなくなりませんか？このサンプルもそうなるようです。ですので、使えませんでした。
konさん、はじめまして。
対処方法はいろいろあるとは思います。例えば、yoyoの直前で、fforwardをして強制的にTweenを完了させてはいかがでしょうか。
サンプルを書き換えるとこんな風です。
_menuObj.onRelease=function(){
_menuObj.twn.fforward();
_menuObj.twn.yoyo();
}
対処方法はいろいろあるとは思います。例えば、yoyoの直前で、fforwardをして強制的にTweenを完了させてはいかがでしょうか。
サンプルを書き換えるとこんな風です。
_menuObj.onRelease=function(){
_menuObj.twn.fforward();
_menuObj.twn.yoyo();
}
調べもしないで批判的なコメントをしました。すみませんでした。
konさん、いえいえ、私も勉強になります。またよろしくお願いします！
コメントしてください
- プロフィール
- お問い合わせ
- RSS/RDF
- PoweredBy
FlashCS3で製作してます。-
この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。