في بعض الأحيان يكون عندنا في الفلاش أنيميشن frame by frame أو فيديو على الشريط الزمنى (timeline) و
نحتاج أن نتحكم فيه أو نقوم بعكسه من الممكن أن نستخدم ;()prevFrame و ;()nextFrame كأساس في كتابة الكود الخاص بنا لكن لا داعي لذلك لأن هناك أكثر من مكتبة أكشن سكربيت توفر هذا مثل tweener مع كثير من الخيارت
باستخدام tweener نستطيع عمل حركة tween بين إطارات أي شريط زمني
(timeline) و نستطيع التحكم في الوقت
و easing (نوع الحركة) بكل سهولة
(النتيجة النهائية قم بالضغط على الأزرار)
أولاَ قم بتنزيل ملفات الدرس
سنستخدم tweener class بإمكانك تنزيلها من هنا (ملحوظة كل ما تحتاجه موجود في ملفات الدرس)
الآن قم فتح الملف start sample.fla
ستجد في هذا الملف:
* أنيميشن frame by frame على 45 فريم و قمت بوضع ;()stop في أول فريم
* زرين الأول له unfold <-- instance name , و الآخر له fold <-- instance name
الآن نريد أن نقوم بعمل tween إلى الفريم 45 (نهاية الأنيميشن) عند نقر الزر unfold , و tween إلى الفريم 0 (بداية الأنيميشن) عند نقر الزر fold
نحدد أول فريم من اللاير Actions و نضغط F9 لفتح لوحة actions و نضيف الكود التالي
stop();
// التي سنحتاجها classes نقوم باستدعاءالفئات
import caurina.transitions.*;
import caurina.transitions.properties.DisplayShortcuts;
// frames بين tween هذا السطر يتيح لنا عمل
DisplayShortcuts.init();
// إلى نهاية الأنيميشن tween نقوم بعمل unfold عند ضغط الزر
unfold.addEventListener(MouseEvent.CLICK, unfold_it);
function unfold_it(e:MouseEvent):void
{
// Main Timeline هنا للإشارة لـ this استخدمنا
Tweener.addTween(this, {_frame:45, time:1.4, transition:"linear"});
}
// إلى بداية الأنيميشن tween نقوم بعمل fold عند ضغط الزر
fold.addEventListener(MouseEvent.CLICK, fold_it);
function fold_it(e:MouseEvent):void
{
// Main Timeline هنا للإشارة لـ this استخدمنا
Tweener.addTween(this, {_frame:0, time:1.4, transition:"linear"});
}
و الآن يمكنك التجربة
بالنسبة لهذا السطر
Tweener.addTween(this, {_frame:0, time:1.4, transition:"linear"});
يقوم بإضافة tween للخاصية frame_ (لأننا نقوم بعمل tween على frames) في وقت قدره 1.4 ثانية و نوع الحركة linear , بمعنى آخر يقوم بعمل tween من أي فريم رأس التشغيل عنده إلى الفريم 0
و هذا سيعطى مرونة للحركة فمثلا إذا ضغطت الزر unfold ثم ضغطت الزر fold و
الآنيميشن مازال في منتصفه فالحركة ستبدأ من نفس المكان حتى تصل إلى
الفريم 0
و نفس الأمر لهذا السطر
Tweener.addTween(this, {_frame:45, time:1.4, transition:"linear"});
و ستجد كل هذا جاهز في ملف باسم ready sample.fla و لكني قمت بوضع الأنيميشن في موفي كليب له instance name --> anim و فعلت هذا من أجل أن أجعل كل العمل في فريم واحد و كل الذي تغير في الكود هو this تغير إلى anim