الثلاثاء، 25 أكتوبر، 2011

تطبيق على البعد الثالث cs4+ (parallax effect) z

النتيجة النهائية

صعوبة الدرس : للمبتدئين
الملفات الخاصة بالدرس :    flash.zip
أقل إصدار لبرنامج الفلاش : 10



درس فيديو قمت به منذ كثير من الوقت يشرح بالتفصيل احد التطبيقات على استخدام البعد z من خلال تأثير parallax و هو الخداع البصري الذي تلاحظه عندما تركب سيارة أو قطار مثلاَ بأن الأشياء البعيدة تتحرك أبطئ من القريبة

الجمعة، 7 أكتوبر، 2011

التحكم في سرعة و اتجاه عرض الإطارات لموفي كليب

في بعض الأحيان يكون عندنا في الفلاش أنيميشن 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