در ضمیمه یک فایل zip قرار دارد که شامل یک مثال و کلاسهای tween می باشد. پس از extract کردن این فایل لازم است که فولدر classes به عنوان یکی از مراجع کلاسها برای فلش تعریف شود برای این کار ابتدا شاخه classes را در جایی بر هارد ذخیره کنید (مثلا c:\flash\classes) سپس از منوی edit گزینه preferences را انتخاب کرده و در قسمت ActionScript روی دکمه ActionScript 2.0 Settings… کلیک کنید. احتمالا دو گزینه . و LocalData)/Classes)$ وجود خواهند داشت که نماینگر جستجو برای کلاسها در در خود شاخه ای که FLA وجود دارد و سپس در شاخه classes در جایی که نرم افزار فلش نصب شده است است. باید گزینه سومی را برای Classpath اضافه کنید که مثلا c:\flash\classes خواهد بود، در این صورت فلش کلاسهای جدید را نیز در موقع compile خواهد شناخت.
شاخه classes شامل یک package به نام es است که package اصلی برنامه های من می باشد (درجه open source بودن خونم زیاد شده!) در es که من اینجا قرار دادم شما تنها package ها و class هایی را می بینید که برای Tween لازم هستند. مثلا UI شامل کلاسهایی برای UserInterface مانند Timer به جای setInterval و package اصلی Tween به نام transitions که کلاس Tween در همین جا قرار دارد. یا مثلا events که شامل کلاسهای پایه برای هسته اصلی event model و برگرفته از DOM Event Model و متناسب با Event Delegation Pattern می باشد و تقریبا بنیان بسیاری از برنامه های دیگر است که در اینجا اصلا مجالی برای صحبت در مورد اون با توجه به گستردگی مبحث Event Delegation نیست. در هر حال چیزی که برای استفاده از کلاس Tween لازم است بسیار ساده تر از اینهاست:
در برنامه های AS2 و یا حتی AS1 و در پروژه های بزرگ همواره بهتر است که از انیمیشن های visual و بر روی timeline در محیط فلش با توجه به عدم دسترسی برنامه نویس به آن و همچنین غیر قابل کنترل بودن آن اجتناب کرد. می توان به راحتی و با ایجاد یک object از نوع Tween کلیه انیمیشن های ساده را با قابلیت کنترل کامل برنامه نویس ایجاد نمود بدون اینکه نیاز به نوشتن کد اضافی برای برنامه نویس و یا نگرانی از انجام چگونگی Tween وجود داشته باشد.
برای استفاده از Tween ابتدا باید کلاسها را در کلاسهای دیگر یا در فریمها یا کلا هر جایی که می خواهیم از آنها استفاده کنیم import کنیم:
کد:
import es.UI.transitions.Tween;
سپس یک object از نوع Tween ایجاد می کنیم و کلیه مشخصات یک Tween را در constructor قرار می دهیم:
کد:
var XTween:Tween = new Tween(mc, "_x", 0, 200, 2, true, 60);
اگر نگاهی به داخل برنامه es.UI.transitions.Tween بیندازید میبینید که Constructor کلاس Tween چندین پارامتر را برای ورودی قبول می کند:
کد:
function Tween (obj:Object, prop:String, begin:Number, finish:Number, duration:Number, useSeconds:Boolean, fps:Number)
obj: آدرس به MovieClip، Button و یا TextField در صفحه
prop: مشخصه ای که می خواهیم Tween بر روی آن انجام شود مثل x_ یا xScale_ یا alpha_ و ...
begin: نقطه ابتدایی مشخصه برای Tween
finish: نقطه انتهایی مشخصه برای Tween
duration: مدت زمانی که Tween به طول خواهد انجامید به ثانیه و یا تعداد فریم
useSeconds: مشخصه Boolean برای مشخص کردن اینکه duration بر حسب ثانیه محاسبه شود یا تعداد فریم. در صورتی که true باشد بر حسب ثالیه محاسبه خواهد شد.
fps: فریم ریت در Tween. لازم به ذکر است که فریم ریت Tween کاملا مستقل از frame rate در timeline می باشد و به صورت مجزا set می شود. در صورتی که این پارامتر وارد نشود frame rate از timeline اقتباس خواهد شد.
بنابراین در مثال قبل XTween متولی ایجاد Tween برای مشخصه x_ از mc که یک MovieClip است و از مقدار 0 تا 200 در طول 2 ثانیه و با انیمیشن 60 فریم در ثانیه می باشد. ایجاد این Object به تنهایی موجب ایجاد Tween نمی شود تا اینکه برنامه نویس متد start از این object را اجرا کند:
در این هنگام Tween از ابتدا (0) تا انتها (200) در مدت 2 ثانیه Tween خواهد شد بدون اینکه نیازی به timeline و یا دستورات احمقانه gotoAndPlay یا gotoAndStop باشد
لازم به ذکر است که در هنگام اجرای انیمیشن به دلخواه می توان متد stop را صدا زد که باعث توقف اجرای انیمیشن می شود:
همونطور که قبلا قول دادم کلاس tween از معادلات ease هم پشتیبانی می کند برای این کار می توان قبل از start کردن Tween باید معادله ease را برای object وارد کرد. در es تعداد 5 عدد style کلی برای ease و در کل 18 عدد ease وجود دارد که می توان از آنها استفاده کرد. لازم است که کلاس easing قبلا import شده باشد:
کد:
import es.UI.transitions.Tween;
import es.UI.transitions.Easing;
var XTween:Tween = new Tween(mc, "_x", 0, 200, 2, true, 60);
XTween.ease = Easing.REGULAR_EASE_OUT;
XTween.start();
باعث Tween با معادله Regular یا چیزی شبیه به easing خود فلش در timeline می شود. معادلات easing قابل استفاده عبارتند از:
کد:
Easing.NONE_EASE_IN
Easing.NONE_EASE_OUT
Easing.NONE_EASE_INOUT
Easing.BACK_EASE_IN
Easing.BACK_EASE_OUT
Easing.BACK_EASE_INOUT
Easing.BOUNCE_EASE_IN
Easing.BOUNCE_EASE_OUT
Easing.BOUNCE_EASE_INOUT
Easing.ELASTIC_EASE_IN
Easing.ELASTIC_EASE_OUT
Easing.ELASTIC_EASE_INOUT
Easing.STRONG_EASE_IN
Easing.STRONG_EASE_OUT
Easing.STRONG_EASE_INOUT
Easing.REGULAR_EASE_IN
Easing.REGULAR_EASE_OUT
Easing.REGULAR_EASE_INOUT
لازم به ذکر است که هر کس در صورتی که مایل باشد می تواند معادله ease برای Tween جداگانه بنویسد. برای این کار باید کلاس نوشته شده از interface Ease مشتق شود و از کلاس EaseManager ارث ببرد
در صورتی که به es\UI\transitions\easing مراجعه شود نمونه های عملی مشخص است. در این صورت باید ease را به صورت دستی برای object ایجاد کرد:
کد:
import es.UI.transitions.Tween;
import es.UI.transitions.easing.Strong;
var XTween:Tween = new Tween(mc, "_x", 0, 200, 2, true, 60);
XTween.ease = new Strong(Tween.EASE_IN);
XTween.start();
(در صورتی که کسی مایل بود اینجا را بیشتر توضیح میدم)
چیزی که هنوز نگفتم Event Model برای Tween هست. کلاس Tween از Event Model تعریف شده در es.events.EventBroadcaster ارث بری دارد و شامل event های زیر می شود:
کد:
onMotionLooped
onMotionFinished
onMotionChanged
onMotionStarted
onMotionStopped
onMotionResumed
سیستم تعریف کردن event برای Tween همان سیستم listener ها است که با آن آشنا هستید بنابراین در یک مثال استفاده از آنرا نشان میدهم:
کد:
import es.UI.transitions.Tween;
import es.UI.transitions.Easing;
var _listener:Object = new Object();
var XTween:Tween = new Tween(mc, "_x", 0, 200, 2, true, 60);
XTween.ease = Easing.REGULAR_EASE_OUT;
XTween.addListener(_listener);
_listener.onMotionStarted = function()
{
trace("Tween started!");
};
_listener.onMotionFinished = function()
{
trace("Tween finished!");
};
XTween.start();
نکته قابل توجه اینکه هر event در هنگام broadcast شدن یک information object از event اجرا شده را ارسال می کند که می توان در handler آن event به آن دسترسی داشت. در کلاس Tween این info object شامل property های زیر می شود:
clip: نمایانگر MovieClip یا کلا شیئ که Tween بر روی آن انجام شده است.
count: شمارنده ای برای نشان دادن شمارش ارسال شدن این event
target: یک reference به Tween object یا object که Tween را اجرا می کند.
type: نمایانگر نوع event ارسال شده
info: اطلاعاتی در مورد event ارسال شده
در مثال قبل:
کد:
_listener.onMotionFinished = function(info)
{
trace("clip: " + info.clip);
trace("target object: " + info.target);
trace("event count: " + info.count);
trace("event type: " + info.type);
trace("info: " + info.info.level + ", " + info.info.code);
};
دیگه واقعا خسته شدم، در مورد خلاصه API کلاس es.UI.transitions.Tween را ببنید اگر چیز خاصی بود جواب میدم فقط 3 مورد زیر:
متد start همانطور که قبلا گفتم برای start کردن یک Tween بکار می رود
متد stop برای stop کردن یک Tween در حال اجرا بکار می رود
متد resume برای resume کردن یک Tween قبلا اجرا شده بکار می رود
و بقیه API...
در فایل ضمیمه یک مثال هم گذاشتم که فکر می کنم جالب باشه
