الحركة في اكشن سكريبت بواسطة كلاس توين Animation withTween in As3 جزء 1

[azizsoft azizsoft]

بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته



كلاس تونين Tween في لغة أكشن سكريبت 3 يمكننا من انشاء حركات تفاعلية ببساطة تامة من خلال تحديد
نقطة بداية الحركة ونهايتها وسنتعرف في هذا الدرس على كل ما يتعلق بهذا الكلاس وكيفية التعامل مع مختلف
الخصائص والاوامر لانشاء حركات جميلة في عملنا .


أساسيات التعامل مع كلاس توين Tween



كما هو معلوم فان برنامج فلاش يخول لك التحكم في حركة أي عنصر بمسرح العمل من خلال الشريط الزمني
بالتحويل المباشر من خلال خاصية Motion Tween

وكذلك الأمر عن طريق أكشن سكريبت حيث يمكن التحكم في اتجاه الحركة والتكبير
والتصغير والشفافية الى غير ذلك وعند بداية العمل يجب أولا استدعاء هذا الكلاس كما يلي :

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

عند انشاء كلاس توين يجب ربطه بالعنصر أو الكائن المراد التطبيق عليه وتحديد الخصائص أو البرمترات المطلوبة وهي 7
الكود التالي يوضح الأمر

var myTween:Tween = new Tween (object, "property", EasingType, begin, end, duration, useSeconds);

وهذا تعريف للخصائص المذكورة بين القوسين :

1- object : هذا اسم العنصر المراد تطبيق الحركة عليه
2-property : خاصية التأثير المطلوب على العنصر ويجب أن تكون بين ظفرين مثل x و y و Alpha و scaleX و scaleY الخ..
3-EasingType : نوعية الحركة المطلوبة مثل Strong.EaseIn, Elastic.EaseOut
4-Begin : نقطة بداية الحركة وتحدد برقم
5-End : نقطة نهاية الحركة وتحدد برقم
6-duration : مدة زمن التاثير ويجب أن يكون البرمتر الاخير True
7-useSeconds : اجعل هذه القيمة True ليتم احتساب الزمن الذي ادرجته


وكتطبيق على ذلك اذا أردنا مثلا أن نحرك موفي كليب باسم mc1 عبر المحور السيني "x"
من النقطة 40 الى النقطة 400 بالمسرح في حركة مدتها 3 ثواني ندرج الكود التالي :

var myTween:Tween = new Tween(mc1, "x", Strong.easeOut, 40, 400, 3, true);

هذا تطبيق مباشر لهذا الكود


[flash=http://up.harajgulf.com/do.php?downex=695037.swf]WIDTH=550 HEIGHT=400[/flash]

اذا لم يظهر الفلاش في متصفحك اضغط
هنـــــــــــــــــــــــ ـــــــــــــــــــــــــ ا


لتطبيق نفس العمل افتح ملف جديد ارسم مربع على يسار المسرح حوله الى موفي كليب اعطه اسم mc1
في نفس الطبقة اضف زر باسم btn1 ثم اضف طبقة ثانية للاكشن وانسخ الكود التالي واضغط F5 للمعاينة

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

btn1.addEventListener(MouseEvent.CLICK, onClick);
function onClick(event:MouseEvent)
{	 
 var myTween:Tween = new Tween(mc1, "x", Elastic.easeOut, 40, 400, 3, true);
}

يمكن أن تتلاعب بتغيير الخصائص كما تشاء وتغيير القيم مثلا الشفافية والتكبير والتصغير ولاحظ لو أنشأنا
توين جديد لتغيير نسبة شفافية الموفي كليب من 1 الى نصف 0.5 ستتغير نسبة شفافية العنصر
عند النقطة 400 ويصبح الكود كالتالي :

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

btn1.addEventListener(MouseEvent.CLICK, onClick);
function onClick(event:MouseEvent)
{	 
 var myTween:Tween = new Tween(mc1, "x", Elastic.easeOut, 40, 400, 3, true);
var myTween1:Tween = new Tween(mc1,"alpha", Strong.easeOut, 1, 0.5,3 ,true);
}

كلاسات التسارع والتباطىء Easing Class


يمكن التغيير والتحكم في نوعية حركة العنصر بالمسرح من خلال 6 أنواع تابعة لهذا الكلاس والمقصود هنا
الخاصية رقم 3 المذكورة أعلاه وهاته الانواع هي :

1.Regular
2. Bounce
3. Back
4. Elastic
5. Strong
6. None



أنواع حركة التسارع والتباطىء Easing Class



ولتحديد نوعية الحركة Easing Methods للدوال الستة 6 المذكورة يمكن تغيير القيم التي تنحصر في هاته الوظائف الاربعة 4

1.easeIn
2. easeOut
3.easeInOut
4.easeNone

وهذا جدول يوضح جميع الخصائص المذكورة




لمزيد من الفهم هذا تطبيق توضيحي اختر 1 نوعية الحركة 2 نوعية التساريع 3 الخاصية 4 الوقت بالثواني 5 البداية 6 النهاية
ثم اضغط tween
للاعادة اضغط reset وغير القيم ولاحظ الحركات المختلفة .
هنـــــــــــــــــــــــ ـــــــــــــــــــــــــ ــــا


في الجزء الثاني سنشرح أكثر هذا الكلاس وباقي الأوامر .



أستودعكم الله

[أبو يوسف أبو يوسف]

جزاك الله خيرا أخانا عزيز وبارك الله فيك

[رضوان التازي رضوان التازي]

السلام عليكم ورحمة الله وبركاته. كل الشكر و التقدير

[azizsoft azizsoft]

بسم الله الرحمن الرحيم

مرور طيب اخوتي الكرام

[admin admin]

بارك الله فيك أخى عزيز

للأسف شاهدت الأجزاء الأخيرة قبل الجزء الأول

لكن الفائدة قد تمت ولله الحمد

[خادم المسلمين خادم المسلمين]

شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية .