azizsoft
16-01-2017, 01:44 AM
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
كلاس TweenMax يحتوي على عديد الدوال الخاصة بالحركة والتحكم بالحركة من بين أهم هاته الدوال
()staggerTo
()staggerFrom
()staggerFromTo
هاته الدوال الثلاثة تمكنك أخي الكريم من انشاء حركات احترافية والتحكم الكامل فيها والجميل في هاته الدوال أنها تتعامل مع المصفوفة
مذا يعني ذلك ؟ = يعني فقط ضع ازرار أو موفيهات أو نصوص في مصفوفة وطبق عليهم الحركة كلهم نشرح الامر :
1- ()staggerTo
طيب طبق معي أخي الكريم افتح مشروع جديد واحفظ بجانب مجلد com كالعادة
اضف الى المسرح 3 موفي كليب أو أكثر كما تشاء واعطهم اسماء mc1 mc2 mc3 الخ ... واضف زر باسم btn
في طبقة الاكشن سنستدعي طبعا كلاسات GreenSock
import com.greensock.*;
import com.greensock.easing.*;
نقوم بانشاء مصفوفة نخزن فيها الموفي كليبات
var buttons = [mc1, mc2, mc3, mc4, ];
الان سنضيف حدث استماع في حالة الضغط على الزر btn
btn.addEventListener(MouseEvent.CLICK, clickHandler);
ثم الدالة المطلوب تنفيذها
function clickHandler(event: MouseEvent): void {
TweenMax.staggerFrom(buttons, 1, { x: 50, y: 50, alpha: 0.5,rotation: 360,scaleX: 0.5,scaleY: 0.5,ease: Bounce.easeIn},0.5);
}
buttons = اسم كصفوفة الموفي كليبات
1 زمن الحركة بالثانية
x: 50 الاحداثي السيني
y: 50 الاحداثي الصادي
alpha: 0.5 نسبة الشفافية
rotation: 360 الدوران 180 درجة
scaleX: 0.5 تصغير حجم الموفي الى نصفه = افقي
scaleY: 0.5 تصغير حجم الموفي الى نصفه = عمودي
ease: Bounce.easeIn خاصية التسارع
0.5 هو الوقت بالثانية بين حركة كل موفي واخر .
المثال
WIDTH=550 HEIGHT=400
1- ()staggerFrom
سبق أن تطرقنا الى From هي تجعل القيم الحالية هي النهائية سنستعمل نفس الكود أعلاه ونغير فقط الدالة الى FromTo
وسنغير ايضا بعض الخصائص لتغيير شكل الحركة
TweenMax.staggerFrom(buttons, 1, { x: 250, y: 200, alpha: 0 ,rotation: 360,scaleX: 0.5,scaleY: 0.5,ease: Bounce.easeIn},0.5);
المثال
WIDTH=550 HEIGHT=400
()staggerFromTo
هاته الدالة يمكن القول انها تجميع بين الاثنين يعني تخول لك ادراج مجموعتين من الخصائص والقيم نشرح بالكود مثلا
TweenMax.staggerFromTo( اسم المصفوفة , الزمن بالثانية , { مجموعة الخصائص النهائية }, { مجموعة الخصائص الحالية }, الزمن بين كل حركة للموفيهات);
TweenMax.staggerFromTo(buttons, 0.3, {
alpha: 0,
rotation: 180,
scaleX: 3,
scaleY: 3,
alpha: 0,
ease: Bounce.easeIn
}, {
alpha: 1,
rotation: 0,
scaleX: 1,
scaleY: 1,
ease: Bounce.easeOut
}, 0.1);
في المثال التالي اضفت 4 ازرار لمعاينة 4 تاثيرات
WIDTH=600 HEIGHT=400
رابط المعاينة المباشر
https://up.harajgulf.com/do.php?id=1420421
في المرفقات الملفات المفتوحة
:abc_022:
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
كلاس TweenMax يحتوي على عديد الدوال الخاصة بالحركة والتحكم بالحركة من بين أهم هاته الدوال
()staggerTo
()staggerFrom
()staggerFromTo
هاته الدوال الثلاثة تمكنك أخي الكريم من انشاء حركات احترافية والتحكم الكامل فيها والجميل في هاته الدوال أنها تتعامل مع المصفوفة
مذا يعني ذلك ؟ = يعني فقط ضع ازرار أو موفيهات أو نصوص في مصفوفة وطبق عليهم الحركة كلهم نشرح الامر :
1- ()staggerTo
طيب طبق معي أخي الكريم افتح مشروع جديد واحفظ بجانب مجلد com كالعادة
اضف الى المسرح 3 موفي كليب أو أكثر كما تشاء واعطهم اسماء mc1 mc2 mc3 الخ ... واضف زر باسم btn
في طبقة الاكشن سنستدعي طبعا كلاسات GreenSock
import com.greensock.*;
import com.greensock.easing.*;
نقوم بانشاء مصفوفة نخزن فيها الموفي كليبات
var buttons = [mc1, mc2, mc3, mc4, ];
الان سنضيف حدث استماع في حالة الضغط على الزر btn
btn.addEventListener(MouseEvent.CLICK, clickHandler);
ثم الدالة المطلوب تنفيذها
function clickHandler(event: MouseEvent): void {
TweenMax.staggerFrom(buttons, 1, { x: 50, y: 50, alpha: 0.5,rotation: 360,scaleX: 0.5,scaleY: 0.5,ease: Bounce.easeIn},0.5);
}
buttons = اسم كصفوفة الموفي كليبات
1 زمن الحركة بالثانية
x: 50 الاحداثي السيني
y: 50 الاحداثي الصادي
alpha: 0.5 نسبة الشفافية
rotation: 360 الدوران 180 درجة
scaleX: 0.5 تصغير حجم الموفي الى نصفه = افقي
scaleY: 0.5 تصغير حجم الموفي الى نصفه = عمودي
ease: Bounce.easeIn خاصية التسارع
0.5 هو الوقت بالثانية بين حركة كل موفي واخر .
المثال
WIDTH=550 HEIGHT=400
1- ()staggerFrom
سبق أن تطرقنا الى From هي تجعل القيم الحالية هي النهائية سنستعمل نفس الكود أعلاه ونغير فقط الدالة الى FromTo
وسنغير ايضا بعض الخصائص لتغيير شكل الحركة
TweenMax.staggerFrom(buttons, 1, { x: 250, y: 200, alpha: 0 ,rotation: 360,scaleX: 0.5,scaleY: 0.5,ease: Bounce.easeIn},0.5);
المثال
WIDTH=550 HEIGHT=400
()staggerFromTo
هاته الدالة يمكن القول انها تجميع بين الاثنين يعني تخول لك ادراج مجموعتين من الخصائص والقيم نشرح بالكود مثلا
TweenMax.staggerFromTo( اسم المصفوفة , الزمن بالثانية , { مجموعة الخصائص النهائية }, { مجموعة الخصائص الحالية }, الزمن بين كل حركة للموفيهات);
TweenMax.staggerFromTo(buttons, 0.3, {
alpha: 0,
rotation: 180,
scaleX: 3,
scaleY: 3,
alpha: 0,
ease: Bounce.easeIn
}, {
alpha: 1,
rotation: 0,
scaleX: 1,
scaleY: 1,
ease: Bounce.easeOut
}, 0.1);
في المثال التالي اضفت 4 ازرار لمعاينة 4 تاثيرات
WIDTH=600 HEIGHT=400
رابط المعاينة المباشر
https://up.harajgulf.com/do.php?id=1420421
في المرفقات الملفات المفتوحة
:abc_022: