إعـــــــلان

تقليص
لا يوجد إعلان حتى الآن.

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

تقليص
هذا الموضوع مغلق.
X
X
 
  • تصفية - فلترة
  • الوقت
  • عرض
إلغاء تحديد الكل
مشاركات جديدة

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







    يحتوي كلاس 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


    الجزء الثاني من الشرح


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





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

    تعليق


    • #3
      جزاك الله خيرا

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

      وشـــــــــــ ــــــــــــــــكرا

      تعليق


      • #4
        جزاك الله خيرا اخانا عزيز على جهودك الطيبة

        تعليق


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


          على الانواع التالية
          [HTML]
          import fl.transitions.*;

          import fl.transitions.easing.*;

          TransitionManager.start(my_mc,{type:Zoom[/HTML]})

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


          Blinds
          Fade
          Fly
          Iris
          Photo
          PixelDissolve
          Rotate
          Squeeze
          Wipe


          الملفات المرفقة

          تعليق


          • #6
            قمت بالتطبيق اخى
            على هذا الكود
            [HTML] 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("انتهى هذا التأثير");
            }[/HTML]

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

            تعليق


            • #7
              بسم الله الرحمن الرحيم

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

              تعليق


              • #8
                المشاركة الأصلية بواسطة azizsoft مشاهدة المشاركة
                بسم الله الرحمن الرحيم

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

                تعليق


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

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

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

                  تعليق


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

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

                    تعليق


                    • #11
                      المشاركة الأصلية بواسطة azizsoft مشاهدة المشاركة
                      بارك الله فيكم استاذ أبو همام
                      اخ فيصل ملف مفتوح في المرفقات يوضح لك كيفية استدعاء موفهات من المكتبة

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

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

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

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

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

                      تعليق


                      • #12
                        بسم الله الرحمن الرحيم

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

                        تعليق


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

                          تعليق


                          • #14
                            بسم الله الرحمن الرحيم

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

                            تعليق


                            • #15
                              شـكــ وبارك الله فيك ـــرا لك

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

                              تعليق

                              مواضيع تهمك

                              تقليص

                              المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 06-08-2025 الساعة 11:33 PM
                              المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 06-04-2025 الساعة 05:29 PM
                              المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 05-31-2025 الساعة 10:07 PM
                              المنتدى: القسم العام نشرت بواسطة: ماريا عبد الله الوقت: 05-30-2025 الساعة 11:48 PM
                              المنتدى: التصنيع والانتاج نشرت بواسطة: HaMooooDi الوقت: 05-30-2025 الساعة 09:36 AM
                              يعمل...
                              X