التأثيرات الانتقالية transitions في فلاش

[azizsoft]

http://img39.imageshack.us/img39/1332/virusx.gif



يحتوي كلاس TransitionManager في مكتبة الاكشن سكريبت على
عدد 10 تأثيرات حركية جاهزة يمكن تطبيقها مباشرة على اي موفي كليب وهاته التاثيرات هي عبارة عن ظهور أو خروج للكائن
in أو out وفي ما يلي اسماء العشر انواع من التاثيرات الحركية


Blinds
Fade
Fly
Iris
Photo
PixelDissolve
Rotate
Squeeze
Wipe
Zoom


ولاحظ ان كل نوع تأثير Type يمكن أن نغير حركته من خلال خصائص معينة وهي

direction اتجاه التاثير
duration: الوقت بالثواني
easing: نوع التسارع


وهاته الخصائص اختيارية يمكن اضافتها على حسب احتياجات التاثير الذي يخصك ونمر الان مباشرة الى الشرح
افتح اخي الكريم مشروع جديد لنتابع معا اضغط Ctrl+R واضف صورة الى مسرح العمل اضغط عليها بيمين الماوس
وحولها الى موفي كليب وفي خانة الانستنس نايم اعطها اسم my_mc

اضف طبقة جديدة خاصة بالاكشن اضغط بيمين الماوس عليها ثم Action أو اضغط F9 سنقوم اولا باستيراد مكتبة الترازيشن لانه بدونها لايمكن استعمال هذا الكلاس لذلك سيكون اول سطر الكود التالي


import fl.transitions.*;
import fl.transitions.easing.*;


طيب الان قمنا باحضار او استدعاء المكتبة ونشير هنا أن الطريقة السريعة والمختصرة لبداية تطبيق اي تاثير من هذ ا الكلاس عن طريق الدالة
start() ولاحظ على سبيل المثال الكود التالي انسخه عوض الاول


import fl.transitions.*;

import fl.transitions.easing.*;

TransitionManager.start(my_mc,{type:Zoom})


جرب المشروع ستلاحظ ان الموفي كيب my_mc يظهرتدريجيا من الخفاء الى البروز يمكن لك الان ان تعوض نوع التاثير Zoom
بأحد التاثيرات التسعة الباقية وتجرب العمل في كل مرة .

طيب هاته التاثيرات هي افتراضية واذا اردنا ان نغير بعض القيم لهذا النوع من التأثير سنضيف طبعا أحد هاته الخصائص:

direction: اتجاه التاثير
duration: الوقت بالثواني
easing: نوع التسارع


سنتحكم فيه بالوقت على سبيل المثال اذن بعد النوع سنضيف وقت له بالثواني ونغيره كيف ما نشاء


import fl.transitions.*;

import fl.transitions.easing.*;

TransitionManager.start(my_mc,{type:Zoom,duration: 6})



لاحظ هنا قمت بتخصيص 6 ثواني لظهور التاثير يعني يظهر ببطىء اكثر ولما تنقص الثواني يسرع الظهور

نشير في هذه الجزئية انه يمكن أن نقوم بتخزين أي تاثير Transition في متغير ونطبقه لاحقا على الموفي كليب المعين بين القوسين
الكود التالي يوضح الامر يمكن ان تجربه مباشرة افسخ السابق وانسخ التالي


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration:2, easing:Strong.easeOut})


سنشرح الان خصائص التحكم في التأثير التي ذكرناها سابقا

1/ Direction هاته الخاصية تحدد اتجاه الموفي كليب وتستقبل فقط قيمتين اما Transition.IN
وتعني الانتقال الى المسرح أو Transition.OUT وتعني الانتقال خارج المسرح حاول هنا في هذا الكود التغيير بين IN وOUT ولاحظ النتيجة


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fade, direction:Transition.IN})


2/ Duration هاته الخاصية تحدد من خلالها وقت الترانزايشن يعني ممكن تغير
في الثواني براحتك على حسب ما يناسب الحركة الي تريدها حاول هنا غير في وقت الدوران ولاحظ


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Rotate, duration:6})


3/ Easing هاته الخاصية تتعلق بنوعية التسارع وهنا ك 5 أنواع وهي :
None
Regular
Strong
Back
Elastic

لتشهاد وتعرف تاثير كل خاصية انسخ الواحد تلو الاخر وعوضها مكان كلمة Elastic في الكود التالي وجرب المشروع كل مرة


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Rotate, easing:Elastic.easeOut})


لاحظ اخي الكريم في الكود أسفله أدرجنا الكود بجميع خصائص تأثير ترانزشن وكل ما عليك فقط أن تغير
في كل مرة القيم وتعاين المشروع لتعرف كل انواعه


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration:3 , easing:Back.easeOut})


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

كلاس TransitionManagerيحتوي عدد 2 احداث Events وهما
allTransitionsInDone
allTransitionsOutDone

الاول يمكن ان ننفذ من خلاله حدث معين في حالة استعمالنا للخاصة Transition.IN
ونفس الشىء بالنسبة للثاني في حالة استعمالنا لخاصية Transition.OUT

الكود التالي يوضح الأمر بعد انتهاء التاثير سنلاحظ في نافذة المخرجات عبارة انتهى هذا التاثير


import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration: 3, easing:Back.easeOut})

myTM.addEventListener("allTransitionsInDone", doneTrans);

function doneTrans(e:Event):void{
trace("انتهى هذا التأثير");
}


ان شاء الله في الجزء الثاني من الموضوع سنشرح كيفية التعامل مع الانواع 10 من الترانزيشن
Blinds
Fade
Fly
Iris
Photo
PixelDissolve
Rotate
Squeeze
Wipe
Zoom


الجزء الثاني من الشرح (http://www.abc4web.net/vb/showthread.php?t=31168)


أرجو أن أكون قد حققت الفائدة


http://up.graaam.com/img/c254fbbb25128f204e18c9c273464a02.png

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

مشكو ر استاذنا
وجارى قراءة الشرح والتطبيق ورفع المشروع لاحقا ان شاء الله

[كاو دهوكي]

جزاك الله خيرا

عندي ملاحظة بسيطة لو كان هناك ملف مفتوحة مرفق مع الشرح ارى فيه الفائدة الكبيرة وتسهل على من يريد ان يتعلم

وشـــــــــــ :abc_152: ــــــــــــــــكرا

[أبو يوسف]

جزاك الله خيرا اخانا عزيز على جهودك الطيبة :abc_152:

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

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


على الانواع التالية

import fl.transitions.*;

import fl.transitions.easing.*;

TransitionManager.start(my_mc,{type:Zoom})

حيث استبدلت Zoom بالتأثيرات الحركية الاخرى وهى


Blinds
Fade
Fly
Iris
Photo
PixelDissolve
Rotate
Squeeze
Wipe

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

قمت بالتطبيق اخى
على هذا الكود
import fl.transitions.*;
import fl.transitions.easing.*;

var myTM:TransitionManager = new TransitionManager(my_mc);
myTM.startTransition({type:Fly, direction:Transition.IN, duration: 3, easing:Back.easeOut})

myTM.addEventListener("allTransitionsInDone", doneTrans);

function doneTrans(e:Event):void{
trace("انتهى هذا التأثير");
}

رفعته بالمرفقات
ولكن لو حبيت الحركة تكون من اليمين فما الاضافة الواجب استخدامها فى الكود؟

[azizsoft]

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

بارك الله فيكم جميعا اسعدني حضوركم الطيب
اخي فيصل في المرفقات ملفك ولاحظ startPoint:1 غير من 1 الى 9
وفي كل مرة جرب المشروع
الظهور من جهة اليمين بالرقم 6 :abc_022:

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

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

بارك الله فيكم جميعا اسعدني حضوركم الطيب
اخي فيصل في المرفقات ملفك ولاحظ startpoint:1 غير من 1 الى 9
وفي كل مرة جرب المشروع
الظهور من جهة اليمين بالرقم 6 :abc_022:

اضافة رائعة
وبكدة فهمtransitions صار فى منتهى البساطة استخدامه
وننتظر التطرق
لاستخدامه اثناء معالجة الاحداث عن طريق أزرار
وأقصد تحديدا
لو عندى
3موفيهات فى المكتبة
واريد استدعاء كل موفى من المكتبة اضيفه على الاستيج
وكل موفى منهم استدعيه بزر مخصص له وحده
واضع فيه التأثير الانتقالى اللى احدده
فكيف سيكون اللكود
هل سنضطر لتعريف كلاسات عن طريق عمل متغير لكل موفى؟

[abohmam]

جزاك الله خيرا أخى الفاضل شريف

ماشاء الله شرح رائع سنتبع معك الجزء الثاني من الشرح

بارك الله فيك يا طيب :abc_028:

[azizsoft]

اضافة رائعة
وبكدة فهمtransitions صار فى منتهى البساطة استخدامه
وننتظر التطرق
لاستخدامه اثناء معالجة الاحداث عن طريق أزرار
وأقصد تحديدا
لو عندى
3موفيهات فى المكتبة
واريد استدعاء كل موفى من المكتبة اضيفه على الاستيج
وكل موفى منهم استدعيه بزر مخصص له وحده
واضع فيه التأثير الانتقالى اللى احدده
فكيف سيكون اللكود
هل سنضطر لتعريف كلاسات عن طريق عمل متغير لكل موفى؟


بارك الله فيكم استاذ أبو همام :abc_022:
اخ فيصل ملف مفتوح في المرفقات يوضح لك كيفية استدعاء موفهات من المكتبة

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

بارك الله فيكم استاذ أبو همام :abc_022:
اخ فيصل ملف مفتوح في المرفقات يوضح لك كيفية استدعاء موفهات من المكتبة

:abc_051:
ولكن شكل الموضوع هيطول معانا كلنا

فأرجو ان تتحمل مزيد من الاستفسارات استاذنا

الان باالنسبة للملف المرفق النهائى
لو افترضنا
أولا
ان بكل موفى صوت

سواءا رميناه على التايم لاين بالسحب من المكتبة
او انشأنا له متغير يستدعيه من خلال اكواد استدعاء الصوت
فكيف نضمن عدم اختلاط الاصوات عند الانتقال من موفى لأخر؟

أؤجل الافتراض الثانى بعد الرد على هذا الاستفسار

[azizsoft]

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

كل موفي هو بحد ذاته كنتاينر يعني تقدر تحط فيه مشاهد وازرار وصوت وفيديو وصفحات اخرى .. الخ ...
ان شاء الله نعمل موضوع على library وكيفية التحكم واستدعاء موفيهات معدة مسبقة

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

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

[azizsoft]

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

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

[المصمم]

شـكــ وبارك الله فيك ـــرا لك

لك مني أجمل تحية .

[فدوىشاطر]

جزاك الله خيرا أخى الفاضل

ماشاء الله

[أبو حنين رضا]

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

[اميجو]

مشكوووووووور